/*
 * scroll-animations.css
 * Animações de entrada acionadas por scroll via IntersectionObserver.
 * Uso: adicione class="scroll-animate" data-animation="<tipo>" ao elemento.
 * Tipos: fade-up | fade-down | fade-left | fade-right | zoom-in | fade-in
 * Delay opcional: style="--delay: 150ms"
 */

/* ─── Estado inicial — elementos ocultos ou deslocados ─────────────────────── */

.scroll-animate {
  opacity: 0;
  transition:
    opacity 0.6s ease var(--delay, 0ms),
    transform 0.6s ease var(--delay, 0ms);
  will-change: opacity, transform;
}

.scroll-animate[data-animation="fade-up"]    { transform: translateY(40px); }
.scroll-animate[data-animation="fade-down"]  { transform: translateY(-40px); }
.scroll-animate[data-animation="fade-left"]  { transform: translateX(40px); }
.scroll-animate[data-animation="fade-right"] { transform: translateX(-40px); }
.scroll-animate[data-animation="zoom-in"]    { transform: scale(0.88); }
.scroll-animate[data-animation="fade-in"]    { transform: none; }

/* ─── Estado visível ────────────────────────────────────────────────────────── */

.scroll-animate.is-visible {
  opacity: 1;
  transform: none;
}

/* ─── Fallback: respeito a prefers-reduced-motion ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .scroll-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}