/**
 * Movimento da landing (SPEC-11 §6, repo visie/doctor-woo, portado e
 * simplificado). Só `transform` e `opacity` (sem CLS).
 *
 * Contrato da revelação (conteúdo legível sem JS):
 *   - Sem JS: nada fica escondido. O estado inicial só vale com `html.js`,
 *     classe que o script marca no <html> logo no <head>.
 *   - O JS (IntersectionObserver) adiciona `.is-visible` ao entrar na tela.
 *   - prefers-reduced-motion: tudo visível, sem transição.
 *
 * Fora do original: scroll timelines (`animation-timeline: view()`), cascata,
 * chegada, carrossel, citações, hero/dores encenados, ruptura, FAQ e spin.
 */

/* ── revelação ao rolar ─────────────────────────────────────────────────
   data-reveal         : sobe suave (distância em --reveal-x, 16px por padrão)
   data-reveal-stagger : nos filhos, atraso de --stagger × 80ms (0, 1, 2…) */
html.js [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(var(--reveal-x, 16px));
}
html.js [data-reveal] {
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Não ponha data-reveal direto num `.glass`: o transition acima sobrescreve o
   dele (hover/escala). Revele um wrapper. */
html.js [data-reveal-stagger] > [data-reveal],
html.js [data-reveal][data-reveal-stagger] {
  transition-delay: calc(var(--stagger, 0) * 80ms);
}

/* ── marquee (texto direita → esquerda, contínuo) ───────────────────────
   O laço anda exatamente UMA cópia da faixa e recomeça, daí a divisão pelo
   número de cópias que a track carrega (--marquee-copias, 4 por padrão: com
   duas sobraria um vão em janelas mais largas que a faixa). Marcação:
   <div class="marquee"><div class="marquee-track" style="--marquee-copias:4">
     4× <span class="marquee-item">…</span></div></div> */
.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% / var(--marquee-copias, 4)));
  }
}

/* ── número que sobe (StatBig, via @property) ───────────────────────────
   O número final está SEMPRE no markup (`.stat-value`, texto real); o
   contador é um pseudo-elemento por cima, só com scroll timeline e html.js.
   `inherits: true` é load-bearing: quem anima é o .stat-count, mas quem LÊ é
   o ::before, e pseudo herda do elemento de origem.
   Marcação: <span class="stat-count" style="--stat-target:41"><span
   class="stat-value">41</span></span> (data-pad="2|3" em grupos após o 1º). */
@property --stat-count {
  syntax: '<integer>';
  initial-value: 0;
  inherits: true;
}
@keyframes stat-count {
  from {
    --stat-count: 0;
  }
  to {
    --stat-count: var(--stat-target, 0);
  }
}
@counter-style stat-pad-2 {
  system: extends decimal;
  pad: 2 '0';
}
@counter-style stat-pad-3 {
  system: extends decimal;
  pad: 3 '0';
}
.stat-count {
  position: relative;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
@supports (animation-timeline: view()) {
  html.js .stat-count {
    animation: stat-count 1ms linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 40%;
  }
  html.js .stat-count::before {
    content: counter(stat) '';
    counter-reset: stat calc(var(--stat-count));
  }
  html.js .stat-count[data-pad='2']::before {
    content: counter(stat, stat-pad-2) '';
  }
  html.js .stat-count[data-pad='3']::before {
    content: counter(stat, stat-pad-3) '';
  }
  html.js .stat-count > .stat-value {
    /* o valor real fica para leitor de tela e para quem não anima */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ── reduced motion: para o que é contínuo, mostra tudo ────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal]:not(.is-visible) {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .marquee-track {
    animation: none;
  }
  /* A faixa parada fica legível: só a primeira cópia (as outras são
     aria-hidden), quebrando linha em vez de cortar. */
  .marquee-track {
    width: auto;
    flex-wrap: wrap;
  }
  .marquee-track > [aria-hidden='true'] {
    display: none;
  }
  html.js .stat-count {
    animation: none;
  }
  html.js .stat-count::before {
    content: none;
  }
  html.js .stat-count > .stat-value {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }
}