/* ================================================================
   CINEMATIC LANDING PAGE — v3 Ultra Performance
   • No pseudo-element artifacts
   • GPU-composited layers only
   • Spline cursor-tracking optimized
   ================================================================ */

:root {
    --accent-v: #a855f7;
    --accent-c: #06b6d4;
    --font: 'Inter', sans-serif;
}

/* Force GPU context for the entire page once */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    background: #000;
    font-family: var(--font);
    color: #fff;
    overflow: hidden;
    /* single compositing layer for whole viewport */
    -webkit-font-smoothing: antialiased;
}

/* ── CONTAINER ─────────────────────────────────────── */
.cine-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ── BACKGROUND AURORA (GPU-only, no repaints) ─────── */
.cine-bg {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* Use transform-based animation — no layout shifts */
    will-change: opacity;
}

.cine-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 38% at 28% 62%, rgba(168, 85, 247, .07) 0%, transparent 70%),
        radial-gradient(ellipse 38% 28% at 72% 30%, rgba(6, 182, 212, .05) 0%, transparent 70%);
    animation: aurora 10s ease-in-out infinite alternate;
    will-change: opacity, transform;
    contain: strict;
}

@keyframes aurora {
    0% {
        opacity: .6;
        transform: scale(1) translateZ(0);
    }

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

/* ── SPLINE 3D ─────────────────────────────────────── */
/* Isolated compositing layer so cursor-tracking never
   triggers repaints on other elements */
.cine-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000 !important;
    /* Own GPU layer — zero interaction with text layers */
    will-change: contents;
    contain: strict;
    pointer-events: auto;
}

spline-viewer,
spline-viewer canvas {
    --logo-color: transparent;
    background: #000 !important;
    /* Promote canvas to its own layer */
    transform: translateZ(0);
    will-change: transform;
}

/* Block Spline watermark */
.cine-particles::part(logo) {
    display: none !important;
}

.cine-particles::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 50px;
    background: #000;
    z-index: 10;
    pointer-events: none;
}

/* Spline fade-in — longer transition = smoother appearance */
.spline-fadein {
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.spline-fadein.spline-loaded {
    opacity: 1;
}

/* Loading placeholder — subtle pulse so the black void looks intentional */
#spline-slot {
    background:
        radial-gradient(ellipse 50% 70% at 50% 60%, rgba(168, 85, 247, .06) 0%, transparent 70%),
        #000;
    animation: slotPulse 2.5s ease-in-out infinite;
}

@keyframes slotPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .7;
    }
}


/* ── HUD CORNERS ───────────────────────────────────── */
.hud-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 15;
    opacity: 0;
    /* share one fadeIn, no extra keyframe per corner */
    animation: fadeIn .6s ease forwards .5s;
    pointer-events: none;
    contain: layout style;
}

.hud-tl {
    top: 1.2rem;
    left: 1.2rem;
    border-top: 2px solid rgba(168, 85, 247, .8);
    border-left: 2px solid rgba(168, 85, 247, .8);
    animation: fadeIn .6s ease forwards .5s, cornerV 4s ease-in-out infinite 1.2s;
}

.hud-tr {
    top: 1.2rem;
    right: 1.2rem;
    border-top: 2px solid rgba(6, 182, 212, .8);
    border-right: 2px solid rgba(6, 182, 212, .8);
    animation: fadeIn .6s ease forwards .55s, cornerC 4s ease-in-out infinite 1.5s;
}

.hud-bl {
    bottom: 1.2rem;
    left: 1.2rem;
    border-bottom: 2px solid rgba(6, 182, 212, .8);
    border-left: 2px solid rgba(6, 182, 212, .8);
    animation: fadeIn .6s ease forwards .55s, cornerC 4s ease-in-out infinite 1.7s;
}

.hud-br {
    bottom: 1.2rem;
    right: 1.2rem;
    border-bottom: 2px solid rgba(168, 85, 247, .8);
    border-right: 2px solid rgba(168, 85, 247, .8);
    animation: fadeIn .6s ease forwards .5s, cornerV 4s ease-in-out infinite 1.9s;
}

@keyframes cornerV {

    0%,
    100% {
        border-color: rgba(168, 85, 247, .7);
    }

    50% {
        border-color: rgba(168, 85, 247, 1);
        box-shadow: 0 0 10px rgba(168, 85, 247, .5);
    }
}

@keyframes cornerC {

    0%,
    100% {
        border-color: rgba(6, 182, 212, .7);
    }

    50% {
        border-color: rgba(6, 182, 212, 1);
        box-shadow: 0 0 10px rgba(6, 182, 212, .5);
    }
}


/* ── ONLINE BADGE ──────────────────────────────────── */
.status-badge {
    position: absolute;
    left: 50%;
    top: 6%;
    transform: translateX(-50%);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem;
    border: 1px solid rgba(74, 222, 128, .35);
    border-radius: 50px;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: .72rem;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: .15em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    animation: floatBadge .6s cubic-bezier(.2, .8, .2, 1) forwards .1s;
    will-change: opacity, transform;
    contain: layout style;
}

@keyframes floatBadge {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    animation: dotPulse 2s ease-in-out infinite;
    flex-shrink: 0;
    will-change: opacity, box-shadow;
}

@keyframes dotPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 8px #4ade80;
    }

    50% {
        opacity: .4;
        box-shadow: 0 0 3px #4ade80;
    }
}


/* ── MAIN CONTENT ──────────────────────────────────── */
.cine-content {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 2rem 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 860px;
    /* own layer so Spline repaints don't touch text */
    will-change: transform;
}

/* ── TITLE ─────────────────────────────────────────── */
.cine-title {
    font-size: clamp(2.5rem, 9vw, 5.5rem);
    font-weight: 900;
    margin: 0 0 .4rem;
    line-height: 1.1;
    letter-spacing: -.03em;
    /* Vivid neon gradient — no blur, no filter */
    color: transparent;
    background: linear-gradient(90deg, #ff6fff, #00e5ff, #bf00ff, #00e5ff, #ff6fff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Visible by default (no-JS safe) */
    opacity: 1;
    transform: none;
    will-change: opacity, transform, background-position;
}

.js-active .cine-title {
    opacity: 0;
    transform: translateY(28px);
    animation:
        fadeSlideUp .7s cubic-bezier(.2, .8, .2, 1) forwards .05s,
        titleShimmer 8s linear infinite 1s;
}

@keyframes titleShimmer {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}


/* ── SUBTITLE — clean glitch (no pseudo-elements) ──── */
.cine-subtitle {
    font-size: clamp(1.3rem, 4.5vw, 2.3rem);
    font-weight: 700;
    margin: 0 0 1.8rem;
    background: linear-gradient(90deg, #d8b4fe, #22d3ee, #a78bfa, #22d3ee, #d8b4fe);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: 1;
    transform: none;
    will-change: opacity, transform, background-position;
}

.js-active .cine-subtitle {
    opacity: 0;
    transform: translateY(20px);
    animation:
        fadeSlideUp .7s cubic-bezier(.2, .8, .2, 1) forwards .18s,
        shimmer 6s ease-in-out infinite 1.2s,
        /* Clean micro-glitch: only translate + skew, no clips, no stripes */
        glitchClean 7s steps(1) infinite 2.5s;
}

@keyframes shimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Stripe-free glitch — only affects transform, never clips */
@keyframes glitchClean {

    0%,
    93%,
    100% {
        transform: translate(0, 0) skewX(0);
        opacity: 1;
    }

    94% {
        transform: translate(-3px, 0) skewX(-1.5deg);
        opacity: .85;
    }

    95% {
        transform: translate(3px, 0) skewX(1.5deg);
        opacity: .9;
    }

    96% {
        transform: translate(-1px, 0) skewX(0);
        opacity: 1;
    }
}


/* ── BUTTON ────────────────────────────────────────── */
.cine-buttons {
    display: flex;
    justify-content: center;
    opacity: 1;
    transform: none;
    will-change: opacity, transform;
}

.js-active .cine-buttons {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideUp .7s cubic-bezier(.2, .8, .2, 1) forwards .32s;
}

.btn {
    padding: .95rem 2.4rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .1em;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-transform: uppercase;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    display: inline-block;
    will-change: transform, box-shadow;
}

.btn-enter {
    background: transparent;
    border: 2px solid var(--accent-v);
    color: #fff;
    /* Pulsing neon ring to scream "click me" */
    box-shadow: 0 0 0 0 rgba(168, 85, 247, .7);
    animation: btnPulse 2s ease-out infinite;
}

.btn-enter:hover {
    background: rgba(168, 85, 247, .12);
    box-shadow: 0 0 35px rgba(168, 85, 247, .9), inset 0 0 25px rgba(168, 85, 247, .35);
    transform: translateY(-3px) scale(1.06);
}

/* Ripple-pulse instead of static neon — far more eye-catching */
@keyframes btnPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(168, 85, 247, .8);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(168, 85, 247, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(168, 85, 247, 0);
    }
}


/* ── CTA HINT ARROW ────────────────────────────────── */
/* Above the button — label on top, arrow below pointing at button */
.cta-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    margin-bottom: .9rem;
    /* space between hint and button */
    opacity: 0;
    animation: fadeIn .8s ease forwards 1s;
    pointer-events: none;
    will-change: opacity;
}

.cta-arrow {
    font-size: 1.5rem;
    color: var(--accent-v);
    text-shadow: 0 0 10px rgba(168, 85, 247, .9), 0 0 24px rgba(168, 85, 247, .5);
    animation: ctaBounce 1.5s ease-in-out infinite;
    will-change: transform;
    line-height: 1;
}

.cta-label {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: rgba(168, 85, 247, .6);
}

@keyframes ctaBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}


/* ── TAGLINE — bottom right, neon outline ──────────── */
.cine-tagline {
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: 20;
    margin: 0;
    font-size: clamp(.8rem, 1.4vw, 1rem);
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.3;
    text-align: right;
    /* Transparent fill, violet stroke only */
    color: transparent;
    -webkit-text-stroke: 1.5px #c084fc;
    filter:
        drop-shadow(0 0 6px rgba(168, 85, 247, .9)) drop-shadow(0 0 16px rgba(168, 85, 247, .5));
    pointer-events: none;
    opacity: 1;
    will-change: opacity, filter;
}

.js-active .cine-tagline {
    opacity: 0;
    transform: translateY(10px);
    animation:
        fadeSlideUp .7s cubic-bezier(.2, .8, .2, 1) forwards .48s,
        taglineGlow 3.5s ease-in-out infinite alternate 1.5s;
}

@keyframes taglineGlow {
    0% {
        filter: drop-shadow(0 0 5px rgba(168, 85, 247, .8)) drop-shadow(0 0 12px rgba(168, 85, 247, .4));
    }

    100% {
        filter: drop-shadow(0 0 10px rgba(168, 85, 247, 1)) drop-shadow(0 0 26px rgba(192, 132, 252, .9)) drop-shadow(0 0 42px rgba(168, 85, 247, .4));
    }
}


/* ── LANGUAGE TOGGLE ───────────────────────────────── */
.lang-toggle {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .8rem;
    background: rgba(255, 255, 255, .05);
    padding: .45rem 1rem;
    border-radius: 50px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .1);
    opacity: 0;
    animation: fadeIn .5s ease forwards .25s;
    contain: layout style;
}

.lang-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, .5);
    font-family: inherit;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    transition: color .2s;
    padding: 0;
    letter-spacing: .08em;
}

.lang-btn.active {
    color: #fff;
    text-shadow: 0 0 10px rgba(168, 85, 247, .9);
}

.lang-btn:hover {
    color: #fff;
}

.lang-sep {
    color: rgba(255, 255, 255, .2);
    font-size: .85rem;
    user-select: none;
}


/* ── SHARED KEYFRAMES ──────────────────────────────── */
@keyframes fadeSlideUp {
    to {
        opacity: 1;
        transform: translateY(0) skewX(0);
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


/* ── MOBILE ────────────────────────────────────────── */
@media (max-width: 600px) {
    .status-badge {
        top: 4%;
        font-size: .62rem;
    }

    .cine-title {
        font-size: clamp(2rem, 11vw, 3.2rem);
    }

    .cine-subtitle {
        font-size: clamp(.88rem, 5vw, 1.3rem);
    }
}

/* Dev philosophy note — bottom left */
.cine-note {
    position: absolute;
    bottom: 2.5rem;
    left: 2.5rem;
    z-index: 20;
    margin: 0;
    font-size: clamp(.65rem, 1.1vw, .82rem);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.7;
    text-align: left;
    max-width: 380px;
    pointer-events: none;

    /* Subtle muted version of the tagline style */
    color: rgba(192, 132, 252, 0.5);
    border-left: 1.5px solid rgba(168, 85, 247, 0.35);
    padding-left: 0.75rem;
    opacity: 0;
    transform: translateY(12px);
    will-change: opacity, transform;
}

.js-active .cine-note {
    animation: fadeSlideUp .7s cubic-bezier(.2, .8, .2, 1) forwards .72s;
}

@media (max-width: 600px) {
    .cine-note {
        display: none;
        /* too long for tiny screens */
    }
}

@media (max-width: 480px) {
    .cine-tagline {
        bottom: 1.2rem;
        right: .8rem;
        font-size: .7rem;
        -webkit-text-stroke: 1px #c084fc;
    }

    .hud-corner {
        width: 20px;
        height: 20px;
    }
}