/* Movimento no scroll. Leve: só opacity e transform (nada de layout), uma vez por elemento.
   Quem marca os elementos é movimento.js (.rv), com atraso em cascata via --d.
   Sem JS ou com "reduzir movimento", a página aparece inteira e parada. */

:root { --mola: cubic-bezier(.22, 1, .36, 1); }

/* ---------- herói: entra no carregamento, curto e discreto ---------- */
.mov .hero-topo, .mov .hero-texto > * { animation: sobe .6s cubic-bezier(.2, .7, .2, 1) both; }
.mov .hero-texto > :nth-child(1) { animation-delay: .05s; }
.mov .hero-texto > :nth-child(2) { animation-delay: .1s; }
.mov .hero-texto > :nth-child(3) { animation-delay: .18s; }
.mov .hero-texto > :nth-child(4) { animation-delay: .24s; }
.mov .hero-texto > :nth-child(5) { animation-delay: .3s; }
.mov .hero-texto > :nth-child(n+6) { animation-delay: .36s; }
.mov .hero-bg img { animation: foto 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.mov .hero-pedir path { animation: traco .7s .55s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes sobe { from { opacity: 0; transform: translateY(16px); } }
@keyframes foto { from { opacity: .4; transform: scale(1.02); } }
@keyframes traco { from { stroke-dashoffset: 1; } }

/* ---------- revelar no scroll ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--mola), transform .9s var(--mola); transition-delay: var(--d, 0s); }
.rv.rv-zoom { transform: translateY(18px) scale(.96); }
.rv.rv-esq { transform: translateX(-36px); }
.rv.rv-dir { transform: translateX(36px); }
.rv.on { opacity: 1; transform: none; }

/* o "Vs" do antes x depois dá um pulinho */
.vs.rv { transform: scale(.4) rotate(-20deg); transition: opacity .5s ease, transform .8s cubic-bezier(.34, 1.56, .64, 1); }
.vs.rv.on { transform: none; }

/* barra de progresso do "continuar de onde parou" enche quando aparece */
.progresso i { transition: transform 1.4s var(--mola) .3s; transform-origin: left; }
.app.rv:not(.on) .progresso i { transform: scaleX(0); }

/* sublinhado/ênfase dos títulos: acende depois que o título entra */
h2.rv .enfase { transition: opacity .7s ease .35s; }
h2.rv:not(.on) .enfase { opacity: .15; }

/* ---------- grafismo e fotos acompanhando o scroll (variáveis vindas do JS) ---------- */
.raios svg { transform: rotate(var(--giro, 0deg)); will-change: transform; }
.faixa > img { transform: translateY(var(--para, 0px)) scale(1.12); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .mov .hero-topo, .mov .hero-texto > *, .mov .hero-bg img, .mov .hero-pedir path { animation: none; }
  .rv, .rv.on, .vs.rv { opacity: 1; transform: none; transition: none; }
  h2.rv:not(.on) .enfase { opacity: 1; }
  .app.rv:not(.on) .progresso i { transform: none; }
  .raios svg, .faixa > img { transform: none; }
}