/* Motion kit: tokens and the CSS-only pieces. Original work. Change a brand by changing the --mk-* variables. */

:root {
  /* colour roles */
  --mk-accent: #5b4be8;
  --mk-accent-soft: #e0d7fa;
  --mk-accent-ink: #ffffff;           /* text on --mk-accent */
  --mk-warm: #fce3cf;                  /* second soft colour, used by the glow */
  --mk-ink: #191a2b;
  --mk-ink-muted: #6c6c7a;             /* lightest grey allowed for text (4.5:1 on --mk-surface) */
  --mk-surface: #ffffff;
  --mk-surface-subtle: #f1f1f6;
  --mk-line: #e8e8ef;
  --mk-live: #22c55e;
  /* shape and type */
  --mk-radius: 12px;
  --mk-radius-pill: 999px;
  --mk-font: Inter, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  /* motion */
  --mk-ease-out-strong: cubic-bezier(0, .7, .07, 1);   /* fast start, long settle: reveals, digits */
  --mk-ease-calm: cubic-bezier(.5, 0, .2, 1);          /* soft in and out: blur-in, pulses */
  --mk-ease-sym: cubic-bezier(.44, 0, .56, 1);         /* symmetric: draw-on, tickers */
  --mk-ease-overshoot: cubic-bezier(.34, 1.56, .64, 1);/* small overshoot: pops, bars */
}

/* Example themes. They are palettes to start from, not any client's brand. */
[data-mk-theme="ocean"] {
  --mk-accent: #0e7490; --mk-accent-soft: #cffafe; --mk-warm: #fde9b8;
  --mk-ink: #0f2a33; --mk-ink-muted: #556b73; --mk-surface-subtle: #eef6f8; --mk-line: #dbe8ec;
}
[data-mk-theme="matcha"] {
  --mk-accent: #1f6b4f; --mk-accent-soft: #d6efd9; --mk-warm: #f6efd8;
  --mk-ink: #1d2a22; --mk-ink-muted: #5b6b61; --mk-surface: #fbf9f1; --mk-surface-subtle: #f1eee0; --mk-line: #e4e0cc;
}

/* ---------- digit roller ---------- */
.mk-roller { display: inline-flex; font-variant-numeric: tabular-nums; line-height: 1; }
.mk-slot { display: inline-block; height: 1em; overflow: hidden; width: .64em; text-align: center; }
.mk-reel { display: flex; flex-direction: column; will-change: transform; }
.mk-reel > span { display: block; height: 1em; }
.mk-static { display: inline-block; height: 1em; }

/* ---------- reveal: hidden only after the script has taken charge ---------- */
.mk-pre { opacity: 0; }

/* ---------- ticker ---------- */
.mk-ticker { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mk-ticker-track { display: flex; gap: var(--mk-ticker-gap, 28px); width: max-content; animation: mk-ticker var(--mk-ticker-seconds, 32s) linear infinite; }
.mk-ticker:hover .mk-ticker-track, .mk-ticker:focus-within .mk-ticker-track { animation-play-state: paused; }
@keyframes mk-ticker { to { transform: translateX(-50%); } }

/* ---------- spring pills ---------- */
.mk-pills { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--mk-surface-subtle); border-radius: var(--mk-radius); max-width: 100%; }
.mk-pills-bg { position: absolute; top: 4px; left: 0; height: 0; width: 0; background: var(--mk-surface); border-radius: calc(var(--mk-radius) - 2px); box-shadow: 0 1px 3px rgba(25, 26, 43, .12); pointer-events: none; }
.mk-pills > [role="tab"] { position: relative; font: 600 14px var(--mk-font); background: none; border: 0; padding: 8px 14px; border-radius: calc(var(--mk-radius) - 2px); color: var(--mk-ink-muted); cursor: pointer; white-space: nowrap; }
.mk-pills > [role="tab"][aria-selected="true"] { color: var(--mk-ink); }
.mk-pills > [role="tab"]:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }

/* ---------- scroll stack ---------- */
.mk-stack-wrap { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 20px; }
.mk-rail { position: sticky; top: 24px; height: calc(100vh - 48px); max-height: 640px; background: var(--mk-surface-subtle); border-radius: 3px; overflow: hidden; }
.mk-rail > i { position: absolute; inset: 0; background: var(--mk-accent); transform-origin: top; transform: scaleY(0); }
.mk-stack { display: grid; gap: 24px; padding-bottom: 40vh; }
.mk-stack > * { position: sticky; transform-origin: top center; }

/* ---------- live pulse ring (CSS only) ---------- */
.mk-live { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--mk-live) 14%, transparent); color: var(--mk-ink); font: 700 13px var(--mk-font); padding: 3px 10px 3px 8px; border-radius: var(--mk-radius-pill); }
.mk-live > i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-live); }
.mk-live > i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mk-live); animation: mk-pulse 1.6s var(--mk-ease-calm) infinite; }
@keyframes mk-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }

/* ---------- skeleton and shimmer (loading placeholders) ---------- */
.mk-skeleton { background: var(--mk-surface-subtle); border-radius: var(--mk-radius); animation: mk-skeleton 1.5s ease-in-out infinite; }
@keyframes mk-skeleton { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.mk-shimmer { position: relative; overflow: hidden; background: var(--mk-surface-subtle); border-radius: var(--mk-radius); }
.mk-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateX(-100%); animation: mk-shimmer 1.8s var(--mk-ease-sym) infinite; }
@keyframes mk-shimmer { to { transform: translateX(100%); } }

/* ---------- morph button: one pill that becomes a circle, then a confirmation ---------- */
.mk-morph { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--mk-accent); color: var(--mk-accent-ink); font: 600 15px var(--mk-font); white-space: nowrap; overflow: hidden; cursor: pointer; transition: background .25s, color .25s; }
.mk-morph[data-state="loading"] { padding: 0; cursor: progress; }
.mk-morph[data-state="done"], .mk-morph[data-state="error"] { background: var(--mk-ink); color: var(--mk-surface); }
.mk-morph:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; }
.mk-morph-body { display: inline-flex; align-items: center; }
.mk-morph-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: mk-spin .8s linear infinite; }
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* ---------- reduced motion: every CSS loop above stops; scripts check MK.reduced ---------- */
@media (prefers-reduced-motion: reduce) { .mk-ticker-track, .mk-live > i::after, .mk-skeleton, .mk-shimmer::after, .mk-morph-spin { animation: none !important; } .mk-morph { transition: none !important; } }
.mk-reduce .mk-ticker-track, .mk-reduce .mk-live > i::after, .mk-reduce .mk-skeleton, .mk-reduce .mk-shimmer::after, .mk-reduce .mk-morph-spin { animation: none !important; }
.mk-reduce .mk-morph { transition: none !important; }