/* AureaClin · site público
   Movimento. Nada fica escondido sem JavaScript: as classes que escondem o que ainda vai ser
   revelado só valem depois que o script marca <html class="js">. Quem pede menos movimento
   ao aparelho vê tudo parado e completo (fim do arquivo). */

/* ───────── Revelar ao rolar ───────── */

.js [data-revelar] {
  opacity: 0; transform: translateY(1.75rem);
  transition: opacity 1s var(--lento), transform 1.1s var(--lento);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-revelar].visivel { opacity: 1; transform: none; }

/* Um grupo revela os filhos em sequência. */
.js [data-revelar="grupo"] { opacity: 1; transform: none; }
.js [data-revelar="grupo"] > * {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity .9s var(--lento), transform 1s var(--lento);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-revelar="grupo"].visivel > * { opacity: 1; transform: none; }
/* Depois de revelado, o cartão volta a responder ao cursor sem o atraso da entrada. */
.js [data-revelar="grupo"].assentou > * { transition: transform .6s var(--lento), box-shadow .6s var(--lento); transition-delay: 0s; }

/* Títulos: as palavras sobem de trás de uma máscara. */
.js [data-titulo] .palavra { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .16em; margin: -.12em 0 -.16em; }
.js [data-titulo] .palavra > span {
  display: inline-block; transform: translateY(112%);
  transition: transform 1.15s var(--lento);
  transition-delay: calc(var(--atraso, 0ms) + var(--i, 0) * 38ms);
}
.js [data-titulo].visivel .palavra > span { transform: none; }

/* ───────── Abertura ───────── */

.js .abertura [data-entra] { opacity: 0; transform: translateY(1.25rem); }
.js .abertura.pronta [data-entra] {
  opacity: 1; transform: none;
  transition: opacity 1s var(--lento), transform 1.1s var(--lento);
  transition-delay: calc(.35s + var(--i, 0) * .11s);
}
.js .palco { opacity: 0; transform: translateY(3.5rem); }
.js .abertura.pronta .palco { opacity: 1; transform: none; transition: opacity 1.2s var(--lento) .55s, transform 1.5s var(--lento) .55s; }

/* A malha áurea se desenha: os quadrados em sequência e a espiral por cima. */
.js .malha rect, .js .malha path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .abertura.pronta .malha rect { animation: traco 1.5s var(--lento) forwards; animation-delay: calc(.25s + var(--i, 0) * .13s); }
.js .abertura.pronta .malha path { animation: traco 3.4s cubic-bezier(.65, 0, .35, 1) .5s forwards; }
@keyframes traco { to { stroke-dashoffset: 0; } }

/* ───────── Letreiro ───────── */

.js .letreiro__fita { animation: letreiro 60s linear infinite; }
.letreiro:hover .letreiro__fita { animation-play-state: paused; }
@keyframes letreiro { to { transform: translateX(-50%); } }

/* ───────── Recortes: a cena toca quando o recorte entra em cena (.ativo) ───────── */

@keyframes surge { from { opacity: 0; transform: translateY(.75em); } }
@keyframes brota { from { opacity: 0; transform: scale(.86); } }
@keyframes aparece { from { opacity: 0; } }
@keyframes some { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes escolhe { from { background: var(--branco); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha); } }
@keyframes digita { from { width: 0; } }
@keyframes onda { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(76, 199, 154, .6); } 100% { box-shadow: 0 0 0 .75em rgba(76, 199, 154, 0); } }
@keyframes cresce { from { transform: scaleX(0); } }

.ativo .surge { animation: surge .8s var(--lento) both; animation-delay: calc(var(--q, 0) * 1s); }
.ativo .brota { animation: brota .8s var(--lento) both; animation-delay: calc(var(--q, 0) * 1s); }
.ativo .aparece { animation: aparece .6s ease both; animation-delay: calc(var(--q, 0) * 1s); }
.ativo .some { animation: some .35s ease both; animation-delay: calc(var(--q, 0) * 1s); }
.ativo .escolhe { animation: escolhe .45s ease both; animation-delay: calc(var(--q, 0) * 1s); }
.ativo .r-digita { animation: digita 1.5s steps(34, end) both; animation-delay: calc(var(--q, 0) * 1s); }
.ativo .r-voz i { animation: onda 1s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .14s); }
.r-voz i { transform: scaleY(.6); }
.r-voz i:nth-child(2n) { transform: scaleY(1); }

.t-aviso i { animation: pulsa 1.8s ease-out infinite; }

/* Indicadores: as linhas do gráfico se desenham */
.js .g-grafico path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .visivel .g-grafico path[pathLength] { animation: traco 2.4s var(--lento) forwards; animation-delay: calc(.4s + var(--i, 0) * .25s); }
.js .g-grafico .g-area { opacity: 0; }
.js .visivel .g-grafico .g-area { animation: aparece 1.4s ease 1.2s forwards; }

/* Miniaturas dos adicionais */
.js .visivel .m-marca { animation: aparece .6s ease both; animation-delay: calc(.6s + var(--k, 0) * .18s); }

/* ───────── Menos movimento ───────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-revelar], .js [data-revelar="grupo"] > *, .js .abertura [data-entra], .js .palco { opacity: 1; transform: none; }
  .js [data-titulo] .palavra > span { transform: none; }
  .js .malha rect, .js .malha path, .js .g-grafico path[pathLength] { stroke-dashoffset: 0; }
  .js .g-grafico .g-area { opacity: 1; }
  .palco__quadro { transform: none; }
}

@media print {
  .topo { display: none; }
  .js [data-revelar], .js [data-revelar="grupo"] > *, .js .abertura [data-entra], .js .palco { opacity: 1 !important; transform: none !important; }
  .js [data-titulo] .palavra > span { transform: none !important; }
}