/* ShredMentor shared motion layer (SM-044) — site-wide animation conventions.
 *
 * Principle (founder): a function's effect should PLAY OUT visibly, never snap.
 * Use these tokens + classes everywhere instead of hand-rolling one-off timings,
 * so motion feels consistent across the whole app.
 *
 *   Tokens .......... --sm-dur-* (durations), --sm-ease-* (easing curves), --sm-stagger
 *   Enter classes ... .sm-anim + one of .sm-fade-in / .sm-fade-up / .sm-slide-in-left /
 *                     .sm-slide-in-right / .sm-scale-in / .sm-pop
 *   Duration mods ... .sm-fast / .sm-slow (on the same element)
 *   Stagger ......... .sm-stagger on a parent → children reveal in sequence
 *                     (JS SMMotion.stagger() sets --sm-i per child; CSS nth-child is the fallback)
 *   Interactive ..... .sm-transition for hover/toggle state changes
 *   Accessibility ... honors prefers-reduced-motion (collapses to ~instant)
 */
:root {
  /* Durations */
  --sm-dur-instant: 90ms;
  --sm-dur-fast:    160ms;
  --sm-dur-base:    260ms;
  --sm-dur-slow:    420ms;
  --sm-dur-slower:  640ms;

  /* Easing curves */
  --sm-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);      /* decelerate — default for enters */
  --sm-ease-in:     cubic-bezier(0.55, 0, 1, 0.45);      /* accelerate — for exits */
  --sm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot / pop */

  /* Default gap between items in a staggered sequence */
  --sm-stagger: 45ms;
}

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes sm-fade-in       { from { opacity: 0; }                                  to { opacity: 1; } }
@keyframes sm-fade-up       { from { opacity: 0; transform: translateY(8px); }      to { opacity: 1; transform: none; } }
@keyframes sm-slide-in-left { from { opacity: 0; transform: translateX(-16px); }    to { opacity: 1; transform: none; } }
@keyframes sm-slide-in-right{ from { opacity: 0; transform: translateX(16px); }     to { opacity: 1; transform: none; } }
@keyframes sm-scale-in      { from { opacity: 0; transform: scale(0.92); }          to { opacity: 1; transform: scale(1); } }
@keyframes sm-pop           { 0% { transform: scale(0.9); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* ── Enter utility classes ─────────────────────────────────────────────── */
.sm-anim {
  animation-duration: var(--sm-dur-base);
  animation-timing-function: var(--sm-ease-out);
  animation-fill-mode: both;
}
.sm-fade-in        { animation-name: sm-fade-in; }
.sm-fade-up        { animation-name: sm-fade-up; }
.sm-slide-in-left  { animation-name: sm-slide-in-left; }
.sm-slide-in-right { animation-name: sm-slide-in-right; }
.sm-scale-in       { animation-name: sm-scale-in; }
.sm-pop            { animation-name: sm-pop; animation-timing-function: var(--sm-ease-spring); }

/* Duration modifiers */
.sm-fast { animation-duration: var(--sm-dur-fast); }
.sm-slow { animation-duration: var(--sm-dur-slow); }

/* ── Stagger: children reveal in sequence (left→right for a row, top→down for a column) ──
   SMMotion.stagger() assigns --sm-i to each child at runtime; this rule turns that index
   into a proportional delay. A CSS-only fallback covers the first several children so it
   still animates without JS. */
.sm-stagger > * {
  animation: sm-fade-up var(--sm-dur-base) var(--sm-ease-out) both;
  animation-delay: calc(var(--sm-i, 0) * var(--sm-stagger));
}
.sm-stagger.sm-no-js > *:nth-child(1) { --sm-i: 0; }
.sm-stagger.sm-no-js > *:nth-child(2) { --sm-i: 1; }
.sm-stagger.sm-no-js > *:nth-child(3) { --sm-i: 2; }
.sm-stagger.sm-no-js > *:nth-child(4) { --sm-i: 3; }
.sm-stagger.sm-no-js > *:nth-child(5) { --sm-i: 4; }
.sm-stagger.sm-no-js > *:nth-child(6) { --sm-i: 5; }
.sm-stagger.sm-no-js > *:nth-child(7) { --sm-i: 6; }
.sm-stagger.sm-no-js > *:nth-child(8) { --sm-i: 7; }

/* ── Interactive transitions (hover, toggles, layout shifts) ───────────── */
.sm-transition { transition: all var(--sm-dur-fast) var(--sm-ease-out); }

/* ── Reduced motion: collapse to a near-instant, delay-free reveal ─────── */
@media (prefers-reduced-motion: reduce) {
  .sm-anim,
  .sm-stagger > *,
  [class*="sm-slide"],
  [class*="sm-fade"],
  [class*="sm-scale"],
  .sm-pop {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
  .sm-transition { transition-duration: 1ms !important; }
}