/* the intro window: a document, wide, the two vehicles side by side */
.win--intro { width: 760px; }
.doc .intro__lede { margin: 0 0 var(--s7); }
.vehicles { margin-top: var(--s4); }
.vehicles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: 0 0 var(--s5); }
.vehicle { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); background: var(--paper); border: var(--hairline); box-shadow: var(--shadow-hard); cursor: pointer; text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.vehicle:active { background: var(--wash); }
.vehicle.is-picked { box-shadow: var(--shadow-hard), 0 0 0 3px var(--paper), 0 0 0 5px var(--amber); }
.vehicle canvas { display: block; width: 100%; aspect-ratio: 1; height: auto; background: var(--wash); background-image: var(--stipple); border: var(--hairline); }
.vehicle__name { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.vehicle__name i { font-style: normal; color: var(--ink3-text); font-size: var(--fs-sys); }
.vehicle.is-picked .vehicle__name i { color: var(--ink); }
.vehicle dl { display: grid; grid-template-columns: 64px 1fr; gap: 2px var(--s2); margin: 0; font-family: var(--type-mono); font-size: var(--fs-data); letter-spacing: .05em; text-transform: uppercase; }
.vehicle dt { color: var(--ink3-text); }
.vehicle dd { margin: 0; }
.clockrow { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); }
.clockrow > span:first-child { line-height: 16px; }
.slider-wrap { flex: 1; display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.clockrow > span:first-child { color: var(--ink3-text); flex: none; }
.clockrow__val { flex: none; width: 48px; font-weight: 400; font-family: var(--type-mono); font-size: 14px; letter-spacing: .05em; text-align: right; }
/* the slider: a dithered track, an amber thumb, no easing. The thumb snaps to the four stops. */
.slider { width: 100%; display: block; -webkit-appearance: none; appearance: none; height: 16px; margin: 0; background: var(--paper); background-image: var(--d25); background-size: var(--dither-size); border: var(--hairline); cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 28px; background: var(--amber); border: var(--hairline); box-shadow: var(--shadow-hard); border-radius: 0; }
.slider::-moz-range-thumb { width: 14px; height: 26px; background: var(--amber); border: var(--hairline); box-shadow: var(--shadow-hard); border-radius: 0; }
.slider::-moz-range-track { background: transparent; }
.clockrow__ticks { display: flex; justify-content: space-between; padding: 0 8px; }
.tick { width: 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 2px 0; border: 0; background: none; line-height: 1.4; color: var(--ink3-text); white-space: nowrap; overflow: visible; cursor: pointer; }
.tick b { font-weight: 400; font-family: var(--type-mono); font-size: 12px; letter-spacing: .05em; }
.tick span { font-size: 9px; }
.tick.is-picked { color: var(--ink); }
.tick:first-child { align-items: flex-start; } .tick:last-child { align-items: flex-end; }
.tick > * { display: block; }
@media (max-width: 767px) {
  .vehicles { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .tick span { display: none; }
  .win--intro .win__body { max-height: calc(100vh - 120px); overflow-y: auto; }
}

/* the name, as on the share card: the machine voice huge, the serif line under it */
.doc .stamp { margin: 0 0 var(--s4); display: flex; flex-direction: column; gap: var(--s1); }
.stamp__name { font-family: var(--type-bit); font-weight: 700; font-size: 72px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.stamp__sub { font-family: var(--type-doc); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.015em; }
@media (max-width: 767px) { .stamp__name { font-size: 40px; } .stamp__sub { font-size: var(--fs-h3); line-height: var(--lh-h3); } }

/* ---- the attract mode. Two acts, all steps(), no eases.
   Act one, the title card: the window drops in holding only the name, centered. ROLL-UP slams in
   letter by letter (amber, then ink), shakes, flashes amber, and the line under it types.
   Act two, the document opens (#intro.is-open, set from main.js at 2000ms): the name takes its place
   at the top and the rest of the page appears one beat at a time. ROLL blinks until pressed.
   Reveals are `hold` animations that end in the base style: fill modes on steps() opacity
   animations left stale values in headless Chromium. */
#intro { background-image: var(--d50); }
#intro:not(.is-on) .win--intro { visibility: hidden; }
#intro::after { content: ""; position: fixed; inset: 0; z-index: 2; background: var(--amber); pointer-events: none; opacity: 0; }
#intro.is-on::after { animation: flashout 1110ms linear; }
@keyframes flashout { 0%, 89% { opacity: 0; } 89.01%, 100% { opacity: 1; } }
.win--intro { border-width: 2px; box-shadow: var(--shadow-hard-lg); }
.win--intro .win__body { max-height: calc(100vh - 140px); overflow-y: auto; }
#intro.is-on .win--intro { animation: drop 240ms steps(3) both; }
@keyframes drop { from { translate: 0 -48px; opacity: 0; } to { translate: 0 0; opacity: 1; } }

/* act one: the title card */
#intro:not(.is-open) .win--intro .win__body { display: flex; align-items: center; justify-content: center; min-height: 360px; }
#intro:not(.is-open) .win--intro .win__body > :not(.stamp), #intro:not(.is-open) .win--intro .win__foot { display: none; }
#intro:not(.is-open) .doc .stamp { margin: 0; align-items: center; text-align: center; }
#intro.is-on .stamp__name { animation: shake 160ms steps(4) 990ms both; }
@keyframes shake { 0% { translate: 0 0; } 25% { translate: -3px 2px; } 50% { translate: 3px -1px; } 75% { translate: -2px -2px; } 100% { translate: 0 0; } }
#intro.is-on .stamp__name i { display: inline-block; font-style: normal; animation: slam 180ms steps(3) both; animation-delay: calc(240ms + var(--i) * 90ms); }
@keyframes slam { 0% { opacity: 0; scale: 3.2; color: var(--amber); } 34% { opacity: 1; scale: 2; color: var(--amber); } 67% { opacity: 1; scale: 1.2; color: var(--amber); } 100% { opacity: 1; scale: 1; color: var(--ink); } }
#intro.is-on:not(.is-open) .stamp__sub { white-space: nowrap; overflow: hidden; animation: typed 600ms steps(27) 1100ms both; }
@keyframes typed { from { width: 0; } to { width: 100%; } }

/* the gate: once the name is in, a prompt blinks until the tap or key that opens the picker */
.stamp__go { display: none; font-family: var(--type-bit); font-size: var(--fs-sys); letter-spacing: .1em; color: var(--ink); margin-top: var(--s4); }
#intro.is-ready:not(.is-open) .stamp__go { display: block; animation: gate 800ms linear infinite; }
@keyframes gate { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
#intro.is-on:not(.is-open) .win--intro { cursor: pointer; }

/* act two: the document opens */
@keyframes hold { from, to { opacity: 0; } }
#intro.is-open .intro__lede { animation: hold 150ms steps(1); } #intro.is-open .vehicles { animation: hold 350ms steps(1); } #intro.is-open .clockrow { animation: hold 550ms steps(1); }
#intro.is-open .win--intro .data { animation: hold 650ms steps(1); } #intro.is-open .win--intro .win__foot { animation: hold 750ms steps(1); }
[data-roll] { padding: 10px 32px; font-size: 14px; font-weight: 700; letter-spacing: .12em; background: var(--amber); border: 2px solid var(--ink); box-shadow: var(--shadow-hard-lg), 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); margin: 4px 6px; }
[data-roll]:active { background: var(--ink); color: var(--amber); }
#intro.is-open [data-roll] { animation: shout 600ms linear 750ms infinite; }
@keyframes shout { 0%, 49.9% { background: var(--amber); } 50%, 100% { background: var(--paper); } }
@media (max-width: 767px) { .win--intro .win__foot { flex-wrap: wrap; } [data-roll] { flex: 1; } }
#intro.is-open [data-roll]:hover, #intro.is-open [data-roll]:focus-visible, #intro.is-open [data-roll]:active { animation: none; }
@media (max-width: 767px) {
  #intro:not(.is-open) .win--intro .win__body { min-height: 240px; }
  #intro.is-on:not(.is-open) .stamp__sub { white-space: normal; width: auto; animation: hold 1100ms steps(1); }
}
@media (pointer: coarse) { .win--intro .data { display: none; } }