/* ─────────────────────────────────────────────
   Carb King · coming-soon · futuristic dark
   Mobile-first · single viewport, no scroll.
   ───────────────────────────────────────────── */

:root {
  --bg-0:  oklch(0.14 0.02 250);
  --bg-1:  oklch(0.18 0.025 255);
  --bg-edge: oklch(0.10 0.02 250);

  --ink:        oklch(0.97 0.01 85);
  --ink-soft:   oklch(0.78 0.015 85);
  --ink-mute:   oklch(0.56 0.02 80);
  --ink-dim:    oklch(0.40 0.02 80);
  --rule:       oklch(0.97 0.01 85 / 0.12);
  --rule-soft:  oklch(0.97 0.01 85 / 0.06);

  --a-warm:     oklch(0.82 0.14 72);
  --a-warm-ink: oklch(0.88 0.12 72);
  --a-hot:      oklch(0.78 0.16 48);
  --a-cool:     oklch(0.85 0.10 210);

  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans:  "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

body {
  height: 100dvh;
  width: 100vw;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(120% 80% at 50% 120%, var(--bg-1) 0%, transparent 55%),
    radial-gradient(90% 60% at 50% -10%, oklch(0.20 0.04 260) 0%, transparent 50%),
    var(--bg-0);
  position: relative;
  isolation: isolate;
}

::selection { background: var(--a-warm); color: var(--bg-0); }

/* ─── background layers ─── */
#field {
  position: fixed; inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  opacity: 0.9;
}
.vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(100% 70% at 50% 50%, transparent 40%, var(--bg-edge) 100%);
}
.scan {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to bottom, transparent 0, transparent 2px, oklch(1 0 0 / 0.012) 3px, transparent 4px);
  background-size: 100% 4px;
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ─────────────────────────────────────────────
   MOBILE-FIRST BASE (≤720px effectively)
   ───────────────────────────────────────────── */

.stage {
  position: relative;
  height: 100dvh;
  width: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 18px 18px;
  gap: 18px;
  overflow: hidden;
}

/* rails — 2 columns on mobile, 3 on larger */
.rail {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  position: relative;
}
.rail--top    { padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.rail--bottom { padding-top: 10px;    border-top: 1px solid var(--rule); }

/* corner ticks */
.rail::before, .rail::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--rule);
}
.rail--top::before    { top: -1px; left: 0;  border-right: 0; border-bottom: 0; }
.rail--top::after     { top: -1px; right: 0; border-left: 0;  border-bottom: 0; }
.rail--bottom::before { bottom: -1px; left: 0;  border-right: 0; border-top: 0; }
.rail--bottom::after  { bottom: -1px; right: 0; border-left: 0;  border-top: 0; }

.cell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

/* MOBILE: show brand + status (left) — show status pill + clock (right via status cell) */
.cell--brand    { grid-column: 1; justify-content: flex-start; }
.cell--status   { grid-column: 2; justify-content: flex-end; }
.cell--coord    { display: none; }   /* clock hidden on mobile */
.cell--countdown{
  grid-column: 1;
  justify-content: flex-start;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.cell--meta     { display: none; }   /* meta hidden on mobile */
.cell--legend   { grid-column: 2; justify-content: flex-end; gap: 6px; }

.mark {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  color: var(--a-warm);
  border-radius: 1px;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1;
  margin-top: 2px;
  white-space: nowrap;
}
.cell--brand { white-space: nowrap; }

.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--a-warm);
  box-shadow: 0 0 8px var(--a-warm);
  animation: pulse 2.2s var(--ease) infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 oklch(0.82 0.14 72 / 0.6); }
  50%     { opacity: 0.55; box-shadow: 0 0 0 8px oklch(0.82 0.14 72 / 0); }
}

.status-text {
  color: var(--a-warm-ink);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 10px;
}

.rail-label {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  font-size: 9px;
  margin-right: 6px;
}
.rail-label--hero {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-soft);
  margin-right: 0;
}

.countdown {
  display: inline-flex; align-items: baseline; gap: 1px;
  color: var(--ink);
}
.count-value {
  font-family: var(--mono);
  font-feature-settings: "tnum";
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.count-value--sec { color: var(--a-warm-ink); }
.count-sep { color: var(--ink-dim); margin: 0 1px; }

.meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
}
.meta-key  {
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  font-family: var(--mono);
  white-space: nowrap;
}
.meta-val  {
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  font-size: 10px;
  text-transform: uppercase;
  font-family: var(--mono);
  white-space: nowrap;
}
.meta-sep {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: var(--rule);
  opacity: 0.8;
  flex-shrink: 0;
}

.legend-sq {
  width: 6px; height: 6px;
  display: inline-block;
  transform: rotate(45deg);
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}
.cell--legend span:not(.legend-sq) {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.hero {
  align-self: stretch;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-auto-rows: min-content;
  gap: clamp(10px, 2vh, 22px);
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}

.eyebrow {
  margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--a-warm-ink);
}
.eyebrow-tick {
  width: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--a-warm-ink), transparent);
}

.headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, min(8vw, 6vh), 56px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 0 40px oklch(0.97 0.01 85 / 0.08);
}
.headline .line { display: block; }
.headline em {
  font-style: italic;
  background: linear-gradient(92deg, var(--a-warm) 0%, var(--a-hot) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.04em;
}
.headline em .char {
  background: linear-gradient(92deg, var(--a-warm) 0%, var(--a-hot) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* char reveal */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(8px);
  transition:
    opacity 700ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 900ms var(--ease-out);
}
.char.is-in { opacity: 1; transform: none; filter: blur(0); }
.char.space { width: 0.28em; }

[data-reveal]:not([data-reveal-kind="chars"]) {
  opacity: 0; transform: translateY(10px); filter: blur(6px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; filter: blur(0); }

.sub {
  max-width: 42ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
  padding: 0 4px;
}

.ribbon {
  width: 100%;
  max-height: 18vh;
  height: clamp(56px, 12vh, 96px);
  position: relative;
  filter: drop-shadow(0 0 18px oklch(0.82 0.14 72 / 0.35));
}
.ribbon-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.rail-trace {
  stroke: var(--ink);
  stroke-opacity: 0.06;
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 2 6;
}
.rail-trace--b { stroke-opacity: 0.035; }

.ribbon-glow { opacity: 0.6; filter: blur(6px); }

.ribbon-line {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: draw 2.8s var(--ease-out) 0.5s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.traveller {
  fill: var(--a-warm);
  filter: drop-shadow(0 0 6px var(--a-warm));
  opacity: 0;
  animation: fadein 0.6s var(--ease) 3.0s forwards;
}
.traveller-halo {
  fill: var(--a-warm);
  opacity: 0;
  animation: halo 2.4s var(--ease) 3.0s infinite;
}
@keyframes halo {
  0%   { opacity: 0.5; r: 4; }
  100% { opacity: 0;   r: 18; }
}
@keyframes fadein { to { opacity: 1; } }

/* ─────────────────────────────────────────────
   TABLET ≥ 560px
   ───────────────────────────────────────────── */
@media (min-width: 560px) {
  .stage { padding: 22px 28px; gap: 22px; }
  .rail { font-size: 11px; }
  .cell--coord { display: inline-flex; }
  .cell--meta  { display: inline-flex; }
  .rail { grid-template-columns: 1fr 1fr 1fr; }
  .cell--brand    { grid-column: 1; }
  .cell--status   { grid-column: 2; justify-content: center; }
  .cell--coord    { grid-column: 3; justify-content: flex-end; }
  .cell--countdown{ grid-column: 1; }
  .cell--meta     { grid-column: 2; justify-content: center; gap: 16px; }
  .cell--legend   { grid-column: 3; justify-content: flex-end; gap: 8px; }

  .brand-name { font-size: 18px; }
  .count-value { font-size: 13px; }
  .sub { font-size: 14px; max-width: 52ch; }
  .ribbon { height: 120px; }
  .cell--legend span:not(.legend-sq) { font-size: 10px; }
}

/* ─────────────────────────────────────────────
   DESKTOP ≥ 960px
   ───────────────────────────────────────────── */
@media (min-width: 960px) {
  .stage {
    padding: clamp(24px, 2.6vw, 36px) clamp(36px, 3.6vw, 56px);
    gap: clamp(24px, 2.8vw, 36px);
  }
  .rail { font-size: 11px; letter-spacing: 0.08em; }
  .rail--top    { padding-bottom: 14px; }
  .rail--bottom { padding-top: 14px; }
  .mark { width: 22px; height: 22px; }
  .brand-name { font-size: 20px; }
  .status-text { font-size: 11px; letter-spacing: 0.28em; }
  .rail-label { font-size: 10px; }
  .count-value { font-size: 14px; }

  .hero { max-width: 1360px; gap: clamp(18px, 2.2vw, 28px); padding: clamp(6px, 1.2vw, 14px) 0; }
  .eyebrow { font-size: 11px; letter-spacing: 0.34em; gap: 14px; }
  .eyebrow-tick { width: 28px; }
  .headline { font-size: clamp(44px, min(6.5vw, 9vh), 96px); line-height: 0.96; letter-spacing: -0.025em; }
  .sub { font-size: clamp(14px, 1.05vw, 16px); max-width: 58ch; line-height: 1.6; }

  .ribbon {
    width: min(1100px, 96%);
    max-height: 22vh;
    height: clamp(100px, 14vh, 180px);
    filter: drop-shadow(0 0 22px oklch(0.82 0.14 72 / 0.35));
  }

  .cell--legend span:not(.legend-sq) { font-size: 11px; }
}

/* very short viewports */
@media (max-height: 720px) {
  .hero { gap: 12px; }
  .headline { font-size: clamp(30px, 5.5vw, 52px); }
  .ribbon { height: 72px; }
}
@media (max-height: 600px) {
  .ribbon { height: 56px; }
  .hero { gap: 8px; }
  .headline { font-size: clamp(26px, 4.5vw, 40px); }
  .sub { font-size: 12px; }
  .eyebrow { font-size: 9px; }
}
@media (max-height: 480px) {
  .ribbon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .char, [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .ribbon-line { animation: none; stroke-dashoffset: 0; }
  .traveller, .traveller-halo { animation: none; opacity: 1; }
  .live-dot { animation: none; }
}