/* ============================================================
   Lineage Analytics — animations.css
   Animações cinematográficas:
   - Entrada do hero ao carregar (texto + painel)
   - Slide horizontal dos textos vindos das laterais
   - Stagger preciso entre filhos
   - Curvas Apple-style

   IMPORTANTE: as animações de entrada do hero NÃO usam
   `fill-mode: both` — o estado final é controlado pelas classes
   `.is-visible` / `.is-exiting` aplicadas pelo contentAnimator.
   Isso garante que o hero suma quando o usuário rola para os
   próximos capítulos.

   O body começa SEM .is-loaded → todos os capítulos ficam
   invisíveis. Após o primeiro frame do canvas carregar,
   app.js adiciona .is-loaded e dispara a entrada do hero.
   ============================================================ */

/* ============================================================
   1. RESET — nada visível antes do load
   ============================================================ */
body:not(.is-loaded) .chapter [data-content],
body:not(.is-loaded) .chapter [data-visual] {
    opacity: 0;
    filter: blur(14px);
    pointer-events: none;
}

body:not(.is-loaded) #hero-canvas {
    opacity: 0;
}

/* Fade do canvas assim que carrega */
body.is-loaded #hero-canvas {
    animation: canvasFadeIn 900ms var(--ease-cinema) both;
}

@keyframes canvasFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   2. ENTRADA CINEMATOGRÁFICA DO HERO (após load)
   ============================================================
   Estado BASE do hero (sem .is-loaded): invisível + deslocado
   Quando .is-loaded: anima de `from` → `to` (sem fill-mode,
   para que .is-visible / .is-exiting assumam o controle depois).
   ============================================================ */

/* Estado base do texto do hero (invisível até o load terminar) */
.chapter--hero [data-content] {
    opacity: 0;
    transform: translate3d(-72px, 0, 0);
    filter: blur(14px);
}

/* Após o load: animação de entrada (roda uma vez, sem fill-mode permanente) */
body.is-loaded .chapter--hero [data-content] {
    animation: heroTextIn 1400ms cubic-bezier(0.16, 1, 0.3, 1) 250ms 1;
}

@keyframes heroTextIn {
    from { opacity: 0; transform: translate3d(-72px, 0, 0); filter: blur(14px); }
    to   { opacity: 1; transform: translate3d(0, 0, 0);    filter: blur(0); }
}

/* Estado base do painel do hero */
.chapter--hero [data-visual] {
    opacity: 0;
    transform: translate3d(40px, 18px, 0) scale(0.94);
    filter: blur(16px);
}

body.is-loaded .chapter--hero [data-visual] {
    animation: heroVisualIn 1500ms cubic-bezier(0.16, 1, 0.3, 1) 500ms 1;
}

@keyframes heroVisualIn {
    from { opacity: 0; transform: translate3d(40px, 18px, 0) scale(0.94); filter: blur(16px); }
    to   { opacity: 1; transform: translate3d(0, 0, 0)     scale(1);    filter: blur(0); }
}

/* Glow do painel: pulsa depois de entrar */
.chapter--hero .visual-glow {
    animation: glowPulse 6s ease-in-out 2400ms infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.05); }
}

/* ============================================================
   3. ESTADO BASE — capítulos NÃO-hero (sempre invisíveis sem classe)
   ============================================================ */

.chapter:not(.chapter--hero) [data-content] {
    opacity: 0;
    transform: translate3d(-56px, 0, 0);
    filter: blur(12px);
    transition:
        opacity 900ms var(--ease-cinema),
        transform 900ms var(--ease-cinema),
        filter 900ms var(--ease-cinema);
}

.chapter:not(.chapter--hero) [data-visual] {
    opacity: 0;
    transform: translate3d(40px, 18px, 0) scale(0.94);
    filter: blur(12px);
    transition:
        opacity 900ms var(--ease-cinema),
        transform 900ms var(--ease-cinema),
        filter 900ms var(--ease-cinema);
}

/* Capítulo à direita: estado base vem da direita */
.chapter:not(.chapter--hero) [data-content].from-right {
    transform: translate3d(56px, 0, 0);
}

/* ============================================================
   4. VISÍVEL — quando o capítulo está ativo (entrando ou no meio)
   ============================================================ */

[data-content].is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    filter: blur(0) !important;
}

[data-content].is-visible.from-right {
    transform: translate3d(0, 0, 0) !important;
}

[data-visual].is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    filter: blur(0) !important;
}

/* ============================================================
   5. SAINDO — quando o capítulo está no fim do range (sai)
   ============================================================ */

[data-content].is-exiting {
    opacity: 0 !important;
    transform: translate3d(-72px, 0, 0) !important;
    filter: blur(12px) !important;
}

[data-content].is-exiting.from-right {
    transform: translate3d(72px, 0, 0) !important;
}

[data-visual].is-exiting {
    opacity: 0 !important;
    transform: translate3d(60px, -10px, 0) scale(0.94) !important;
    filter: blur(14px) !important;
}

/* ============================================================
   6. STAGGER nos filhos do card de texto (entrada progressiva)
   ============================================================ */

.chapter:not(.chapter--hero) [data-content] > * {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(6px);
    transition:
        opacity 700ms var(--ease-cinema),
        transform 700ms var(--ease-cinema),
        filter 700ms var(--ease-cinema);
}

[data-content].is-visible > * {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    filter: blur(0) !important;
}

[data-content].is-visible > *:nth-child(1) { transition-delay: 120ms; }
[data-content].is-visible > *:nth-child(2) { transition-delay: 240ms; }
[data-content].is-visible > *:nth-child(3) { transition-delay: 360ms; }
[data-content].is-visible > *:nth-child(4) { transition-delay: 480ms; }
[data-content].is-visible > *:nth-child(5) { transition-delay: 600ms; }

[data-content].is-exiting > * {
    opacity: 0 !important;
    transform: translate3d(0, -10px, 0) !important;
    filter: blur(6px) !important;
    transition-duration: 500ms !important;
    transition-delay: 0ms !important;
}

/* ============================================================
   7. CAPÍTULO FINAL — entrada e lock
   ============================================================ */

.chapter--final [data-content] {
    transition:
        opacity 1200ms var(--ease-cinema),
        transform 1200ms var(--ease-cinema),
        filter 1200ms var(--ease-cinema);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    [data-content],
    [data-content] > *,
    [data-visual] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}