/* ═══════════════════════════════════════════════════════════════
   Estúdio Terraço — animações de scroll (progressive enhancement)
   Os estados iniciais escondidos só valem sob html.js (classe
   adicionada pelo effects.js). Sem JS, todo o conteúdo fica visível.
   ═══════════════════════════════════════════════════════════════ */

/* Evita scrollbar horizontal durante reveals laterais */
html.js, html.js body { overflow-x: clip; }
@supports not (overflow: clip) {
  html.js, html.js body { overflow-x: hidden; }
}

/* ── Scroll-reveal ── */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1),
              transform .8s cubic-bezier(.22, .61, .36, 1);
}
html.js [data-reveal="left"]  { transform: translateX(-36px); }
html.js [data-reveal="right"] { transform: translateX(36px); }
html.js [data-reveal].revealed { opacity: 1; transform: none; }

/* Em telas pequenas, reveals laterais viram verticais (sem overflow) */
@media (max-width: 767.98px) {
  html.js [data-reveal="left"],
  html.js [data-reveal="right"] { transform: translateY(28px); }
}

/* ── Parallax ── */
[data-parallax] { will-change: transform; }

/* ── Entrada cinematográfica do hero (home) ── */
.hero-line { display: block; overflow: hidden; }
.hero-line > span { display: block; }
html.js .hero-line > span {
  transform: translateY(112%);
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}
html.js .hero-line:nth-child(1) > span { transition-delay: .08s; }
html.js .hero-line:nth-child(2) > span { transition-delay: .2s; }
html.js .hero-line:nth-child(3) > span { transition-delay: .32s; }
html.js.hero-in .hero-line > span { transform: none; }

html.js .hero-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease;
}
html.js.hero-in .hero-fade { opacity: 1; transform: none; }

/* ── Acessibilidade: usuário pediu menos movimento ── */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js .hero-line > span,
  html.js .hero-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-parallax] { transform: none !important; }
}