/* Overclocked — "Choose your ending" decision tree (js/chooser.js).
 * AI 2040-style inline flowchart: root box → split with italic edge quotes → two option cards.
 * Class prefix: cz-
 *
 * Reveal choreography: js/chooser.js adds .cz-armed (boxes start hidden) and later .is-in
 * (IntersectionObserver). Per-element stagger comes from the --cz-d custom property, which JS
 * sets during the reveal and clears once everything has settled (so hover stays instant). */

.chooser { padding: 64px 0 20px; }
.cz-head { margin-bottom: 16px; }
.chooser.is-active .cz-date { background: var(--accent); }
.cz-setup { margin: 0 0 6px; hyphens: auto; }

/* ---------- flow container + connector layer ---------- */
.cz-flow {
  position: relative;
  margin: 18px 0 0;
  padding: 40px 0 4px;             /* top padding = room for the incoming "story so far" stub */
  --cz-race: var(--red, #8b0000);
  --cz-slow: var(--green, #2b6039);
}
.cz-wires {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 0;
}

/* dotted "possible future" connectors */
.cz-wire {
  fill: none; stroke: var(--muted); stroke-width: 1.6;
  stroke-dasharray: 0 6; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .3s var(--ease), opacity .3s var(--ease);
}
.cz-flow[data-chosen] .cz-wire { opacity: .7; }

/* paper-coloured covers that retract to "draw" the dotted wires (pathLength = 1) */
.cz-cover {
  fill: none; stroke: var(--bg); stroke-width: 10; stroke-linecap: square; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms var(--ease) var(--cz-d, 0ms);
}
.cz-flow.is-in .cz-cover { stroke-dashoffset: -1.2; }

/* solid traced path: previews on hover, becomes the thick chosen line (pathLength = 1) */
.cz-trace {
  fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1.1;
  transition: stroke-dashoffset 700ms var(--ease) var(--cz-d, 0ms), stroke-width .28s var(--ease), stroke .3s var(--ease);
}
.cz-trace--race { stroke: var(--cz-race); }
.cz-trace--slowdown { stroke: var(--cz-slow); }
.cz-flow.is-in[data-hover='race'] .cz-trace--race,
.cz-flow.is-in[data-hover='slowdown'] .cz-trace--slowdown,
.cz-flow.is-in[data-chosen='race'] .cz-trace--race,
.cz-flow.is-in[data-chosen='slowdown'] .cz-trace--slowdown { stroke-dashoffset: 0; }
.cz-flow[data-hover='race'] .cz-trace--race,
.cz-flow[data-hover='slowdown'] .cz-trace--slowdown { stroke-width: 3.5; }
.cz-flow[data-chosen='race'] .cz-trace--race,
.cz-flow[data-chosen='slowdown'] .cz-trace--slowdown { stroke-width: 5.5; }
.cz-flow[data-chosen='race'][data-hover='race'] .cz-trace--race,
.cz-flow[data-chosen='slowdown'][data-hover='slowdown'] .cz-trace--slowdown { stroke-width: 6.5; }

/* the trunk ("story so far") coming into the root box */
.cz-stub {
  fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1.1;
  transition: stroke-dashoffset 520ms var(--ease) var(--cz-d, 0ms);
}
.cz-flow.is-in .cz-stub { stroke-dashoffset: 0; }
.cz-stub-dot { fill: var(--ink); opacity: 0; transition: opacity .3s var(--ease) var(--cz-d, 0ms); }
.cz-flow.is-in .cz-stub-dot { opacity: 1; }

/* decision node where the path splits */
.cz-fork {
  fill: var(--bg); stroke: var(--ink); stroke-width: 1.6; opacity: 0;
  transition: opacity .3s var(--ease) var(--cz-d, 0ms), fill .35s var(--ease), stroke .35s var(--ease);
}
.cz-flow.is-in .cz-fork { opacity: 1; }
.cz-flow[data-hover='race'] .cz-fork, .cz-flow[data-chosen='race'] .cz-fork { stroke: var(--cz-race); }
.cz-flow[data-hover='slowdown'] .cz-fork, .cz-flow[data-chosen='slowdown'] .cz-fork { stroke: var(--cz-slow); }
.cz-flow[data-chosen='race'] .cz-fork { fill: var(--cz-race); }
.cz-flow[data-chosen='slowdown'] .cz-fork { fill: var(--cz-slow); }

/* ---------- reveal (boxes fade + slide in, staggered) ---------- */
.cz-anim { transition: opacity .6s var(--ease) var(--cz-d, 0ms), transform .6s var(--ease) var(--cz-d, 0ms); }
.cz-flow.cz-armed:not(.is-in) .cz-anim { opacity: 0 !important; transform: translateY(14px) !important; }

/* ---------- root box ---------- */
.cz-root {
  position: relative; z-index: 1;
  max-width: 400px; margin: 0 auto; padding: 12px 18px 14px;
  text-align: center; background: var(--bg);
  border: 1.5px solid var(--ink); border-radius: var(--radius, 6px);
  transition: opacity .6s var(--ease) var(--cz-d, 0ms), transform .6s var(--ease) var(--cz-d, 0ms),
              border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cz-flow[data-hover='race'] .cz-root { border-color: var(--cz-race); box-shadow: 0 0 0 1px var(--cz-race); }
.cz-flow[data-hover='slowdown'] .cz-root { border-color: var(--cz-slow); box-shadow: 0 0 0 1px var(--cz-slow); }
.cz-parl { display: block; margin: 0 auto 6px; overflow: visible; }
.cz-seat {
  fill: var(--bg); stroke: var(--ink); stroke-width: 1.3;
  transition: fill .22s var(--ease), stroke .22s var(--ease);
}
.cz-flow[data-vote='race'] .cz-seat.is-l { fill: var(--cz-race); stroke: var(--cz-race); transition-delay: calc(var(--il, 0) * 35ms); }
.cz-flow[data-vote='slowdown'] .cz-seat.is-r { fill: var(--cz-slow); stroke: var(--cz-slow); transition-delay: calc(var(--ir, 0) * 35ms); }
.cz-root-kicker {
  display: block; margin-bottom: 4px;
  font-family: var(--mono); font-size: 10.5px; line-height: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.cz-root-q { display: block; font-size: 21px; line-height: 27px; }

/* ---------- branches: row 1 = edge quotes, row 2 = option cards ---------- */
.cz-branches {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 22px; row-gap: 22px; margin-top: 40px;
}
.cz-quote {
  position: relative; z-index: 1; align-self: center; justify-self: center;
  max-width: 250px; margin: 0; padding: 5px 8px;
  background: var(--bg);                      /* masks the wire so it reads as an edge label */
  font-style: italic; font-size: 17px; line-height: 23px; text-align: center; color: var(--ink-2);
  transition: opacity .6s var(--ease) var(--cz-d, 0ms), transform .6s var(--ease) var(--cz-d, 0ms), color .3s var(--ease);
}
.cz-flow[data-hover='race'] .cz-quote--race { color: var(--cz-race); }
.cz-flow[data-hover='slowdown'] .cz-quote--slowdown { color: var(--cz-slow); }

/* ---------- option cards ---------- */
.cz-card {
  --cz-c: var(--ink);
  position: relative; z-index: 1; align-self: stretch;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  width: 100%; min-width: 0; margin: 0; padding: 12px 14px;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  font: inherit; text-align: left; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--ink); border-radius: var(--radius, 6px); cursor: pointer;
  transition: opacity .6s var(--ease) var(--cz-d, 0ms), transform .6s var(--ease) var(--cz-d, 0ms),
              border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.cz-card--race { --cz-c: var(--cz-race); }
.cz-card--slowdown { --cz-c: var(--cz-slow); }
.cz-card:hover, .cz-card:focus-visible {
  border-color: var(--cz-c);
  background-color: color-mix(in srgb, var(--cz-c) 4%, var(--bg));
  box-shadow: 0 0 0 1px var(--cz-c), 0 10px 24px -16px color-mix(in srgb, var(--cz-c) 80%, transparent);
}
.cz-card:focus-visible { outline: 2px solid var(--cz-c); outline-offset: 3px; }
.cz-flow.is-in .cz-card.cz-anim:hover { transform: translateY(-2px); }
.cz-card:active { transform: translateY(1px) !important; }
.cz-card[aria-pressed='true'] {
  border-color: var(--cz-c);
  background-color: color-mix(in srgb, var(--cz-c) 6%, var(--bg));
  box-shadow: 0 0 0 1.5px var(--cz-c);
}
.cz-flow[data-chosen] .cz-card[aria-pressed='false'] { opacity: .72; }
.cz-flow[data-chosen] .cz-card[aria-pressed='false']:hover,
.cz-flow[data-chosen] .cz-card[aria-pressed='false']:focus-visible { opacity: 1; }

.cz-card-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; min-height: 20px; }
.cz-kicker {
  font-family: var(--mono); font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cz-c);
}
.cz-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 6px;
  font-family: var(--mono); font-size: 10px; line-height: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--cz-c); border-radius: 4px;
  opacity: 0; transform: scale(.85); visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.cz-card[aria-pressed='true'] .cz-badge { opacity: 1; transform: none; visibility: visible; }
.cz-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: cz-pulse 1.6s ease-in-out infinite; }
.cz-card-title { display: block; font-size: 25px; line-height: 29px; letter-spacing: -.005em; }

.cz-vote {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  font-family: var(--mono); font-size: 10.5px; line-height: 14px; color: var(--ink-2);
}
.cz-dots { display: inline-flex; gap: 3px; flex: none; }
.cz-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.25px solid var(--ink); background: transparent; }
.cz-dot.is-yes { background: var(--cz-c); border-color: var(--cz-c); }

/* sparkline preview of the ending's AI R&D trajectory */
.cz-spark { display: block; width: 100%; height: 58px; margin-top: 2px; }
.cz-spark svg { display: block; overflow: visible; }
.cz-sp-axis { stroke: var(--rule); stroke-width: 1; }
.cz-sp-fork { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; }
.cz-sp-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .02em; fill: var(--muted); }
.cz-sp-val {
  font-family: var(--mono); font-size: 10px; font-weight: 700; fill: var(--cz-c);
  opacity: 0; transition: opacity .35s var(--ease) calc(var(--cz-d, 0ms) + 1050ms);
}
.cz-sp-pre { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cz-sp-ghost {
  fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-linecap: round;
  stroke-dasharray: 0 3.5; opacity: .85;
}
.cz-sp-own {
  fill: none; stroke: var(--cz-c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1.1;
  transition: stroke-dashoffset 900ms var(--ease) calc(var(--cz-d, 0ms) + 250ms);
}
.cz-sp-dot { fill: var(--ink); }
.cz-sp-end { fill: var(--cz-c); opacity: 0; transition: opacity .3s var(--ease) calc(var(--cz-d, 0ms) + 1050ms); }
.cz-flow.is-in .cz-sp-own { stroke-dashoffset: 0; }
.cz-flow.is-in .cz-sp-end, .cz-flow.is-in .cz-sp-val { opacity: 1; }

.cz-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; line-height: 14px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink);
}
.cz-card[aria-pressed='true'] .cz-cta { color: var(--cz-c); }
.cz-cta-arrow { flex: none; transition: transform .25s var(--ease); }
.cz-card:hover .cz-cta-arrow, .cz-card:focus-visible .cz-cta-arrow { transform: translateX(3px); }
.cz-card[aria-pressed='true']:hover .cz-cta-arrow { transform: translateY(2px); }

/* ---------- bouncing cue + disclaimer ---------- */
.cz-cue {
  display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 16px auto 0;
  font-family: var(--mono); font-size: 10.5px; line-height: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); text-align: center;
  transition: opacity .6s var(--ease) var(--cz-d, 0ms), transform .6s var(--ease) var(--cz-d, 0ms), visibility .3s;
}
.cz-chev { display: block; color: var(--ink); animation: cz-bounce 1.5s var(--ease) infinite; }
.cz-flow[data-chosen] .cz-cue { opacity: 0; visibility: hidden; }   /* space kept: no layout jump */

.cz-note {
  position: relative; z-index: 1; margin: 18px 0 0; text-align: center;
  font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--muted);
}

.cz-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@keyframes cz-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes cz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- narrow columns / phones ---------- */
@media (max-width: 560px) {
  .chooser { padding-top: 48px; }
  .cz-flow { padding-top: 34px; }
  .cz-root { padding: 10px 12px 12px; }
  .cz-root-q { font-size: 19px; line-height: 24px; }
  .cz-branches { column-gap: 12px; row-gap: 16px; margin-top: 34px; }
  .cz-quote { font-size: 15px; line-height: 20px; padding: 4px 3px; }
  .cz-card { padding: 10px; gap: 6px; }
  .cz-card-title { font-size: 20px; line-height: 23px; }
  .cz-kicker { font-size: 10px; letter-spacing: .06em; }
  .cz-badge { font-size: 9px; padding: 1px 5px; }
  .cz-vote { font-size: 10px; line-height: 13px; }
  .cz-dot { width: 6px; height: 6px; }
  .cz-dots { gap: 2.5px; }
  .cz-cta { font-size: 10px; letter-spacing: .02em; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-chev, .cz-badge-dot { animation: none !important; }
}