/* ─────────────────────────────────────────────────────────────────────────
   Synapse motion system (web) — mirrors packages/ui/src/motion/tokens.ts.
   Three durations govern everything; no hardcoded ms elsewhere.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --m-micro: 100ms;     /* button press, icon react, selection tap */
  --m-standard: 180ms;  /* card transition, nav change, search interaction */
  --m-expanded: 250ms;  /* card expansion, sheet, AI workflow transition */
  --m-ease: cubic-bezier(0.3, 0, 0.2, 1);      /* standard out */
  --m-ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1); /* gentle overshoot */
}

/* Scroll reveal — elements marked [data-reveal] (cards are tagged by motion.js)
   rise 14px and fade in when they enter the viewport, staggered by --reveal-i. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--m-expanded) var(--m-ease),
    transform var(--m-expanded) var(--m-ease);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
}
[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* Message entrance in chat — used by toju.html */
.m-enter {
  animation: mEnter var(--m-expanded) var(--m-ease-spring) both;
}
@keyframes mEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Press feedback — micro scale on anything tappable (motion.js adds .m-press) */
.m-press { transition: transform var(--m-micro) var(--m-ease); }
.m-press:active { transform: scale(0.97); }

/* Lottie mount points */
[data-lottie] { display: inline-block; line-height: 0; }
[data-lottie] svg { display: block; }

/* Ambient orb halo wrapper — keeps always-on pulse subtle (≤ 0.6 opacity) */
.m-orb { position: relative; }
.m-orb > .m-orb-halo {
  position: absolute; inset: -26px; opacity: 0.55; pointer-events: none;
}

/* Accessibility — the whole system stands down for reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .m-enter { animation: none; }
  .m-press:active { transform: none; }
  [data-lottie] { display: none; }
  [data-lottie][data-essential] { display: inline-block; }
}