/* =============================================================
   motion.css — Global motion tokens, keyframes & utilities
   Load after glass.css, before page-specific CSS.
   ============================================================= */

:root {
  /* ── Easing curves ── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* ── Durations ── */
  --dur-instant: 100ms;
  --dur-fast:    160ms;
  --dur-normal:  240ms;
  --dur-slow:    400ms;

  /* ── Stagger ── */
  --stagger-step: 50ms;
}

@keyframes m-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes m-fade-left {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes m-fade-right {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.reveal,
.reveal-scale,
.reveal-left,
.reveal-right {
  opacity: 0;
  will-change: transform, opacity;
}

.reveal.is-revealed {
  animation: m-fade-up 320ms var(--ease-out) both;
}

.reveal-scale.is-revealed {
  animation: m-fade-scale 240ms var(--ease-out) both;
}

.reveal-left.is-revealed {
  animation: m-fade-left 320ms var(--ease-out) both;
}

.reveal-right.is-revealed {
  animation: m-fade-right 320ms var(--ease-out) both;
}

.stagger-1 { animation-delay: calc(1 * var(--stagger-step)); }
.stagger-2 { animation-delay: calc(2 * var(--stagger-step)); }
.stagger-3 { animation-delay: calc(3 * var(--stagger-step)); }
.stagger-4 { animation-delay: calc(4 * var(--stagger-step)); }
.stagger-5 { animation-delay: calc(5 * var(--stagger-step)); }
.stagger-6 { animation-delay: calc(6 * var(--stagger-step)); }
.stagger-7 { animation-delay: calc(7 * var(--stagger-step)); }
.stagger-8 { animation-delay: calc(8 * var(--stagger-step)); }

.fade-in {
  animation: m-fade-in var(--dur-normal) ease-out both;
}

.fade-out {
  animation: m-fade-out var(--dur-fast) ease-out both;
}

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

@keyframes m-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

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