/**
 * Cinematic hero intro — premium title, beam, atmosphere (hero-cinematic.js + GSAP).
 */

.hero-split--cinema {
    --hero-cinema-ease: cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

html.hero-cinema-running {
    overflow: hidden;
}

.hero-split--cinema .hero-split__panels {
    position: relative;
    overflow: hidden;
}

/* —— Full-section intro stage —— */
.hero-cinema {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    overflow: hidden;
}

.hero-cinema__zoom {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.hero-cinema__half {
    background-size: cover;
    background-position: center;
    transform: translate3d(0, 0, 0) scale(1.02);
    will-change: transform;
}

.hero-cinema__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        155deg,
        rgba(10, 14, 24, 0.9) 0%,
        rgba(22, 36, 52, 0.82) 42%,
        rgba(14, 22, 36, 0.88) 100%
    );
    background-size: 200% 200%;
    pointer-events: none;
    animation: hero-cinema-veil-shift 18s ease-in-out infinite;
}

@keyframes hero-cinema-veil-shift {
    0%,
    100% {
        background-position: 0% 35%;
    }
    50% {
        background-position: 100% 65%;
    }
}

.hero-cinema__mesh {
    position: absolute;
    inset: -40% -20%;
    z-index: 2;
    opacity: 0.5;
    background: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(95, 125, 149, 0.38), transparent 55%),
        radial-gradient(ellipse 70% 50% at 78% 70%, rgba(var(--rgb-green), 0.14), transparent 50%),
        linear-gradient(125deg, rgba(72, 120, 180, 0.1), transparent 40%, rgba(130, 100, 200, 0.08));
    animation: hero-cinema-mesh-drift 14s ease-in-out infinite;
    pointer-events: none;
    transform: translateZ(0);
    will-change: transform;
}

@keyframes hero-cinema-mesh-drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(2%, -1.5%, 0) scale(1.03);
    }
}

/* Light dust / particles (transform-only motion) */
.hero-cinema__dust {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.65;
    overflow: hidden;
}

.hero-cinema__dust::before {
    content: "";
    position: absolute;
    width: 140%;
    height: 140%;
    left: -20%;
    top: -20%;
    background-image: radial-gradient(1.5px 1.5px at 8% 12%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 22% 38%, rgba(200, 220, 255, 0.45), transparent),
        radial-gradient(1px 1px at 44% 8%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1.5px 1.5px at 58% 62%, rgba(230, 210, 160, 0.4), transparent),
        radial-gradient(1px 1px at 72% 28%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 88% 78%, rgba(180, 200, 240, 0.45), transparent),
        radial-gradient(1px 1px at 15% 82%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 91% 18%, rgba(255, 255, 255, 0.35), transparent);
    animation: hero-cinema-dust-drift 22s linear infinite;
    transform: translateZ(0);
    will-change: transform;
}

@keyframes hero-cinema-dust-drift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-5%, -4%, 0);
    }
}

.hero-cinema__noise {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0.085;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* Radial spotlight behind title */
.hero-cinema__spotlight {
    position: absolute;
    left: 50%;
    top: 44%;
    z-index: 3;
    width: min(92vw, 560px);
    height: min(52vh, 400px);
    margin: 0;
    transform: translate3d(-50%, -50%, 0);
    background: radial-gradient(
        ellipse 55% 48% at 50% 50%,
        rgba(130, 175, 235, 0.28) 0%,
        rgba(var(--rgb-green), 0.1) 38%,
        transparent 72%
    );
    pointer-events: none;
    animation: hero-cinema-spot-breathe 5s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes hero-cinema-spot-breathe {
    0%,
    100% {
        opacity: 0.92;
        transform: translate3d(-50%, -50%, 0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) scale(1.04);
    }
}

/* Title block */
.hero-cinema__intro {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: clamp(1rem, 4vw, 2rem);
    text-align: center;
    transform: translateZ(0);
}

/* Light sweep across title (GPU-friendly translate) */
.hero-cinema__sweep {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: min(38vw, 240px);
    height: 130%;
    margin: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 40%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.06) 60%,
        transparent 100%
    );
    transform: translate3d(-50%, -50%, 0) translate3d(-180%, 0, 0) skewX(-14deg);
    mix-blend-mode: screen;
    opacity: 0;
    animation: hero-cinema-sweep-pass 3.2s ease-in-out infinite;
    animation-delay: 0.4s;
    will-change: transform, opacity;
}

@keyframes hero-cinema-sweep-pass {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) translate3d(-200%, 0, 0) skewX(-14deg);
    }
    12% {
        opacity: 0.85;
    }
    45% {
        opacity: 0.75;
        transform: translate3d(-50%, -50%, 0) translate3d(200%, 0, 0) skewX(-14deg);
    }
    55%,
    100% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) translate3d(200%, 0, 0) skewX(-14deg);
    }
}

.hero-cinema__title {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 0.02em 0.1em;
    max-width: min(96vw, 38rem);
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 4.4vw, 3rem);
    line-height: 1.06;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    /* Single drop stack on container (avoids per-letter filter cost) */
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.35)) drop-shadow(0 2px 24px rgba(60, 100, 140, 0.45))
        drop-shadow(0 8px 48px rgba(0, 0, 0, 0.35));
}

.hero-cinema__char {
    display: inline-block;
    position: relative;
    transform: translate3d(0, 0, 0);
    color: transparent;
    background: linear-gradient(
        105deg,
        #ffffff 0%,
        #e8eef3 35%,
        #f5f8fa 55%,
        #dce6ee 78%,
        #ffffff 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    will-change: transform, opacity;
    animation: hero-cinema-char-glow-shift 8s ease-in-out infinite;
}

.hero-cinema__char--space {
    width: 0.28em;
    min-width: 0.28em;
    background: none;
    -webkit-text-fill-color: transparent;
    animation: none;
}

@keyframes hero-cinema-char-glow-shift {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-cinema__char {
        color: #f2f6fa;
        -webkit-text-fill-color: unset;
        background: none;
        text-shadow:
            0 0 20px rgba(120, 170, 220, 0.55),
            0 4px 28px rgba(0, 0, 0, 0.4);
    }

    .hero-cinema__char--space {
        width: 0.28em;
    }
}

/* —— Energy beam (center seam) —— */
.hero-cinema__energy {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 11;
    pointer-events: none;
    overflow: visible;
    transform: translateZ(0);
}

.hero-cinema__beam {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 5px;
    margin-left: -2.5px;
    border-radius: 3px;
    transform: translate3d(0, 0, 0) scaleY(0.2);
    transform-origin: 50% 0%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(160, 205, 255, 0.98) 14%,
        rgba(240, 215, 140, 0.92) 48%,
        rgba(120, 175, 235, 0.95) 86%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 100% 240%;
    box-shadow:
        0 0 16px rgba(130, 185, 255, 0.75),
        0 0 36px rgba(var(--rgb-green), 0.35);
    opacity: 0;
    animation: hero-cinema-beam-flow 1.85s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes hero-cinema-beam-flow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

.hero-cinema__beam::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -4%;
    bottom: -4%;
    width: 28px;
    margin-left: -14px;
    border-radius: 50%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(150, 195, 255, 0.35) 35%,
        rgba(220, 190, 120, 0.22) 55%,
        transparent 100%
    );
    filter: blur(10px);
    z-index: -1;
    opacity: 0.9;
    transform: translateZ(0);
    animation: hero-cinema-beam-pulse 2s ease-in-out infinite;
}

@keyframes hero-cinema-beam-pulse {
    0%,
    100% {
        opacity: 0.65;
        transform: translateZ(0) scaleX(1);
    }
    50% {
        opacity: 1;
        transform: translateZ(0) scaleX(1.15);
    }
}

.hero-cinema__beam-glow {
    position: absolute;
    left: 50%;
    top: 8%;
    bottom: 8%;
    width: min(26vw, 160px);
    margin-left: calc(min(26vw, 160px) / -2);
    background: radial-gradient(
        ellipse 45% 50% at 50% 50%,
        rgba(140, 190, 255, 0.42) 0%,
        rgba(var(--rgb-green), 0.14) 42%,
        transparent 68%
    );
    opacity: 0;
    filter: blur(12px);
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    will-change: opacity;
}

.hero-cinema__burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(140, 190, 255, 0.55) 38%, transparent 62%);
    box-shadow:
        0 0 28px rgba(190, 220, 255, 0.95),
        0 0 56px rgba(var(--rgb-green), 0.45);
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.25);
    pointer-events: none;
    will-change: transform, opacity;
}

.hero-cinema__ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 2px solid rgba(170, 205, 255, 0.55);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 0, 0) scale(0.35);
    will-change: transform, opacity;
}

.hero-cinema__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-cinema__particles span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(210, 225, 255, 0.98), rgba(230, 200, 130, 0.85));
    box-shadow: 0 0 10px rgba(150, 190, 255, 0.65);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

/* Ribbon visibility — GSAP + static fallback */
.hero-split--cinema.hero-cinema--static .sx-hero-ribbon {
    opacity: 1;
    visibility: visible;
}

.hero-split--cinema.hero-cinema--static .hero-cinema,
.hero-split--cinema.hero-cinema--static .hero-cinema__energy {
    display: none !important;
}

@media (max-width: 899px) {
    .hero-cinema__zoom {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .hero-cinema__half--left {
        background-position: center 40%;
    }

    .hero-cinema__half--right {
        background-position: center 55%;
    }

    .hero-cinema__title {
        font-size: clamp(1.05rem, 5.2vw, 1.85rem);
        max-width: 20ch;
        gap: 0.02em 0.06em;
    }

    .hero-cinema__sweep {
        animation-duration: 4s;
        opacity: 0.7;
    }

    .hero-cinema__dust {
        opacity: 0.4;
    }

    .hero-cinema__char {
        animation: none;
    }

    .hero-cinema__spotlight {
        width: min(100vw, 420px);
        height: min(48vh, 320px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cinema__mesh,
    .hero-cinema__dust::before,
    .hero-cinema__veil,
    .hero-cinema__spotlight,
    .hero-cinema__sweep,
    .hero-cinema__char,
    .hero-cinema__beam,
    .hero-cinema__beam::after {
        animation: none !important;
    }

    .hero-cinema__veil {
        background-size: 100% 100%;
    }
}

/* Post-intro: button polish */
.hero-split--cinema.is-cinema-done .btn--footer-book {
    transition:
        transform 0.28s var(--hero-cinema-ease),
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

@media (hover: hover) and (pointer: fine) {
    .hero-split--cinema.is-cinema-done .btn--footer-book:hover,
    .hero-split--cinema.is-cinema-done .btn--hero-split-ghost:hover {
        transform: translate3d(0, -2px, 0) scale(1.02);
        box-shadow: var(--btn-shadow-hover);
    }
}