/* ============================================================
   16-animations.css — scroll-triggered motion library
   Pairs with js/animations.js. Disable both to remove all animation.
   Respects prefers-reduced-motion.

   Available classes (apply to any element):
     .fade-up      — fade in + rise from below   (default direction)
     .fade-in      — pure opacity fade
     .slide-left   — slide in from left
     .slide-right  — slide in from right
     .scale-in     — scale from 0.94 to 1.0
     .count-up     — number counts up from 0 to data-target
     .parallax     — background-position shifts with scroll (hero etc.)

   Stagger delays: add .delay-1 through .delay-6 alongside the base class.
   ============================================================ */

/* ---- Base state for all animated elements ---- */
.fade-up,
.fade-in,
.slide-left,
.slide-right,
.scale-in {
  opacity: 0;
  transition:
    opacity 0.85s cubic-bezier(0.22, 0.85, 0.3, 1),
    transform 0.95s cubic-bezier(0.22, 0.85, 0.3, 1);
  will-change: opacity, transform;
}

.fade-up      { transform: translateY(32px); }
.fade-in      { transform: none; }
.slide-left   { transform: translateX(-48px); }
.slide-right  { transform: translateX(48px); }
.scale-in     { transform: scale(0.94); }

/* ---- Visible state (added by js/animations.js) ---- */
.fade-up.is-visible,
.fade-in.is-visible,
.slide-left.is-visible,
.slide-right.is-visible,
.scale-in.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Stagger delays ---- */
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.40s; }
.delay-6 { transition-delay: 0.48s; }

/* ---- Counter — keeps space reserved while count animates ---- */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ---- Parallax — JS sets --parallax-y as you scroll ---- */
.parallax {
  background-attachment: scroll; /* fallback */
  transform: translate3d(0, 0, 0); /* GPU layer */
}

/* ---- Reduced-motion safety net ---- */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-in, .slide-left, .slide-right, .scale-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Section flow — make transitions between sections seamless
   ============================================================ */
section.module + section.module { margin-top: 0; }
section.module { scroll-margin-top: 90px; }