/**
 * 05-motion.css — Motion System
 * YDC Child Enterprise Theme
 *
 * Motion philosophy:
 *   Slow. Confident. Elegant.
 *   Animation should feel like weight, not flash.
 *   No parallax. No flashy hover effects.
 *   Motion is functional: it guides attention.
 *
 * Pattern:
 *   Elements carry .reveal class by default (opacity: 0, translateY: 20px).
 *   JavaScript IntersectionObserver adds .visible when element enters viewport.
 *   CSS transitions complete the motion.
 *
 * Respect prefers-reduced-motion: all animations disabled.
 */

/* ─── Keyframes ──────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes subtleSlideRight {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes headerSlideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -100%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes mobileMenuIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Reveal system ──────────────────────────── */
/*
  Usage:
    <div class="reveal">…</div>
    JS adds .visible when element enters viewport.
*/
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  var(--transition-slow),
    transform var(--transition-slow);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children with data attribute */
.reveal[data-delay="1"] { transition-delay: 100ms; }
.reveal[data-delay="2"] { transition-delay: 200ms; }
.reveal[data-delay="3"] { transition-delay: 300ms; }
.reveal[data-delay="4"] { transition-delay: 400ms; }
.reveal[data-delay="5"] { transition-delay: 500ms; }

/* Side-slide variant */
.reveal--left {
  transform: translateX(-16px);
}

.reveal--left.visible {
  transform: translateX(0);
}

/* Fade only (no translate) */
.reveal--fade {
  transform: none;
}

.reveal--fade.visible {
  transform: none;
}

/* ─── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}