@charset "UTF-8";
/* CSS Document */
/* Tom Hunter Photography © */

@keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

  .fading-slideshow {
    position: relative;
    width: 100%;
    height: 370px; 
    margin: 0em auto;
    padding: 0;
  
  }
  .fading-slideshow > li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

.fading-slideshow li {
  /* ... your existing styles ... */
  animation-fill-mode: forwards; 
}

  /* current slide */

  .fading-slideshow > li:first-of-type {
    animation-name: fader;
    animation-delay: 3.0s;
    animation-duration: 1.5s;
    z-index: 20;
  }

  /* next slide to display */

  .fading-slideshow > li:nth-of-type(2) {
    z-index: 10;
  }



.fading-slideshow li .overlay {
  opacity: inherit;
}

/* Ensure the li itself doesn't have overflow issues */
.fading-slideshow li {
  overflow: hidden;
}

/* 1. Ensure the overlay is hidden by default on all inactive slides */
.fading-slideshow > li .overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 9999;
    pointer-events: none;
}

/* 2. ONLY show the overlay when its specific slide is actively animating */
/* This matches the animation applied to your <li> tags */
.fading-slideshow > li:nth-child(1) .overlay {
    /* We use a tiny CSS delay so it only fades in AFTER the slide transition is clean */
    animation: fadeInOverlay 1.0s forwards;
    animation-delay: 0.0s; 
}

/* 3. The animation rule that safely brings the overlay into view */
@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}