/* Entrada do topo das páginas (hero.js prepara e dispara).
   Título: cada palavra sobe de uma máscara, com um marcador que se desenha por baixo da parte laranja.
   Etiqueta, texto, botão e data: entram em cascata. Foto: sobe e assenta. Manchas: crescem do centro. */

/* Estado inicial (só enquanto a abertura/preparação decorre): tudo escondido, sem "flash" */
html.hero-pre .hero :is(.badge, .lead, .cta-row, .when, .hero-img, .blob.teal, .hero-text > :not(h1), .hero-art > *) { opacity: 0; }
html.hero-pre .hw > span { transform: translateY(115%); }

/* Palavras do título (máscara) */
.hw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .16em; margin: 0 -.06em -.16em; }
.hw > span { display: inline-block; }

/* Marcador por trás da parte laranja do título */
.hero h1 em, .hero h1 .acc {
  font-style: normal; padding-bottom: .02em;
  background: linear-gradient(var(--hl, rgba(255, 107, 26, .22)), var(--hl, rgba(255, 107, 26, .22))) no-repeat 0 90% / 0 .34em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

@keyframes h-word { from { transform: translateY(115%); } }
@keyframes h-up   { from { opacity: 0; transform: translateY(20px); } }
@keyframes h-pop  { from { opacity: 0; transform: scale(.82); } }
@keyframes h-side { from { opacity: 0; transform: translateX(-26px); } }
@keyframes h-img  { from { opacity: 0; transform: translateY(54px) scale(.9); } }
@keyframes h-blob { from { opacity: 0; transform: scale(.25); } }
@keyframes h-mark { to { background-size: 100% .34em; } }
@keyframes h-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes h-fade { from { opacity: 0; } }

html.hero-go .hw > span { animation: h-word .95s cubic-bezier(.22, 1, .36, 1) calc(.3s + var(--i, 0) * 75ms) backwards; }
html.hero-go .hero h1 em, html.hero-go .hero h1 .acc { animation: h-mark .9s cubic-bezier(.65, 0, .35, 1) calc(.45s + var(--n, 6) * 75ms) forwards; }

html.hero-go .hero .badge   { animation: h-pop .75s cubic-bezier(.34, 1.56, .64, 1) .05s backwards; transform-origin: left center; }
html.hero-go .hero .lead    { animation: h-up .95s cubic-bezier(.22, 1, .36, 1) .7s backwards; }
html.hero-go .hero .cta-row { animation: h-pop .85s cubic-bezier(.34, 1.56, .64, 1) 1s backwards; transform-origin: left center; }
html.hero-go .hero .when    { animation: h-side .85s cubic-bezier(.22, 1, .36, 1) 1.2s backwards; }
html.hero-go .hero-img      { animation: h-img 1.25s cubic-bezier(.22, 1, .36, 1) .25s backwards; }
html.hero-go .hero-img .blob.yellow { animation: h-blob 1.1s cubic-bezier(.22, 1, .36, 1) .1s backwards; }
html.hero-go .hero .blob.teal       { animation: h-blob 1.1s cubic-bezier(.22, 1, .36, 1) .55s backwards; }
html.hero-go .hero-img img  { animation: h-float 8s ease-in-out 1.8s infinite; }       /* flutua devagar, quase impercetível */

/* Páginas das boxes */
html.hero-go .hero-text > .back { animation: h-side .8s cubic-bezier(.22, 1, .36, 1) .05s backwards; }
html.hero-go .hero-text > .kick { animation: h-up .8s cubic-bezier(.22, 1, .36, 1) .15s backwards; }
html.hero-go .hero-text > :is(.cta, .soon, .soon-note) { animation: h-pop .85s cubic-bezier(.34, 1.56, .64, 1) 1s backwards; transform-origin: left center; }
html.hero-go .hero-art .pa  { animation: h-img 1.25s cubic-bezier(.22, 1, .36, 1) .25s backwards; }
html.hero-go .hero-art .pa.front-art { animation-delay: .45s; }
html.hero-go .hero-art i    { animation: h-blob 1s cubic-bezier(.22, 1, .36, 1) .2s backwards; }

/* Menos movimento: ficam só deslocamentos curtos (palavras dentro da máscara, 10 a 18 px nos restantes);
   desaparecem os zooms, as molas e a flutuação da foto */
@keyframes h-soft { from { opacity: 0; transform: translateY(10px); } }
@keyframes h-soft-lg { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  html.hero-go .hero :is(.badge, .lead, .cta-row, .when, .hero-text > *) { animation-name: h-soft !important; }
  html.hero-go .hero :is(.hero-img, .hero-art .pa) { animation-name: h-soft-lg !important; }
  html.hero-go .hero :is(.blob, .hero-art i) { animation-name: h-fade !important; }
  html.hero-go .hero-img img { animation: none; }
}