/* ==========================================================================
   animations.css — reveals, hero, parallax, modos reduced / lite / fallback
   Regras: só transform/opacity; estados escondidos só existem sob .js;
   prefers-reduced-motion NÃO desliga tudo (vira fades/escala curtos).
   ========================================================================== */

/* ---------- Reveal ao rolar ---------- */
.js [data-reveal] {
  --reveal-x: 0px;
  --reveal-y: 32px;
  --reveal-s: 1;
  opacity: 0;
  transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-s));
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="up"]    { --reveal-y: 32px; }
.js [data-reveal="fade"]  { --reveal-y: 0px; }
.js [data-reveal="left"]  { --reveal-x: -40px; --reveal-y: 0px; }
.js [data-reveal="right"] { --reveal-x: 40px;  --reveal-y: 0px; }
.js [data-reveal="scale"] { --reveal-y: 0px;   --reveal-s: .94; }

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* reveal terminou (JS adiciona .is-revealed e remove --reveal-delay):
   hovers voltam sem atraso */
.js [data-reveal].is-revealed {
  transition-delay: 0ms;
}

/* ---------- Hero (entrada via WAAPI no JS; CSS só define início/fim) ---------- */
.js [data-hero] {
  opacity: 0;
}

.js [data-hero].is-shown {
  opacity: 1;
}

/* ---------- Parallax ---------- */
[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

/* ==========================================================================
   .is-reduced — movimento reduzido: mantém animação, só fade/escala curtos
   ========================================================================== */
.is-reduced [data-reveal] {
  --reveal-x: 0px !important;
  --reveal-y: 0px !important;
  --reveal-s: .985 !important;
  transition-duration: var(--dur), var(--dur);
}

.is-reduced [data-parallax] {
  transform: none;
}

.is-reduced .site-nav,
.is-reduced .site-nav__list > li {
  transform: none !important;
}

.is-reduced .btn--primary::after {
  display: none;
}

/* bento: ilustrações e borda de luz param no estado final (sem loop) */
.is-reduced .viz__orbit,
.is-reduced .viz__sun,
.is-reduced .viz__moon,
.is-reduced .card__border::before {
  animation: none;
}
.is-reduced .viz__orbit { transform: rotate(60deg); }
.is-reduced .viz__moon { opacity: 0; }

/* hero: faixas paradas, só a opacidade pulsa devagar */
.is-reduced .hero__beam {
  left: auto;
  right: 18%;
  transform: none;
  animation: hero-beam-pulse 9s var(--ease-in-out) var(--beam-delay) infinite alternate;
}
.is-reduced .hero__beam--2 { right: 30%; }
.is-reduced .hero__beam--3 { right: 8%; }

.is-reduced .hero__scroll-icon::before {
  animation: hero-beam-pulse 3s var(--ease-in-out) infinite alternate;
}

@keyframes hero-beam-pulse {
  from { opacity: .1; }
  to   { opacity: .45; }
}

.is-reduced .hours__status::after {
  animation-duration: 3s;
}

/* ==========================================================================
   .is-lite — hardware fraco: mantém reveals/contadores/abas/hero;
   sem spotlight nos cards, sem parallax, sem backdrop-filter.
   (pode chegar ~1,2s depois do load, então nada aqui "pula")
   ========================================================================== */
.is-lite [data-parallax] {
  transform: none;
}

/* hero: só 1 faixa de luz */
.is-lite .hero__beam--2,
.is-lite .hero__beam--3 {
  display: none;
}

.is-lite [data-reveal] {
  --reveal-y: 20px;
}
.is-lite [data-reveal="left"]  { --reveal-x: -24px; --reveal-y: 0px; }
.is-lite [data-reveal="right"] { --reveal-x: 24px;  --reveal-y: 0px; }
.is-lite [data-reveal="fade"],
.is-lite [data-reveal="scale"] { --reveal-y: 0px; }

.is-lite * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ==========================================================================
   .anim-fallback — o JS não iniciou em 3s: tudo visível, sem animação
   ========================================================================== */
.anim-fallback [data-reveal],
.anim-fallback [data-hero] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ==========================================================================
   prefers-reduced-motion — mesma regra do .is-reduced, mesmo antes do JS
   (não desliga as animações, só remove deslocamentos/loops longos)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__beam {
    left: auto;
    right: 18%;
    transform: none;
    animation: hero-beam-pulse 9s var(--ease-in-out) var(--beam-delay) infinite alternate;
  }
  .hero__beam--2 { right: 30%; }
  .hero__beam--3 { right: 8%; }
  .hero__scroll-icon::before {
    animation: hero-beam-pulse 3s var(--ease-in-out) infinite alternate;
  }

  .js [data-reveal] {
    --reveal-x: 0px !important;
    --reveal-y: 0px !important;
    --reveal-s: .985 !important;
    transition-duration: var(--dur), var(--dur);
  }

  [data-parallax] {
    transform: none;
  }

  .btn--primary::after {
    display: none;
  }

  .viz__orbit,
  .viz__sun,
  .viz__moon,
  .card__border::before {
    animation: none;
  }
  .viz__orbit { transform: rotate(60deg); }
  .viz__moon { opacity: 0; }

  .site-nav,
  .js .site-nav__list > li {
    transform: none !important;
  }

  .embed::before {
    animation-duration: 2.4s;
  }

  .hours__status::after {
    animation-duration: 3s;
  }
}