/* Stream Racers - the home page. Chrome comes from lab/lab.css; this is the
   hero with its race-as-decor, and the six doors. Vice '91 identity
   (owner, 2026-10-01; designed on preview/vapor/). */

/* ===== the hero ===== */
.hero { position: relative; height: 440px; overflow: hidden; border-bottom: 3px solid #000; background: #0b0716; }
.scene {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity .6s;
}
.scene.ready { opacity: 1; }
/* the landscape's geometry here (venue-scene.css draws it) */
.scene .venue-scene { --vs-horizon: 184px; --vs-road: 136px; --vs-dash-top: 66px; }
/* Faded under the copy on the left, so the scene is the page's backdrop and
   not a window to stare through. An overlay rather than mask-image or a
   filter: those push the whole animated scene through an offscreen surface. */
.scene::after {
    content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none;
    background: linear-gradient(90deg, rgba(11,7,22,.86) 0%, rgba(11,7,22,.66) 26%, rgba(11,7,22,.18) 48%, rgba(11,7,22,.12) 88%, rgba(11,7,22,.45) 100%);
}
.scene.paused .venue-scene *, .scene.paused .l-car * { animation-play-state: paused !important; }
/* the roadside goes by over the road's far edge, so it sits above the road;
   the snow and the rain fall over the cars */
.scene .vs-roadside { z-index: 3; }
.scene .vs-road { z-index: 2; }
.scene .vs-fx, .scene .vs-snow { z-index: 6; }

.l-car { position: absolute; left: 56%; z-index: 4; will-change: transform; }
.l-car.lane-a { bottom: 80px; }
.l-car.lane-b { bottom: 4px; z-index: 5; }
/* the race's own speed streaks (style.css .streak), behind the cars */
.l-streaks { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; z-index: 4; }

/* the venue's name, once per visit, like a district sign */
.l-caption {
    position: absolute; right: 4%; bottom: 20px; z-index: 9;
    display: flex; flex-direction: column; align-items: flex-end;
    opacity: 0; pointer-events: none;
}
.l-caption b {
    font-family: 'Mr Dafoe', 'Segoe Script', cursive; font-weight: normal; font-size: 52px; line-height: .9;
    color: #ff4fae; -webkit-text-stroke: 1.5px #fff3fb; paint-order: stroke fill;
    text-shadow: 3px 3px 0 #000, 0 0 10px var(--neon);
}
.l-caption span { font-size: 14px; letter-spacing: 3px; color: #fff; text-shadow: 1px 1px 0 #000; }
.l-caption.in { animation: caption 9s ease-out forwards; }
@keyframes caption {
    0%   { opacity: 0; transform: translateY(6px); }
    6%   { opacity: .95; transform: none; }
    55%  { opacity: .95; }
    75%, 100% { opacity: 0; }
}

/* the copy, over the faded side */
.hero-text {
    position: absolute; z-index: 10;
    left: max(22px, calc((100vw - 1180px) / 2 + 22px)); top: 40px;
    max-width: 540px;
}
.logo { position: relative; height: 150px; margin: 0; font-weight: normal; }
.logo-a {
    display: block;
    font-size: 96px; line-height: 1; letter-spacing: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #e6e9ff 42%, #6c6f9e 50%, #d9f6ff 62%, #ffffff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: 2px #1a0b2e;
    filter: drop-shadow(0 4px 0 #000);
}
.logo-b {
    position: absolute; left: 150px; top: 58px;
    font-family: 'Mr Dafoe', 'Segoe Script', cursive; font-size: 104px; line-height: 1;
    color: #ffe2f3; transform: rotate(-7deg);
    text-shadow: 0 0 2px #000, 3px 3px 0 #000, 0 0 16px #ff2d95, 0 0 34px #ff2d95;
}
.hero-text p { margin: 6px 0 0; font-size: 22px; line-height: 1.3; color: #fff; text-shadow: 0 2px 0 #000; max-width: 470px; }
.hero-text p code { font-family: inherit; color: #ffd23f; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.hero-cta .btn { margin-left: 0; }
.btn.big { font-size: 24px; padding: 6px 20px; }
.hero-cta .btn.ghost { background: rgba(10, 6, 20, .78); color: #fff; }

.pause-btn {
    position: absolute; left: 12px; bottom: 12px; z-index: 11;
    width: 30px; height: 30px; padding: 0;
    font-family: inherit; font-size: 15px; color: #fff;
    background: rgba(10, 6, 20, .7); border: 2px solid rgba(255,255,255,.25); border-radius: 8px; cursor: pointer;
}
.pause-btn:hover, .pause-btn:focus-visible { border-color: #fff; }

/* ===== the doors: six cards from one series =====
   Each a small type poster (owner's pick, 2026-10-02; designed on the bench,
   preview/vapor/menu-c.html): the logo's lockup in miniature - chrome pixel
   caps with a Yellowtail script line tipped across them - on a synth-grid
   floor under a Monoton numeral where the outrun sun would be, the game's own
   art as a perforated stamp, a print colour bar. Fonts are ours (lab.css). */
.pc-grid {
    --pc-panel: #1f1438;
    --pc-paper: #f6eefc;
    --pc-script: 'Yellowtail', 'Segoe Script', 'Brush Script MT', cursive;
    --pc-neon: 'Monoton', 'Jersey 10', system-ui, sans-serif;
}
.home { padding-top: 26px; }
.pc-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 960px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pc-grid { gap: 10px; margin-top: 16px; } }

/* Each card sizes its insides to its OWN width (container queries), so the
   lockup, the sign and the stamp hold together at every page width, not
   only at the two this bench was drawn for. Three sizes: L (330px and up),
   M (240-329px), S (under 240px, two to a phone). */
.pc {
    --ac: #22e4ff;
    container: pc / inline-size;
    position: relative; isolation: isolate;
    display: flex; flex-direction: column;
    background: var(--pc-panel);
    border: 3px solid #000; border-radius: 14px;
    overflow: hidden;
    color: var(--text);
    transition: box-shadow .25s;
}
/* the inner keyline, as on the venue plates; it lights up with the sign */
.pc::after {
    content: ''; position: absolute; inset: 3px; z-index: 6; pointer-events: none;
    border: 1.5px solid var(--ac); border-radius: 9px;
    opacity: .3; transition: opacity .25s, box-shadow .25s;
}

/* -- the poster field: a sky, a neon horizon, a grid floor -- */
.pc-field {
    --hz: 92px;                 /* the horizon */
    position: relative; flex: none; height: 136px;
    background:
        radial-gradient(46% 40px at 76% var(--hz), color-mix(in srgb, var(--ac) 30%, transparent), transparent),
        linear-gradient(180deg, #120a24 0%, color-mix(in srgb, var(--ac) 14%, #1a1033) var(--hz), transparent var(--hz));
}
.pc-field::before {           /* the horizon line */
    content: ''; position: absolute; left: 0; right: 0; top: calc(var(--hz) - 1px); height: 2px; z-index: 1;
    background: linear-gradient(90deg, transparent, var(--ac) 30%, var(--ac) 90%, transparent);
    opacity: .55;
}
.pc-floor {
    position: absolute; left: 0; right: 0; top: var(--hz); bottom: 0; width: 100%; height: calc(100% - var(--hz));
    color: var(--ac); opacity: .32;
    -webkit-mask: linear-gradient(180deg, #000 30%, transparent);
            mask: linear-gradient(180deg, #000 30%, transparent);
}
.pc-floor line { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* -- the sign: a Monoton numeral standing on the horizon -- */
.pc-sign {
    --sz: 74px;
    position: absolute; right: 16px; top: calc(var(--hz) - var(--sz) * .84); z-index: 1;
    font-family: var(--pc-neon); font-size: var(--sz); line-height: 1; letter-spacing: 2px;
    color: var(--ac);
    opacity: .62;
    text-shadow: 0 0 6px color-mix(in srgb, var(--ac) 50%, transparent);
    transition: opacity .3s, text-shadow .3s;
}
.studio .pc-sign { --sz: 34px; letter-spacing: 1px; text-align: right; }

/* -- the stamp: the game's own art on perforated paper -- */
.pc-stamp {
    position: absolute; left: 16px; top: 12px; z-index: 2;
    transform: rotate(-4deg);
    filter: drop-shadow(3px 3px 0 #000);
}
.pc-paper {
    --r: 3.5px;
    display: block; padding: 9px;
    background: var(--pc-paper);
    -webkit-mask:
        radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
        linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
            mask:
        radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
        linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}
/* the picture: the home tile's sunset, bent to the card's colour */
.pc-art {
    display: flex; align-items: center; justify-content: center;
    width: 122px; height: 68px; overflow: hidden;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 4px),
        linear-gradient(#2b1055, color-mix(in srgb, var(--ac) 48%, #6a2c91) 64%, color-mix(in srgb, var(--ac) 74%, #fff));
}
.pc-art .px-icon { width: 48px; height: 48px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.pc-art .car-frame { flex: none; margin-top: 4px; }
.pc-art > img { width: 112px; height: auto; image-rendering: auto; border: 2px solid #000; border-radius: 5px; }
.pc-art .venue-plate { width: 100%; height: 100%; display: block; }

/* -- the lockup: chrome pixel caps, the script tipped across them -- */
.pc-head { position: relative; z-index: 3; margin-top: -32px; padding: 0 18px; }
.pc-title {
    margin: 0; font-weight: normal;
    font-size: 50px; line-height: 1; letter-spacing: 3px;
    background: linear-gradient(180deg, #ffffff 0%, #eef0ff 44%, #8d8fbd 50%, #e6f8ff 60%, #ffffff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    /* the outline as shadows: a stroke eats pixel letters from inside */
    filter: drop-shadow(1px 0 0 #1a0b2e) drop-shadow(-1px 0 0 #1a0b2e) drop-shadow(0 3px 0 #000);
}
.pc-script {
    position: relative; display: block; width: max-content; max-width: 100%;
    margin: -11px 0 0 38px;
    transform: rotate(-6deg); transform-origin: 0 60%;
    font-family: var(--pc-script); font-size: 33px; line-height: 1.05;
    color: color-mix(in srgb, var(--ac) 78%, #fff);
    text-shadow: 2px 2px 0 #000;
    white-space: nowrap;
}
/* the swash under the script, drawn on hover. An absolutely placed SVG keeps
   its own aspect ratio unless it is given a width. */
.pc-swash { position: absolute; left: 2px; bottom: -3px; width: calc(100% + 8px); height: 12px; overflow: visible; pointer-events: none; }
.pc-swash path { fill: none; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .45s ease-out, opacity .1s; }
.pc-swash .sw-shade { stroke: #000; stroke-width: 3.5; transform: translate(1.5px, 1.5px); }
.pc-swash .sw-line { stroke: var(--ac); stroke-width: 2.5; }

.pc-line { margin: 10px 18px 0; font-size: 19px; line-height: 1.25; color: var(--dim); }

/* -- small print and the print colour bar -- */
.pc-foot {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 18px 15px;
}
.pc-cap {
    min-width: 0;
    font-size: 14px; letter-spacing: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: color-mix(in srgb, var(--ac) 62%, #a99bc9);
}
.pc-bar { display: flex; gap: 3px; flex: none; margin-left: auto; }
.pc-bar i { display: block; width: 9px; height: 11px; background: var(--c); box-shadow: 0 0 0 1.5px #000; }
.pc-bar i:first-child { width: 18px; transition: width .3s ease-out; }

/* -- Studio: the streamer's door, in gold -- */
.pc.studio { background: #211733; }
.pc.studio::after { opacity: .5; }
.pc.studio .pc-title {
    background: linear-gradient(180deg, #fffbe6 0%, #ffe680 40%, #a8701a 50%, #ffd23f 62%, #fff4c2 100%);
    -webkit-background-clip: text; background-clip: text;
}
.pc.studio .pc-script { color: #fff4cf; }

/* ===== lit: hover, keyboard focus, and the bench's "all lit" ===== */
.pc:hover, .pc:focus-visible {
    box-shadow: 0 0 18px color-mix(in srgb, var(--ac) 32%, transparent);
}
.pc:hover::after, .pc:focus-visible::after {
    opacity: 1;
    box-shadow: 0 0 6px var(--ac), inset 0 0 6px color-mix(in srgb, var(--ac) 45%, transparent);
}
.pc:hover .pc-sign, .pc:focus-visible .pc-sign {
    opacity: 1;
    text-shadow: 0 0 2px #fff, 0 0 8px var(--ac), 0 0 20px var(--ac), 0 0 36px color-mix(in srgb, var(--ac) 60%, transparent);
}
.pc:hover .pc-swash path, .pc:focus-visible .pc-swash path { stroke-dashoffset: 0; opacity: 1; }
.pc:hover .pc-bar i:first-child, .pc:focus-visible .pc-bar i:first-child { width: 36px; }

.pc:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
.pc.studio:focus-visible { outline-color: #22e4ff; }

/* ===== M: a card 240-329px wide (three across a small laptop, two across
   a tablet held upright) ===== */
@container pc (max-width: 329px) {
    .pc-field { --hz: 80px; height: 120px; }
    .pc-sign { --sz: 54px; right: 12px; }
    /* ON over AIR, so the sign clears the stamp */
    .studio .pc-sign { --sz: 26px; width: min-content; top: calc(var(--hz) - 54px); line-height: 1.02; }
    .pc-stamp { left: 12px; top: 10px; }
    .pc-paper { --r: 3px; padding: 7px; }
    .pc-art { width: 110px; height: 58px; }
    .pc-art .px-icon { width: 40px; height: 40px; }
    .pc-art > img { width: 92px; }
    .pc-head { margin-top: -28px; padding: 0 14px; }
    .pc-title { font-size: 40px; letter-spacing: 2px; }
    .pc-script { font-size: 28px; margin: -8px 0 0 28px; }
    .pc-line { margin: 8px 14px 0; font-size: 17px; }
    .pc-foot { padding: 10px 14px 13px; }
    .pc-cap { font-size: 12px; letter-spacing: 2px; }
}

/* ===== S: under 240px, two compact cards a row on a phone ===== */
@container pc (max-width: 239px) {
    .pc-field { --hz: 60px; height: 92px; }
    .pc-sign { --sz: 38px; right: 8px; letter-spacing: 1px; }
    .studio .pc-sign { --sz: 18px; top: calc(var(--hz) - 37px); right: 8px; }
    .pc-stamp { left: 9px; top: 8px; filter: drop-shadow(2px 2px 0 #000); }
    .pc-paper { --r: 2.5px; padding: 6px; }
    .pc-art { width: 64px; height: 38px; }
    .pc-art .px-icon { width: 32px; height: 32px; }
    /* the cars are drawn at a whole sprite scale; this is the home page's
       own phone shrink */
    .pc-art .car-frame { zoom: .5; margin-top: 3px; }
    .pc-art > img { width: 58px; border-width: 1px; border-radius: 3px; }
    .pc-head { margin-top: -22px; padding: 0 10px; }
    .pc-title { font-size: 26px; letter-spacing: 2px; filter: drop-shadow(1px 0 0 #1a0b2e) drop-shadow(-1px 0 0 #1a0b2e) drop-shadow(0 2px 0 #000); }
    .pc-script { font-size: 19px; margin: -3px 0 0 14px; text-shadow: 1.5px 1.5px 0 #000; }
    .pc-swash { height: 9px; bottom: -2px; }
    .pc-line { margin: 6px 10px 0; font-size: 15px; line-height: 1.2; }
    .pc-foot { padding: 8px 10px 10px; }
    /* the small print is a desktop luxury: at 11px it is noise */
    .pc-cap { display: none; }
    .pc-bar { gap: 2px; }
    .pc-bar i { width: 5px; height: 8px; box-shadow: 0 0 0 1px #000; }
    .pc-bar i:first-child { width: 10px; }
    .pc:hover .pc-bar i:first-child, .pc:focus-visible .pc-bar i:first-child { width: 18px; }
}
/* the card's own frame cannot answer its own container query */
@media (max-width: 600px) {
    .pc { border-radius: 12px; }
    .pc::after { inset: 2px; border-radius: 8px; border-width: 1px; }
}


/* ===== the developer's row ===== */
.bench-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 26px; padding-top: 14px;
    border-top: 2px dashed var(--line);
    font-size: 17px; letter-spacing: 1px;
}
.bench-row[hidden] { display: none; }
.bench-row span { font-size: 14px; letter-spacing: 3px; color: var(--dim); margin-right: 6px; }
.bench-row a {
    padding: 1px 10px;
    border: 2px solid var(--line); border-radius: 7px;
    color: #c9bce3;
}
.bench-row a:hover { border-color: #5e4e8c; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .scene *, .scene *::before, .scene *::after { animation: none !important; }
    .l-caption { opacity: .95; }
}

/* Between a phone and a full desktop the district caption needs the right
   third to itself, so the cars hold station further left. */
@media (max-width: 1100px) and (min-width: 761px) {
    .l-car { left: 44%; }
}

@media (max-width: 760px) {
    .hero { height: 460px; }
    .scene .venue-scene { --vs-horizon: 150px; --vs-sun: 140px; --vs-sun-right: -36px; }
    /* on a phone the copy fills the width, so the scene only comes up to full
       strength below the buttons, where the road and the cars are */
    .scene::after { background: linear-gradient(180deg, rgba(11,7,22,.86) 0%, rgba(11,7,22,.76) 58%, rgba(11,7,22,0) 76%); }
    .hero-text { left: 16px; right: 16px; top: 34px; }
    .logo { height: 104px; }
    .logo-a { font-size: 60px; }
    .logo-b { font-size: 70px; left: 92px; top: 34px; }
    .hero-text p { font-size: 19px; }
    .scene .vs-landmark { right: -60px; transform: scale(.7); transform-origin: 100% 100%; }
    .scene .vs-roadside > i { opacity: .5; }
    .l-car { left: 40%; }
    .l-caption { display: none; }
}

@media (max-width: 600px) {
    .hero-cta .btn.big { font-size: 20px; padding: 4px 14px; }
}