/* Seamless Hero Slider with Ken Burns Effect */

/* Base container for the slider - positioned behind content */
.lux-hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    /* Behind text content (which should be higher z-index) */
    background-color: #000;
    /* Fallback color to prevent white flashes */
}

/* Individual slide styling */
.lux-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1);
    /* Improve performance */
    will-change: transform, opacity;
}

/* 
   Animation Logic:
   Total cycle = 21 seconds (3 slides * 7s each)
   Each slide is visible for ~33.33% of the time.
   Crossfade overlap is handled by the keyframes.
   
   Delays:
   Slide 1: 0s
   Slide 2: 7s
   Slide 3: 14s
*/

.lux-slide.slide-1 {
    background-image: url('../images/hero/slide1.jpg');
    animation: luxKenBurns 21s linear infinite 0s;
    /* Start visible to avoid initial black gap */
    opacity: 1;
}

.lux-slide.slide-2 {
    background-image: url('../images/hero/slide2.jpg');
    /* Slight delay adjustment to ensure seamless overlap */
    animation: luxKenBurns 21s linear infinite 7s;
}

.lux-slide.slide-3 {
    background-image: url('../images/hero/slide3.jpg');
    animation: luxKenBurns 21s linear infinite 14s;
}

/* Keyframes for Fade + Zoom */
@keyframes luxKenBurns {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    1% {
        opacity: 1;
        /* Fade in quickly */
    }

    33.33% {
        opacity: 1;
        transform: scale(1.1);
        /* Zoom in while visible */
    }

    36.33% {
        opacity: 0;
        /* Fade out overlap */
        transform: scale(1.15);
        /* Continue slight zoom during fade out */
    }

    100% {
        opacity: 0;
        transform: scale(1);
        /* Reset for next loop */
    }
}

/* Force Slide 1 to not flicker on load */
.lux-slide.slide-1 {
    animation-name: luxKenBurnsFirstLoad, luxKenBurns;
    animation-delay: 0s, 21s;
    /* Run distinct intro, then loop */
    animation-duration: 21s, 21s;
    animation-iteration-count: 1, infinite;
}

/* Special intro keyframe for Slide 1 to start opacity:1 immediately */
@keyframes luxKenBurnsFirstLoad {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    33.33% {
        opacity: 1;
        transform: scale(1.1);
    }

    36.33% {
        opacity: 0;
        transform: scale(1.15);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* Dark Overlay (restoring the look from original design) */
.lux-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 16, 31, 0.48);
    /* Matches previous multiplication mode somewhat */
    mix-blend-mode: multiply;
    z-index: 1;
}