/* ==========================================================================
   AppVerticals — main.css  v1.0.0
   Global scroll-animation styles.

   Timing values are EXACT translations of Framer Motion variants defined in
   src/components/ScrollAnimation/index.js (Next.js source):

     FadeInUp    → opacity 0→1, translateY(60px)→0,   0.5 s  ease-out
     FadeInLeft  → opacity 0→1, translateX(-60px)→0,  0.6 s  ease-out
     FadeInRight → opacity 0→1, translateX(60px)→0,   0.6 s  ease-out
     FadeIn      → opacity 0→1,                        0.6 s  ease-out
     ScaleIn     → opacity 0→1, scale(0.8)+y(30px)→0, 0.6 s  ease-out
     Stagger     → opacity 0→1, translateY(30px)→0,   0.6 s  ease-out
                   delay = index × 0.1 s  (matches staggerChildren: 0.2 → 0.1 per child)

   Framer "easeOut" = cubic-bezier(0, 0, 0.58, 1) (CSS ease-out keyword)
   ========================================================================== */

/* ── Base: shared transition properties ─────────────────────────────────── */
.av-anim {
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1); /* ease-out */
  will-change: opacity, transform;
}

/* ── Initial (pre-scroll) states ────────────────────────────────────────── */

/* FadeInUp — duration matches Next.js FadeInUp: 0.5s */
.av-anim--fade-up {
  opacity: 0;
  transform: translateY(60px);
  transition-duration: 0.5s;
}

/* FadeInDown */
.av-anim--fade-down {
  opacity: 0;
  transform: translateY(-60px);
  transition-duration: 0.6s;
}

/* FadeInLeft — x: -60 */
.av-anim--fade-left {
  opacity: 0;
  transform: translateX(-60px);
  transition-duration: 0.6s;
}

/* FadeInRight — x: +60 */
.av-anim--fade-right {
  opacity: 0;
  transform: translateX(60px);
  transition-duration: 0.6s;
}

/* FadeIn — opacity only */
.av-anim--fade-in {
  opacity: 0;
  transition-duration: 0.6s;
}

/* ScaleIn — scale 0.8 + y 30 (matches ScrollFadeInAnimation / ScaleIn) */
.av-anim--scale-in {
  opacity: 0;
  transform: scale(0.8) translateY(30px);
  transition-duration: 0.6s;
}

/* Stagger child — y 30 (matches StaggerItem hidden: y: 30) */
.av-anim--stagger {
  opacity: 0;
  transform: translateY(30px);
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  transition-duration: 0.6s;
  will-change: opacity, transform;
}

/* ── Visible state — applied by JS when element enters viewport ──────────── */
.av-anim-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Mobile: drop translate transforms, keep fade only ──────────────────── */
/* Matches Framer mobile check: useMediaQuery("(max-width: 767px)") → plain div */
@media (max-width: 767px) {
  .av-anim--fade-up,
  .av-anim--fade-down,
  .av-anim--fade-left,
  .av-anim--fade-right,
  .av-anim--scale-in,
  .av-anim--stagger {
    transform: none;
  }
}

/* ── Accessibility: honor prefers-reduced-motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .av-anim,
  .av-anim--stagger {
    transition: opacity 0.15s linear !important;
    transform: none !important;
  }
}

/* ── Fallback: JS disabled / .no-js body class ──────────────────────────── */
.no-js .av-anim,
.no-js .av-anim--stagger {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}