/* ============================================================
   ANIMATIONS.CSS
   Initial states for GSAP-driven elements.
   GSAP sets these back to their final state on scroll/load.
   ============================================================ */

/* Elements that fade + slide up on scroll */
.anim-fade-up {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

/* Elements that fade in */
.anim-fade-in {
  opacity: 0;
  will-change: opacity;
}

/* Elements that slide in from left */
.anim-slide-left {
  opacity: 0;
  transform: translateX(-60px);
  will-change: opacity, transform;
}

/* Elements that slide in from right */
.anim-slide-right {
  opacity: 0;
  transform: translateX(60px);
  will-change: opacity, transform;
}

/* Scale in */
.anim-scale-in {
  opacity: 0;
  transform: scale(0.88);
  will-change: opacity, transform;
}

/* Stagger children — applied to parent; children get anim-fade-up */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-fade-in,
  .anim-slide-left,
  .anim-slide-right,
  .anim-scale-in,
  .anim-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}