/* ============================================================
   CINEMATIC LP — Animações: Reveal, Stagger, Parallax
   ============================================================ */

/* --- REVEAL AO SCROLL --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes de direção */
[data-reveal="left"] {
  transform: translateX(-28px);
}
[data-reveal="left"].is-visible {
  transform: translateX(0);
}

[data-reveal="right"] {
  transform: translateX(28px);
}
[data-reveal="right"].is-visible {
  transform: translateX(0);
}

[data-reveal="scale"] {
  transform: scale(0.94) translateY(16px);
}
[data-reveal="scale"].is-visible {
  transform: scale(1) translateY(0);
}

/* --- STAGGER (aplicado via JS) --- */
[data-stagger] [data-reveal]:nth-child(1) { transition-delay: 0ms; }
[data-stagger] [data-reveal]:nth-child(2) { transition-delay: 80ms; }
[data-stagger] [data-reveal]:nth-child(3) { transition-delay: 160ms; }
[data-stagger] [data-reveal]:nth-child(4) { transition-delay: 240ms; }
[data-stagger] [data-reveal]:nth-child(5) { transition-delay: 320ms; }

/* --- ENTRADA DO HERO (sem IntersectionObserver — visível imediatamente) --- */
.hero-content .eyebrow {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.hero-content h1 {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

.hero-content .hero-sub {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

.hero-content .btn-cta {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-content .btn-cta.btn-entered {
  opacity: 1;
  transform: none;
}

.hero-content .hero-trust {
  opacity: 0;
  animation: hero-enter 0.6s ease 1.0s forwards;
}

@keyframes hero-enter {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Entrada do visual 3D */
.hero-visual {
  opacity: 0;
  animation: visual-enter 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

@keyframes visual-enter {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* --- GLOW PULSE no CTA (pós-carregamento) --- */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 32px rgba(122, 148, 184, 0.45),
      0 0 72px rgba(92, 122, 158, 0.22);
  }
  50% {
    box-shadow:
      0 0 52px rgba(122, 148, 184, 0.65),
      0 0 100px rgba(92, 122, 158, 0.38);
  }
}

.btn-cta {
  animation: glow-pulse 4s ease-in-out 1.5s infinite;
}

.btn-cta:hover {
  animation: none;
  opacity: 1;
}

/* --- PARALLAX HELPERS (usados via JS) --- */
.parallax-slow  { will-change: transform; }
.parallax-mid   { will-change: transform; }
.parallax-fast  { will-change: transform; }

/* ─────────────────────────────────────────────────────────────
   SEÇÃO 3 — Micro-animações de leitura
───────────────────────────────────────────────────────────── */

/* Keyframes compartilhados */
@keyframes slide-from-left {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes chip-pop {
  from { opacity: 0; transform: scale(0.82) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes card-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

/* ── TENTATIVAS: itens entram em fila da esquerda ── */
.tentativas-list .tentativas-item,
.tentativas-card .tentativas-note {
  opacity: 0;
  transform: translateX(-18px);
}

.tentativas-card.is-visible .tentativas-item {
  animation: slide-from-left 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tentativas-card.is-visible .tentativas-item:nth-child(1) { animation-delay: 0.30s; }
.tentativas-card.is-visible .tentativas-item:nth-child(2) { animation-delay: 0.42s; }
.tentativas-card.is-visible .tentativas-item:nth-child(3) { animation-delay: 0.54s; }
.tentativas-card.is-visible .tentativas-item:nth-child(4) { animation-delay: 0.66s; }
.tentativas-card.is-visible .tentativas-item:nth-child(5) { animation-delay: 0.78s; }
.tentativas-card.is-visible .tentativas-item:nth-child(6) { animation-delay: 0.90s; }

.tentativas-card.is-visible .tentativas-note {
  animation: slide-from-left 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.02s both;
}

/* ── ESTADO CHIPS: entram com pop ── */
.estados-row .estado-chip {
  opacity: 0;
  transform: scale(0.82) translateY(8px);
}

.root-cause-block.is-visible .estado-chip {
  animation: chip-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.root-cause-block.is-visible .estado-chip:nth-child(1) { animation-delay: 0.35s; }
.root-cause-block.is-visible .estado-chip:nth-child(2) { animation-delay: 0.48s; }
.root-cause-block.is-visible .estado-chip:nth-child(3) { animation-delay: 0.61s; }
.root-cause-block.is-visible .estado-chip:nth-child(4) { animation-delay: 0.74s; }

/* ── MISMATCH ROWS: entram em sequência ── */
.mismatch-grid .mismatch-row {
  opacity: 0;
  transform: translateX(-14px);
}

.mismatch-block.is-visible .mismatch-row {
  animation: slide-from-left 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mismatch-block.is-visible .mismatch-row:nth-child(1) { animation-delay: 0.20s; }
.mismatch-block.is-visible .mismatch-row:nth-child(2) { animation-delay: 0.33s; }
.mismatch-block.is-visible .mismatch-row:nth-child(3) { animation-delay: 0.46s; }
.mismatch-block.is-visible .mismatch-row:nth-child(4) { animation-delay: 0.59s; }

/* ── VIRADA ITEMS: entram em sequência ── */
.virada-items .virada-item {
  opacity: 0;
  transform: translateX(-20px);
}

.virada-block.is-visible .virada-item {
  animation: slide-from-left 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.virada-block.is-visible .virada-item:nth-child(1) { animation-delay: 0.18s; }
.virada-block.is-visible .virada-item:nth-child(2) { animation-delay: 0.36s; }

/* ── METHOD STEPS: flutuam suavemente após entrar ── */
#solucao .method-block.is-visible .method-step:nth-child(1) {
  animation: card-float 7s ease-in-out 0.5s infinite;
}
#solucao .method-block.is-visible .method-step:nth-child(2) {
  animation: card-float 7s ease-in-out 4s infinite;
}

/* ─────────────────────────────────────────────────────────────
   SEÇÃO 7 — Entregáveis: card principal flutua
───────────────────────────────────────────────────────────── */

/* float-entrega é definido inline em sections.css via @keyframes float-entrega */
/* Os mini cards reusam float-m1/m2/m3 de 3d.css */

/* Reveal do copy (elementos com data-reveal já são tratados pelo observer global) */

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .entrega-main {
    animation: none;
  }
  .entrega-float-1,
  .entrega-float-2,
  .entrega-float-3 {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tentativas-list .tentativas-item,
  .tentativas-card .tentativas-note,
  .estados-row .estado-chip,
  .mismatch-grid .mismatch-row,
  .virada-items .virada-item {
    opacity: 1;
    transform: none;
    animation: none;
  }

  #solucao .method-block.is-visible .method-step:nth-child(1),
  #solucao .method-block.is-visible .method-step:nth-child(2) {
    animation: none;
  }
}