/* ==========================================================
   RTC MANAGED HOMEPAGE HERO
   Public cinematic background layer
   ========================================================== */

.hero.rtc-managed-hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.hero.rtc-managed-hero > .rtc-managed-hero-stage{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}

.hero.rtc-managed-hero .rtc-managed-hero-slide{
    position:absolute;
    inset:-3%;
    width:106%;
    height:106%;
    opacity:0;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    transform:scale(1.03);
    will-change:opacity,transform;
    pointer-events:none;
}

.hero.rtc-managed-hero .rtc-managed-hero-slide.rtc-active{
    opacity:1;
}

.hero.rtc-managed-hero .rtc-managed-hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:rgba(7,16,31,.58);
}

.hero.rtc-managed-hero > .hero-grid{
    z-index:1;
}

.hero.rtc-managed-hero > .hero-inner{
    position:relative;
    z-index:2;
}


/* ---------- Cinematic movement ---------- */

.hero.rtc-managed-hero.rtc-motion-cinematic
.rtc-managed-hero-slide.rtc-active{
    animation:
        rtcHeroCinematic
        var(--rtc-hero-motion-speed,14s)
        ease-in-out
        both;
}

.hero.rtc-managed-hero.rtc-motion-zoom
.rtc-managed-hero-slide.rtc-active{
    animation:
        rtcHeroZoom
        var(--rtc-hero-motion-speed,14s)
        ease-in-out
        both;
}

.hero.rtc-managed-hero.rtc-motion-pan_left
.rtc-managed-hero-slide.rtc-active{
    animation:
        rtcHeroPanLeft
        var(--rtc-hero-motion-speed,14s)
        ease-in-out
        both;
}

.hero.rtc-managed-hero.rtc-motion-pan_right
.rtc-managed-hero-slide.rtc-active{
    animation:
        rtcHeroPanRight
        var(--rtc-hero-motion-speed,14s)
        ease-in-out
        both;
}


@keyframes rtcHeroCinematic{
    0%{
        transform:
            scale(1.04)
            translate3d(0,0,0);
    }

    50%{
        transform:
            scale(1.10)
            translate3d(-1.5%,-1%,0);
    }

    100%{
        transform:
            scale(1.08)
            translate3d(1%,-.5%,0);
    }
}

@keyframes rtcHeroZoom{
    from{
        transform:scale(1.03);
    }

    to{
        transform:scale(1.13);
    }
}

@keyframes rtcHeroPanLeft{
    from{
        transform:
            scale(1.10)
            translate3d(2%,0,0);
    }

    to{
        transform:
            scale(1.10)
            translate3d(-2%,0,0);
    }
}

@keyframes rtcHeroPanRight{
    from{
        transform:
            scale(1.10)
            translate3d(-2%,0,0);
    }

    to{
        transform:
            scale(1.10)
            translate3d(2%,0,0);
    }
}


/* ---------- Pause / play ---------- */

.rtc-managed-hero-control{
    position:absolute;
    z-index:4;
    left:22px;
    bottom:22px;
    min-width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.30);
    border-radius:999px;
    background:rgba(8,15,26,.62);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 13px;
    gap:7px;
    font:inherit;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    backdrop-filter:blur(8px);
    box-shadow:0 8px 28px rgba(0,0,0,.20);
}

.rtc-managed-hero-control:hover{
    background:rgba(8,15,26,.82);
}

.rtc-managed-hero-control:focus-visible{
    outline:3px solid rgba(255,196,0,.70);
    outline-offset:3px;
}


/* ---------- Paused ---------- */

.hero.rtc-managed-hero.rtc-hero-paused
.rtc-managed-hero-slide{
    animation-play-state:paused !important;
}


/* ---------- Reduced motion ---------- */

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

    .hero.rtc-managed-hero
    .rtc-managed-hero-slide{
        animation:none !important;
        transform:none !important;
        transition:none !important;
    }

    .rtc-managed-hero-control{
        display:none !important;
    }
}


/* ---------- Mobile ---------- */

@media(max-width:720px){

    .rtc-managed-hero-control{
        left:14px;
        bottom:14px;
        min-width:38px;
        height:38px;
        padding:0 11px;
    }
}