/* =========================================================
   Movimento: entrada do hero, revelação no scroll, parallax.
   Tudo só vale com JS ativo (classe .js no <html>) e é desligado
   para quem prefere menos movimento.
   ========================================================= */

:root { --ease: cubic-bezier(.2,.7,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); }

/* ---------- Barra de progresso de leitura ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Hero: entrada ao carregar ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes riseBlur { from { opacity: 0; transform: translateY(34px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ringIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes bookIn { from { transform: translateY(70px) scale(.94); } to { transform: none; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes shadowFloat { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .75; scale: .92; } }
@keyframes spreadIn { from { letter-spacing: .7em; opacity: 0; } to { letter-spacing: .3em; opacity: 1; } }

.js .hero__meta { animation: spreadIn 1.4s var(--ease-out) .15s both; }
.js .hero h1 { animation: riseBlur 1.3s var(--ease-out) .3s both; }
.js .hero h1 em { animation: riseBlur 1.3s var(--ease-out) .55s both; }
.js .hero__lead { animation: rise 1.1s var(--ease-out) .8s both; }
.js .hero__sub { animation: rise 1.1s var(--ease-out) .95s both; }
.js .hero__ctas { animation: rise 1.1s var(--ease-out) 1.1s both; }
.js .hero__note { animation: fadeIn 1.2s var(--ease) 1.35s both; }
.js .hero__bsd { animation: fadeIn 1.6s var(--ease) .2s both; }
.js .hero__sources { animation: fadeIn 1.4s var(--ease) 1.5s both; }
.js .hero__ring--1 { animation: ringIn 2.2s var(--ease-out) 0s both; }
.js .hero__ring--2 { animation: ringIn 2.2s var(--ease-out) .25s both; }
/* O livro entra só com movimento (sem sumir), para não atrasar o carregamento da capa. */
.js .book-fit { animation: bookIn 1.8s var(--ease-out) .2s both; }
.js .book-persp { animation: float 7s ease-in-out 2s infinite; }
.js .book-shadow { animation: shadowFloat 7s ease-in-out 2s infinite; }

/* ---------- Revelação no scroll ---------- */
.js [data-reveal] {
  opacity: 0;
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out), letter-spacing 1.4s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="up"]    { transform: translateY(40px); }
.js [data-reveal="blur"]  { transform: translateY(30px); filter: blur(10px); }
.js [data-reveal="he"]    { transform: scale(.94); filter: blur(12px); transition-duration: 1.6s, 1.8s, 1.8s; }
.js [data-reveal="left"]  { transform: translateX(-50px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal="zoom"]  { transform: scale(.94); }
.js [data-reveal="fade"]  { }
.js [data-reveal="spread"]:not(.is-in) { letter-spacing: .7em; }
.js [data-reveal="cover"] { transform: translateX(-40px) rotate(-4deg); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Ornamento: filetes crescem do centro, losango gira. */
.js .ornament[data-reveal] { opacity: 1; transform: none; }
.js .ornament[data-reveal] i { transform: scaleX(0); transition: transform 1.2s var(--ease-out) .1s; }
.js .ornament[data-reveal] i:first-child { transform-origin: 100% 50%; }
.js .ornament[data-reveal] i:last-child { transform-origin: 0 50%; }
.js .ornament[data-reveal] b { opacity: 0; transform: rotate(-135deg) scale(.4); transition: transform 1s var(--ease-out), opacity .6s; }
.js .ornament[data-reveal].is-in i { transform: scaleX(1); }
.js .ornament[data-reveal].is-in b { opacity: 1; transform: rotate(45deg) scale(1); }


/* Parallax (o JS escreve --py). */
.hero__ring, .voices__ring { translate: 0 var(--py, 0px); }

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .js *, .js *::before, .js *::after { animation: none !important; }
  .js [data-reveal], .js [data-reveal] * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .js [data-reveal="spread"]:not(.is-in) { letter-spacing: .34em; }
  .js .ornament[data-reveal] b { transform: rotate(45deg) !important; }
  .hero__ring, .voices__ring { translate: none; }
  .progress { display: none; }
}