/* ==========================================================
   ELENA ELECTRONICS — HOMEPAGE ANIMATION PHASE 2
   ----------------------------------------------------------
   Desktop only (> 900px)
   Mobile animation tuning intentionally deferred.
   ========================================================== */

:root{
    --home-motion-ease:
        cubic-bezier(.2,.72,.25,1);
    --home-motion-fast:260ms;
    --home-motion-normal:680ms;
    --home-motion-slow:980ms;
}


/* ==========================================================
   HEADER ENTRANCE + MICRO-INTERACTIONS
   ========================================================== */

@media(min-width:901px){

    .home-responsive-header .brand-real-logo,
    .home-responsive-header .nav,
    .home-responsive-header .home-desktop-quote{
        transition:
            opacity .62s var(--home-motion-ease),
            transform .62s var(--home-motion-ease);
    }

    .home-responsive-header:not(.home-header-entered)
    .brand-real-logo{
        opacity:.35;
        transform:translate3d(-18px,0,0);
    }

    .home-responsive-header:not(.home-header-entered)
    .nav{
        opacity:.35;
        transform:translate3d(0,-12px,0);
    }

    .home-responsive-header:not(.home-header-entered)
    .home-desktop-quote{
        opacity:.35;
        transform:
            translate3d(18px,0,0)
            scale(.97);
    }

    .home-responsive-header.home-header-entered
    .brand-real-logo,
    .home-responsive-header.home-header-entered
    .nav,
    .home-responsive-header.home-header-entered
    .home-desktop-quote{
        opacity:1;
        transform:none;
    }

    .home-responsive-header .nav a{
        transition:
            color .22s ease,
            transform .22s var(--home-motion-ease);
    }

    .home-responsive-header .nav a:hover{
        transform:translate3d(0,-2px,0);
    }

    .home-responsive-header
    .home-desktop-quote{
        position:relative;
        overflow:hidden;
        isolation:isolate;
    }

    .home-responsive-header
    .home-desktop-quote::before{
        content:"";
        position:absolute;
        top:-35%;
        bottom:-35%;
        left:-55px;
        width:32px;
        z-index:-1;
        pointer-events:none;
        opacity:0;
        background:
            rgba(255,255,255,.35);
        transform:skewX(-18deg);
        transition:
            left .58s var(--home-motion-ease),
            opacity .18s ease;
    }

    .home-responsive-header
    .home-desktop-quote:hover::before{
        left:calc(100% + 20px);
        opacity:1;
    }

}


/* ==========================================================
   HERO — CLEAN CROSS-FADE
   Replaces the horizontal push/strip transition.
   ========================================================== */

@media(min-width:901px){

    #elenaHero{
        isolation:isolate;
    }

    #elenaHero .track{
        position:relative !important;
        width:100% !important;
        height:100% !important;
        min-height:inherit;
        transform:none !important;
        transition:none !important;
    }

    #elenaHero .slide{
        position:absolute !important;
        inset:0;
        z-index:0;
        width:100% !important;
        height:100%;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:scale(1.012);
        transition:
            opacity .84s ease,
            transform 1.15s var(--home-motion-ease),
            visibility 0s linear .84s;
    }

    #elenaHero .slide[aria-hidden="false"]{
        z-index:2;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:scale(1);
        transition:
            opacity .84s ease,
            transform 1.15s var(--home-motion-ease),
            visibility 0s linear 0s;
    }


    /* Slow cinematic background drift */
    #elenaHero .slide.has-bg[aria-hidden="false"]{
        animation:
            homeHeroBackgroundDrift
            5.2s ease-out both;
    }

    @keyframes homeHeroBackgroundDrift{
        from{
            background-position:
                center center;
        }
        to{
            background-position:
                49.1% 50.6%;
        }
    }


    /* Hero text sequence */
    #elenaHero
    .slide[aria-hidden="false"]
    .copy .eyebrow{
        animation:
            homeHeroEyebrow .55s
            var(--home-motion-ease)
            .12s both;
    }

    #elenaHero
    .slide[aria-hidden="false"]
    .copy .title{
        animation:
            homeHeroTitle .72s
            var(--home-motion-ease)
            .22s both;
    }

    #elenaHero
    .slide[aria-hidden="false"]
    .copy .desc{
        animation:
            homeHeroText .68s
            var(--home-motion-ease)
            .36s both;
    }

    #elenaHero
    .slide[aria-hidden="false"]
    .copy .slide-link{
        animation:
            homeHeroButton .62s
            var(--home-motion-ease)
            .48s both;
    }

    @keyframes homeHeroEyebrow{
        from{
            opacity:0;
            transform:
                translate3d(-20px,0,0);
            letter-spacing:.24em;
        }
        to{
            opacity:1;
            transform:none;
        }
    }

    @keyframes homeHeroTitle{
        from{
            opacity:0;
            transform:
                translate3d(0,32px,0);
            filter:blur(4px);
        }
        to{
            opacity:1;
            transform:none;
            filter:blur(0);
        }
    }

    @keyframes homeHeroText{
        from{
            opacity:0;
            transform:
                translate3d(0,20px,0);
        }
        to{
            opacity:1;
            transform:none;
        }
    }

    @keyframes homeHeroButton{
        from{
            opacity:0;
            transform:
                translate3d(0,16px,0)
                scale(.96);
        }
        to{
            opacity:1;
            transform:none;
        }
    }


    /* Intro cards stagger */
    #elenaHero
    .slide[aria-hidden="false"]
    .intro-item{
        animation:
            homeHeroProductIn .62s
            var(--home-motion-ease)
            both;
    }

    #elenaHero
    .slide[aria-hidden="false"]
    .intro-item:nth-child(1){
        animation-delay:.30s;
    }

    #elenaHero
    .slide[aria-hidden="false"]
    .intro-item:nth-child(2){
        animation-delay:.38s;
    }

    #elenaHero
    .slide[aria-hidden="false"]
    .intro-item:nth-child(3){
        animation-delay:.46s;
    }

    #elenaHero
    .slide[aria-hidden="false"]
    .intro-item:nth-child(4){
        animation-delay:.54s;
    }


    /* Product images stagger on every category slide */
    #elenaHero
    .slide[aria-hidden="false"]
    .product{
        animation:
            homeHeroProductIn .64s
            var(--home-motion-ease)
            both;
    }

    #elenaHero .slide[aria-hidden="false"] .product:nth-child(1){animation-delay:.28s;}
    #elenaHero .slide[aria-hidden="false"] .product:nth-child(2){animation-delay:.34s;}
    #elenaHero .slide[aria-hidden="false"] .product:nth-child(3){animation-delay:.40s;}
    #elenaHero .slide[aria-hidden="false"] .product:nth-child(4){animation-delay:.46s;}
    #elenaHero .slide[aria-hidden="false"] .product:nth-child(5){animation-delay:.52s;}
    #elenaHero .slide[aria-hidden="false"] .product:nth-child(6){animation-delay:.58s;}
    #elenaHero .slide[aria-hidden="false"] .product:nth-child(7){animation-delay:.64s;}
    #elenaHero .slide[aria-hidden="false"] .product:nth-child(8){animation-delay:.70s;}

    @keyframes homeHeroProductIn{
        from{
            opacity:0;
            transform:
                translate3d(24px,18px,0)
                scale(.90);
            filter:blur(3px);
        }
        to{
            opacity:1;
            transform:none;
            filter:blur(0);
        }
    }


    /* Product hover depth */
    #elenaHero .product img{
        transition:
            transform .38s
            var(--home-motion-ease),
            filter .38s ease;
    }

    #elenaHero .product:hover img{
        transform:
            translate3d(0,-5px,0)
            scale(1.11);
        filter:
            drop-shadow(
                0 12px 18px
                rgba(0,0,0,.20)
            );
    }


    /* Arrow / dot interaction */
    #elenaHero .arrow{
        transition:
            transform .22s var(--home-motion-ease),
            background-color .22s ease,
            border-color .22s ease;
    }

    #elenaHero .arrow:hover{
        transform:scale(1.08);
    }

    #elenaHero .dot{
        transition:
            width .25s var(--home-motion-ease),
            transform .2s ease,
            opacity .2s ease;
    }

    #elenaHero .dot:hover{
        transform:scale(1.18);
    }

}


/* ==========================================================
   SAFE SCROLL REVEALS
   Content remains partially visible even before reveal.
   ========================================================== */

@media(min-width:901px){

    [data-home-reveal].home-reveal-ready{
        opacity:.20;
        transition:
            opacity var(--home-motion-normal)
                var(--home-motion-ease)
                var(--home-reveal-delay,0ms),
            transform var(--home-motion-normal)
                var(--home-motion-ease)
                var(--home-reveal-delay,0ms),
            clip-path var(--home-motion-slow)
                var(--home-motion-ease)
                var(--home-reveal-delay,0ms),
            filter var(--home-motion-normal)
                var(--home-motion-ease)
                var(--home-reveal-delay,0ms);
    }

    [data-home-reveal="fade-up"].home-reveal-ready{
        transform:translate3d(0,30px,0);
    }

    [data-home-reveal="fade-left"].home-reveal-ready{
        transform:translate3d(35px,0,0);
    }

    [data-home-reveal="fade-right"].home-reveal-ready{
        transform:translate3d(-35px,0,0);
    }

    [data-home-reveal="card-up"].home-reveal-ready{
        transform:
            translate3d(0,34px,0)
            scale(.98);
    }

    [data-home-reveal="soft-zoom"].home-reveal-ready{
        transform:
            translate3d(0,14px,0)
            scale(.975);
    }

    [data-home-reveal="mask-left"].home-reveal-ready{
        opacity:.35;
        transform:
            translate3d(-18px,0,0);
        clip-path:
            inset(0 55% 0 0);
    }

    [data-home-reveal].home-reveal-ready.home-reveal-in{
        opacity:1;
        transform:none;
        clip-path:inset(0 0 0 0);
        filter:none;
    }

}


/* ==========================================================
   ABOUT
   ========================================================== */

@media(min-width:901px){

    .elena-about-image{
        transition:
            transform .75s var(--home-motion-ease),
            filter .5s ease;
    }

    .elena-about-visual:hover
    .elena-about-image{
        transform:scale(1.045);
    }

    .elena-about-badge{
        animation:
            homeBadgeFloat
            4.8s ease-in-out
            infinite;
    }

    @keyframes homeBadgeFloat{
        0%,100%{
            transform:translate3d(0,0,0);
        }
        50%{
            transform:translate3d(0,-5px,0);
        }
    }

    .elena-about-point{
        transition:
            transform .24s var(--home-motion-ease),
            color .2s ease;
    }

    .elena-about-point:hover{
        transform:
            translate3d(5px,0,0);
    }

    .elena-about-check{
        transition:
            transform .25s var(--home-motion-ease);
    }

    .elena-about-point:hover
    .elena-about-check{
        transform:
            rotate(-7deg)
            scale(1.12);
    }

}


/* ==========================================================
   FEATURED PRODUCTS
   ========================================================== */

@media(min-width:901px){

    .elena-featured-viewport{
        scroll-behavior:smooth;
    }

    .elena-featured-card{
        transition:
            transform .34s var(--home-motion-ease),
            box-shadow .34s var(--home-motion-ease),
            border-color .34s ease;
    }

    .elena-featured-card:hover{
        transform:
            translate3d(0,-8px,0);
    }

    .elena-featured-track.is-featured-moving
    .elena-featured-card{
        transform:
            translate3d(0,-2px,0);
    }

    .elena-featured-image{
        transition:
            transform .52s var(--home-motion-ease);
    }

    .elena-featured-card:hover
    .elena-featured-image{
        transform:
            scale(1.09)
            translate3d(0,-3px,0);
    }

    .elena-featured-details span,
    .elena-featured-all span{
        display:inline-block;
        transition:
            transform .22s var(--home-motion-ease);
    }

    .elena-featured-details:hover span,
    .elena-featured-all:hover span{
        transform:translateX(5px);
    }

    .elena-featured-arrow{
        transition:
            transform .22s var(--home-motion-ease),
            box-shadow .22s ease;
    }

    .elena-featured-arrow:hover{
        transform:
            translate3d(0,-2px,0)
            scale(1.05);
    }

}


/* ==========================================================
   INDUSTRIES
   ========================================================== */

@media(min-width:901px){

    .elena-industry-card{
        transition:
            transform .34s var(--home-motion-ease),
            box-shadow .34s var(--home-motion-ease),
            border-color .34s ease;
    }

    .elena-industry-card:hover{
        transform:
            translate3d(0,-8px,0);
    }

    .elena-industry-icon{
        transition:
            transform .38s var(--home-motion-ease);
    }

    .elena-industry-card:hover
    .elena-industry-icon{
        transform:
            translate3d(0,-4px,0)
            rotate(-3deg)
            scale(1.07);
    }

    .elena-industry-number{
        transition:
            transform .35s var(--home-motion-ease),
            opacity .35s ease;
    }

    .elena-industry-card:hover
    .elena-industry-number{
        transform:
            translate3d(4px,-3px,0);
    }

}


/* ==========================================================
   WHY CHOOSE ELENA
   ========================================================== */

@media(min-width:901px){

    .elena-why-item{
        transition:
            transform .30s var(--home-motion-ease),
            background-color .30s ease;
    }

    .elena-why-item:hover{
        transform:
            translate3d(7px,0,0);
    }

    .elena-why-number{
        transition:
            transform .28s var(--home-motion-ease);
    }

    .elena-why-item:hover
    .elena-why-number{
        transform:scale(1.08);
    }

    .elena-why-button span{
        display:inline-block;
        transition:
            transform .22s var(--home-motion-ease);
    }

    .elena-why-button:hover span{
        transform:translateX(5px);
    }

}


/* ==========================================================
   PARTNERS
   Preserve continuous marquee. No hover pause.
   ========================================================== */

@media(min-width:901px){

    .elena-partner-logo{
        transition:
            transform .28s var(--home-motion-ease),
            box-shadow .28s ease;
    }

    .elena-partner-logo:hover{
        transform:
            translate3d(0,-4px,0)
            scale(1.025);
    }

    .elena-partner-logo img{
        transition:
            transform .32s var(--home-motion-ease);
    }

    .elena-partner-logo:hover img{
        transform:scale(1.045);
    }

}


/* ==========================================================
   TESTIMONIALS
   Cleaner active-slide motion; avoids heavy dimming.
   ========================================================== */

@media(min-width:901px){

    .elena-testimonials-track{
        transition:
            transform .86s
            var(--home-motion-ease) !important;
    }

    .elena-testimonial-slide{
        opacity:.88 !important;
        transition:
            opacity .45s ease;
    }

    .elena-testimonial-slide.is-active{
        opacity:1 !important;
    }

    .elena-testimonial-slide.is-active
    .elena-testimonial-card{
        animation:
            homeTestimonialIn
            .72s var(--home-motion-ease)
            both;
    }

    @keyframes homeTestimonialIn{
        from{
            opacity:.45;
            transform:
                translate3d(18px,8px,0)
                scale(.985);
        }
        to{
            opacity:1;
            transform:none;
        }
    }

    .elena-testimonial-avatar{
        transition:
            transform .3s var(--home-motion-ease);
    }

    .elena-testimonial-card:hover
    .elena-testimonial-avatar{
        transform:
            rotate(-4deg)
            scale(1.06);
    }

    .elena-testimonial-arrow{
        transition:
            transform .22s var(--home-motion-ease);
    }

    .elena-testimonial-arrow:hover{
        transform:scale(1.07);
    }

}


/* ==========================================================
   FINAL CTA — GRADIENT DEPTH + LIGHT SWEEP
   ========================================================== */

@media(min-width:901px){

    .elena-final-cta{
        position:relative;
        overflow:hidden;
        isolation:isolate;
        background-size:180% 180% !important;
        animation:
            homeCtaGradient
            10s ease-in-out
            infinite alternate;
    }

    .elena-final-cta::after{
        content:"";
        position:absolute;
        top:-75%;
        left:-18%;
        width:36%;
        height:260%;
        z-index:-1;
        pointer-events:none;
        opacity:.18;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.58),
                transparent
            );
        transform:
            rotate(14deg)
            translateX(-165%);
        animation:
            homeCtaSweep
            8.5s ease-in-out
            infinite;
    }

    @keyframes homeCtaGradient{
        from{
            background-position:0% 50%;
        }
        to{
            background-position:100% 50%;
        }
    }

    @keyframes homeCtaSweep{
        0%,60%{
            transform:
                rotate(14deg)
                translateX(-165%);
        }
        82%,100%{
            transform:
                rotate(14deg)
                translateX(430%);
        }
    }

    .elena-final-cta-primary span{
        display:inline-block;
        transition:
            transform .22s var(--home-motion-ease);
    }

    .elena-final-cta-primary:hover span{
        transform:translateX(5px);
    }

    .elena-final-cta-primary,
    .elena-final-cta-secondary{
        transition:
            transform .24s var(--home-motion-ease),
            box-shadow .24s ease,
            background-color .24s ease;
    }

    .elena-final-cta-primary:hover,
    .elena-final-cta-secondary:hover{
        transform:
            translate3d(0,-3px,0);
    }

}


/* ==========================================================
   FOOTER
   ========================================================== */

@media(min-width:901px){

    .elena-dark-footer-column a,
    .elena-dark-footer-enquiry,
    .elena-dark-footer-contact-link{
        transition:
            color .22s ease,
            transform .22s var(--home-motion-ease);
    }

    .elena-dark-footer-column a:hover,
    .elena-dark-footer-enquiry:hover,
    .elena-dark-footer-contact-link:hover{
        transform:
            translate3d(4px,0,0);
    }

    .elena-back-to-top{
        transition:
            transform .25s var(--home-motion-ease),
            box-shadow .25s ease,
            opacity .25s ease;
    }

    .elena-back-to-top:hover{
        transform:
            translate3d(0,-4px,0)
            scale(1.04);
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

    #elenaHero .slide,
    #elenaHero .slide *,
    [data-home-reveal],
    .elena-final-cta,
    .elena-final-cta::after,
    .elena-about-badge{
        animation:none !important;
        transition:none !important;
        transform:none !important;
        opacity:1 !important;
        clip-path:none !important;
        filter:none !important;
    }

}


/* ==========================================================
   MOBILE HOMEPAGE ANIMATION — PHASE 1B
   ----------------------------------------------------------
   Lightweight phone-safe motion.
   Content always remains visible and readable.
   Desktop rules above are unchanged.
   ========================================================== */

@media(max-width:900px) and (prefers-reduced-motion:no-preference){

    /* Header entrance */
    .home-responsive-header .brand-real-logo{
        animation:
            homeMobileHeaderLeft
            .48s var(--home-motion-ease) both;
    }

    .home-responsive-header .home-mobile-toggle{
        animation:
            homeMobileHeaderRight
            .48s var(--home-motion-ease) .08s both;
    }

    @keyframes homeMobileHeaderLeft{
        from{
            opacity:.55;
            transform:translate3d(-14px,0,0);
        }
        to{
            opacity:1;
            transform:none;
        }
    }

    @keyframes homeMobileHeaderRight{
        from{
            opacity:.55;
            transform:translate3d(14px,0,0) scale(.96);
        }
        to{
            opacity:1;
            transform:none;
        }
    }


    /* ------------------------------------------------------
       HERO — inner content only
       Keep the existing mobile slider mechanism intact.
       ------------------------------------------------------ */

    #elenaHero
    .slide[aria-hidden="false"]
    .copy .eyebrow{
        animation:
            homeMobileHeroIn
            .44s var(--home-motion-ease) .06s both;
    }

    #elenaHero
    .slide[aria-hidden="false"]
    .copy .title{
        animation:
            homeMobileHeroIn
            .54s var(--home-motion-ease) .14s both;
    }

    #elenaHero
    .slide[aria-hidden="false"]
    .copy .desc{
        animation:
            homeMobileHeroIn
            .50s var(--home-motion-ease) .22s both;
    }

    #elenaHero
    .slide[aria-hidden="false"]
    .copy .slide-link{
        animation:
            homeMobileHeroButton
            .48s var(--home-motion-ease) .30s both;
    }

    #elenaHero
    .slide[aria-hidden="false"]
    .intro-item,
    #elenaHero
    .slide[aria-hidden="false"]
    .product{
        animation:
            homeMobileHeroProduct
            .46s var(--home-motion-ease) both;
    }

    #elenaHero .slide[aria-hidden="false"] .intro-item:nth-child(1),
    #elenaHero .slide[aria-hidden="false"] .product:nth-child(1){
        animation-delay:.18s;
    }

    #elenaHero .slide[aria-hidden="false"] .intro-item:nth-child(2),
    #elenaHero .slide[aria-hidden="false"] .product:nth-child(2){
        animation-delay:.23s;
    }

    #elenaHero .slide[aria-hidden="false"] .intro-item:nth-child(3),
    #elenaHero .slide[aria-hidden="false"] .product:nth-child(3){
        animation-delay:.28s;
    }

    #elenaHero .slide[aria-hidden="false"] .intro-item:nth-child(4),
    #elenaHero .slide[aria-hidden="false"] .product:nth-child(4){
        animation-delay:.33s;
    }

    #elenaHero .slide[aria-hidden="false"] .product:nth-child(5){
        animation-delay:.38s;
    }

    #elenaHero .slide[aria-hidden="false"] .product:nth-child(6){
        animation-delay:.43s;
    }

    @keyframes homeMobileHeroIn{
        from{
            opacity:.48;
            transform:translate3d(0,16px,0);
        }
        to{
            opacity:1;
            transform:none;
        }
    }

    @keyframes homeMobileHeroButton{
        from{
            opacity:.55;
            transform:
                translate3d(0,10px,0)
                scale(.97);
        }
        to{
            opacity:1;
            transform:none;
        }
    }

    @keyframes homeMobileHeroProduct{
        from{
            opacity:.50;
            transform:
                translate3d(0,12px,0)
                scale(.96);
        }
        to{
            opacity:1;
            transform:none;
        }
    }


    /* ------------------------------------------------------
       SCROLL REVEALS
       No clip-path, blur, or fully hidden content.
       ------------------------------------------------------ */

    [data-home-reveal].home-reveal-ready{
        opacity:.58;
        visibility:visible !important;
        clip-path:none !important;
        filter:none !important;
        will-change:transform,opacity;
        transition:
            opacity 500ms
                var(--home-motion-ease)
                var(--home-reveal-delay,0ms),
            transform 500ms
                var(--home-motion-ease)
                var(--home-reveal-delay,0ms) !important;
    }

    [data-home-reveal="fade-up"].home-reveal-ready,
    [data-home-reveal="card-up"].home-reveal-ready{
        transform:translate3d(0,18px,0) scale(.99);
    }

    [data-home-reveal="fade-left"].home-reveal-ready{
        transform:translate3d(14px,0,0);
    }

    [data-home-reveal="fade-right"].home-reveal-ready{
        transform:translate3d(-14px,0,0);
    }

    [data-home-reveal="soft-zoom"].home-reveal-ready{
        transform:
            translate3d(0,10px,0)
            scale(.985);
    }

    [data-home-reveal="mask-left"].home-reveal-ready{
        transform:
            translate3d(-14px,0,0)
            scale(.995);
    }

    [data-home-reveal].home-reveal-ready.home-reveal-in{
        opacity:1 !important;
        visibility:visible !important;
        transform:
            translate3d(0,0,0)
            scale(1) !important;
        clip-path:none !important;
        filter:none !important;
    }


    /* Mobile micro-interactions */
    .elena-featured-card,
    .elena-industry-card,
    .elena-why-item,
    .elena-partner-logo{
        transition:
            transform .24s var(--home-motion-ease),
            box-shadow .24s ease;
    }

    .elena-featured-card:active,
    .elena-industry-card:active,
    .elena-partner-logo:active{
        transform:scale(.985);
    }


    /* CTA keeps only a very gentle background movement. */
    .elena-final-cta{
        background-size:160% 160% !important;
        animation:
            homeMobileCtaGradient
            12s ease-in-out
            infinite alternate;
    }

    @keyframes homeMobileCtaGradient{
        from{
            background-position:0% 50%;
        }
        to{
            background-position:100% 50%;
        }
    }

}


/* Mobile reduced-motion safety */

@media(max-width:900px) and (prefers-reduced-motion:reduce){

    [data-home-reveal],
    #elenaHero .slide *,
    .home-responsive-header *,
    .elena-final-cta{
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        clip-path:none !important;
        filter:none !important;
        animation:none !important;
        transition:none !important;
    }

}


/* ==========================================================
   HERO TRANSITION STRIP FIX — 2026-08-17
   ----------------------------------------------------------
   Prevent outgoing/incoming full-screen slides from overlapping.
   The outgoing slide is removed immediately; the incoming slide
   performs the soft fade + its existing staged content animation.
   ========================================================== */

@media(min-width:901px){

    #elenaHero{
        background:#071a2d;
    }

    #elenaHero .track{
        transform:none !important;
        transition:none !important;
        overflow:hidden !important;
    }

    /*
     * Non-current slides are fully removed from painting.
     * This eliminates the old vertical strip/slice artifact.
     */
    #elenaHero .slide[aria-hidden="true"]{
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;
        transform:none !important;
        transition:none !important;
        animation:none !important;
    }

    /*
     * Only the active slide is painted.
     */
    #elenaHero .slide[aria-hidden="false"]{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:auto !important;
        transform:none !important;
        animation:
            elenaHeroCleanFadeIn
            .62s ease both !important;
    }

    @keyframes elenaHeroCleanFadeIn{
        from{
            opacity:.38;
            filter:brightness(.94);
        }
        to{
            opacity:1;
            filter:brightness(1);
        }
    }

    /*
     * Keep all existing inner text/product entrance animations.
     */
    #elenaHero
    .slide[aria-hidden="false"]
    .slide-content{
        position:relative;
        z-index:2;
    }

}


/* Reduced motion: switch slides instantly. */

@media(prefers-reduced-motion:reduce){

    #elenaHero .slide[aria-hidden="false"]{
        animation:none !important;
        opacity:1 !important;
        filter:none !important;
    }

}