/*
 * DF4 Labs — Motion tokens
 *
 * One curve. One reveal distance. One timing family.
 * See motion.md for the doctrine. Sub-brands inherit; they may not redefine.
 */

:root {
  /* The single sanctioned curve. */
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* The timing family — pick by what is animating, not by taste. */
  --t-instant: 120ms;   /* state flip                       */
  --t-quick:   240ms;   /* small reveal — toast, dropdown   */
  --t-base:    360ms;   /* element reveal — card, row, pane */
  --t-slow:    560ms;   /* hero / route reveal              */
  --t-march:  1600ms;   /* sanctioned ambient               */

  /* The single reveal distance. Hierarchy is conveyed by timing, not distance. */
  --reveal: 8px;
}

/* =====================================================================
 * Primitive 1 — `reveal`. Element entering on page load or scroll.
 * ===================================================================== */
@keyframes df4-reveal {
  from { opacity: 0; transform: translateY(var(--reveal)); }
  to   { opacity: 1; transform: none; }
}
.reveal        { animation: df4-reveal var(--t-base)  var(--ease) both; }
.reveal--hero  { animation: df4-reveal var(--t-slow)  var(--ease) both; }
.reveal--toast { animation: df4-reveal var(--t-quick) var(--ease) both; }

/* Stagger helper: increments of 40ms, capped at 8 children. */
.reveal-stagger > *:nth-child(1) { animation-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { animation-delay: 40ms; }
.reveal-stagger > *:nth-child(3) { animation-delay: 80ms; }
.reveal-stagger > *:nth-child(4) { animation-delay: 120ms; }
.reveal-stagger > *:nth-child(5) { animation-delay: 160ms; }
.reveal-stagger > *:nth-child(6) { animation-delay: 200ms; }
.reveal-stagger > *:nth-child(7) { animation-delay: 240ms; }
.reveal-stagger > *:nth-child(8) { animation-delay: 280ms; }
.reveal-stagger > *:nth-child(n+9) { animation-delay: 320ms; }

/* =====================================================================
 * Primitive 2 — `flip`. Value changed in place. Always --t-instant.
 * ===================================================================== */
@keyframes df4-flip {
  0%   { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 1; }
}
.flip { animation: df4-flip var(--t-instant) var(--ease) both; }

/* =====================================================================
 * Primitive 3 — `tick`. Sanctioned ambient. Three uses only.
 * ===================================================================== */
@keyframes df4-pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.tick-dot { animation: df4-pulse-dot var(--t-march) linear infinite; }

@keyframes df4-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tick-marquee { animation: df4-marquee 28s linear infinite; }
.tick-marquee:hover { animation-play-state: paused; }

@keyframes df4-arrow-nudge {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(2px, -2px); }
}
.tick-arrow { animation: df4-arrow-nudge var(--t-march) var(--ease) infinite; }

/* =====================================================================
 * Primitive 4 — `route`. Page-level transitions. 800ms ceiling.
 * ===================================================================== */
.route-out  { animation: df4-route-out  var(--t-quick) var(--ease) both; }
.route-in   { animation: df4-reveal     var(--t-slow)  var(--ease) both; }
@keyframes df4-route-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* =====================================================================
 * Reduced motion — same information, no movement.
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal--hero, .reveal--toast,
  .route-in {
    animation: df4-reveal-rm 200ms linear both !important;
  }
  .tick-dot, .tick-marquee, .tick-arrow {
    animation: none !important;
  }
}
@keyframes df4-reveal-rm {
  from { opacity: 0; }
  to   { opacity: 1; }
}