/* Eviantra for auto shops. Colors come from config.js as CSS variables. */
@font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/big-shoulders-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono-var.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  --canvas: #0a0b0d; --text: #f1f4f6; --text-soft: #b4bbc2; --text-dim: #8b929a;
  --cold: #a9dcff; --ember: #ff8a2a; --hot: #ff3b1d; --btn-text: #0a0b0d;
  --display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--canvas); -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--canvas); color: var(--text); font-family: var(--body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
p, h1, h2 { margin: 0; font-weight: inherit; }
a { color: inherit; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; border-radius: 10px; background: var(--text); color: var(--canvas); font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Background layers */
#gl { position: fixed; inset: 0; width: 100%; height: 100lvh; z-index: 0; display: block; }
.fallback-ring { position: fixed; z-index: 0; left: 50%; top: 50%; width: min(92vh, 104vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: none;
  background: conic-gradient(from 225deg, var(--cold) 0 60%, var(--ember) 64%, var(--hot) 75%, transparent 75%);
  -webkit-mask: radial-gradient(closest-side, transparent 96%, #000 97%, #000 99%, transparent 100%); mask: radial-gradient(closest-side, transparent 96%, #000 97%, #000 99%, transparent 100%); opacity: .6; }
.no-gl #gl { display: none; }
.no-gl .fallback-ring { display: block; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 55%, rgba(5, 6, 8, .72) 100%); }

/* Top bar */
.bar::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -28px 0; pointer-events: none; background: linear-gradient(rgba(8, 9, 11, .92), rgba(8, 9, 11, .6) 62%, transparent); }
.bar { position: fixed; z-index: 30; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 600; font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; }
.brand svg { width: 24px; height: 24px; }
.bar nav { display: none; gap: 28px; margin-left: auto; margin-right: 12px; }
.bar nav a { font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; color: var(--text-soft); text-decoration: none; transition: color .3s var(--ease); }
.bar nav a:hover { color: var(--text); }
@media (min-width: 820px) { .bar nav { display: flex; } }

/* Buttons */
.mag { display: inline-block; will-change: transform; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border-radius: 999px; background: var(--hot); color: var(--btn-text); font-family: var(--mono); font-weight: 500; font-size: .95rem; letter-spacing: .02em; text-decoration: none; overflow: hidden; isolation: isolate; transition: box-shadow .4s var(--ease); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 50px -12px var(--hot); }
.btn > span { position: relative; z-index: 1; display: inline-block; }
.btn::before { content: ""; position: absolute; z-index: 0; width: 220px; height: 220px; left: var(--mx, 50%); top: var(--my, 50%); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), transparent); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.btn:hover::before { opacity: 1; }
.btn:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 16px 70px -8px var(--hot); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: .8rem; }
.btn-big { min-height: 64px; padding: 0 44px; font-size: 1.1rem; }
.btn:focus-visible { outline-color: var(--text); }

/* HUD */
.hud { position: fixed; z-index: 20; inset: 0; pointer-events: none; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--text-dim); }
.hud-top { position: absolute; right: var(--gutter); top: 74px; padding: 6px 10px; border-radius: 8px; background: rgba(8, 9, 11, .72); text-align: right; line-height: 1.7; }
.hud b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.hud-line { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 18px; height: 1px; background: rgba(255, 255, 255, .12); }
.hud-line i { position: absolute; inset: 0; display: block; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--cold), var(--ember) 75%, var(--hot)); }
@media (max-height: 560px) { .hud-top { display: none; } }

/* The stage: one message at a time, centered over the ring */
main { position: relative; z-index: 10; }
.stage { position: fixed; inset: 0; height: 100svh; pointer-events: none; }
.scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 96px var(--gutter) 48px; text-align: center; }
.scene:not(.is-first) .vis, .scene:not(.is-first) .act { opacity: 0; visibility: hidden; }
.vis { width: min(1120px, 100%); text-shadow: 0 1px 2px rgba(5, 6, 8, .9), 0 4px 18px rgba(5, 6, 8, .8), 0 12px 50px rgba(5, 6, 8, .85); }
.inner { position: relative; isolation: isolate; width: fit-content; max-width: 100%; margin-inline: auto; }
.scene[data-kind="stats"] .inner { width: 100%; }
@media (max-width: 719px) { .inner::before { inset: -9% -4%; } .scene[data-kind="stats"] .inner::before { inset: -10% -4%; } }
/* A soft dark pool hugging each message, so words stay readable whatever passes behind them. */
.inner::before { content: ""; position: absolute; z-index: -1; inset: -20% -10%; pointer-events: none; background: radial-gradient(closest-side, rgba(8, 9, 11, .93) 0%, rgba(8, 9, 11, .9) 74%, rgba(8, 9, 11, 0) 100%); }
.scene[data-kind="stats"] .inner::before { inset: -32% -6%; }
.capture .inner::before, .capture .hud, .capture .sub, .capture .chips, .capture .act, .capture .bar nav, .capture .bar .mag { display: none !important; } /* used only to make the share image */
.audit .vis, .audit .vis * { color: transparent !important; text-shadow: none !important; } /* used by tests/shops_test.mjs */
.inner { display: grid; justify-items: center; gap: clamp(14px, 2.2vh, 22px); width: 100%; }
.kicker { font-family: var(--mono); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ember); }
.head { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(3.3rem, 11.5vw, 9.4rem); line-height: .92; letter-spacing: .005em; max-width: 13ch; }
.w { display: inline-block; white-space: nowrap; }
.c { display: inline-block; will-change: auto; }
.head.soft-wrap { position: relative; }
.head .soft { position: absolute; inset: 0; filter: blur(14px); opacity: 0; pointer-events: none; }
.sub { max-width: 40ch; font-size: clamp(1.02rem, 2.1vw, 1.3rem); color: var(--text-soft); line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 4px 0 0; padding: 0; }
.chips li { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(10, 11, 13, .55); font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: var(--text-soft); text-shadow: none; }
.act { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.scene[data-kind="finale"] .scene-body { padding-bottom: 46px; }
.scene[data-kind="finale"] .head { font-size: clamp(3.1rem, min(10.5vw, 15vh), 8.6rem); }
.scene-body { display: grid; justify-items: center; gap: clamp(16px, 2.6vh, 28px); width: 100%; }
.cue { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.cue::after { content: ""; display: block; width: 1px; height: 22px; margin: 8px auto 0; background: linear-gradient(var(--text-dim), transparent); animation: cue 2.4s var(--ease) -0.8s infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Stats */
.stats { display: grid; gap: 10px; width: min(980px, 100%); margin: 0; padding: 0; list-style: none; text-shadow: none; }
.stat { perspective: 800px; pointer-events: auto; }
.stat-in { padding: clamp(14px, 2.4vh, 26px) 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(12, 13, 16, .82); transition: border-color .4s var(--ease), box-shadow .4s var(--ease); transform-style: preserve-3d; }
.stat-in:hover { border-color: rgba(255, 138, 42, .6); box-shadow: 0 20px 60px -24px var(--ember); }
.stat-num { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 8vw, 6rem); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-label { display: block; margin-top: 6px; font-size: .9rem; color: var(--text-soft); line-height: 1.35; }
.fine { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--text-soft); max-width: 60ch; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 719px) { .scene[data-kind="stats"] .head { font-size: 3rem; } .stat-in { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; text-align: left; padding: 10px 14px; } .stat-num { font-size: 2.5rem; } .stat-label { margin-top: 0; font-size: .82rem; } }

/* Finale footer */
.foot { position: absolute; left: 0; right: 0; bottom: 26px; width: fit-content; max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto; padding: 4px 14px; border-radius: 12px; background: rgba(8, 9, 11, .8); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-family: var(--mono); font-size: .68rem; color: var(--text-dim); pointer-events: auto; }
.foot.act { flex-direction: row; align-items: center; justify-content: center; }
.foot a { display: inline-flex; align-items: center; min-height: 28px; color: var(--text-soft); }
@media (pointer: coarse) { .foot a { min-height: 44px; } }
.foot p { width: 100%; text-align: center; }

#track { position: relative; z-index: -1; width: 100%; height: 900vh; }

/* Short phone screens */
@media (max-height: 700px) and (max-width: 719px) { .head, .scene[data-kind="finale"] .head { font-size: 2.9rem; } .chips { display: none; } .foot p { display: none; } }
@media (max-height: 600px) { .chips, .foot p, .cue { display: none; } .head { font-size: clamp(2.4rem, 13vh, 5rem); } .scene { padding-top: 70px; padding-bottom: 28px; } }

/* Reduced motion (also used if the scripts can't run): a plain page in normal flow */
.rm #track { display: none; }
.rm .stage { position: static; height: auto; pointer-events: auto; }
.rm .scene { position: relative; inset: auto; min-height: 88vh; }
.rm .scene .vis, .rm .scene .act { opacity: 1 !important; visibility: visible !important; }
.rm .hud, .rm .cue { display: none; }
.rm .foot { position: static; margin-top: 28px; }
.rm .scene[data-kind="finale"] { display: block; padding-top: 22vh; }
@media (prefers-reduced-motion: reduce) { .cue::after { animation: none; } .btn, .btn::before, .stat-in { transition: none; } }

.ns { position: relative; z-index: 10; min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 24px; text-align: center; }
.ns h1 { font-family: var(--display); font-size: clamp(3rem, 12vw, 8rem); text-transform: uppercase; line-height: .92; }