/* Brand tokens: the values below are the IR concept page's own :root (hue 291.9 violet
   on a purple-tinted near-neutral), not derived approximations. --gold is the page's
   light tint (accent-lt), since the page has no second hue. */
:root {
  --accent:       oklch(0.78 0.121 291.9);
  --ink:          oklch(0.26 0.010 303);
  --gold:         oklch(0.86 0.075 291.9);
  --accent-lt:    oklch(0.86 0.075 291.9);
  --accent-ink:   oklch(0.46 0.257 291.9);
  --accent-ink-d: oklch(0.40 0.223 291.9);
  --accent-lo:    oklch(0.78 0.121 291.9 / 0.14);
  --deep:         oklch(0.19 0.006 303);
  --paper:        oklch(0.99 0.004 303);
  --tint:         oklch(0.965 0.017 291.9);
  --tint-2:       oklch(0.91 0.035 291.9);
  --card:         oklch(0.996 0.002 303);
  --text-mid:     oklch(0.49 0.011 303);
  --line:         oklch(0.30 0.010 303 / 0.13);
  --serif: 'STIX Two Text', Georgia, serif;
  --sans:  'Sora', system-ui, sans-serif;
  --mono:  'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:300px; height:600px; overflow:hidden; background:var(--paper); }
body { font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
button { border:0; background:none; font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }

#banner {
  position:relative;
  width:300px;
  height:600px;
  overflow:hidden;
  cursor:pointer;
  background:var(--paper);
}

#top-rule {
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  z-index:6;
  background:linear-gradient(90deg, var(--accent-ink), var(--gold));
}

/* ── Persistent top chrome ──────────────────────────────────────── */
#top-bar {
  position:absolute;
  top:3px; left:0; right:0;
  z-index:5;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:13px 18px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#logo { display:flex; align-items:center; gap:7px; }
#logo img { display:block; width:90px; height:20px; }
#masthead {
  font-family:var(--mono);
  font-size:7.6px;
  font-weight:400;
  letter-spacing:0.1em;
  color:var(--text-mid);
}

/* ── Slide stack ────────────────────────────────────────────────── */
#slides { position:absolute; top:61px; left:0; right:0; bottom:123px; z-index:1; overflow:hidden; }

.slide {
  position:absolute; inset:0;
  opacity:0;
  z-index:1;
  pointer-events:none;
  transition:opacity 0.8s ease;
}
.slide.active { opacity:1; z-index:2; pointer-events:auto; }

.slide-copy {
  padding:20px 18px 0;
  transform:translateY(10px);
  transition:transform 0.8s var(--ease);
}
.slide.active .slide-copy { transform:translateY(0); }

.eyebrow {
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--accent-ink);
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:9px;
}
.eyebrow::before {
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  flex:none;
}

.slide-copy h1 {
  font-family:var(--serif);
  font-weight:700;
  font-size:21px;
  line-height:1.16;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.slide-copy h1 em { font-style:italic; color:var(--accent-ink); }

.lead {
  margin-top:8px;
  font-family:var(--sans);
  font-size:10.8px;
  line-height:1.44;
  color:var(--text-mid);
}

/* ── "Figure" schematic card, matching the site's plate component ─ */
.fig-card {
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--card);
  overflow:hidden;
}
.fig-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  background:var(--ink);
  color:#fff;
  font-family:var(--mono);
  font-size:6.6px;
  font-weight:400;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.fig-bar span:last-child { color:var(--accent-lt); }
.fig-body { padding:11px 11px 7px; }
.fig-body svg { width:100%; height:auto; display:block; }

/* figure line-art */
.fig-node rect { fill:var(--ink); }
.fig-rail { fill:none; stroke:var(--text-mid); stroke-width:1.6; }
.fig-ghost { fill:none; stroke:var(--tint-2); stroke-width:2; }
.fig-mark { fill:none; stroke-width:10.5; stroke-linecap:round; }
.fig-mark.a { stroke:var(--accent); }
.fig-mark.b { stroke:var(--ink); }
.fig-gold { fill:var(--gold); }

.fig-mesh line { stroke:var(--accent-lt); stroke-width:1; opacity:0.7; }
.fig-dot circle { fill:var(--accent-ink); }
.fig-hub { fill:var(--gold); stroke:var(--ink); stroke-width:1.4; }

.fig-step rect { fill:var(--tint); stroke:var(--line); stroke-width:1; }
.fig-step.accent rect { fill:var(--accent-lo); stroke:var(--accent-ink); }
.fig-step.gold rect { fill:var(--tint); stroke:var(--gold); }
.fig-step text {
  font-family:var(--mono);
  font-size:8.6px;
  font-weight:700;
  letter-spacing:0.01em;
  fill:var(--ink);
}
.fig-arrow { fill:none; stroke:var(--text-mid); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.fig-base { stroke:var(--line); stroke-width:1; }
.fig-bar-prior { fill:var(--tint-2); }
.fig-bar-now { fill:var(--accent-ink); }
.fig-bar-label { font-family:var(--serif); font-size:10px; font-weight:600; fill:var(--text-mid); }
.fig-bar-label.strong { fill:var(--accent-ink); font-weight:700; font-size:11.5px; }
.fig-bar-year { font-family:var(--mono); font-size:7.5px; fill:var(--text-mid); letter-spacing:0.04em; }

/* figure parts: boxes, labels, dashed "planned" outlines, inhibition bars */
.fig-box { fill:var(--tint); stroke:var(--line); stroke-width:1; }
.fig-box.hot  { fill:var(--accent-lo); stroke:var(--accent-ink); }
.fig-box.plan { fill:none; stroke:var(--accent-ink); stroke-width:1.2; stroke-dasharray:3 3; }
.fig-box.dark { fill:var(--ink); stroke:none; }
.fig-t   { font-family:var(--mono); font-size:7.4px; letter-spacing:0.04em; fill:var(--ink); }
.fig-t.inv { fill:#fff; }
.fig-t.m-case { letter-spacing:0.02em; }
.fig-sub { font-family:var(--mono); font-size:6px; letter-spacing:0.03em; fill:var(--text-mid); }
.fig-cap { font-family:var(--mono); font-size:6.4px; letter-spacing:0.05em; fill:var(--text-mid); }
.fig-inhib { fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; }

/* key-fact row, matching the site's .kf definition-list pattern */
.kf {
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.kf dt {
  font-family:var(--mono);
  font-size:7.8px;
  font-weight:400;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-mid);
}
.kf dd {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  font-family:var(--serif);
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  text-align:right;
}
.kf dd em {
  font-family:var(--mono);
  font-style:normal;
  font-weight:400;
  font-size:7.6px;
  letter-spacing:0.03em;
  color:var(--accent-ink);
}

/* ── Nav arrows ─────────────────────────────────────────────────── */
.nav-arrow {
  position:absolute;
  top:312px;
  z-index:5;
  width:24px; height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
  box-shadow:0 2px 8px color-mix(in oklch, var(--ink) 12%, transparent);
  transition:transform 0.15s ease, background 0.2s ease;
}
.nav-arrow svg { width:12px; height:12px; }
.nav-arrow:active { transform:scale(0.9); background:var(--tint); }
#arrow-prev { left:6px; }
#arrow-next { right:6px; }

/* ── Persistent dark band: dots + CTA ───────────────────────────── */
#dots {
  position:absolute;
  left:0; right:0; bottom:89px;
  z-index:5;
  background:var(--deep);
  display:flex;
  gap:6px;
  padding:11px 18px 8px;
}
.dot {
  width:13px; height:3px;
  border-radius:2px;
  background:oklch(1 0 0 / 0.28);
  padding:6px 0;
  background-clip:content-box;
  box-sizing:content-box;
  transition:background 0.3s ease, width 0.3s ease;
}
.dot.active { background-color:var(--accent); width:19px; }  /* background-color, not the shorthand: the shorthand resets background-clip and paints the whole hit area as a square */

#bottom-fixed {
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:5;
  background:var(--deep);
  padding:2px 18px 10px;
}
#bf-line {
  font-family:var(--mono);
  font-size:7.4px;
  font-weight:400;
  letter-spacing:0.11em;
  color:color-mix(in oklch, var(--accent-lt) 75%, transparent);
  margin-bottom:9px;
}
#cta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  height:42px;
  background:var(--accent);
  border-radius:3px;
  color:var(--deep);
  font-family:var(--sans);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.01em;
  box-shadow:0 8px 20px color-mix(in oklch, var(--accent) 30%, transparent);
  animation:cta-pulse 1.8s ease-in-out 2.6s 6;
}
#cta-arrow { width:13px; height:13px; }

/* Required disclosure line under the CTA */
#fls {
  margin-top:7px;
  font-family:var(--mono);
  font-size:6.4px;
  letter-spacing:0.03em;
  text-align:center;
  color:color-mix(in oklch, var(--accent-lt) 60%, transparent);
}
@keyframes cta-pulse {
  0%, 100% { box-shadow:0 8px 20px color-mix(in oklch, var(--accent) 30%, transparent); }
  50%      { box-shadow:0 8px 26px color-mix(in oklch, var(--accent) 55%, transparent), 0 0 0 5px color-mix(in oklch, var(--accent) 16%, transparent); }
}

/* ── Entrance sequence (initial load only) ─────────────────────── */
.reveal { opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
#banner.is-live .reveal { opacity:1; transform:none; }
#top-bar[data-delay="0"] { transition-delay:.05s; }
#dots.reveal { transition-delay:.5s; }
#bottom-fixed[data-delay="1"] { transition-delay:.6s; }

#click-tag-wrapper { position:absolute; width:0; height:0; overflow:hidden; }

@media (prefers-reduced-motion: reduce) {
  #cta { animation:none; }
  .reveal { transition-duration:.01s; transition-delay:0s !important; }
  .slide, .slide-copy { transition-duration:.2s; }
}