/* motion.css - apenas estados iniciais e utilitarios do motion.js. Layout e tipografia ficam no site.css.
   Estados escondidos so existem sob html.motion:not(.motion-live): sem JS, em movimento reduzido ou se
   motion.js falhar (motion-boot.js remove .motion apos 2,5 s), tudo fica visivel. */

html.motion:not(.motion-live) [data-reveal],
html.motion:not(.motion-live) [data-split],
html.motion:not(.motion-live) [data-draw] {
  opacity: 0;
}

canvas[data-orb] {
  display: block;
}

/* data-split: palavra com mascara (overflow) e miolo que sobe. O padding/margin negativo evita cortar
   ascendentes e descendentes em titulos de entrelinha curta. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: 0.12em;
  margin-block: -0.12em;
}

.split-word-inner {
  display: inline-block;
}

/* data-marquee: classe is-marquee aplicada pelo motion.js ao trilho (so quando o laco esta ativo; sem JS o
   layout do site.css segue valendo). O filho vira linha unica; o espaco entre itens deve ficar dentro do
   filho (padding/separador), nao em gap do trilho, para o laco fechar sem emenda. */
[data-marquee].is-marquee {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow: hidden;
}

[data-marquee].is-marquee > * {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  min-width: max-content;
}

/* separador do ultimo item tambem aparece, para a emenda entre copias manter o ritmo */
[data-marquee].is-marquee > * > :last-child::after {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-split],
  [data-draw] {
    opacity: 1 !important;
  }
}