@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: 0 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;
    }
}