/* ============================================================
   animations.css — GSAP & animation-related styles only
   GSAP controls the actual tweening; these classes define
   initial hidden states and utility helpers.
   ============================================================ */

/* Elements hidden until GSAP initialises (set via JS) */
[data-animate] {
  visibility: hidden;
}

/* ── Pre-animation base states ──────────────────────────── */
/* GSAP tweens FROM these states, then removes / overrides   */

.anim-fade-up {
  opacity: 0;
  transform: translateY(40px);
}

.anim-fade-down {
  opacity: 0;
  transform: translateY(-40px);
}

.anim-fade-in {
  opacity: 0;
}

.anim-fade-left {
  opacity: 0;
  transform: translateX(-40px);
}

.anim-fade-right {
  opacity: 0;
  transform: translateX(40px);
}

/* Stagger: children start hidden; GSAP staggers them in */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(20px);
}

/* Clip reveal — wipe in from left */
.anim-clip {
  clip-path: inset(0 100% 0 0);
}

/* Scale up from slightly smaller */
.anim-scale {
  opacity: 0;
  transform: scale(0.92);
}

/* ── Transition utility classes (non-GSAP hover/focus) ──── */

.transition-default {
  transition: var(--ease-default);
}

.transition-smooth {
  transition: var(--ease-smooth);
}

.transition-bounce {
  transition: var(--ease-bounce);
}

/* ── will-change hints for GPU-composited layers ─────────── */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}