/* Intro "estilo Netflix" da home: splash full-screen que acende a marca, expande o
   wordmark e revela o site com um zoom + fade. Toca 1x por sessão (controle em JS).

   Estados:
   - .intro           → escondido por padrão (sem JS ou em sessões repetidas não pisca).
   - .intro.is-playing→ visível e animando; o próprio JS remove o nó ao terminar.
   A duração total (1,8s) é curta de propósito: enquanto o overlay cobre a tela, é ele
   que o navegador mede como LCP da home — alongar a intro piora Core Web Vitals.
   O movimento é 100% transform/opacity/filter (GPU). O prefers-reduced-motion é tratado
   no JS (remove o overlay antes de animar), com um guarda extra no fim deste arquivo. */

.intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: radial-gradient(120% 120% at 50% 42%, #131a2b 0%, #0b0e17 72%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.intro.is-playing {
    visibility: visible;
    opacity: 1;
    /* Saída (zoom + fade) começa após a entrada; ao terminar, o JS remove o overlay. */
    animation: intro-out 0.6s ease-in 1.2s forwards;
}

.intro__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transform-origin: center;
}

.intro__mark {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.intro__word {
    font-family: var(--font-sans);
    font-size: clamp(1.9rem, 6vw, 2.9rem);
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: 0.02em;
}

/* Entrada só quando está tocando */
.intro.is-playing .intro__mark {
    animation: intro-mark 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.intro.is-playing .intro__word {
    animation: intro-word 0.7s ease-out 0.35s both;
}

/* A marca "acende": sobe de escala com um glow laranja pulsando e assentando. */
@keyframes intro-mark {
    0% {
        opacity: 0;
        transform: scale(0.6);
        filter: drop-shadow(0 0 0 rgba(232, 119, 34, 0));
    }
    60% {
        opacity: 1;
        transform: scale(1.06);
        filter: drop-shadow(0 0 26px rgba(232, 119, 34, 0.55));
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 14px rgba(232, 119, 34, 0.35));
    }
}

/* O wordmark abre o espaçamento das letras ao se materializar (toque premium). */
@keyframes intro-word {
    0% {
        opacity: 0;
        transform: translateY(10px);
        letter-spacing: 0.32em;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 0.02em;
    }
}

/* Revelação final: o splash dá um zoom e some, "entrando" no site. */
@keyframes intro-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.25);
    }
}

/* Trava a rolagem enquanto a intro toca. */
html.intro-lock,
html.intro-lock body {
    overflow: hidden;
}

/* Guarda extra: se alguém pediu menos movimento, nenhuma animação da intro roda. */
@media (prefers-reduced-motion: reduce) {
    .intro,
    .intro.is-playing,
    .intro.is-playing .intro__mark,
    .intro.is-playing .intro__word {
        animation: none !important;
    }
}