/* ==========================================================================
   Peça Ajuda · Design System — Movimento
   Keyframes e utilitários de animação. Tudo respeita prefers-reduced-motion.
   Depende de: tokens.css
   ========================================================================== */

/* ---------------------------------------------------------------- Keyframes */

/* Entrada padrão: sobe, desfoca → nítido (assinatura herdada do Lumina) */
@keyframes reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Feixe de luz descendo pelas colunas do grid */
@keyframes beam-fall {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  8% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  92% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(var(--beam-travel, 110vh));
    opacity: 0;
  }
}

/* Partículas subindo dentro do botão primário */
@keyframes float-point {
  0% {
    transform: translateY(0);
  }
  85% {
    opacity: 0;
  }
  100% {
    transform: translateY(-48px);
    opacity: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Traço que risca uma palavra (ex.: "dinheiro") */
@keyframes strike-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Barras da waveform */
@keyframes wave {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(var(--wave-min, 0.35));
  }
}

/* Indicador "ao vivo" */
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--rgb-mint) / 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 8px rgb(var(--rgb-mint) / 0);
  }
}

/* Barra de progresso linear (autoplay) */
@keyframes progress-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ------------------------------------------------------------ Scroll reveal
   Uso:  <div data-reveal style="--reveal-delay: 200ms">
   Sem JS, o conteúdo aparece normalmente (o estado oculto só vale com .js). */
.js [data-reveal] {
  opacity: 0;
}

.js [data-reveal].is-revealed {
  animation: reveal var(--reveal-duration, var(--dur-reveal)) var(--ease-out) var(--reveal-delay, 0ms) both;
}

/* --------------------------------------------------------- Variantes de entrada
   data-reveal="fade|scale|left|right|clip|words" — mesma mecânica, outra curva.  */
@keyframes reveal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes reveal-scale {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.95);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes reveal-left {
  from {
    opacity: 0;
    transform: translate3d(-36px, 0, 0);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes reveal-right {
  from {
    opacity: 0;
    transform: translate3d(36px, 0, 0);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes reveal-clip {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0 round var(--radius-lg));
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--radius-lg));
    transform: none;
  }
}

@keyframes word-up {
  from {
    transform: translate3d(0, 110%, 0);
  }
  to {
    transform: none;
  }
}

/* Linha de luz que atravessa a borda superior de uma seção */
@keyframes beam-sweep {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateX(260%);
    opacity: 0;
  }
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

@keyframes typing-dot {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.js [data-reveal="fade"].is-revealed {
  animation-name: reveal-fade;
}

.js [data-reveal="scale"].is-revealed {
  animation-name: reveal-scale;
}

.js [data-reveal="left"].is-revealed {
  animation-name: reveal-left;
}

.js [data-reveal="right"].is-revealed {
  animation-name: reveal-right;
}

.js [data-reveal="clip"].is-revealed {
  animation-name: reveal-clip;
}

/* Palavras: o JS envolve cada palavra (.split-word > span) e marca .is-split.
   O título fica oculto até ser dividido, para não "piscar". */
.js [data-reveal="words"].is-split {
  opacity: 1;
}

.js [data-reveal="words"].is-revealed {
  animation: none;
}

.split-word {
  display: inline-block;
  overflow: clip;
  padding-block: 0.14em;
  margin-block: -0.14em;
  vertical-align: top;
}

.split-word > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
}

.is-revealed .split-word > span {
  animation: word-up 900ms var(--ease-out) calc(var(--reveal-delay, 0ms) + var(--wi, 0) * 45ms) both;
}

/* ------------------------------------------------------- Scroll (progresso)
   [data-progress] recebe --p (0 → 1) do JS conforme a posição na tela.
   [data-parallax] desloca o elemento suavemente (--parallax = amplitude).
   Nunca combine data-parallax e data-reveal no MESMO elemento.            */
[data-parallax] {
  transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * var(--parallax, 48px) * -1), 0);
  will-change: transform;
}

@media (max-width: 47.99em) {
  [data-parallax] {
    transform: none;
    will-change: auto;
  }
}

/* -------------------------------------------------------- Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
  }

  .split-word > span {
    transform: none;
  }

  [data-parallax] {
    transform: none;
  }

  [data-motion="decorative"] {
    display: none !important;
  }
}