/* Clover motion layer. Timings measured from x.ai/bot (see reference/bot/motion-spec.md).
   Only transform + opacity animate. Everything is gated behind html.mo, which motion.js sets
   only when JS runs and prefers-reduced-motion is NOT reduce. No JS / reduced motion => final state. */

:root {
  --mo-ease-pop: cubic-bezier(.2, .9, .3, 1.15);   /* x.ai entry-enter overshoot */
  --mo-ease-out: cubic-bezier(.22, 1, .36, 1);     /* x.ai mount-fade */
  --mo-ease-ui: cubic-bezier(.4, 0, .2, 1);        /* x.ai default transition */
  --mo-dur-hover: 150ms;
  --mo-dur-pop: 280ms;
  --mo-dur-tab: 300ms;
  --mo-dur-card: 420ms;
  --mo-dur-reveal: 600ms;
  --mo-dur-mount: 1000ms;
}

/* ---------- data-reveal ---------- */
.mo [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--mo-dur-reveal) var(--mo-ease-out), transform var(--mo-dur-reveal) var(--mo-ease-out);
  transition-delay: var(--mo-delay, 0ms);
}
.mo [data-reveal="fade"] { transform: none; }
.mo [data-reveal="pop"] { transform: translate3d(0, 8px, 0) scale(.97); transition-duration: var(--mo-dur-card); transition-timing-function: var(--mo-ease-pop); }
.mo [data-reveal="left"] { transform: translate3d(-10px, 0, 0); }
.mo [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- data-hero-seq ---------- */
.mo [data-hero-seq] [data-hero-step] {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 600ms var(--mo-ease-out), transform 600ms var(--mo-ease-out);
  transition-delay: var(--mo-delay, 0ms);
}
.mo [data-hero-seq] [data-hero-step="window"] {
  transform: translate3d(0, 28px, 0);
  transition-duration: var(--mo-dur-mount), var(--mo-dur-mount);
}
/* H1 is split into words by JS; the H1 box itself stays put */
.mo [data-hero-seq] [data-hero-step="h1"] { opacity: 1; transform: none; transition: none; }
.mo-word { display: inline-block; white-space: pre; }
.mo [data-hero-seq] .mo-word {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 600ms var(--mo-ease-out), transform 600ms var(--mo-ease-out);
  transition-delay: var(--mo-delay, 0ms);
}
.mo [data-hero-seq].is-in [data-hero-step]:not([data-hero-step="h1"]),
.mo [data-hero-seq].is-in .mo-word { opacity: 1; transform: none; }

/* ---------- data-demo (shared) ---------- */
.mo [data-demo] [data-step] { opacity: 0; transform: translate3d(0, 8px, 0) scale(.97); }
.mo [data-demo="schedule"] [data-step] { transform: translate3d(-10px, 0, 0); }
.mo [data-demo] [data-step].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--mo-dur-pop) var(--mo-ease-pop), transform var(--mo-dur-pop) var(--mo-ease-pop);
}
.mo [data-demo="subagent-card"] > [data-step].is-in { transition-duration: var(--mo-dur-card); }
/* typing indicator (three dots, x.ai typing-dot pattern) */
[data-typing-indicator] { display: inline-flex; gap: 4px; align-items: center; }
[data-typing-indicator] i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .25; display: block; }
.mo [data-typing-indicator] { opacity: 0; transition: opacity 150ms var(--mo-ease-ui); }
.mo [data-typing-indicator].is-in { opacity: 1; }
.mo [data-typing-indicator].is-in i { animation: mo-dot 1.1s infinite; }
.mo [data-typing-indicator].is-in i:nth-child(2) { animation-delay: .18s; }
.mo [data-typing-indicator].is-in i:nth-child(3) { animation-delay: .36s; }
@keyframes mo-dot { 0%, 55%, 100% { opacity: .25; } 25% { opacity: .7; } }
.mo-caret::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -.12em; background: currentColor; animation: mo-blink 1s steps(1) infinite; }
@keyframes mo-blink { 50% { opacity: 0; } }
/* subagent card */
[data-sa-icon] { display: inline-block; }
.mo [data-sa-icon].is-swap { animation: mo-icon-swap 420ms var(--mo-ease-pop); }
@keyframes mo-icon-swap { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: scale(1); } }
.mo [data-sa-row] [data-sa-check] { opacity: 0; transform: scale(.4); }
.mo [data-sa-row].is-done [data-sa-check] { opacity: 1; transform: scale(1); transition: opacity 280ms var(--mo-ease-pop), transform 280ms var(--mo-ease-pop); }
.mo [data-sa-row] [data-sa-spin] { display: inline-block; animation: mo-spin 2.4s linear infinite; }
.mo [data-sa-row].is-done [data-sa-spin] { display: none; }
@keyframes mo-spin { to { transform: rotate(360deg); } }

/* ---------- data-tabs ---------- */
[data-tabs] [data-tab] { position: relative; overflow: hidden; transition: background-color var(--mo-dur-tab) var(--mo-ease-ui), color var(--mo-dur-tab) var(--mo-ease-ui), box-shadow var(--mo-dur-tab) var(--mo-ease-ui); }
[data-tabs] [data-tab-progress] {
  position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px;
  background: currentColor; opacity: 0; transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
[data-tabs] [data-tab][aria-selected="true"] [data-tab-progress] { opacity: .55; }
[data-tabs].is-playing [data-tab][aria-selected="true"] [data-tab-progress] {
  animation: mo-progress var(--mo-autoplay, 6000ms) linear forwards;
}
[data-tabs].is-paused [data-tab][aria-selected="true"] [data-tab-progress] { animation-play-state: paused; }
@keyframes mo-progress { to { transform: scaleX(1); } }
/* panels stack in one grid cell and crossfade. Put data-tab-panels on their wrapper */
[data-tab-panels] { display: grid; }
[data-tab-panels] > [data-tab-panel] { grid-area: 1 / 1; }
.mo [data-tab-panels] > [data-tab-panel] { opacity: 0; transform: scale(.985); pointer-events: none; transition: opacity 400ms var(--mo-ease-ui), transform 400ms var(--mo-ease-ui); }
.mo [data-tab-panels] > [data-tab-panel].is-active { opacity: 1; transform: none; pointer-events: auto; }
/* without JS, only the first panel is shown */
html:not(.mo) [data-tab-panels] > [data-tab-panel]:not(:first-child) { display: none; }

/* ---------- data-copy ---------- */
[data-copy] { cursor: pointer; transition: filter var(--mo-dur-hover) var(--mo-ease-ui), background-color var(--mo-dur-hover) var(--mo-ease-ui), transform var(--mo-dur-hover) var(--mo-ease-ui); }
[data-copy]:active { transform: scale(.97); }
[data-copy].is-copied { filter: brightness(1.15); }
.mo [data-copy] [data-copy-label] { display: inline-block; }
.mo [data-copy] [data-copy-label].is-flip { animation: mo-icon-swap 280ms var(--mo-ease-pop); }

/* ---------- data-magnetic ---------- */
.mo [data-magnetic] { transition: transform 200ms var(--mo-ease-out); will-change: transform; }
.mo [data-magnetic].is-tracking { transition: transform 60ms linear; }

/* ---------- sticky nav hairline ---------- */
[data-nav]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: rgba(237, 236, 236, .1); opacity: 0; transition: opacity 200ms var(--mo-ease-ui);
}
[data-nav].is-scrolled::after { opacity: 1; }

/* ---------- reduced motion: final state, no travel ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-magnetic] { transform: none !important; }
  [data-tabs] [data-tab-progress] { display: none; }
}