/* Movimento. Regra: todo elemento nasce no estado final e visível. O JS só
   adiciona a classe "in" pouco antes de o elemento entrar na tela, e é aí que
   a animação roda, partindo do estado inicial dos keyframes. Sem JS (ou com
   movimento reduzido) nada se mexe e tudo aparece. */

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
}
@keyframes lineUp {
  from { transform: translateY(105%); }
}
@keyframes grow {
  from { transform: scaleY(0); }
}
@keyframes growX {
  from { transform: scaleX(0); }
}
@keyframes thud {
  from { opacity: 0; transform: rotate(-16deg) scale(1.9); }
  60% { opacity: 0.95; transform: rotate(-5deg) scale(0.96); }
}
@keyframes pop {
  from { opacity: 0; transform: translateY(8px); }
}

/* ---------- entrada do herói (roda ao carregar) ---------- */
.hero h1 .line > span { animation: lineUp 0.95s var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms + 120ms); }
.hero .eyebrow { animation: rise 0.7s var(--ease) both; }
.hero .sub { animation: rise 0.8s var(--ease) 0.45s both; }
.hero .cta-row { animation: rise 0.8s var(--ease) 0.6s both; }
.hero .note { animation: rise 0.8s var(--ease) 0.75s both; }
.card-shot { animation: rise 1s var(--ease) 0.3s both; }

/* ---------- ヘレナ escrito traço a traço (roda ao carregar e ao passar o mouse) ---------- */
@keyframes ink {
  from { stroke-dashoffset: 1; }
}
@keyframes tipMove {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
@keyframes tipFade {
  0% { opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { opacity: 0; }
}
.kanji.draw .ink use,
.kanji-h.draw .ink use {
  animation: ink var(--t, 0.8s) cubic-bezier(0.45, 0.05, 0.25, 1) var(--d, 0s) both;
}
@supports (offset-path: path("M0 0")) {
  .kanji .tip { offset-rotate: 0deg; }
  .kanji.draw .tip {
    animation:
      tipMove var(--t, 0.8s) cubic-bezier(0.45, 0.05, 0.25, 1) var(--d, 0s) both,
      tipFade var(--t, 0.8s) linear var(--d, 0s) both;
  }
}

/* ---------- entrada por rolagem ---------- */
.in[data-reveal] { animation: rise 0.8s var(--ease) both; animation-delay: var(--d, 0ms); }

.in .streak .day i { animation: grow 0.9s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 150ms); }
.in .energy i { animation: growX 1.3s var(--ease) 0.2s both; }
.in .bar span { animation: grow 0.8s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
.stamp.in { animation: thud 0.7s var(--ease) 0.25s both; }

/* itens da lista de comandos ao filtrar */
.list .item.pop { animation: pop 0.35s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }

/* abrir pergunta e tabela */
details[open] > .ans, details[open] > .tablewrap { animation: pop 0.3s var(--ease) both; }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Exceção de propósito: o ヘレナ se escrevendo. É um traço curto, sem
     deslocamento nem zoom na tela (o que a preferência existe para evitar),
     e é a marca da página. A ponta luminosa e o resto continuam desligados. */
  .kanji.draw .ink use,
  .kanji-h.draw .ink use {
    animation: ink var(--t, 0.8s) cubic-bezier(0.45, 0.05, 0.25, 1) var(--d, 0s) both !important;
  }
}