/* =========================================================
   SCROLL ANIMATIONS — Minimal Card Reveal
   ========================================================= */

/* --- Base state: hidden before scroll --- */
[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-duration: 0.6s;
  transition-delay: var(--anim-delay, 0s);
}

/* --- Fade Up (default) --- */
[data-animate="fade-up"] {
  transform: translateY(30px);
}

/* --- Fade In (subtle) --- */
[data-animate="fade-in"] {
  transform: translateY(0);
}

/* --- Fade Left --- */
[data-animate="fade-left"] {
  transform: translateX(-28px);
}

/* --- Fade Right --- */
[data-animate="fade-right"] {
  transform: translateX(28px);
}

/* --- Scale Up --- */
[data-animate="scale-up"] {
  transform: scale(0.94);
}

/* --- Animated-in state (JS adds this class) --- */
[data-animate].animate-in {
  opacity: 1;
  transform: none;
}

/* =========================================================
   Stagger delays for sibling cards
   ========================================================= */
[data-animate]:nth-child(1) { --anim-delay: 0.00s; }
[data-animate]:nth-child(2) { --anim-delay: 0.08s; }
[data-animate]:nth-child(3) { --anim-delay: 0.16s; }
[data-animate]:nth-child(4) { --anim-delay: 0.24s; }
[data-animate]:nth-child(5) { --anim-delay: 0.32s; }
[data-animate]:nth-child(6) { --anim-delay: 0.40s; }
[data-animate]:nth-child(7) { --anim-delay: 0.00s; }
[data-animate]:nth-child(8) { --anim-delay: 0.08s; }
[data-animate]:nth-child(9) { --anim-delay: 0.16s; }
[data-animate]:nth-child(10){ --anim-delay: 0.24s; }
[data-animate]:nth-child(11){ --anim-delay: 0.32s; }
[data-animate]:nth-child(12){ --anim-delay: 0.40s; }

/* =========================================================
   Respect reduced-motion preference
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}