/* Clio motion toolkit (W1): tokens + the CSS half of marketing/js/motion.js. Extends site.css's brand tokens (--voice amber, --action teal,
   --ease, --dur-*); nothing here redefines them. Every effect animates transform / opacity only and has a static, complete reduced-motion state. */

:root {
  /* Motion tokens (brief section 3): 150 / 300 / 600 / 1200 ms, one ease-out and one spring-like curve. */
  --m-dur-1: 150ms;
  --m-dur-2: 300ms;
  --m-dur-3: 600ms;
  --m-dur-4: 1200ms;
  --m-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --m-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Surfaces for the redesign: glass panel + thin amber border + glows. */
  --m-glass: rgba(18, 16, 13, 0.62);
  --m-glass-border: rgba(232, 168, 87, 0.22);
  --m-glow-amber: rgba(232, 168, 87, 0.16);
  --m-glow-teal: rgba(79, 209, 174, 0.12);
}

/* ---- scroll reveal (with stagger via --m-delay, set by motion.js). Only hidden when scripts run (html.m-js, set inline in base.html's <head>), so the
   page is complete without JS. */
.m-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--m-dur-3) var(--m-ease-out) var(--m-delay, 0ms), transform var(--m-dur-3) var(--m-ease-out) var(--m-delay, 0ms);
}
.m-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- magnetic button: motion.js sets transform; this only smooths it */
[data-magnetic] { transition: transform var(--m-dur-2) var(--m-ease-out); will-change: transform; }

/* ---- spotlight card: a soft amber light where the pointer is (no pointer: none) */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--m-glow-amber), transparent 70%);
  transition: opacity var(--m-dur-2) ease;
}
[data-spotlight]:hover::after { opacity: 1; }

/* ---- marquee: two copies of the track slide left together; paused off-screen, on a hidden tab, and replaced by a wrapped list under reduced motion */
.m-marquee {
  display: flex; overflow: hidden; gap: var(--m-gap, 2.5rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.m-marquee__track {
  display: flex; gap: var(--m-gap, 2.5rem); flex: none; min-width: max-content; list-style: none;
  animation: m-marquee var(--m-marquee-dur, 38s) linear infinite;
}
.m-marquee.m-offscreen .m-marquee__track, .m-paused-tab .m-marquee__track, .m-marquee:hover .m-marquee__track { animation-play-state: paused; }
@keyframes m-marquee { to { transform: translate3d(calc(-100% - var(--m-gap, 2.5rem)), 0, 0); } }

/* ---- waveform: bars scaled by motion.js (transform only); colour follows who is speaking */
.m-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: var(--m-wave-h, 44px); }
.m-wave__bar {
  flex: 1 1 0; max-width: 5px; height: 100%; border-radius: 3px; background: var(--voice);
  transform: scaleY(0.12); transform-origin: 50% 50%; transition: background-color var(--m-dur-2) ease; will-change: transform;
}
.m-wave[data-mode="caller"] .m-wave__bar { background: var(--action); }
.m-wave[data-mode="idle"] .m-wave__bar { background: rgba(245, 243, 239, 0.28); }

/* ---- reduced motion: final states, no loops */
@media (prefers-reduced-motion: reduce) {
  .m-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-magnetic] { transition: none; transform: none !important; }
  .m-marquee { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }
  .m-marquee__track { animation: none; flex-wrap: wrap; min-width: 0; row-gap: 0.6rem; }
  .m-marquee__track[aria-hidden="true"] { display: none; }
  .m-wave__bar { transition: none; }
}