/* ==========================================================
   ELENA ELECTRONICS — GLOBAL DESKTOP ANIMATION SYSTEM
   Phase 1
   ----------------------------------------------------------
   • Shared public pages only
   • Desktop/tablet > 900px
   • Mobile tuning intentionally deferred
   • Reduced-motion safe
   ========================================================== */


/* ==========================================================
   GLOBAL MOTION VARIABLES
   ========================================================== */

:root{
    --elena-motion-fast:220ms;
    --elena-motion-normal:620ms;
    --elena-motion-slow:900ms;
    --elena-motion-ease:
        cubic-bezier(.2,.72,.25,1);
}


/* ==========================================================
   REVEAL ENGINE
   ========================================================== */

@media(min-width:901px){

    html.elena-motion-enabled
    [data-elena-animate].elena-animate-ready{
        /*
         * IMPORTANT:
         * Real website content is always visible.
         * IntersectionObserver controls motion only — never visibility.
         */
        opacity:1;
        will-change:transform;
        transition:
            transform var(--elena-motion-normal)
                var(--elena-motion-ease)
                var(--elena-delay,0ms),
            filter var(--elena-motion-normal)
                var(--elena-motion-ease)
                var(--elena-delay,0ms);
    }


    /* Fade Up */

    html.elena-motion-enabled
    [data-elena-animate="fade-up"]
    {
        transform:translate3d(0,28px,0);
    }


    /* Fade Down */

    html.elena-motion-enabled
    [data-elena-animate="fade-down"]
    {
        transform:translate3d(0,-18px,0);
    }


    /* Fade Left / Right */

    html.elena-motion-enabled
    [data-elena-animate="fade-left"]
    {
        transform:translate3d(34px,0,0);
    }

    html.elena-motion-enabled
    [data-elena-animate="fade-right"]
    {
        transform:translate3d(-34px,0,0);
    }


    /* Zoom */

    html.elena-motion-enabled
    [data-elena-animate="zoom"]
    {
        transform:
            translate3d(0,12px,0)
            scale(.965);
    }


    /* Card rise */

    html.elena-motion-enabled
    [data-elena-animate="card-up"]
    {
        transform:
            translate3d(0,34px,0)
            scale(.985);
    }


    /* Logo pop */

    html.elena-motion-enabled
    [data-elena-animate="logo-pop"]
    {
        transform:
            translate3d(0,18px,0)
            scale(.91);
    }


    /* Reveal masks */

    html.elena-motion-enabled
    [data-elena-animate="reveal-left"]
    {
        transform:
            translate3d(-26px,0,0)
            scale(.99);
        filter:blur(1.5px);
    }

    html.elena-motion-enabled
    [data-elena-animate="reveal-up"]
    {
        transform:
            translate3d(0,24px,0)
            scale(.992);
        filter:blur(1.2px);
    }


    /* Final revealed state */

    html.elena-motion-enabled
    [data-elena-animate].elena-animate-in{
        opacity:1;
        transform:
            translate3d(0,0,0)
            scale(1);
        filter:none;
    }

}


/* ==========================================================
   SECTION HEADING MICRO-MOTION
   ========================================================== */

@media(min-width:901px){

    .elena-about-section-kicker::before,
    .elena-products-heading > span::before,
    .epd-section-heading span::before,
    .epd-similar-heading > div > span::before,
    .elena-customers-heading > span::before,
    .elena-careers-section-heading > span::before,
    .elena-contact-section-heading > span::before{
        transform-origin:left center;
        transition:
            transform .65s
            var(--elena-motion-ease);
    }

    .elena-animate-ready:not(.elena-animate-in)
    .elena-about-section-kicker::before,
    .elena-animate-ready:not(.elena-animate-in)
    .elena-products-heading > span::before,
    .elena-animate-ready:not(.elena-animate-in)
    .epd-section-heading span::before{
        transform:scaleX(.15);
    }

}


/* ==========================================================
   HERO BACKGROUND DEPTH
   ========================================================== */

@media(min-width:901px){

    .elena-products-hero-bg,
    .elena-about-hero-bg,
    .elena-customers-hero-bg{
        animation:
            elenaBackgroundDrift
            18s ease-in-out
            infinite alternate;
        transform-origin:center;
    }

    @keyframes elenaBackgroundDrift{
        from{
            transform:scale(1.015);
        }
        to{
            transform:
                scale(1.055)
                translate3d(-.45%,.3%,0);
        }
    }

}


/* ==========================================================
   PRODUCT / CONTENT CARD INTERACTIONS
   ========================================================== */

@media(min-width:901px){

    .elena-product-card,
    .epd-similar-card,
    .elena-careers-area-card,
    .elena-customer-logo{
        transition:
            transform .32s
                var(--elena-motion-ease),
            box-shadow .32s
                var(--elena-motion-ease),
            border-color .32s
                var(--elena-motion-ease);
    }

    .elena-product-card:hover,
    .epd-similar-card:hover,
    .elena-careers-area-card:hover{
        transform:
            translate3d(0,-7px,0);
    }

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


    /* Product image depth */

    .elena-product-image-area img,
    .epd-similar-image img{
        transition:
            transform .55s
            var(--elena-motion-ease);
    }

    .elena-product-card:hover
    .elena-product-image-area img{
        transform:scale(1.095);
    }

    .epd-similar-card:hover
    .epd-similar-image img{
        transform:scale(1.085);
    }

}


/* ==========================================================
   BUTTON / LINK MICRO-INTERACTIONS
   ========================================================== */

@media(min-width:901px){

    .elena-products-cta-button,
    .epd-primary-action,
    .epd-secondary-action,
    .epd-cta > a,
    .epd-view-category,
    .elena-about-primary-button,
    .elena-careers-hero-primary,
    .elena-careers-hero-secondary,
    .elena-careers-apply-button,
    .elena-contact-hero-primary,
    .elena-contact-hero-secondary,
    .elena-contact-submit,
    .elena-dark-footer-enquiry{
        position:relative;
        overflow:hidden;
        isolation:isolate;
    }

    .elena-products-cta-button::after,
    .epd-primary-action::after,
    .epd-secondary-action::after,
    .epd-cta > a::after,
    .elena-about-primary-button::after,
    .elena-careers-hero-primary::after,
    .elena-contact-hero-primary::after,
    .elena-contact-submit::after{
        content:"";
        position:absolute;
        top:-35%;
        bottom:-35%;
        left:-55px;
        width:34px;
        z-index:-1;
        pointer-events:none;
        opacity:0;
        background:
            rgba(255,255,255,.34);
        transform:
            skewX(-18deg);
        transition:
            left .62s
                var(--elena-motion-ease),
            opacity .18s ease;
    }

    .elena-products-cta-button:hover::after,
    .epd-primary-action:hover::after,
    .epd-secondary-action:hover::after,
    .epd-cta > a:hover::after,
    .elena-about-primary-button:hover::after,
    .elena-careers-hero-primary:hover::after,
    .elena-contact-hero-primary:hover::after,
    .elena-contact-submit:hover::after{
        left:calc(100% + 20px);
        opacity:1;
    }


    /* Arrow travel */

    .elena-product-details i,
    .epd-similar-link i,
    .epd-primary-action i,
    .epd-cta > a i,
    .epd-view-category i,
    .elena-products-cta-button i{
        transition:
            transform .24s
            var(--elena-motion-ease);
    }

    .elena-product-details:hover i,
    .epd-similar-link:hover i,
    .epd-primary-action:hover i,
    .epd-cta > a:hover i,
    .epd-view-category:hover i,
    .elena-products-cta-button:hover i{
        transform:translateX(5px);
    }

}


/* ==========================================================
   CTA BACKGROUND LIGHT MOTION
   ========================================================== */

@media(min-width:901px){

    .elena-products-cta,
    .epd-cta,
    .elena-about-cta,
    .elena-customers-final-cta,
    .elena-careers-final,
    .elena-contact-final{
        position:relative;
        overflow:hidden;
        isolation:isolate;
    }

    .elena-products-cta::before,
    .epd-cta::before,
    .elena-about-cta::before,
    .elena-customers-final-cta::before,
    .elena-careers-final::before,
    .elena-contact-final::before{
        content:"";
        position:absolute;
        top:-70%;
        left:-18%;
        width:45%;
        height:240%;
        z-index:-1;
        pointer-events:none;
        opacity:.20;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.48),
                transparent
            );
        transform:
            rotate(14deg)
            translateX(-140%);
        animation:
            elenaCtaSweep
            8.5s ease-in-out
            infinite;
    }

    @keyframes elenaCtaSweep{
        0%,
        58%{
            transform:
                rotate(14deg)
                translateX(-150%);
        }

        80%,
        100%{
            transform:
                rotate(14deg)
                translateX(420%);
        }
    }

}


/* ==========================================================
   PRODUCT DETAILS GALLERY
   ========================================================== */

@media(min-width:901px){

    .epd-gallery-stage{
        transition:
            box-shadow .32s
                var(--elena-motion-ease),
            border-color .32s
                var(--elena-motion-ease);
    }

    .epd-gallery:hover
    .epd-gallery-stage{
        border-color:
            rgba(15,155,114,.27);
        box-shadow:
            0 19px 44px
            rgba(7,26,45,.10);
    }

    .epd-gallery-thumb{
        transition:
            transform .25s
                var(--elena-motion-ease),
            border-color .25s ease,
            box-shadow .25s ease;
    }

    .epd-gallery-thumb:hover{
        transform:
            translate3d(0,-4px,0)
            scale(1.025);
    }

}


/* ==========================================================
   SPECIFICATION / TABLE ROW MOTION
   ========================================================== */

@media(min-width:901px){

    .epd-table tbody tr{
        transition:
            background-color .2s ease,
            transform .2s ease;
    }

    .epd-table tbody tr:hover{
        background:#f1f7f7;
        transform:
            translate3d(3px,0,0);
    }

}


/* ==========================================================
   CONTACT FORM INTERACTION
   ========================================================== */

@media(min-width:901px){

    .elena-contact-input{
        transition:
            border-color .22s ease,
            box-shadow .22s ease,
            transform .22s
                var(--elena-motion-ease);
    }

    .elena-contact-input:focus{
        transform:
            translate3d(0,-2px,0);
    }

}


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

@media(min-width:901px){

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

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

}


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

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }

}


/* ==========================================================
   MOBILE ANIMATION — PHASE 1A
   ----------------------------------------------------------
   Lightweight, transform-only reveals for phones/tablets.
   IMPORTANT:
   • Content opacity always stays 1.
   • No blur or clip-path is used.
   • Essential content never depends on IntersectionObserver.
   • Desktop animation rules above remain unchanged.
   ========================================================== */

@media(max-width:900px){

    html.elena-motion-enabled
    [data-elena-animate].elena-animate-ready{
        opacity:1 !important;
        visibility:visible !important;
        clip-path:none !important;
        filter:none !important;
        will-change:transform;
        transition:
            transform 520ms
                var(--elena-motion-ease)
                var(--elena-delay,0ms) !important;
    }

    html.elena-motion-enabled
    [data-elena-animate="fade-up"].elena-animate-ready{
        transform:translate3d(0,18px,0);
    }

    html.elena-motion-enabled
    [data-elena-animate="fade-down"].elena-animate-ready{
        transform:translate3d(0,-10px,0);
    }

    html.elena-motion-enabled
    [data-elena-animate="fade-left"].elena-animate-ready{
        transform:translate3d(14px,0,0);
    }

    html.elena-motion-enabled
    [data-elena-animate="fade-right"].elena-animate-ready{
        transform:translate3d(-14px,0,0);
    }

    html.elena-motion-enabled
    [data-elena-animate="zoom"].elena-animate-ready{
        transform:
            translate3d(0,8px,0)
            scale(.985);
    }

    html.elena-motion-enabled
    [data-elena-animate="card-up"].elena-animate-ready{
        transform:
            translate3d(0,18px,0)
            scale(.99);
    }

    html.elena-motion-enabled
    [data-elena-animate="logo-pop"].elena-animate-ready{
        transform:
            translate3d(0,12px,0)
            scale(.96);
    }

    html.elena-motion-enabled
    [data-elena-animate="reveal-left"].elena-animate-ready{
        transform:
            translate3d(-14px,0,0)
            scale(.995);
    }

    html.elena-motion-enabled
    [data-elena-animate="reveal-up"].elena-animate-ready{
        transform:
            translate3d(0,16px,0)
            scale(.995);
    }

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


    /*
     * Mobile safety: these content-heavy blocks are never moved or
     * hidden by the animation engine.
     */
    html.elena-motion-enabled
    .epd-text-card[data-elena-animate],
    html.elena-motion-enabled
    .epd-table-card[data-elena-animate],
    html.elena-motion-enabled
    .elena-customers-final-cta-inner[data-elena-animate]{
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        clip-path:none !important;
        filter:none !important;
        will-change:auto !important;
    }

    html.elena-motion-enabled
    main section,
    html.elena-motion-enabled
    footer{
        visibility:visible !important;
    }

}


/* Reduced-motion safety remains absolute on mobile. */

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

    [data-elena-animate]{
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        clip-path:none !important;
        filter:none !important;
        animation:none !important;
        transition:none !important;
    }

}


/* ==========================================================
   PRODUCT DETAILS — ESSENTIAL CONTENT VISIBILITY FAILSAFE
   ----------------------------------------------------------
   Overview text and specification/dynamic tables must NEVER
   depend on IntersectionObserver to become visible.
   ========================================================== */

@media(min-width:901px){

    html.elena-motion-enabled
    .epd-text-card[data-elena-animate],
    html.elena-motion-enabled
    .epd-table-card[data-elena-animate]{
        opacity:1 !important;
        transform:none !important;
        clip-path:none !important;
        will-change:auto !important;
        transition:
            box-shadow .28s var(--elena-motion-ease),
            border-color .28s var(--elena-motion-ease) !important;
    }

    .epd-text-card{
        transition:
            box-shadow .28s var(--elena-motion-ease),
            transform .28s var(--elena-motion-ease);
    }

    .epd-text-card:hover{
        transform:translate3d(0,-2px,0);
        box-shadow:
            0 10px 25px
            rgba(7,26,45,.055);
    }

    .epd-table-card{
        transition:
            box-shadow .28s var(--elena-motion-ease),
            border-color .28s ease;
    }

    .epd-table-card:hover{
        border-color:
            rgba(15,155,114,.24);
        box-shadow:
            0 12px 28px
            rgba(7,26,45,.07);
    }

}


/* ==========================================================
   CUSTOMERS — FINAL CTA VISIBILITY FAILSAFE
   ----------------------------------------------------------
   The CTA must never disappear because of IntersectionObserver.
   ========================================================== */

@media(min-width:901px){

    html.elena-motion-enabled
    .elena-customers-final-cta-inner[data-elena-animate]{
        opacity:1 !important;
        transform:none !important;
        clip-path:none !important;
        will-change:auto !important;
    }

    .elena-customers-final-cta-inner{
        position:relative;
        overflow:hidden;
        isolation:isolate;
        transition:
            transform .30s var(--elena-motion-ease),
            box-shadow .30s var(--elena-motion-ease);
    }

    .elena-customers-final-cta-inner:hover{
        transform:translate3d(0,-3px,0);
        box-shadow:
            0 16px 34px
            rgba(7,26,45,.10);
    }

    .elena-customers-final-cta-inner::after{
        content:"";
        position:absolute;
        top:-70%;
        left:-20%;
        width:35%;
        height:240%;
        z-index:-1;
        pointer-events:none;
        opacity:.17;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.58),
                transparent
            );
        transform:
            rotate(14deg)
            translateX(-160%);
        animation:
            elenaCustomersCtaSweep
            8.5s ease-in-out
            infinite;
    }

    @keyframes elenaCustomersCtaSweep{
        0%,
        60%{
            transform:
                rotate(14deg)
                translateX(-160%);
        }

        82%,
        100%{
            transform:
                rotate(14deg)
                translateX(430%);
        }
    }

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

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

}


/* ==========================================================
   GLOBAL CONTENT VISIBILITY GUARANTEE — V2
   ----------------------------------------------------------
   No public-page content is allowed to disappear because an
   IntersectionObserver callback did not fire.
   ========================================================== */

@media(min-width:901px){

    html.elena-motion-enabled
    [data-elena-animate]{
        opacity:1 !important;
    }

    /*
     * Essential structural/content blocks receive an extra
     * guarantee. Animation may change transform only.
     */
    html.elena-motion-enabled
    .epd-text-card,
    html.elena-motion-enabled
    .epd-table-card,
    html.elena-motion-enabled
    .elena-customers-final-cta-inner,
    html.elena-motion-enabled
    main section,
    html.elena-motion-enabled
    footer{
        visibility:visible !important;
    }

}

/*
 * If JS fails completely, no data animation attribute is added.
 * If the observer partially fails after attributes are added,
 * content remains visible and only a small positional transform
 * may remain — never an empty block.
 */


/* ==========================================================
   ELENA ELECTRONICS — ANIMATION PHASE 3
   PREMIUM MICRO-INTERACTIONS
   ----------------------------------------------------------
   Desktop only.
   No opacity hiding.
   No scroll-position changes.
   No mobile animation changes.
   ========================================================== */


/* ==========================================================
   SHARED HERO DEPTH
   ========================================================== */

@media(min-width:901px){

    .elena-products-hero,
    .elena-about-hero,
    .elena-customers-hero,
    .elena-careers-hero,
    .elena-contact-hero{
        isolation:isolate;
    }

    .elena-products-hero::before,
    .elena-about-hero::before,
    .elena-customers-hero::before,
    .elena-careers-hero::before,
    .elena-contact-hero::before{
        content:"";
        position:absolute;
        width:360px;
        height:360px;
        border-radius:50%;
        right:-80px;
        top:-120px;
        pointer-events:none;
        opacity:.10;
        background:
            radial-gradient(
                circle,
                rgba(255,255,255,.65) 0%,
                rgba(255,255,255,.20) 35%,
                transparent 70%
            );
        animation:
            elenaHeroGlowFloat
            11s ease-in-out
            infinite alternate;
    }

    @keyframes elenaHeroGlowFloat{
        from{
            transform:
                translate3d(0,0,0)
                scale(1);
        }
        to{
            transform:
                translate3d(-35px,28px,0)
                scale(1.10);
        }
    }

}


/* ==========================================================
   SECTION HEADING ACCENT
   ========================================================== */

@media(min-width:901px){

    .elena-products-heading > span::before,
    .epd-section-heading span::before,
    .epd-similar-heading > div > span::before,
    .elena-about-section-kicker::before,
    .elena-customers-heading > span::before,
    .elena-careers-section-heading > span::before,
    .elena-contact-section-heading > span::before{
        transform-origin:left center;
        transition:
            transform .42s var(--elena-motion-ease),
            width .42s var(--elena-motion-ease);
    }

    .elena-products-heading:hover > span::before,
    .epd-section-heading:hover span::before,
    .epd-similar-heading:hover > div > span::before,
    .elena-customers-heading:hover > span::before,
    .elena-careers-section-heading:hover > span::before,
    .elena-contact-section-heading:hover > span::before{
        transform:scaleX(1.45);
    }

}


/* ==========================================================
   PRODUCTS — PREMIUM CARD EDGE
   ========================================================== */

@media(min-width:901px){

    .elena-product-card{
        isolation:isolate;
    }

    .elena-product-card::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:-1;
        pointer-events:none;
        opacity:0;
        background:
            linear-gradient(
                135deg,
                rgba(15,155,114,.08),
                transparent 40%,
                rgba(20,121,235,.07)
            );
        transition:
            opacity .34s ease;
    }

    .elena-product-card:hover::before{
        opacity:1;
    }

    .elena-product-category{
        transition:
            transform .26s var(--elena-motion-ease),
            box-shadow .26s ease;
    }

    .elena-product-card:hover
    .elena-product-category{
        transform:
            translate3d(2px,-2px,0);
        box-shadow:
            0 5px 12px
            rgba(15,155,114,.10);
    }

    .elena-product-code i{
        transition:
            transform .28s var(--elena-motion-ease);
    }

    .elena-product-card:hover
    .elena-product-code i{
        transform:
            rotate(-8deg)
            scale(1.10);
    }

}


/* ==========================================================
   PRODUCT DETAILS — IMAGE / META / FEATURE POLISH
   ========================================================== */

@media(min-width:901px){

    .epd-gallery-stage{
        background:
            radial-gradient(
                circle at 50% 40%,
                rgba(20,121,235,.025),
                transparent 55%
            ),
            #fff;
    }

    .epd-gallery-slide{
        transition:
            transform .45s var(--elena-motion-ease),
            filter .45s ease;
    }

    .epd-gallery:hover
    .epd-gallery-slide{
        transform:
            scale(1.025);
        filter:
            drop-shadow(
                0 12px 18px
                rgba(7,26,45,.08)
            );
    }

    .epd-meta > div{
        transition:
            background-color .24s ease,
            transform .24s var(--elena-motion-ease);
    }

    .epd-meta > div:hover{
        background:#f7fbfa;
        transform:
            translate3d(0,-2px,0);
    }

    .epd-feature-item{
        transition:
            background-color .24s ease,
            transform .24s var(--elena-motion-ease),
            box-shadow .24s ease;
    }

    .epd-feature-item:hover{
        background:#fbfdfd;
        transform:
            translate3d(4px,-2px,0);
        box-shadow:
            inset 3px 0 0
            rgba(15,155,114,.32);
    }

    .epd-feature-item > span{
        transition:
            transform .26s var(--elena-motion-ease),
            background-color .26s ease;
    }

    .epd-feature-item:hover > span{
        transform:
            rotate(-8deg)
            scale(1.12);
        background:#def3eb;
    }

}


/* ==========================================================
   CUSTOMERS — LOGO WALL POLISH
   ========================================================== */

@media(min-width:901px){

    .elena-customer-logo{
        position:relative;
        isolation:isolate;
        overflow:hidden;
    }

    .elena-customer-logo::after{
        content:"";
        position:absolute;
        top:-20%;
        left:-80px;
        width:32px;
        height:140%;
        pointer-events:none;
        opacity:0;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.85),
                transparent
            );
        transform:skewX(-18deg);
        transition:
            left .65s var(--elena-motion-ease),
            opacity .18s ease;
    }

    .elena-customer-logo:hover::after{
        left:calc(100% + 25px);
        opacity:.75;
    }

    .elena-customer-logo img{
        transition:
            transform .34s var(--elena-motion-ease),
            filter .34s ease;
    }

    .elena-customer-logo:hover img{
        transform:scale(1.055);
        filter:
            saturate(1.06)
            contrast(1.02);
    }

    .elena-customers-support-points > *{
        transition:
            transform .26s var(--elena-motion-ease),
            border-color .26s ease;
    }

    .elena-customers-support-points > *:hover{
        transform:
            translate3d(6px,0,0);
    }

}


/* ==========================================================
   CAREERS — ICON + CARD MOTION
   ========================================================== */

@media(min-width:901px){

    .elena-careers-area-card{
        isolation:isolate;
    }

    .elena-careers-area-card::after{
        content:"";
        position:absolute;
        right:0;
        bottom:0;
        left:0;
        height:3px;
        transform:scaleX(0);
        transform-origin:left center;
        background:
            linear-gradient(
                90deg,
                #0f9b72,
                #1479eb
            );
        transition:
            transform .34s var(--elena-motion-ease);
    }

    .elena-careers-area-card:hover::after{
        transform:scaleX(1);
    }

    .elena-careers-area-card i,
    .elena-careers-area-card svg{
        transition:
            transform .34s var(--elena-motion-ease);
    }

    .elena-careers-area-card:hover i,
    .elena-careers-area-card:hover svg{
        transform:
            translate3d(0,-4px,0)
            rotate(-4deg)
            scale(1.07);
    }

    .elena-careers-values-list > *{
        transition:
            transform .25s var(--elena-motion-ease);
    }

    .elena-careers-values-list > *:hover{
        transform:
            translate3d(5px,0,0);
    }

}


/* ==========================================================
   CONTACT — CHANNELS + FORM FEEDBACK
   ========================================================== */

@media(min-width:901px){

    .elena-contact-channel-grid > *{
        position:relative;
        overflow:hidden;
        isolation:isolate;
        transition:
            transform .30s var(--elena-motion-ease),
            box-shadow .30s ease,
            border-color .30s ease;
    }

    .elena-contact-channel-grid > *:hover{
        transform:
            translate3d(0,-6px,0);
        box-shadow:
            0 14px 30px
            rgba(7,26,45,.08);
    }

    .elena-contact-channel-grid > *::after{
        content:"";
        position:absolute;
        right:0;
        bottom:0;
        left:0;
        height:3px;
        transform:scaleX(0);
        transform-origin:center;
        background:
            linear-gradient(
                90deg,
                #0f9b72,
                #1479eb
            );
        transition:
            transform .32s var(--elena-motion-ease);
    }

    .elena-contact-channel-grid > *:hover::after{
        transform:scaleX(1);
    }

    .elena-contact-form input,
    .elena-contact-form textarea,
    .elena-contact-form select{
        transition:
            border-color .22s ease,
            box-shadow .22s ease,
            transform .22s var(--elena-motion-ease);
    }

    .elena-contact-form input:focus,
    .elena-contact-form textarea:focus,
    .elena-contact-form select:focus{
        transform:
            translate3d(0,-2px,0);
        box-shadow:
            0 0 0 4px
            rgba(20,121,235,.07);
    }

    .elena-contact-map{
        transition:
            transform .34s var(--elena-motion-ease),
            box-shadow .34s ease;
    }

    .elena-contact-map:hover{
        transform:
            translate3d(0,-3px,0);
        box-shadow:
            0 15px 32px
            rgba(7,26,45,.08);
    }

}


/* ==========================================================
   SHARED CTA BUTTON FEEDBACK
   ========================================================== */

@media(min-width:901px){

    .elena-products-cta-button,
    .epd-primary-action,
    .epd-secondary-action,
    .epd-cta > a,
    .elena-customers-final-primary,
    .elena-customers-final-secondary,
    .elena-careers-apply-button,
    .elena-contact-submit{
        transition:
            transform .24s var(--elena-motion-ease),
            box-shadow .24s ease,
            filter .24s ease;
    }

    .elena-products-cta-button:active,
    .epd-primary-action:active,
    .epd-secondary-action:active,
    .epd-cta > a:active,
    .elena-customers-final-primary:active,
    .elena-customers-final-secondary:active,
    .elena-careers-apply-button:active,
    .elena-contact-submit:active{
        transform:
            translate3d(0,1px,0)
            scale(.985);
    }

}


/* ==========================================================
   BACK TO TOP
   ========================================================== */

@media(min-width:901px){

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

    .elena-back-to-top:hover{
        transform:
            translate3d(0,-4px,0)
            scale(1.05);
        box-shadow:
            0 12px 24px
            rgba(15,155,114,.22);
    }

}


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

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

    .elena-products-hero::before,
    .elena-about-hero::before,
    .elena-customers-hero::before,
    .elena-careers-hero::before,
    .elena-contact-hero::before{
        animation:none !important;
    }

}


/* ==========================================================
   MOBILE
   Phase 3 intentionally excluded.
   ========================================================== */

@media(max-width:900px){

    .elena-products-hero::before,
    .elena-about-hero::before,
    .elena-customers-hero::before,
    .elena-careers-hero::before,
    .elena-contact-hero::before{
        display:none !important;
    }

}