/* STUDIO KIT: the primitives every cooked site shares, shipped by the factory next to launch-client.js.
   Nothing here decides a look. The site defines its own tokens (--paper, --ink, --accent, --display, --body, --mono);
   the kit reads them with fallbacks. Every piece is opt-in through a class or a data attribute, and every motion
   collapses to a static state under prefers-reduced-motion. Load it before the site's own stylesheet. */

:root {
  --st-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --st-rise: 14px;
  --st-blur: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
img, video, svg { max-width: 100%; }
img { height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 3px; }

/* numbers never dance: every figure sits in a tabular face */
.st-num, [data-count], .st-stats dd, .st-mono, .mono, time, code { font-variant-numeric: tabular-nums; }
.st-mono, .mono, code { font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace); }

/* the micro label: small, uppercase, tracked, in the mono face; used sparingly (one per section at most) */
.st-label { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted, var(--ink-2, inherit)); }

/* the live dot: a real state, never decoration */
.st-live { display: inline-flex; align-items: center; gap: 8px; }
.st-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, currentColor); box-shadow: 0 0 0 0 var(--accent, currentColor); animation: st-pulse 2.2s var(--st-ease) infinite; }
@keyframes st-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, currentColor) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* the hairline stat row: 3 or 4 live figures, separated by rules, labels under the numbers */
.st-stats { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.st-stats > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 0 28px 0 0; }
.st-stats > div + div { padding-left: 28px; border-left: 1px solid var(--line, color-mix(in srgb, currentColor 18%, transparent)); }
.st-stats dt { margin: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted, inherit); }
.st-stats dd { margin: 0; font-family: var(--display, inherit); font-size: clamp(26px, 2.6vw, 36px); line-height: 1; letter-spacing: -0.02em; }
@media (max-width: 560px) { .st-stats > div { padding-right: 18px; } .st-stats > div + div { padding-left: 18px; } }

/* buttons press like a thing: a real :active state, no lift on hover unless the site decides it */
.st-btn, button, [role="button"] { cursor: pointer; transition: transform 0.14s var(--st-ease), background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.25s var(--st-ease); }
.st-btn:active, button:active, [role="button"]:active { transform: scale(0.97); }
button:disabled, .st-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; transform: none; }

/* the copy pill: data-copy="text" (or a selector in data-copy-from); the kit swaps the label while copied */
[data-copy] { position: relative; }
[data-copy].st-copied .st-copy-label { visibility: hidden; }
[data-copy].st-copied::after { content: attr(data-copied, "copied"); position: absolute; inset: 0; display: grid; place-items: center; font: inherit; }

/* reveal on scroll: [data-reveal] on an element, or data-reveal="stagger" on a parent (children follow, 70 ms apart) */
[data-reveal] { opacity: 0; transform: translateY(var(--st-rise)); filter: blur(var(--st-blur)); transition: opacity 0.9s var(--st-ease), transform 1s var(--st-ease), filter 0.9s var(--st-ease); transition-delay: var(--st-delay, 0ms); will-change: opacity, transform, filter; }
[data-reveal].st-in { opacity: 1; transform: none; filter: blur(0); }
[data-reveal="stagger"] { opacity: 1; transform: none; filter: none; transition: none; }
[data-reveal="stagger"] > * { opacity: 0; transform: translateY(var(--st-rise)); filter: blur(var(--st-blur)); transition: opacity 0.9s var(--st-ease), transform 1s var(--st-ease), filter 0.9s var(--st-ease); transition-delay: calc(var(--i, 0) * 70ms); }
[data-reveal="stagger"].st-in > * { opacity: 1; transform: none; filter: blur(0); }

/* a headline that sets word by word: data-split on the heading; each word rises from a clipped box */
[data-split] .st-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
[data-split] .st-w > span { display: inline-block; transform: translateY(110%); transition: transform 0.9s var(--st-ease); transition-delay: calc(var(--i, 0) * 60ms + var(--st-delay, 0ms)); }
[data-split].st-in .st-w > span { transform: none; }

/* a light band that sweeps once across gradient text: pair with a background-clip:text headline */
.st-sheen { background-size: 300% 100%, 100% 100%; background-position: 0% 0, 0 0; }
.st-sheen.st-in { animation: st-sheen 1.4s var(--st-ease) 0.4s 1 both; }
@keyframes st-sheen { to { background-position: 100% 0, 0 0; } }

/* the tape: one horizontal band of repeated items, opt-in, one per page at most. The kit clones the track once. */
.st-tape { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.st-tape .st-track { display: inline-flex; gap: var(--st-tape-gap, 48px); padding-right: var(--st-tape-gap, 48px); animation: st-tape var(--st-tape-speed, 38s) linear infinite; }
.st-tape:hover .st-track { animation-play-state: paused; }
@keyframes st-tape { to { transform: translateX(-50%); } }

/* film grain, opt-in: a fixed overlay, never on a scrolling box */
.st-grain::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: var(--st-grain, 0.05); mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.st-grain.st-dark::after { mix-blend-mode: screen; }

/* a card that tilts toward the pointer, opt-in (data-tilt), off on touch */
[data-tilt] { transform-style: preserve-3d; transition: transform 0.35s var(--st-ease); will-change: transform; }

/* a typed line that rotates words: data-typed="word|word|word" */
[data-typed]::after { content: "|"; margin-left: 2px; animation: st-caret 1s steps(2) infinite; opacity: 0.6; }
@keyframes st-caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal="stagger"] > *, [data-split] .st-w > span { opacity: 1; transform: none; filter: none; transition: none; }
  .st-live::before, .st-tape .st-track, .st-sheen.st-in, [data-typed]::after { animation: none; }
  [data-tilt] { transform: none !important; }
}