/* animations.css — page load, scroll-triggered, hover */

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Page load (hero) ────────────────────────────────────── */
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

.fade-in-up.delay-1 { animation-delay: 150ms; }
.fade-in-up.delay-2 { animation-delay: 300ms; }
.fade-in-up.delay-3 { animation-delay: 450ms; }
.fade-in-up.delay-4 { animation-delay: 600ms; }

/* ── Scroll-triggered ────────────────────────────────────── */
.fade-in-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}

.fade-in-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-scroll.delay-1.is-visible { transition-delay: 100ms; }
.fade-in-scroll.delay-2.is-visible { transition-delay: 200ms; }
.fade-in-scroll.delay-3.is-visible { transition-delay: 300ms; }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up {
    animation: none;
    opacity: 1;
  }

  .fade-in-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}