/* =============================================================
   BateClick — Animações e micro-interações (sem vídeo)
   ============================================================= */

/* Estados iniciais "escondidos" só entram quando o JS está ativo (.js) e
   o usuário não pediu menos movimento — assim, sem JS, tudo aparece. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(26px);
    transition: opacity 1.1s var(--ease-out-expo), transform 1.1s var(--ease-out-expo);
    will-change: opacity, transform;
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  .js .reveal-stagger > * {
    opacity: 0; transform: translateY(24px);
    transition: opacity 1.1s var(--ease-out-expo), transform 1.1s var(--ease-out-expo);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }

  /* hero — linhas sobem de dentro do recorte (efeito editorial) */
  .js .hero h1 .line-inner {
    transform: translateY(110%);
    transition: transform 1.05s var(--ease-out-expo);
    transition-delay: calc(var(--li, 0) * 0.12s + 0.15s);
  }
  .hero h1.is-revealed .line-inner { transform: translateY(0); }
}

/* Ken Burns para as cenas */
@keyframes ken-burns {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.08) translateY(-1.6%); }
}
@keyframes ken-burns2 {
  from { transform: scale(1.06) translate(0, 0); }
  to { transform: scale(1) translate(1.5%, 1%); }
}

/* deriva lenta dos feixes do hero */
@keyframes beam-drift-l { from { transform: rotate(18deg) translateX(0); } to { transform: rotate(15deg) translateX(4%); } }
@keyframes beam-drift-r { from { transform: rotate(-18deg) translateX(0); } to { transform: rotate(-15deg) translateX(-4%); } }
@media (prefers-reduced-motion: no-preference) {
  .beam-moss { animation: beam-drift-l 9s ease-in-out infinite alternate; }
  .beam-copper { animation: beam-drift-r 9s ease-in-out infinite alternate; }
  .spark { animation: spark-pulse 4.5s ease-in-out infinite; }
}
@keyframes spark-pulse { 0%,100% { opacity: 0.75; transform: translate(-50%,-50%) scale(0.96); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

@keyframes scroll-rail { 0% { top: -20px; } 60%,100% { top: 56px; } }

/* faísca do impacto no SVG do hero */
@keyframes impact-flash { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .impact-core { animation: impact-flash 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}

/* Fallback obrigatório de acessibilidade */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > *, .hero h1 .line-inner { opacity: 1 !important; transform: none !important; }
}