/**
 * WMD Solutions Base — Scroll-triggered entrance animations.
 *
 * Markup pattern:
 *   <div class="wmd-anim wmd-anim--fade-in">...</div>
 *
 * Available variants:
 *   wmd-anim--fade-in        Simple opacity fade
 *   wmd-anim--fade-up        Fade + slide up from below
 *   wmd-anim--fade-down      Fade + slide down from above
 *   wmd-anim--fade-left      Fade + slide in from right
 *   wmd-anim--fade-right     Fade + slide in from left
 *   wmd-anim--zoom-in        Fade + scale up from 95%
 *
 * Optional delay modifiers (stagger groups of items):
 *   wmd-anim--delay-1   100ms
 *   wmd-anim--delay-2   200ms
 *   wmd-anim--delay-3   300ms
 *   wmd-anim--delay-4   400ms
 *   wmd-anim--delay-5   500ms
 *
 * The .is-visible class is added by js/animations.js via IntersectionObserver
 * when the element enters the viewport.
 *
 * Accessibility: respects prefers-reduced-motion.
 */

/* ============================================================
   BASE STATE — hidden until in-view
   ============================================================ */

.wmd-anim {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--wmd-anim-duration, 700ms);
  transition-timing-function: var(--wmd-anim-easing, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: opacity, transform;
}

/* ============================================================
   VARIANTS — initial transform offsets
   ============================================================ */

.wmd-anim--fade-up {
  transform: translateY(32px);
}

.wmd-anim--fade-down {
  transform: translateY(-32px);
}

.wmd-anim--fade-left {
  transform: translateX(32px);
}

.wmd-anim--fade-right {
  transform: translateX(-32px);
}

.wmd-anim--zoom-in {
  transform: scale(0.95);
}

/* ============================================================
   IN-VIEW STATE — applied by JS
   ============================================================ */

.wmd-anim.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   DELAY MODIFIERS
   ============================================================ */

.wmd-anim--delay-1 { transition-delay: 100ms; }
.wmd-anim--delay-2 { transition-delay: 200ms; }
.wmd-anim--delay-3 { transition-delay: 300ms; }
.wmd-anim--delay-4 { transition-delay: 400ms; }
.wmd-anim--delay-5 { transition-delay: 500ms; }

/* ============================================================
   REDUCED MOTION — respect user preference
   Show everything immediately, no transitions.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .wmd-anim {
    opacity: 1;
    transform: none;
    transition: none;
  }
}