/* CC-02a — Motion tokens + reduced-motion overrides
   See: DOCS/INDIANMARRIAGE/discussions/CC-02a.md

   Durations and easings are sourced from tokens.css. This file ships:
     - reusable utility classes (.motion-fade-in, .motion-slide-up)
     - prefers-reduced-motion overrides (CC-15 hooks here)
*/

/* =============================================================================
   Keyframes
   ============================================================================= */

@keyframes motion-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes motion-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes motion-slide-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes motion-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* =============================================================================
   Utility classes
   ============================================================================= */

.motion-fade-in {
  animation: motion-fade-in var(--motion-base) var(--ease-decelerate) both;
}

.motion-slide-up {
  animation: motion-slide-up var(--motion-base) var(--ease-decelerate) both;
}

.motion-slide-down {
  animation: motion-slide-down var(--motion-base) var(--ease-decelerate) both;
}

.motion-scale-in {
  animation: motion-scale-in var(--motion-fast) var(--ease-decelerate) both;
}

.motion-transition-base {
  transition: all var(--motion-base) var(--ease-standard);
}

.motion-transition-fast {
  transition: all var(--motion-fast) var(--ease-standard);
}

.motion-transition-slow {
  transition: all var(--motion-slow) var(--ease-standard);
}

/* =============================================================================
   Reduced-motion overrides (CC-15 a11y hook)
   When user has prefers-reduced-motion: reduce, we collapse durations to ~0
   and disable our motion utilities. Site remains functional; nothing animates.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .motion-fade-in,
  .motion-slide-up,
  .motion-slide-down,
  .motion-scale-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}