/* ============================================================
   GT3 CAR HARDWARE
   Ported from design/art-direction/racing-shorts-gt3.html — the board where
   the car is the brightest thing in frame and the world is the cold dark
   thing. Four views:

     .rv  rear · 480×300  · chase cam, and the grid seen from back in the
                            field. Liveries -w -y -b.
     .fv  front · 700×420 · head-on hero, headlights are the only key.
                            Livery .amber.
     .pf  side · 576×210  · the shots taken from beside the road: the pit
                            box, the flyby, the tracking profile at the
                            line. Liveries .liv-w -r -y.
     .ov  overhead · 420×150 · the corner seen from straight above, for the
                            pass. Liveries .liv-w -r -y -b.

   Anything drawn in .pf belongs on a *cross* deck — see the note down
   there. A side-on car on the default deck drives at ninety degrees to the
   road it is standing on, which is what the first pass at three of these
   shorts did.

   The board's backlit 3/4 silhouette is deliberately not here. Every short
   is shot from behind the car, in front of it, beside it or above it, and a
   3/4 car dropped into any of those reads as a dark smear at the side of
   the road rather than as a rival.

   Nothing below is authored here. The art is the board's, at the board's
   own pixel geometry, so a fix on the board is a re-extract rather than a
   re-draw. Everything the *app* adds — scaling into a 520px portrait
   frame, and the motion — lives under "STAGING" at the bottom.

   Each car's parts are absolutely positioned in the car's own pixel space,
   so a car is only ever placed and scaled as a whole. The markup factories
   are RacingCars.rear / .front / .side / .over in js/cars.js.
   ============================================================ */

.gtc{position:absolute;z-index:40}
.gtc *{position:absolute}
/* The board inherits this from the racing tokens; the app's racing theme
   doesn't carry it, and a roundel set in the UI face stops reading as a
   number decal. */
.gtc{--font-heavy:"Arial Black","Helvetica Neue",Arial,sans-serif}


/* ─── A · rear view · night ─── */
.rv{width:480px;height:300px}
/* swan-neck rear wing: endplates, plane, gurney, top-mounted uprights */
.rv .wpe{top:8px;width:19px;height:88px;background:linear-gradient(180deg,#F4F6F9,#B0B9C6 38%,#525A68);clip-path:polygon(0 4%,100% 0,100% 86%,26% 100%,14% 62%,0 58%)}
.rv .wpd{top:34px;width:13px;height:34px;background:#131B28}
.rv .wgt{top:14px;width:11px;height:10px;background:linear-gradient(180deg,#D6DCE5,#7C8593)}
.rv .wgp{left:14px;top:24px;width:452px;height:14px;background:linear-gradient(180deg,#EFF2F6 0 18%,#9AA4B2 22%,#39414F 60%,#141922);border-radius:2px}
.rv .wgg{left:14px;top:21px;width:452px;height:4px;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.96) 48%,rgba(255,255,255,.22));border-radius:2px 2px 0 0}
.rv .wgl{left:14px;top:38px;width:452px;height:5px;background:#0A0E14;border-radius:0 0 2px 2px}
.rv .wgu{top:14px;width:9px;height:64px;background:linear-gradient(90deg,#C2CAD6,#4A5260 46%,#161C26);clip-path:polygon(0 0,100% 0,100% 100%,40% 96%)}
/* greenhouse: small, steeply raked */
.rv .gh{left:150px;top:74px;width:180px;height:50px;clip-path:polygon(0 100%,13% 8%,87% 8%,100% 100%);background:linear-gradient(180deg,#CBD2DC 0 12%,#39414F 18%,#121720)}
.rv .rw{left:166px;top:81px;width:148px;height:40px;clip-path:polygon(0 100%,10% 6%,90% 6%,100% 100%);background:linear-gradient(180deg,rgba(150,186,232,.26),rgba(6,11,20,.97) 54%)}
.rv .cage{top:87px;width:4px;height:32px;background:rgba(226,235,248,.13)}
.rv .band{left:170px;top:83px;width:140px;height:9px;background:rgba(240,244,250,.42)}
/* deck lid louvres */
.rv .deckl{left:196px;top:120px;width:88px;height:16px;background:repeating-linear-gradient(180deg,rgba(10,14,22,.8) 0 3px,transparent 3px 8px)}
/* wheels */
.rv .brk{top:196px;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,42,.55),transparent 70%);filter:blur(10px)}
.rv .ty{top:170px;width:88px;height:100px;border-radius:12px 12px 7px 7px;background:linear-gradient(90deg,#0A0E14,#2C333F 30%,#1A2029 62%,#04070C)}
.rv .tysh{top:174px;width:88px;height:7px;background:linear-gradient(90deg,transparent,rgba(196,212,236,.3),transparent);filter:blur(2px)}
.rv .tyw{top:212px;width:88px;height:4px;background:rgba(226,235,248,.14);filter:blur(1.2px)}
/* body: narrow roof, wide haunches */
.rv .bd{left:24px;top:112px;width:432px;height:162px;clip-path:polygon(3% 100%,0 56%,2% 38%,7% 28%,17% 22%,26% 12%,34% 6%,66% 6%,74% 12%,83% 22%,93% 28%,98% 38%,100% 56%,97% 100%);background:radial-gradient(84% 62% at 50% 16%,rgba(255,236,214,.22),transparent 64%),linear-gradient(90deg,rgba(4,6,12,.5) 0%,transparent 16%,transparent 84%,rgba(4,6,12,.5) 100%),linear-gradient(180deg,#F45040 0%,#E23A2C 9%,#C21E1C 26%,#E8382C 39%,#F2604A 43%,#8E1116 46%,#5C0A10 66%,#360609 84%,#1A0407 100%)}
.rv .haun{top:128px;width:104px;height:16px;background:linear-gradient(180deg,rgba(255,244,232,.5),transparent);filter:blur(3px)}
.rv .crown{left:150px;top:113px;width:180px;height:8px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8) 48%,transparent);filter:blur(2.2px)}
.rv .archl{top:168px;width:96px;height:5px;background:linear-gradient(90deg,transparent,rgba(10,14,22,.7) 20%,rgba(10,14,22,.7) 80%,transparent);border-radius:50%}
/* fender-top extraction louvres */
.rv .fvent{top:146px;width:56px;height:18px;background:repeating-linear-gradient(180deg,rgba(9,13,20,.82) 0 3px,transparent 3px 7px);transform:skewX(-10deg)}
.rv .stripe{top:116px;width:22px;height:112px;background:linear-gradient(180deg,rgba(250,252,254,.95),rgba(206,214,226,.6))}
.rv .lowpan{left:60px;top:206px;width:360px;height:32px;background:linear-gradient(180deg,rgba(244,247,251,.86),rgba(178,189,204,.4))}
.rv .rnd{left:216px;top:150px;width:48px;height:48px;border-radius:50%;background:#F6F8FB;box-shadow:0 0 0 3px rgba(12,18,30,.85);font-family:var(--font-heavy);font-size:30px;color:#111620;display:flex;align-items:center;justify-content:center}
.rv .dcb{background:rgba(13,19,31,.86);border-radius:1px}
.rv .dcw{background:rgba(246,249,252,.9);border-radius:1px}
.rv .dcg{background:rgba(30,138,76,.9);border-radius:1px}
/* slim LED tail bars set into the fender */
.rv .tlb{top:176px;width:74px;height:18px;border-radius:3px;background:linear-gradient(180deg,#232A36,#080C12)}
.rv .tl{top:180px;width:66px;height:11px;border-radius:2px;background:linear-gradient(180deg,#FFEDE8,#FF5A48 26%,#EE1C22 62%,#9A0810);box-shadow:0 0 16px 6px rgba(255,56,52,.95),0 0 54px 24px rgba(232,32,42,.5)}
.rv .tlc{top:184px;width:66px;height:4px;background:rgba(255,240,238,.95);filter:blur(.5px)}
.rv .rl{left:232px;top:214px;width:16px;height:10px;border-radius:2px;background:#FF6258;box-shadow:0 0 11px 4px rgba(240,40,44,.85),0 0 32px 13px rgba(226,30,40,.34)}
/* rear crash structure + tall strake diffuser */
.rv .bump{left:86px;top:236px;width:308px;height:20px;background:linear-gradient(180deg,#1A212D,#080C13);border-radius:3px}
.rv .diff{left:120px;top:242px;width:240px;height:46px;clip-path:polygon(6% 100%,0 26%,12% 0,88% 0,100% 26%,94% 100%);background:linear-gradient(180deg,#252D3A 0 8%,#0C1119 12%,#04070B);border-radius:0 0 4px 4px}
.rv .strake{top:250px;width:5px;height:36px;background:linear-gradient(180deg,#39414F,#0A0E14)}
.rv .exh{top:232px;width:17px;height:17px;border-radius:50%;background:radial-gradient(circle,#3E2F20,#06090D 68%);box-shadow:inset 0 0 7px 2px rgba(255,150,70,.45)}
.rv .tow{left:396px;top:242px;width:20px;height:11px;border-radius:6px;border:3px solid #E8C21E;background:transparent}

/* ─── C · front-on · wet night ─── */
.fv{width:700px;height:420px}
.fv .fwe{top:26px;width:16px;height:36px;background:linear-gradient(180deg,#E8EBF0,#828B99 46%,#39414F)}
.fv .fwg{left:150px;top:30px;width:400px;height:12px;background:linear-gradient(180deg,#E4E8EE 0 18%,#8A939F 22%,#2D3543 60%,#11151D);border-radius:2px}
.fv .scoop{left:322px;top:42px;width:56px;height:13px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#1B2230,#080C13)}
.fv .roof{left:232px;top:52px;width:236px;height:22px;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);background:linear-gradient(180deg,#E6EAF0 0 12%,#767F8C 18%,#141921)}
.fv .wsh{left:200px;top:72px;width:300px;height:70px;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(160,198,246,.22),rgba(5,10,19,.98) 52%)}
.fv .sunb{left:216px;top:74px;width:268px;height:15px;background:linear-gradient(180deg,rgba(236,241,248,.46),rgba(170,182,198,.24))}
.fv .wipe{left:296px;top:120px;width:112px;height:3px;background:rgba(226,235,248,.24);transform:rotate(-4deg)}
.fv .mst{top:116px;width:34px;height:6px;background:#131924}
.fv .mir{top:102px;width:46px;height:20px;border-radius:6px;background:linear-gradient(180deg,#F0F3F7,#8E97A4 48%,#262E3B)}
.fv .ty{top:216px;width:78px;height:120px;border-radius:11px;background:linear-gradient(90deg,#04070C,#262D39 34%,#161C25 66%,#03060B)}
/* bonnet + extraction louvres + arch bulges */
.fv .hood{left:126px;top:144px;width:448px;height:62px;clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);background:linear-gradient(90deg,rgba(4,6,12,.42) 0%,transparent 14%,transparent 86%,rgba(4,6,12,.42) 100%),linear-gradient(180deg,#FF6248 0%,#F0503A 12%,#D82720 34%,#B01A1C 58%,#8E1216 78%,#5C0A10 100%)}
.fv .hcrown{left:180px;top:143px;width:340px;height:8px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.84) 46%,transparent);filter:blur(2.2px)}
.fv .louv{top:158px;width:96px;height:36px;background:repeating-linear-gradient(180deg,rgba(9,5,3,.84) 0 4px,transparent 4px 10px);transform:skewX(-9deg)}
.fv .hint{left:312px;top:152px;width:76px;height:24px;border-radius:4px;background:linear-gradient(180deg,#0A0E15,#02040A);box-shadow:inset 0 2px 6px rgba(0,0,0,.9)}
.fv .arch{top:170px;width:96px;height:44px;background:linear-gradient(180deg,#E8452F,#B01A1B 54%,#6C0C12);clip-path:polygon(14% 0,100% 22%,100% 100%,0 100%)}
.fv .archv{top:180px;width:52px;height:20px;background:repeating-linear-gradient(180deg,rgba(9,5,3,.8) 0 3px,transparent 3px 8px);transform:skewX(-12deg)}
/* bumper: big central radiator + outboard brake ducts */
.fv .bmp{left:64px;top:200px;width:572px;height:126px;clip-path:polygon(4% 0,96% 0,100% 40%,97% 86%,90% 100%,10% 100%,3% 86%,0 40%);background:linear-gradient(90deg,rgba(4,6,12,.5) 0%,transparent 13%,transparent 87%,rgba(4,6,12,.5) 100%),linear-gradient(180deg,#E8462E 0%,#CE241F 18%,#F05038 27%,#9A1418 31%,#7E1015 58%,#42070E 86%,#0E030A 100%)}
.fv .rad{left:246px;top:226px;width:208px;height:84px;clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);background:repeating-linear-gradient(90deg,#0D1219 0 3px,#02040A 3px 7px),repeating-linear-gradient(180deg,#0D1219 0 4px,#02040A 4px 9px);box-shadow:inset 0 3px 10px rgba(0,0,0,.95)}
.fv .duct{top:256px;width:84px;height:54px;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%);background:repeating-linear-gradient(90deg,#0A0E15 0 3px,#02040A 3px 7px);box-shadow:inset 0 2px 7px rgba(0,0,0,.9)}
/* narrow swept headlamps tucked under the bonnet line */
.fv .hlz{top:190px;width:118px;height:32px;clip-path:polygon(0 44%,72% 0,100% 26%,96% 80%,18% 100%);background:linear-gradient(180deg,#1C1216,#05030A)}
.fv .hl{top:194px;width:108px;height:24px;clip-path:polygon(0 44%,74% 0,100% 28%,95% 80%,17% 100%);background:radial-gradient(120% 200% at 44% 50%,#FFFFFF 22%,#FFF6DE 46%,#FFDBA0 76%,#E8A455);box-shadow:0 0 30px 12px rgba(255,242,210,.98),0 0 82px 34px rgba(255,206,132,.55)}
.fv .hlc{top:198px;width:46px;height:13px;border-radius:50%;background:#FFFFFF;filter:blur(3px)}
.fv .hlb{top:168px;width:214px;height:118px;border-radius:50%;background:radial-gradient(circle,rgba(255,250,232,.95) 0 16%,rgba(255,236,190,.6) 34%,rgba(255,198,120,.28) 56%,transparent 74%);filter:blur(13px)}
.fv .hlf{top:204px;width:760px;height:6px;background:linear-gradient(90deg,transparent,rgba(255,246,222,.6) 20%,#FFFEFA 50%,rgba(255,246,222,.6) 80%,transparent);filter:blur(2.4px)}
.fv .hlv{top:86px;width:6px;height:242px;background:linear-gradient(180deg,transparent,rgba(255,246,222,.5) 26%,#FFFEFA 50%,rgba(255,246,222,.5) 74%,transparent);filter:blur(2.4px)}
.fv .hld{top:204px;width:330px;height:5px;background:linear-gradient(90deg,transparent,rgba(255,246,222,.4) 24%,rgba(255,254,250,.9) 50%,rgba(255,246,222,.4) 76%,transparent);filter:blur(2.6px)}
/* stacked dive planes + protruding splitter with endplate fins */
.fv .dive{background:linear-gradient(180deg,#AEB7C3 0 20%,#2A323E 26%,#080C13);border-radius:1px}
.fv .spl{left:26px;top:318px;width:648px;height:18px;background:linear-gradient(180deg,#EDF0F4 0 16%,#828A97 21%,#212834 60%,#05080D);border-radius:3px}
.fv .splf{top:294px;width:8px;height:28px;background:linear-gradient(180deg,#B4BDC9 0 16%,#39414F 22%,#0B0F16)}
.fv .tow{left:596px;top:296px;width:20px;height:11px;border-radius:6px;border:3px solid #E8C21E;background:transparent}
.fv .bpr{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,#1E8A4C 0 42%,#F6F8FB 44%);box-shadow:0 0 0 2px rgba(12,18,30,.5)}
.fv .rnd{width:50px;height:50px;border-radius:50%;background:#F6F8FB;box-shadow:0 0 0 3px rgba(12,18,30,.8);font-family:var(--font-heavy);font-size:30px;color:#111620;display:flex;align-items:center;justify-content:center}
.fv .dcw{background:rgba(246,249,252,.9);border-radius:1px}
.fv .dcb{background:rgba(13,19,31,.85);border-radius:1px}
.fv .dcg{background:rgba(30,138,76,.9);border-radius:1px}
.fv.amber .hood,.fv.amber .arch{background:linear-gradient(90deg,rgba(4,6,12,.42) 0%,transparent 14%,transparent 86%,rgba(4,6,12,.42) 100%),linear-gradient(180deg,#FFDA52 0%,#F2C02A 12%,#D89A14 34%,#B07C0C 58%,#8A5F08 78%,#563A04 100%)}
.fv.amber .bmp{background:linear-gradient(90deg,rgba(4,6,12,.5) 0%,transparent 13%,transparent 87%,rgba(4,6,12,.5) 100%),linear-gradient(180deg,#EFC42E 0%,#CE9614 18%,#F0B62E 27%,#96680A 31%,#7A5408 58%,#402C02 86%,#0D0A0A 100%)}
.fv.amber .hlb{background:radial-gradient(circle,rgba(255,246,206,.92) 0 16%,rgba(255,220,136,.56) 34%,rgba(255,180,56,.26) 56%,transparent 74%)}
.fv.amber .hlc{background:#FFF8E2}
.fv.amber .hlf,.fv.amber .hlv,.fv.amber .hld{background:linear-gradient(90deg,transparent,rgba(255,222,146,.34) 26%,#FFEEC0 50%,rgba(255,222,146,.34) 74%,transparent)}
.fv.amber .hl{background:radial-gradient(110% 180% at 46% 48%,#FFFEF6 24%,#FFEEBC 48%,#F8C86E 78%,#D49430);box-shadow:0 0 26px 10px rgba(255,228,158,.95),0 0 68px 28px rgba(255,188,70,.5)}

.rv-w .bd{background:radial-gradient(84% 62% at 50% 16%,rgba(255,246,228,.24),transparent 64%),linear-gradient(90deg,rgba(4,6,12,.5) 0%,transparent 16%,transparent 84%,rgba(4,6,12,.5) 100%),linear-gradient(180deg,#FBFCFE 0%,#E8EDF3 9%,#C2CBD7 26%,#EDF1F6 39%,#FDFEFF 43%,#8E98A6 46%,#68727F 66%,#434C58 84%,#20262F 100%)}
.rv-y .bd{background:radial-gradient(84% 62% at 50% 16%,rgba(255,244,206,.24),transparent 64%),linear-gradient(90deg,rgba(4,6,12,.5) 0%,transparent 16%,transparent 84%,rgba(4,6,12,.5) 100%),linear-gradient(180deg,#FFE06A 0%,#F6BE2A 9%,#CE8E0C 26%,#FFC93E 39%,#FFDC64 43%,#9A6806 46%,#6E4A05 66%,#453003 84%,#1C1301 100%)}
.rv-b .bd{background:radial-gradient(84% 62% at 50% 16%,rgba(214,234,255,.22),transparent 64%),linear-gradient(90deg,rgba(4,6,12,.5) 0%,transparent 16%,transparent 84%,rgba(4,6,12,.5) 100%),linear-gradient(180deg,#4E8ADE 0%,#2E68B8 9%,#1B4586 26%,#3A76C8 39%,#5A96E6 43%,#153A6E 46%,#0F2B52 66%,#0A1C36 84%,#050D1A 100%)}
.rv-w .stripe,.rv-b .stripe{background:linear-gradient(180deg,rgba(214,35,31,.95),rgba(150,16,20,.7))}
.rv-y .stripe{background:linear-gradient(180deg,rgba(20,24,32,.9),rgba(12,14,20,.7))}


/* ─── side profile · 576×210 ─── */
/* Ported from the board, which specifies this view completely but never
   drew one — it was cut from v1 and only the stylesheet survived. The
   markup in cars.js is authored against the body's own clip-path, which is
   the reliable anchor: it carries two wheel-arch circles, centred at x=124
   and x=418 with a 46px radius, on a body offset (28,40). That fixes the
   axles at (152,136) and (446,136) in car space and the contact patch at
   y=182, and every wheel part is placed off those two numbers rather than
   by eye.

   The car faces RIGHT: splitter and dive plane at x>512, rear wing and
   diffuser at x<90. Liveries are .liv-w / .liv-r / .liv-y (the rear view's
   are .rv-*; they are different elements and do not share names). */
/* ─── B · side profile · dusk ─── */
.pf{width:576px;height:210px}
.pf .gnd{left:40px;top:170px;width:500px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(4,4,8,.9),transparent 74%);filter:blur(10px)}
.pf .contact{top:168px;width:56px;height:11px;border-radius:50%;background:radial-gradient(closest-side,rgba(2,2,5,.95),transparent 78%);filter:blur(3px)}
/* wheel: tyre, sky catch on the upper sidewall, barrel, spoke face, hub, nut, caliper */
.pf .tyre{border-radius:50% 50% 47% 47%;background:radial-gradient(circle at 50% 32%,#333B47 0 54%,#1A2028 68%,#0A0E14 84%,#03050A 100%);box-shadow:inset 0 -5px 9px -3px rgba(0,0,0,.9)}
.pf .tyrelt{border-radius:50%;box-shadow:inset 0 4px 4px -2px rgba(206,224,252,.5)}
.pf .barrel{border-radius:50%;background:radial-gradient(circle at 50% 34%,#4E5866,#232A34 62%,#0E131A)}
.pf .spokes{border-radius:50%;background:conic-gradient(#9AA4B1 0 6deg,#232A34 6deg 60deg,#9AA4B1 60deg 66deg,#232A34 66deg 120deg,#9AA4B1 120deg 126deg,#232A34 126deg 180deg,#9AA4B1 180deg 186deg,#232A34 186deg 240deg,#9AA4B1 240deg 246deg,#232A34 246deg 300deg,#9AA4B1 300deg 306deg,#232A34 306deg 360deg)}
.pf .hub{border-radius:50%;background:radial-gradient(circle at 50% 36%,#5E6874,#1C232C 70%)}
.pf .nut{border-radius:50%;background:radial-gradient(circle at 50% 34%,#F4DC7E 0 42%,#9A7C16 62%,#3E3006)}
.pf .cal{border-radius:2px;background:linear-gradient(180deg,#C8442A,#6E1A0C);box-shadow:0 0 5px 1px rgba(255,110,60,.35)}
/* arch cavity shadow, then the body, then the lit arch lip */
.pf .ao{border-radius:50%;box-shadow:inset 0 0 26px 12px rgba(0,0,0,.82)}
.pf .alip{border-radius:50%;box-shadow:inset 0 4px 0 -1px rgba(255,246,222,.5)}
.pf .bd{left:28px;top:40px;width:520px;height:137px;clip-path:polygon(0.0px 64.0px,2.3px 63.3px,5.4px 62.4px,9.1px 61.4px,13.3px 60.2px,17.6px 59.1px,22.0px 58.0px,26.5px 57.0px,31.3px 56.0px,36.4px 55.0px,41.6px 54.0px,46.8px 53.0px,52.0px 52.0px,57.3px 51.0px,62.7px 50.1px,68.1px 49.1px,73.6px 48.1px,78.9px 47.1px,84.0px 46.0px,88.9px 44.8px,93.7px 43.6px,98.4px 42.4px,103.0px 41.0px,107.5px 39.6px,112.0px 38.0px,116.4px 36.2px,120.7px 34.1px,125.0px 32.0px,129.3px 29.9px,133.6px 27.8px,138.0px 26.0px,142.5px 24.4px,147.0px 22.9px,151.5px 21.4px,156.1px 20.1px,161.0px 19.0px,166.0px 18.0px,171.3px 17.2px,176.7px 16.5px,182.3px 16.0px,188.0px 15.6px,193.9px 15.3px,200.0px 15.0px,206.5px 14.8px,213.4px 14.6px,220.5px 14.5px,227.5px 14.5px,234.1px 14.7px,240.0px 15.0px,245.2px 15.5px,249.8px 16.1px,254.0px 16.8px,258.0px 17.7px,261.9px 18.8px,266.0px 20.0px,270.1px 21.5px,274.2px 23.1px,278.3px 25.0px,282.2px 27.0px,286.1px 29.0px,290.0px 31.0px,293.8px 33.1px,297.6px 35.3px,301.4px 37.6px,305.0px 39.9px,308.6px 42.0px,312.0px 44.0px,315.1px 45.8px,318.0px 47.5px,320.8px 49.1px,323.6px 50.5px,326.6px 51.8px,330.0px 53.0px,333.8px 54.0px,337.7px 54.8px,341.9px 55.4px,346.3px 56.0px,351.0px 56.5px,356.0px 57.0px,361.4px 57.4px,367.3px 57.8px,373.4px 58.1px,379.6px 58.4px,385.9px 58.7px,392.0px 59.0px,398.0px 59.3px,404.1px 59.6px,410.1px 59.9px,416.1px 60.3px,422.1px 60.6px,428.0px 61.0px,433.9px 61.4px,439.8px 61.8px,445.6px 62.3px,451.3px 62.7px,456.8px 63.3px,462.0px 64.0px,466.9px 64.8px,471.6px 65.6px,476.0px 66.6px,480.2px 67.6px,484.2px 68.7px,488.0px 70.0px,491.6px 71.4px,494.9px 72.9px,498.0px 74.6px,500.9px 76.3px,503.6px 78.1px,506.0px 80.0px,508.2px 82.0px,510.1px 84.1px,511.9px 86.3px,513.4px 88.6px,514.8px 90.8px,516.0px 93.0px,517.1px 95.3px,517.9px 97.8px,518.6px 100.3px,519.2px 102.6px,519.6px 104.6px,520.0px 106.0px,520.0px 114.0px,500.0px 118.0px,480.0px 119.0px,458.2px 118.8px,462.6px 107.7px,464.0px 95.9px,462.3px 84.1px,457.6px 73.2px,450.3px 63.8px,440.8px 56.6px,429.8px 52.0px,418.0px 50.5px,406.2px 52.0px,395.2px 56.6px,385.7px 63.8px,378.4px 73.2px,373.7px 84.1px,372.0px 95.9px,373.4px 107.7px,377.8px 118.8px,340.0px 119.0px,260.0px 119.0px,190.0px 119.0px,164.2px 118.8px,168.6px 107.7px,170.0px 95.9px,168.3px 84.1px,163.6px 73.2px,156.3px 63.8px,146.8px 56.6px,135.8px 52.0px,124.0px 50.5px,112.2px 52.0px,101.2px 56.6px,91.7px 63.8px,84.4px 73.2px,79.7px 84.1px,78.0px 95.9px,79.4px 107.7px,83.8px 118.8px,60.0px 118.0px,30.0px 114.0px,8.0px 110.0px,0.0px 104.0px)}
.pf .skin{left:28px;top:40px;width:520px;height:137px;clip-path:polygon(0.0px 64.0px,2.3px 63.3px,5.4px 62.4px,9.1px 61.4px,13.3px 60.2px,17.6px 59.1px,22.0px 58.0px,26.5px 57.0px,31.3px 56.0px,36.4px 55.0px,41.6px 54.0px,46.8px 53.0px,52.0px 52.0px,57.3px 51.0px,62.7px 50.1px,68.1px 49.1px,73.6px 48.1px,78.9px 47.1px,84.0px 46.0px,88.9px 44.8px,93.7px 43.6px,98.4px 42.4px,103.0px 41.0px,107.5px 39.6px,112.0px 38.0px,116.4px 36.2px,120.7px 34.1px,125.0px 32.0px,129.3px 29.9px,133.6px 27.8px,138.0px 26.0px,142.5px 24.4px,147.0px 22.9px,151.5px 21.4px,156.1px 20.1px,161.0px 19.0px,166.0px 18.0px,171.3px 17.2px,176.7px 16.5px,182.3px 16.0px,188.0px 15.6px,193.9px 15.3px,200.0px 15.0px,206.5px 14.8px,213.4px 14.6px,220.5px 14.5px,227.5px 14.5px,234.1px 14.7px,240.0px 15.0px,245.2px 15.5px,249.8px 16.1px,254.0px 16.8px,258.0px 17.7px,261.9px 18.8px,266.0px 20.0px,270.1px 21.5px,274.2px 23.1px,278.3px 25.0px,282.2px 27.0px,286.1px 29.0px,290.0px 31.0px,293.8px 33.1px,297.6px 35.3px,301.4px 37.6px,305.0px 39.9px,308.6px 42.0px,312.0px 44.0px,315.1px 45.8px,318.0px 47.5px,320.8px 49.1px,323.6px 50.5px,326.6px 51.8px,330.0px 53.0px,333.8px 54.0px,337.7px 54.8px,341.9px 55.4px,346.3px 56.0px,351.0px 56.5px,356.0px 57.0px,361.4px 57.4px,367.3px 57.8px,373.4px 58.1px,379.6px 58.4px,385.9px 58.7px,392.0px 59.0px,398.0px 59.3px,404.1px 59.6px,410.1px 59.9px,416.1px 60.3px,422.1px 60.6px,428.0px 61.0px,433.9px 61.4px,439.8px 61.8px,445.6px 62.3px,451.3px 62.7px,456.8px 63.3px,462.0px 64.0px,466.9px 64.8px,471.6px 65.6px,476.0px 66.6px,480.2px 67.6px,484.2px 68.7px,488.0px 70.0px,491.6px 71.4px,494.9px 72.9px,498.0px 74.6px,500.9px 76.3px,503.6px 78.1px,506.0px 80.0px,508.2px 82.0px,510.1px 84.1px,511.9px 86.3px,513.4px 88.6px,514.8px 90.8px,516.0px 93.0px,517.1px 95.3px,517.9px 97.8px,518.6px 100.3px,519.2px 102.6px,519.6px 104.6px,520.0px 106.0px,520.0px 114.0px,500.0px 118.0px,480.0px 119.0px,458.2px 118.8px,462.6px 107.7px,464.0px 95.9px,462.3px 84.1px,457.6px 73.2px,450.3px 63.8px,440.8px 56.6px,429.8px 52.0px,418.0px 50.5px,406.2px 52.0px,395.2px 56.6px,385.7px 63.8px,378.4px 73.2px,373.7px 84.1px,372.0px 95.9px,373.4px 107.7px,377.8px 118.8px,340.0px 119.0px,260.0px 119.0px,190.0px 119.0px,164.2px 118.8px,168.6px 107.7px,170.0px 95.9px,168.3px 84.1px,163.6px 73.2px,156.3px 63.8px,146.8px 56.6px,135.8px 52.0px,124.0px 50.5px,112.2px 52.0px,101.2px 56.6px,91.7px 63.8px,84.4px 73.2px,79.7px 84.1px,78.0px 95.9px,79.4px 107.7px,83.8px 118.8px,60.0px 118.0px,30.0px 114.0px,8.0px 110.0px,0.0px 104.0px)}
/* the horizon break — hard bright/dark transition is what reads as automotive paint */
.pf .crease{background:linear-gradient(90deg,transparent,rgba(255,252,240,.85) 12%,rgba(255,255,255,.95) 50%,rgba(255,246,222,.7) 86%,transparent);filter:blur(.7px)}
.pf .creaseu{background:linear-gradient(90deg,transparent,rgba(10,12,20,.5) 14%,rgba(10,12,20,.62) 52%,rgba(10,12,20,.4) 86%,transparent);filter:blur(1.2px)}
.pf .crown{background:linear-gradient(90deg,transparent,rgba(255,240,206,.45) 12%,rgba(255,253,244,.95) 52%,rgba(255,236,196,.4) 88%,transparent);filter:blur(1.3px)}
.pf .spec{background:linear-gradient(90deg,transparent,rgba(255,252,240,.9) 46%,transparent);filter:blur(2px)}
/* glasshouse */
.pf .glass{left:182px;top:45px;width:168px;height:40px;clip-path:polygon(4px 12px,86px 1px,118px 4px,168px 36px,18px 40px);background:linear-gradient(170deg,rgba(220,240,255,.78) 0 16%,rgba(146,190,242,.42) 32%,rgba(26,42,70,.9) 60%,rgba(5,9,17,.97) 100%)}
.pf .gstreak{left:196px;top:52px;width:126px;height:5px;background:linear-gradient(90deg,transparent,rgba(255,252,244,.7),transparent);transform:rotate(-7deg);filter:blur(1px)}
.pf .cage{left:262px;top:50px;width:3px;height:40px;background:rgba(214,228,248,.22);transform:skewX(11deg)}
.pf .bpil{left:250px;top:46px;width:9px;height:44px;transform:skewX(9deg)}
/* panel gaps: dark line with a lit edge */
.pf .gap{background:rgba(6,9,15,.55)}
.pf .gapl{background:rgba(255,250,236,.34)}
.pf .vent{background:repeating-linear-gradient(180deg,rgba(6,10,17,.86) 0 3px,transparent 3px 8px);transform:skewX(-16deg)}
.pf .sint{background:linear-gradient(115deg,#0B1017,#010308);clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);box-shadow:inset 0 2px 6px rgba(0,0,0,.9)}
.pf .skirt{background:linear-gradient(180deg,#2A333F 0 12%,#0B1017 34%,#03050A);border-radius:1px;box-shadow:0 -2px 4px rgba(0,0,0,.5)}
.pf .inlet{background:linear-gradient(115deg,#0B1017,#010308);clip-path:polygon(22% 0,100% 0,78% 100%,0 100%);box-shadow:inset 0 2px 5px rgba(0,0,0,.9)}
.pf .crease2{background:linear-gradient(90deg,transparent,rgba(255,248,228,.4) 16%,rgba(255,252,240,.6) 52%,rgba(255,242,214,.32) 86%,transparent);filter:blur(1.1px)}
.pf .exh{border-radius:50%;background:radial-gradient(circle,#40301E,#05080D 66%);box-shadow:inset 0 0 5px 2px rgba(255,150,70,.4)}
.pf .pin{border-radius:50%;background:radial-gradient(circle at 50% 34%,#D8DEE7 0 42%,#4E5664 60%,#141A22)}
.pf .flick{left:352px;top:103px;width:34px;height:6px;background:linear-gradient(180deg,#B8C1CD 0 24%,#2A323E 30%,#080C13);transform:rotate(-5deg)}
.pf .spl{left:512px;top:154px;width:64px;height:7px;background:linear-gradient(180deg,#EAEDF2 0 18%,#7E8895 24%,#1E2530);border-radius:1px}
.pf .dive{left:520px;top:138px;width:42px;height:6px;background:linear-gradient(180deg,#C8D0DA 0 24%,#39414F 30%,#0B0F16);transform:rotate(-7deg)}
.pf .diff{left:28px;top:130px;width:58px;height:18px;background:repeating-linear-gradient(90deg,#2A323E 0 3px,#04070B 3px 10px);box-shadow:inset 0 3px 6px rgba(0,0,0,.85)}
.pf .wgp{left:6px;top:30px;width:172px;height:10px;background:linear-gradient(180deg,#F2F5F9 0 20%,#8A939F 24%,#39414F 62%,#141922);border-radius:2px;transform:rotate(-2.4deg)}
.pf .wgg{left:6px;top:27px;width:172px;height:3px;background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.92) 50%,rgba(255,255,255,.26));transform:rotate(-2.4deg)}
.pf .wgu{width:8px;background:linear-gradient(90deg,#BAC3CF,#39414F 46%,#0E131B)}
.pf .wgep{left:0;top:22px;width:10px;height:40px;background:linear-gradient(180deg,#E8EBF0,#7A8390 50%,#262E3B);clip-path:polygon(0 6%,100% 0,100% 88%,30% 100%)}
.pf .mstk{background:#141A24;transform:rotate(-16deg)}
.pf .mir{border-radius:3px 4px 3px 2px;background:linear-gradient(170deg,#F2F5F9 0 34%,#79828F 46%,#2A323E)}
.pf .lamp{border-radius:3px;background:linear-gradient(165deg,#FFFEF8,#FFEDC6 52%,#D9A863);box-shadow:0 0 18px 6px rgba(255,238,198,.72)}
.pf .tail{border-radius:2px;background:linear-gradient(180deg,#FF8A78,#D2101A);box-shadow:0 0 11px 3px rgba(226,30,40,.62)}
.pf .fuel{border-radius:50%;background:radial-gradient(circle at 50% 34%,#E2E8F0 0 42%,#5E6673 58%,#1C222B);box-shadow:0 0 0 2px rgba(8,12,20,.55)}
.pf .tow{border-radius:5px;border:3px solid #E8C21E;background:transparent}
.pf .stripe{border-radius:1px}
.pf .dcb{background:rgba(11,16,27,.86);border-radius:1px}
.pf .dcw{background:rgba(246,249,252,.9);border-radius:1px}
.pf .dcg{background:rgba(30,138,76,.9);border-radius:1px}
.pf .dcr{background:rgba(214,35,31,.92);border-radius:1px}
.pf .rnd{border-radius:50%;background:#F6F8FB;box-shadow:0 0 0 3px rgba(12,18,30,.82),inset 0 -6px 8px -5px rgba(20,26,38,.5);font-family:var(--font-heavy);color:#111620;display:flex;align-items:center;justify-content:center}
.liv-w .bd{background:linear-gradient(177deg,#F7FAFD 0%,#FFFFFF 8%,#E7ECF3 24%,#FBFDFF 39%,#FFFFFF 44.5%,#A6B1C0 47.5%,#6C7684 60%,#525C6A 72%,#7A8592 84%,#39424F 94%,#1A212A 100%)}
.liv-w .bpil{background:linear-gradient(180deg,#E2E8F0,#79828F)}
.liv-w .stripe{background:#D6231F}
.liv-r .bd{background:linear-gradient(177deg,#FA6A4E 0%,#FF7E60 8%,#E2362A 24%,#F04C38 39%,#FF7052 44.5%,#A6141A 47.5%,#760F14 60%,#500A0F 72%,#8C1418 84%,#38070C 94%,#180306 100%)}
.liv-r .bpil{background:linear-gradient(180deg,#C8221F,#600B11)}
.liv-r .stripe{background:rgba(250,252,254,.95)}
.liv-y .bd{background:linear-gradient(177deg,#FFE884 0%,#FFEFA0 8%,#F2B322 24%,#FFCB40 39%,#FFDE68 44.5%,#AE7606 47.5%,#7C5305 60%,#583A03 72%,#946406 84%,#3E2902 94%,#1A1101 100%)}
.liv-y .bpil{background:linear-gradient(180deg,#E0A014,#6A4404)}
.liv-y .stripe{background:rgba(20,24,32,.88)}
/* Blue, to match the rear view's .rv-b — the board never drew one in
   profile because the profile was cut, and the flyby needs a fourth car. */
.liv-b .bd{background:linear-gradient(177deg,#5A96E6 0%,#4E8ADE 8%,#2E68B8 24%,#3A76C8 39%,#5A96E6 44.5%,#1B4586 47.5%,#153A6E 60%,#0F2B52 72%,#28598F 84%,#0A1C36 94%,#050D1A 100%)}
.liv-b .bpil{background:linear-gradient(180deg,#3A76C8,#0F2B52)}
.liv-b .stripe{background:rgba(250,252,254,.9)}


/* Spoke faces turn only when the car is moving, and only fast enough to
   blur — a wheel you can count the spokes on is a wheel that is standing
   still, whatever the rest of the frame is doing. */
.pf.rolling .spokes{animation:r-spoke var(--spoke-t,180ms) linear infinite}
@keyframes r-spoke{to{transform:rotate(60deg)}}
/* Wheels that spin down rather than round and round for ever. The board's
   profile direction is explicit that the wheels must be "spun to full blur"
   while the car stays pin sharp, and a wheel that is still turning at a
   constant rate when the car has visibly stopped is the same lie in
   reverse. Same easing as the road and the background, so the world slows
   as one piece. Rotation is deliberately absurd — 4200 degrees — because
   what is wanted is blur, not a spoke count. */
.pf.spindown .spokes{animation:r-spokedown var(--t-run,10000ms) both}
@keyframes r-spokedown{
  0%  {transform:rotate(0);      animation-timing-function:linear}
  30% {transform:rotate(2900deg);animation-timing-function:cubic-bezier(.18,.66,.3,1)}
  44% {transform:rotate(3900deg);animation-timing-function:cubic-bezier(.2,.5,.4,1)}
  100%{transform:rotate(4440deg)}
}

/* ─── D · overhead · 420×150, nose pointing +x ───
   The plan view, for the corner short shot from straight above. Not on the
   board as artwork — the board gives it as geometry and a keyframe table —
   so this is drawn to the board's dimensions and its livery colours.

   Every gradient here runs at 180deg, which in car space is *across* the
   car: the paint crowns along the spine and falls away to both flanks, the
   way a high sun reads on a roof. That is deliberate and it is the whole
   reason this view can be rotated. Put a light direction in — a rim on one
   side, an offset shadow — and it turns with the car, so the sun appears to
   orbit the corner while the cars go round it.

   The first version of this read as a raft drifting down a river, and the
   reasons are worth writing down because they are all scale problems. At
   sixty pixels long a car has about four shapes to work with, so they have
   to be the *right* four:

     1. The outline has to have a waist. A plan-view race car is wide at the
        arches and visibly pinched at the door, and a clip-path that only
        tucks six per cent is a capsule. This one tucks sixteen.
     2. The tyres have to sit outboard of the bodywork with road showing
        between them at the waist. Four dark blocks proud of the body is the
        single strongest "this is a car" signal from above — stronger than
        the wing, the glass or the number.
     3. Nothing may run the full length. A stripe and a specular down the
        whole spine is a plank seam, and a plank on water is a raft.
     4. Something has to say it is moving. A shape travelling at constant
        speed with no blur is a shape being dragged, so each car trails a
        smear in its own space — which is correct, because motion blur turns
        with the car.  */
.ov{width:420px;height:150px;--liv:#C21E1C}
/* Motion smear, trailing the tail. In car space, so it rotates with the car
   and always points back down the road rather than off in a fixed screen
   direction. */
.ov .smear{left:-54px;top:36px;width:130px;height:78px;border-radius:50%;
  filter:blur(9px);opacity:var(--smear,.42);
  background:linear-gradient(90deg,transparent,var(--liv) 78%)}
/* Contact shadow, and it has to be tight. A big soft blob underneath is
   what a thing floating looks like. */
.ov .gnd{left:58px;top:28px;width:304px;height:94px;border-radius:46%;
  background:radial-gradient(closest-side,rgba(3,5,10,.66),transparent 76%);filter:blur(6px)}
/* Rear wing: wider than the body, which is a car tell from above. */
.ov .wing{left:6px;top:8px;width:22px;height:134px;border-radius:2px;
  background:linear-gradient(90deg,rgba(226,235,248,.26) 0 9%,#252C36 9%,#141A22 62%,#0A0E14),
             linear-gradient(180deg,#05080E 0 3%,#232A34 12%,#2E3641 50%,#232A34 88%,#05080E 97%)}
.ov .wep{left:2px;width:11px;height:18px;border-radius:2px;
  background:linear-gradient(90deg,#8A93A1,#3D4552 60%,#1A202A)}
.ov .wpil{left:26px;width:10px;height:11px;background:#1A212C}
/* Engine cover and its louvres. */
.ov .rdeck{left:52px;top:38px;width:52px;height:74px;border-radius:3px 8px 8px 3px;
  background:linear-gradient(180deg,rgba(6,9,16,.6),rgba(255,255,255,.1) 46%,
    rgba(255,255,255,.16) 50%,rgba(255,255,255,.1) 54%,rgba(6,9,16,.6))}
.ov .louv{left:58px;width:38px;height:14px;
  background:repeating-linear-gradient(180deg,rgba(6,9,16,.72) 0 3px,transparent 3px 7px)}
/* Tyres. Sat well outboard of the body and darker than anything else in
   frame, because at this size they are most of what reads. */
.ov .ty{width:56px;height:34px;border-radius:5px;
  background:linear-gradient(180deg,#02040A,#242B36 36%,#141A22 64%,#02040A),
             repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 3px,transparent 3px 8px)}
/* The body: wide at both arches, genuinely tucked at the door, tapered into
   the nose. The waist is what leaves road visible between the tyres. */
.ov .bd{left:46px;top:26px;width:340px;height:98px;
  clip-path:polygon(2% 18%,6% 6%,14% 0,26% 2%,38% 14%,50% 16%,62% 12%,
    74% 2%,86% 6%,95% 22%,100% 42%,100% 58%,95% 78%,86% 94%,74% 98%,
    62% 88%,50% 84%,38% 86%,26% 98%,14% 100%,6% 94%,2% 82%);
  background:linear-gradient(180deg,#3A0609 0 4%,#8E1116 12%,#C21E1C 28%,#F45040 45%,
    #FF7A62 50%,#F45040 55%,#C21E1C 72%,#8E1116 88%,#3A0609 96%)}
.ov .roof{left:170px;top:52px;width:88px;height:46px;border-radius:9px;
  background:linear-gradient(180deg,rgba(4,7,13,.5),rgba(255,255,255,.12) 42%,
    rgba(255,255,255,.2) 50%,rgba(255,255,255,.12) 58%,rgba(4,7,13,.5))}
.ov .scoop{left:166px;top:64px;width:24px;height:22px;border-radius:4px;
  background:linear-gradient(180deg,#0A0F18,#2A323E 50%,#0A0F18);
  box-shadow:inset 0 0 0 1px rgba(226,235,248,.16)}
.ov .ws{left:256px;top:48px;width:30px;height:54px;border-radius:3px;
  background:linear-gradient(180deg,rgba(6,10,18,.94),rgba(150,186,232,.34) 44%,
    rgba(186,214,255,.5) 50%,rgba(150,186,232,.34) 56%,rgba(6,10,18,.94))}
.ov .mir{left:250px;width:15px;height:10px;border-radius:3px;
  background:linear-gradient(180deg,#39414F,#0E131A)}
/* Stripe, roundel and specular — all confined to the centre section. None
   of the three may reach either end of the car. */
.ov .stripe{left:122px;top:70px;width:186px;height:10px;background:rgba(240,244,250,.4)}
.ov .rnd{left:186px;top:57px;width:36px;height:36px;border-radius:50%;
  background:rgba(244,247,251,.92);color:#0A0E14;font-family:var(--font-heavy);
  font-size:25px;line-height:36px;text-align:center;z-index:3}
/* Two short highlights, one on the roof and one on the bonnet, rather than
   one smear from nose to tail. */
.ov .spec{left:172px;top:67px;width:74px;height:4px;filter:blur(2px);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62) 50%,transparent)}
.ov .spec2{left:296px;top:69px;width:58px;height:4px;filter:blur(2px);
  background:linear-gradient(90deg,transparent,rgba(255,246,228,.5) 50%,transparent)}
/* Front end: splitter overhanging the nose, headlight glints, tail bars. */
.ov .spl{left:372px;top:22px;width:42px;height:106px;border-radius:2px 13px 13px 2px;
  background:linear-gradient(180deg,#05080E 0 8%,#232A34 24%,#39414F 50%,#232A34 76%,#05080E 92%)}
.ov .hl{left:384px;width:15px;height:12px;border-radius:3px;
  background:radial-gradient(circle,rgba(255,250,232,.42),rgba(255,214,150,.2) 60%,transparent 78%)}
.ov .tail{left:30px;width:11px;height:14px;border-radius:2px;
  background:radial-gradient(circle,rgba(255,90,70,.6),rgba(226,30,40,.3) 60%,transparent 80%)}
/* Liveries. Only the body, the stripe and the smear change — everything
   else is hardware, and hardware is the same colour on all four cars. */
.ov.liv-w{--liv:#C2CBD7;--smear:.26}
.ov.liv-y{--liv:#CE8E0C;--smear:.3}
.ov.liv-b{--liv:#1B4586}
.ov.liv-w .bd{background:linear-gradient(180deg,#20262F 0 4%,#68727F 12%,#C2CBD7 28%,#F2F5F9 45%,
  #FDFEFF 50%,#F2F5F9 55%,#C2CBD7 72%,#68727F 88%,#20262F 96%)}
.ov.liv-y .bd{background:linear-gradient(180deg,#1C1301 0 4%,#6E4A05 12%,#CE8E0C 28%,#F6BE2A 45%,
  #FFE06A 50%,#F6BE2A 55%,#CE8E0C 72%,#6E4A05 88%,#1C1301 96%)}
.ov.liv-b .bd{background:linear-gradient(180deg,#050D1A 0 4%,#0F2B52 12%,#1B4586 28%,#2E68B8 45%,
  #5A96E6 50%,#2E68B8 55%,#1B4586 72%,#0F2B52 88%,#050D1A 96%)}
.ov.liv-w .stripe,.ov.liv-b .stripe{background:rgba(214,35,31,.85)}
.ov.liv-y .stripe{background:rgba(16,20,28,.8)}

/* ============================================================
   STAGING — everything the app adds on top of the board's art
   ============================================================ */

/* Placement. A car is pinned by its *contact patch* — bottom-centre — to a
   point in the frame, and scaled about that same point, so making a car
   bigger drives it toward camera instead of lifting it off the road.

   translate() percentages resolve against the car's own fixed pixel box,
   not the frame, so --x/--y stay honest at any scale.

   --k is a *fraction of the frame's width*, not a raw scale factor: --k:.9
   means the car's art box spans 90% of the frame however wide the frame is.
   A raw scale factor cannot work here — the same number that frames the car
   on a 520px iPad crops its wing endplates off both edges of a 340px phone,
   and the shorts would have to be re-composed per device. --fw is the frame
   width in px, published by quest.js at mount; --aw is the view's own art
   width. Every term is unitless, which is the only reason calc() will do
   this division at all.

   .r-cw carries the car's dimensions explicitly because the art inside is
   absolutely positioned in the board's pixel space and must not be asked to
   size its own container. */
.r-cw{
  position:absolute;left:var(--x,50%);top:var(--y,76%);z-index:var(--z,40);
  /* Pulled out of the transform so the overhead view — and the keyframes
     that fly it round the corner — can restate the transform without having
     to restate this division. */
  --carscale:calc(var(--k,.8) * var(--fw,380) / var(--aw,480));
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) scale(var(--carscale));
  will-change:transform;
}
.r-cw.is-rv{width:480px;height:300px;--aw:480}
.r-cw.is-fv{width:700px;height:420px;--aw:700}
.r-cw.is-pf{width:576px;height:210px;--aw:576}
/* The overhead car is the one view with no contact patch to pin: seen from
   above a car touches the ground everywhere, so it is placed and scaled
   about its own centre and carries a heading. --rot is the direction the
   nose points, in screen degrees, and it is never authored by hand — the
   scene derives it from the car's position on the arc. */
.r-cw.is-ov{width:420px;height:150px;--aw:420;transform-origin:50% 50%;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(var(--carscale))}
/* Depth of field: anything that isn't the hero carries the lens's blur, and
   the further back it sits the more it loses. */
.r-cw.d1{filter:blur(.6px)}
.r-cw.d2{filter:blur(1.4px)}
.r-cw.d3{filter:blur(2.6px)}

/* The rig. A second wrapper so placement and motion never contend for one
   transform — the scene sets --k once and the animation owns everything
   else. Sits outside .gtc, so the `.gtc *` blanket rule can't reach it. */
.r-rig{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform}

/* ---------- the reflection ----------
   The wet shorts have always faked what a car does to the deck with a
   coloured pool and a vertical smear. Neither is a reflection: a reflection
   has the car's *shape* in it, and on a wet night that shape is the one
   thing that says the ground is wet rather than merely dark.

   It is the same car, mirrored about its own contact patch, so it cannot
   drift out of register with the thing it reflects — it carries the same
   rig and the same wheel spin, and it is a second copy of the markup rather
   than a cloned node, so it starts on the same clock instead of whenever a
   clone happened to be inserted.

   The geometry: transform-origin is already the contact patch, so appending
   scaleY(-1) flips the body through it. The contact patch is the one point
   that does not move — which is exactly right, because that is where the
   car meets the water.

   What makes it read as water and not as an upside-down car is everything
   after the flip. It loses most of its saturation and nearly all of its
   contrast, because water reflects light rather than paint. It fades with
   distance from the contact patch. And it gets broken up by the ripple
   laid over the top — a reflection with a clean edge is a mirror, and a
   mirror is not what a wet pit straight is. */
.r-cw.mirror{
  /* Read this right to left, which is the order it applies.

     scaleY turns the car over; --mir is how much the water stretches it,
     because a reflection on a wet surface is always longer than the thing
     above it. The translateY then puts the flip back on the *contact
     patch* rather than on the element's bottom edge — .pf is 210 tall but
     the tyres touch down at 182, so flipping about the box would float the
     reflection 28 units clear of the car it belongs to. Landing it takes
     -28 * (1 + mir): once to undo the flip's overshoot and once for the
     stretch. Get this wrong and the car hovers, which is the one thing a
     reflection must never let it do. */
  transform:translate(-50%,-100%) scale(var(--carscale))
            translateY(calc(-1 * var(--contact,0px) * (1 + var(--mir,1.18))))
            scaleY(calc(-1 * var(--mir,1.18)));
  /* Water reflects light, not paint: most of the saturation and a good deal
     of the contrast go, but the *value* has to stay up or the reflection
     disappears into a dark road, which is exactly what it did at first. */
  /* Tunable per instance, because the surfaces are not the same mirror:
     wet asphalt at night throws back a lot, a sealed garage floor under
     fluorescents throws back a sheen. Defaults are the wet-asphalt case. */
  filter:blur(var(--mir-blur,3.4px)) saturate(var(--mir-sat,.72))
         brightness(var(--mir-bri,.95)) contrast(.84);
  opacity:var(--mir-o,.78);
  /* Local space, authored before the flip. Opaque at the contact patch
     (86% down the box) and gone by the roofline (27%), so what survives is
     the bodywork — the bright part. Masking from the box edge instead keeps
     only the underside, which is the darkest part of the car and reads as
     nothing at all. */
  -webkit-mask-image:linear-gradient(180deg,transparent 16%,rgba(0,0,0,.58) 48%,#000 82%);
  mask-image:linear-gradient(180deg,transparent 16%,rgba(0,0,0,.58) 48%,#000 82%);
  pointer-events:none;
}
/* Where each view's tyres actually touch down, measured from the top of its
   own art box. Only the mirror needs it, but it belongs with the geometry. */
.r-cw.is-pf{--contact:28px}

/* The water moving over it. Slow, and never quite repeating against the
   reflection underneath, which is what stops the pair reading as one
   printed image. */
.r-wetbreak{z-index:7;animation:r-wetdrift 4200ms linear infinite}
@keyframes r-wetdrift{to{background-position:0 12px}}

/* ---------- motion ----------
   ONE RULE, and both side-on shorts got it wrong until it was written down:
   .pf is drawn facing *right*, so any rig that moves it must move it to the
   right. A car travelling toward its own rear wing is driving backwards, and
   it is oddly hard to see in a still — which is exactly why it survived a
   whole pass through these files. The tracking shot (rig-track) says the
   same thing from the other side: the car holds still and the world moves
   left, which is a car going right.

   Anything scrolling underneath has to agree. A road, a streak layer or a
   finish line moving *left* is a car moving right; get one of them backwards
   and the car reads as sliding. */
/* Suspension. A car standing perfectly still in frame is the single loudest
   tell that it is a sticker, so every car keeps a small vertical float and
   a fractional roll going the whole time. Amplitude is deliberately under a
   pixel of visible travel at typical scale. */
.rig-live{animation:r-live 2400ms var(--live-d,0ms) ease-in-out infinite}
@keyframes r-live{
  0%  {transform:translateY(0)    rotate(0)}
  28% {transform:translateY(-1.4px) rotate(.12deg)}
  54% {transform:translateY(.8px)  rotate(-.09deg)}
  76% {transform:translateY(-.6px) rotate(.05deg)}
  100%{transform:translateY(0)    rotate(0)}
}
/* The dolly. The hero grows toward camera across the approach, brakes into
   the hit, and holds — the same accelerate-then-freeze shape the entry uses,
   because it is the same camera move continuing through the car. */
.rig-approach{animation:r-approach var(--run,10000ms) both}
@keyframes r-approach{
  0%  {transform:scale(.52) translateY(9px); animation-timing-function:cubic-bezier(.55,0,.85,.32)}
  22% {transform:scale(.62) translateY(6px)}
  44% {transform:scale(.9)  translateY(2px)}
  /* the hit: it stops almost dead and hangs there */
  50% {transform:scale(1.02) translateY(0);  animation-timing-function:cubic-bezier(.02,.86,.12,1)}
  58% {transform:scale(1.06) translateY(0)}
  72% {transform:scale(1.07) translateY(0)}
  100%{transform:scale(1.11) translateY(0)}
}
/* The opposite read: the car is quicker than the camera and walks away. Used
   on the shorts that end with the hero gone rather than arrived. */
.rig-pull{animation:r-pull var(--run,10000ms) both}
@keyframes r-pull{
  0%  {transform:scale(1.16) translateY(-2px); animation-timing-function:cubic-bezier(.4,0,.7,.4)}
  30% {transform:scale(1.1)  translateY(0)}
  50% {transform:scale(1)    translateY(0);   animation-timing-function:cubic-bezier(.3,.7,.3,1)}
  76% {transform:scale(.82)  translateY(4px)}
  100%{transform:scale(.62)  translateY(9px)}
}
/* Standing start. Squats onto the rear axle, then the whole car leaves. */
.rig-launch{animation:r-launch var(--run,10000ms) both}
@keyframes r-launch{
  0%  {transform:scale(1) translateY(0) rotate(0)}
  38% {transform:scale(1) translateY(0) rotate(0)}
  43% {transform:scale(1.02) translateY(2px) rotate(-.7deg)}   /* squat */
  48% {transform:scale(1.04) translateY(-2px) rotate(1.1deg);  /* weight transfer */
       animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  62% {transform:scale(.9)  translateY(3px) rotate(.2deg)}
  100%{transform:scale(.48) translateY(11px) rotate(0)}
}
/* Losing the drag. A rival that just falls back reads as parked; one that
   also loses the light and the focus reads as beaten. */
.rig-drop{animation:r-drop var(--run,10000ms) both}
@keyframes r-drop{
  0%  {transform:scale(1) translateX(0);opacity:1}
  36% {transform:scale(.96) translateX(3%);opacity:1}
  56% {transform:scale(.8) translateX(9%);opacity:.9}
  100%{transform:scale(.54) translateX(19%);opacity:.5}
}
/* Out of the light. Qualifying has no world to reveal the car in, so the
   car has to arrive through the compression itself: nothing, then a shape
   inside the bloom, then a car standing on a road that was never there. */
.rig-emerge{animation:r-emerge var(--run,10000ms) both}
@keyframes r-emerge{
  0%  {transform:scale(.12) translateY(26px);opacity:0}
  30% {transform:scale(.2)  translateY(20px);opacity:0}
  40% {opacity:.5}
  44% {transform:scale(.72) translateY(7px);opacity:.9;
       animation-timing-function:cubic-bezier(.02,.86,.12,1)}
  52% {transform:scale(1.05) translateY(0);opacity:1}
  68% {transform:scale(1.02) translateY(0);opacity:1}
  100%{transform:scale(1.06) translateY(0);opacity:1}
}

/* Pole car: idles on the line, then leaves on green. One rig rather than an
   idle plus a launch, because two animations on one transform is
   last-one-wins and the idle would silently eat the start. */
.rig-gridgo{animation:i-gridgo var(--run,3400ms) both}
@keyframes i-gridgo{
  0%  {transform:scale(1) translateY(0)}
  22% {transform:scale(1) translateY(-1px)}       /* idling, barely */
  50% {transform:scale(1) translateY(.6px)}
  78% {transform:scale(1) translateY(0)}
  /* green */
  84% {transform:scale(1.03) translateY(2px);animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  100%{transform:scale(1.5) translateY(-9px)}
}

/* ---------- side-on rigs ----------
   Everything above moves a car toward or away from the camera. These four
   move it *across* one, which is the whole reason the side view exists. */

/* The stop. Arrives hard from the right, sits while the crew work, drops
   off the jacks on the hit, and leaves — the only short that starts at
   speed, goes to zero, and starts again. */
.rig-pitstop{animation:r-pitstop var(--run,10000ms) both}
@keyframes r-pitstop{
  0%  {transform:translateX(-190%) scaleX(1.1)}
  18% {transform:translateX(-90%)  scaleX(1.06); animation-timing-function:cubic-bezier(.1,.7,.2,1)}
  30% {transform:translateX(0)     scaleX(1)}         /* stopped in the box */
  34% {transform:translateX(0) translateY(0)}
  38% {transform:translateX(0) translateY(-11px)}     /* up on the jacks */
  44% {transform:translateX(0) translateY(-11px)}
  46% {transform:translateX(0) translateY(0)}         /* the drop — the hit */
  49% {transform:translateX(0) translateY(-1px)}
  51% {transform:translateX(0) translateY(0); animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  70% {transform:translateX(120%) scaleX(1.08)}
  100%{transform:translateX(300%) scaleX(1.16)}
}
/* The flyby. A trackside camera the car crosses in about a second — it
   never slows, it is never the middle of the frame for long, and the
   horizontal stretch at the extremes is the shutter, not the car. Left to
   right, nose first: see the rule at the top of this section. */
.rig-flyby{animation:r-flyby var(--fly-t,1500ms) var(--fly-d,0ms) linear both}
@keyframes r-flyby{
  0%  {transform:translateX(var(--fly-from,-260%)) scaleX(1.35);opacity:0}
  10% {opacity:1}
  46% {transform:translateX(-20%) scaleX(1);animation-timing-function:linear}
  90% {opacity:1}
  100%{transform:translateX(var(--fly-to,240%)) scaleX(1.35);opacity:0}
}
/* The tracking profile. The car barely moves, and that is the point: in a
   shot that rides alongside, the thing that travels is the world. All this
   does is let the camera settle onto the car and then drift a fraction, so
   the frame is alive without the car appearing to change speed. */
.rig-track{animation:r-track var(--run,10000ms) cubic-bezier(.1,.7,.2,1) both}
@keyframes r-track{
  0%  {transform:translateX(15%) scale(.97)}
  44% {transform:translateX(0)   scale(1)}
  100%{transform:translateX(-6%) scale(1.03)}
}

/* Wheels off, wheels on. The old corner is pulled clear and dropped; the
   new one comes in over the top and goes on. Both sit inside the car, so
   they inherit its jacked-up travel for free. */
.pf .whr{position:absolute;inset:0}
.pf .whr.r-old,.pf .whr.f-old{animation:p-wheeloff var(--run,10000ms) both}
.pf .whr.f-old{animation-delay:120ms}
@keyframes p-wheeloff{
  0%,38%{opacity:1;transform:translate(0,0)}
  41%   {opacity:1;transform:translate(26px,2px)}
  46%   {opacity:0;transform:translate(38px,26px) rotate(14deg)}
  100%  {opacity:0;transform:translate(38px,26px) rotate(14deg)}
}
.pf .whr.r-new,.pf .whr.f-new{animation:p-wheelon var(--run,10000ms) both}
.pf .whr.f-new{animation-delay:120ms}
@keyframes p-wheelon{
  0%,40%{opacity:0;transform:translate(46px,-34px)}
  42%   {opacity:1;transform:translate(30px,-18px)}
  45%   {opacity:1;transform:translate(0,0)}
  100%  {opacity:1;transform:translate(0,0)}
}

/* The pass: a rival crossing the frame, not receding in it. */
.rig-sweep{animation:r-sweep var(--sweep-t,1500ms) var(--sweep-d,0ms) cubic-bezier(.3,0,.6,1) both}
@keyframes r-sweep{
  0%  {transform:translateX(0) scale(.9);opacity:0}
  12% {opacity:1}
  100%{transform:translateX(var(--sweep-x,-150%)) scale(1.25);opacity:.85}
}

/* ---------- what the car does to the world ---------- */
/* Light lands twice. Every emissive thing on the car gets a blurred column
   of the same colour dropped onto the deck beneath it — the board's second
   rule, and the whole reason a wet night frame looks expensive. */
.r-spill{position:absolute;z-index:38;pointer-events:none;filter:blur(30px);border-radius:50%;
  transform:translate(-50%,-50%)}
.r-wetspill{position:absolute;z-index:39;pointer-events:none;filter:blur(18px);
  transform:translateX(-50%)}
/* Brake discs coming up to temperature, then the flare under braking. */
.r-cw .brk{animation:r-brakeheat var(--run,10000ms) ease-in-out both}
@keyframes r-brakeheat{
  0%  {opacity:.25}
  40% {opacity:.5}
  50% {opacity:1}      /* the hit — hard on the pedal */
  62% {opacity:.7}
  100%{opacity:.4}
}
/* Tail lights bloom on the same beat the brakes bite. */
.r-cw .tl,.r-cw .rl{animation:r-tailbloom var(--run,10000ms) ease-in-out both}
@keyframes r-tailbloom{
  0%{filter:brightness(.85)} 44%{filter:brightness(1)}
  50%{filter:brightness(1.5)} 64%{filter:brightness(1.12)} 100%{filter:brightness(1)}
}
/* Spray off the rear tyres. Two plumes, offset in phase so they never pulse
   together — synchronised spray reads as a pair of lamps, not as water. */
.r-spray{
  position:absolute;z-index:41;pointer-events:none;border-radius:50%;filter:blur(13px);
  background:radial-gradient(circle,rgba(206,226,255,.3),transparent 70%);
  transform:translate(-50%,-50%);
  animation:r-plume var(--plume-t,760ms) var(--plume-d,0ms) ease-out infinite;
}
@keyframes r-plume{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.5)}
  22% {opacity:.9}
  100%{opacity:0;transform:translate(-50%,-88%) scale(1.5)}
}
/* Contact shadow. Sits under the car, tracks nothing — a shadow that moves
   with the body is the tell that the body is a sprite. */
.r-csh{position:absolute;z-index:39;pointer-events:none;border-radius:50%;filter:blur(9px);
  background:radial-gradient(closest-side,rgba(4,5,10,.78),transparent 74%);
  transform:translate(-50%,-50%)}

/* ---------- the road ---------- */
/* A real deck under the car, in perspective, streaming toward camera. The
   shorts used to sit on a flat gradient, which is fine for a smear and
   nowhere near enough once there is a car standing on it: without a surface
   converging to a vanishing point the car reads as pasted onto a backdrop.

   The plane is anchored at the *bottom* — the camera end — and rotated away
   from the viewer, so the far end converges upward toward the horizon. Doing
   it the other way round, with the origin at the top, lays the road out
   toward the floor and the whole frame reads as looking down at a table.

   .r-deck's own top edge is the horizon, so it is sized to land on whatever
   the scene put its horizon line at (38–41%, per the board). */
.r-deck{position:absolute;left:-60%;right:-60%;bottom:0;height:62%;z-index:2;
  perspective:var(--persp,260px);perspective-origin:50% 0%;overflow:hidden;pointer-events:none}
.r-deck i{
  position:absolute;left:0;right:0;bottom:0;height:340%;
  transform-origin:50% 100%;transform:rotateX(76deg);
  background:
    /* centre dashes — the only layer that scrolls */
    repeating-linear-gradient(180deg,rgba(236,244,255,.6) 0 40px,transparent 40px 150px),
    /* the two edge lines, dead straight in the plane and convergent on screen */
    linear-gradient(90deg,transparent 29.4%,rgba(236,244,255,.45) 29.4% 30.6%,
      transparent 30.6%,transparent 69.4%,rgba(236,244,255,.45) 69.4% 70.6%,transparent 70.6%),
    /* verges, then the asphalt itself */
    linear-gradient(90deg,#080D16 0 26%,transparent 26%,transparent 74%,#080D16 74%),
    linear-gradient(180deg,#0F1B2E 0%,#0B1424 40%,#080F1C 100%);
  background-size:12px 150px,100% 100%,100% 100%,100% 100%;
  background-position:calc(50% - 6px) 0,0 0,0 0,0 0;
  background-repeat:repeat-y,no-repeat,no-repeat,no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 100%);
  animation:r-deckrun var(--deck-t,560ms) linear infinite;
}
/* A standing start has a road that isn't moving yet. The animation lives on
   the child, so the stop has to as well — parking it on .r-deck does
   nothing at all, quietly. */
.r-deck.still i{animation:none}
/* One dash period per cycle, so the loop is seamless at any speed. */
@keyframes r-deckrun{
  to{background-position:calc(50% - 6px) 150px,0 0,0 0,0 0}
}
/* Kerbing, as another layer of the same plane — so it converges with the
   road for free. It was briefly its own skewed element outside the deck,
   which put two different vanishing points in one frame and read as a pair
   of red slabs lying across the bottom of the shot.

   The two strips have to be placed symmetrically about the centre line, and
   background-position percentages are *proportional* — x% aligns the x%
   point of the image with the x% point of the box — so the number is not
   the strip's left edge but left/(100 - width). Getting that wrong puts one
   kerb outside the white line and the other in the middle of the road,
   which is exactly as odd as it sounds.

   Road edges live at 29.4% and 70.6% of the plane. The kerbs sit just
   outside both, 1.7% wide: 27.5→29.2 and 70.8→72.5, and at 42% alpha —
   full-strength red and white at the near end of a perspective plane is the
   brightest thing in the frame, which is the one thing the car has to be. */
.r-deck.kerb i{
  background:
    repeating-linear-gradient(180deg,rgba(236,244,255,.6) 0 40px,transparent 40px 150px),
    repeating-linear-gradient(180deg,rgba(178,38,42,.42) 0 30px,rgba(206,216,228,.42) 30px 60px),
    repeating-linear-gradient(180deg,rgba(178,38,42,.42) 0 30px,rgba(206,216,228,.42) 30px 60px),
    linear-gradient(90deg,transparent 29.4%,rgba(236,244,255,.45) 29.4% 30.6%,
      transparent 30.6%,transparent 69.4%,rgba(236,244,255,.45) 69.4% 70.6%,transparent 70.6%),
    linear-gradient(90deg,#080D16 0 26%,transparent 26%,transparent 74%,#080D16 74%),
    linear-gradient(180deg,#0F1B2E 0%,#0B1424 40%,#080F1C 100%);
  background-size:12px 150px,1.7% 60px,1.7% 60px,100% 100%,100% 100%,100% 100%;
  background-position:calc(50% - 6px) 0,27.9% 0,72.1% 0,0 0,0 0,0 0;
  background-repeat:repeat-y,repeat-y,repeat-y,no-repeat,no-repeat,no-repeat;
}
@keyframes r-deckrun-kerb{
  to{background-position:calc(50% - 6px) 150px,27.9% 60px,72.1% 60px,0 0,0 0,0 0}
}
.r-deck.kerb i{animation-name:r-deckrun-kerb}

/* ---------- cross-track: the camera is beside the road, not on it ----------
   Three of the shorts are shot square to the track — the pit box, the
   trackside flyby and the line — and on those the road runs *across* the
   frame rather than into it. The longitudinal deck above is wrong for them
   by exactly 90 degrees: it points its lane edges and its kerbs at a
   vanishing point the car is not driving toward, so a side-on car reads as
   crossing the road rather than travelling down it.

   This variant drops the 3D plane, and that is not a shortcut. A road that
   crosses the frame has its edges parallel to the horizon — they do not
   converge, because every point along one is the same distance from the
   camera — and its centre dashes all sit at a single depth, so they are
   evenly spaced across the frame and scroll sideways. Flat bands are the
   correct projection here. Keeping rotateX would invent a vanishing point a
   square-on camera does not have, which is the same mistake in a new hat.

   Depth is carried by the two verges instead: the far one is darker and
   sits above the road, the near one runs off the bottom of frame. */
.r-deck.cross{perspective:none}
.r-deck.cross i{
  height:100%;transform:none;
  background:
    /* centre dashes — the only scrolling layer, and it runs with traffic */
    repeating-linear-gradient(90deg,rgba(236,244,255,.5) 0 34px,transparent 34px 104px),
    /* the two road edges, dead flat */
    linear-gradient(180deg,transparent 13.4%,rgba(236,244,255,.4) 13.4% 14.4%,
      transparent 14.4%,transparent 70.6%,rgba(236,244,255,.4) 70.6% 71.6%,transparent 71.6%),
    /* far verge, near verge, then the asphalt itself */
    linear-gradient(180deg,#070C14 0 9.5%,transparent 9.5%,transparent 75%,#05090F 75%),
    linear-gradient(180deg,#131F35 0%,#0D1728 44%,#0A1220 100%);
  background-size:138px 5px,100% 100%,100% 100%,100% 100%;
  background-position:0 42%,0 0,0 0,0 0;
  background-repeat:repeat-x,no-repeat,no-repeat,no-repeat;
  -webkit-mask-image:none;mask-image:none;
  animation:r-deckcross var(--deck-t,560ms) linear infinite;
}
@keyframes r-deckcross{to{background-position:138px 42%,0 0,0 0,0 0}}
/* Kerbing on a cross-track road is two strips lying along it, just outside
   each white line — 26px of red then 26px of white, repeating sideways, and
   scrolling with the dashes so the whole surface moves as one piece. */
.r-deck.cross.kerb i{
  background:
    repeating-linear-gradient(90deg,rgba(236,244,255,.5) 0 34px,transparent 34px 104px),
    repeating-linear-gradient(90deg,rgba(178,38,42,.4) 0 26px,rgba(206,216,228,.4) 26px 52px),
    repeating-linear-gradient(90deg,rgba(178,38,42,.4) 0 26px,rgba(206,216,228,.4) 26px 52px),
    linear-gradient(180deg,transparent 13.4%,rgba(236,244,255,.4) 13.4% 14.4%,
      transparent 14.4%,transparent 70.6%,rgba(236,244,255,.4) 70.6% 71.6%,transparent 71.6%),
    linear-gradient(180deg,#070C14 0 9.5%,transparent 9.5%,transparent 75%,#05090F 75%),
    linear-gradient(180deg,#131F35 0%,#0D1728 44%,#0A1220 100%);
  background-size:138px 5px,100% 3.2%,100% 3.2%,100% 100%,100% 100%,100% 100%;
  background-position:0 42%,0 10.2%,0 74.4%,0 0,0 0,0 0;
  background-repeat:repeat-x,repeat-x,repeat-x,no-repeat,no-repeat,no-repeat;
  animation-name:r-deckcross-kerb;
}
@keyframes r-deckcross-kerb{
  to{background-position:138px 42%,104px 10.2%,104px 74.4%,0 0,0 0,0 0}
}
/* A grid that stands still and then goes. The deck cannot simply start
   scrolling on the hit — a road that jumps from frozen to full speed in a
   single frame reads as a cut, not as a launch — so it eases out of the
   standstill and keeps building all the way to the end of the run. Only
   the dry deck gets this, because the grid short is the only one that
   starts from a standstill and it is shot at first light. */
.r-deck.dry.launch i{animation:r-decklaunch var(--t-run,10000ms) both}
@keyframes r-decklaunch{
  0%,40%{background-position:calc(50% - 6px) 0,0 0,0 0,0 0;
         animation-timing-function:cubic-bezier(.6,0,.86,.42)}
  100%  {background-position:calc(50% - 6px) 3300px,0 0,0 0,0 0}
}

/* A trackside camera is standing on the ground, and the road it is looking
   at is not going anywhere: the dashes are paint, not motion. Only a
   tracking camera earns a moving road. `still` has to beat the cross and
   kerb rules on specificity to say so, hence the full selector. */
.r-deck.cross.still i,.r-deck.cross.kerb.still i{animation:none}

/* The tracking road, for the one profile shot that rides along with the
   car: the surface streams past and then comes to rest, decelerating on
   the same curve as the car's wheels and the streaked background so the
   whole world slows as one thing. Every layer lands on a whole number of
   its own periods — 20 dash periods, 40 kerb periods — so the texture is
   continuous at the end of the run rather than half a stripe short. */
.r-deck.cross.kerb.slowing i{animation:r-deckcross-slow var(--t-run,10000ms) both}
/* The shape matters more than the curve. A single decelerating bezier over
   the whole run spends most of its travel in the first two seconds, so the
   world has effectively stopped long before the hit and the last half of
   the short is a still frame. Hold speed to 30%, brake into the hit at 44%,
   then creep — which is also what a car crossing a line actually does. */
@keyframes r-deckcross-slow{
  0%  {background-position:0 42%,0 10.2%,0 74.4%,0 0,0 0,0 0;
       animation-timing-function:linear}
  30% {background-position:-1930px 42%,-1450px 10.2%,-1450px 74.4%,0 0,0 0,0 0;
       animation-timing-function:cubic-bezier(.18,.66,.3,1)}
  44% {background-position:-2600px 42%,-1950px 10.2%,-1950px 74.4%,0 0,0 0,0 0;
       animation-timing-function:cubic-bezier(.2,.5,.4,1)}
  100%{background-position:-2960px 42%,-2220px 10.2%,-2220px 74.4%,0 0,0 0,0 0}
}

/* Cross-track pit lane. The box the car stops in is painted on the ground
   in front of the garage: a lane edge along the far side, and the box's own
   outline — two lines across and two down the ends — which a camera square
   to the box sees as an actual rectangle rather than a wedge. The end lines
   are confined to the box's own depth by their background-size, since an
   outline whose sides overshoot reads as a crosswalk. Nothing scrolls,
   because nothing is moving past. */
.r-deck.cross.pit i{
  background:
    /* box outline: the two end lines, then far and near edges */
    linear-gradient(90deg,transparent 17%,rgba(255,244,214,.32) 17% 17.6%,
      transparent 17.6%,transparent 82.4%,rgba(255,244,214,.32) 82.4% 83%,transparent 83%),
    linear-gradient(180deg,transparent 22%,rgba(255,244,214,.34) 22% 22.7%,transparent 22.7%),
    linear-gradient(180deg,transparent 68%,rgba(255,244,214,.34) 68% 68.7%,transparent 68.7%),
    /* the lane edge, hard against the garage mouth */
    linear-gradient(180deg,transparent 10%,rgba(255,244,214,.24) 10% 10.6%,transparent 10.6%),
    /* worn concrete, lighter where the garage light falls on it */
    linear-gradient(180deg,#33373E 0%,#2C3037 38%,#1E2126 100%);
  background-size:100% 47%,100% 100%,100% 100%,100% 100%,100% 100%;
  background-position:0 22%,0 0,0 0,0 0,0 0;
  background-repeat:no-repeat;
  animation:none;
}

/* Dry cross-track, for the shorts that are not shot in the rain. */
.r-deck.cross.dry i{
  background:
    repeating-linear-gradient(90deg,rgba(255,246,220,.44) 0 34px,transparent 34px 104px),
    linear-gradient(180deg,transparent 13.4%,rgba(255,244,214,.38) 13.4% 14.4%,
      transparent 14.4%,transparent 70.6%,rgba(255,244,214,.38) 70.6% 71.6%,transparent 71.6%),
    linear-gradient(180deg,#3A3327 0 9.5%,transparent 9.5%,transparent 75%,#2A2419 75%),
    linear-gradient(180deg,#4A4438 0%,#332F28 44%,#26231D 100%);
  background-size:138px 5px,100% 100%,100% 100%,100% 100%;
  background-position:0 42%,0 0,0 0,0 0;
  background-repeat:repeat-x,no-repeat,no-repeat,no-repeat;
  animation-name:r-deckcross;
}

/* Pit lane: no centre dashes, no kerbs, no edge lines — a pit lane is
   painted, not marked, and running a racing road through a pit box was the
   fastest way to make the stop read as happening in the middle of a
   straight. One box outline, one lane edge, and worn concrete. */
.r-deck.pit i{
  background:
    linear-gradient(90deg,transparent 33%,rgba(255,244,214,.34) 33% 33.6%,
      transparent 33.6%,transparent 66.4%,rgba(255,244,214,.34) 66.4% 67%,transparent 67%),
    linear-gradient(180deg,transparent 42%,rgba(255,244,214,.28) 42% 43%,transparent 43%),
    linear-gradient(90deg,#1A1F27 0 30%,transparent 30%,transparent 70%,#1A1F27 70%),
    linear-gradient(180deg,#3A3E44 0%,#2A2E34 40%,#1C1F24 100%);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%;
  background-position:0 0,0 0,0 0,0 0;
  background-repeat:no-repeat;
  animation:none;
}

/* Dry: warm tarmac and a sand verge for the dawn shorts. Same geometry —
   only the paint and the ground change, because the road doesn't. */
.r-deck.dry i{
  background:
    repeating-linear-gradient(180deg,rgba(255,246,220,.5) 0 40px,transparent 40px 150px),
    linear-gradient(90deg,transparent 29.4%,rgba(255,244,214,.42) 29.4% 30.6%,
      transparent 30.6%,transparent 69.4%,rgba(255,244,214,.42) 69.4% 70.6%,transparent 70.6%),
    linear-gradient(90deg,#5A4E3A 0 26%,transparent 26%,transparent 74%,#5A4E3A 74%),
    linear-gradient(180deg,#4A4438 0%,#332F28 40%,#211F1C 100%);
  background-size:12px 150px,100% 100%,100% 100%,100% 100%;
  background-position:calc(50% - 6px) 0,0 0,0 0,0 0;
  background-repeat:repeat-y,no-repeat,no-repeat,no-repeat;
}
/* The wet sheen: the deck's own reflection of whatever is lighting the
   frame, laid over the surface rather than mixed into it so it can bloom on
   the hit without touching the road markings. */
.r-sheen{position:absolute;left:0;right:0;bottom:0;height:64%;z-index:3;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0%,rgba(255,150,60,.2),transparent 62%),
             radial-gradient(40% 80% at 82% 0%,rgba(120,170,240,.16),transparent 70%)}

/* ============================================================
   THE PIT CREW
   Silhouettes with a rim, never figures with faces — see cars.js. Each is
   one clipped body shape plus a helmet, sized off --ch so a whole crew
   scales with the car it is working on.
   ============================================================ */
.crew{position:absolute;z-index:44;transform:translate(-50%,-100%) scale(var(--ch,1));
  transform-origin:50% 100%;width:34px;height:48px;pointer-events:none}
.crew > *{position:absolute}
.crew.flip{transform:translate(-50%,-100%) scale(var(--ch,1)) scaleX(-1)}

/* The body. A crouch reads from the back line and the angle of the thigh —
   get those two right and nobody looks for the rest. */
.crew .fig{left:0;top:10px;width:34px;height:38px;
  background:linear-gradient(160deg,#232B38 0 22%,#101722 46%,#05080E);
  clip-path:polygon(30% 0,58% 2%,72% 12%,78% 32%,100% 42%,100% 56%,70% 52%,
                    64% 74%,80% 100%,54% 100%,42% 70%,22% 96%,2% 90%,16% 56%,10% 26%);
  box-shadow:inset 0 2px 0 rgba(214,232,255,.22)}
/* The default pose is the crouch — named so the markup reads, even though
   it adds nothing the base rule hasn't already done. */
.crew.kneel .fig{}
.crew.stand{height:56px}
.crew.stand .fig{top:12px;height:44px;
  clip-path:polygon(34% 0,66% 0,76% 12%,70% 30%,92% 34%,90% 46%,64% 42%,
                    60% 66%,74% 100%,52% 100%,46% 70%,36% 100%,16% 100%,30% 62%,24% 32%,20% 12%)}
/* Helmet: a dark ball with one hot line across the crown and a visor that
   catches whatever is lighting the box. */
.crew .hel{left:8px;top:0;width:19px;height:19px;border-radius:50%;
  background:radial-gradient(circle at 42% 30%,#39424F,#141A24 62%,#05080E);
  box-shadow:inset 0 2px 0 rgba(226,240,255,.42)}
.crew .hel::after{content:"";position:absolute;left:9px;top:6px;width:9px;height:6px;
  border-radius:3px;background:linear-gradient(180deg,rgba(180,214,255,.5),rgba(20,30,48,.9))}
/* Wheel gun, held out toward the hub, with the hammer blur while it runs. */
.crew .gun{left:26px;top:24px;width:19px;height:7px;border-radius:2px;
  background:linear-gradient(180deg,#4A5462,#161C26);z-index:2}
.crew .gun::after{content:"";position:absolute;right:-6px;top:1px;width:7px;height:5px;
  border-radius:50%;background:rgba(255,196,110,.9);opacity:0}
.crew.firing .gun{animation:c-gun 70ms linear infinite}
.crew.firing .gun::after{animation:c-spark 70ms linear infinite}
@keyframes c-gun{0%,100%{transform:translateX(0)}50%{transform:translateX(-1.6px)}}
@keyframes c-spark{0%,100%{opacity:.15}50%{opacity:.9}}
/* The lollipop: board on a pole, lifted when the car is released. */
.crew .lolly{left:14px;top:-40px;width:4px;height:52px;
  background:linear-gradient(90deg,#39424F,#141A24)}
.crew .lollyb{left:-4px;top:-52px;width:40px;height:16px;border-radius:3px;
  background:linear-gradient(180deg,#F2F5F9,#9AA4B1);
  box-shadow:0 2px 8px rgba(0,0,0,.6)}
.crew .hose{left:-30px;top:26px;width:38px;height:6px;border-radius:3px;
  background:linear-gradient(180deg,#2A323E,#0B0F16)}
.crew .carry{left:30px;top:14px;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 46% 34%,#39414F 0 46%,#12171F 74%,#05080E);
  box-shadow:inset 0 2px 0 rgba(206,224,252,.2)}

/* Crew do not stand still. Each gets the same short bob at a different
   phase, which at silhouette scale is the whole difference between a pit
   crew and a row of traffic cones. */
.crew .fig,.crew .hel{animation:c-work 420ms ease-in-out infinite alternate}
@keyframes c-work{from{transform:translateY(0)}to{transform:translateY(-1.6px)}}
/* Then they clear the car when it goes. */
.crew.scatter{animation:c-scatter 900ms 4700ms ease-out both}
@keyframes c-scatter{
  0%  {opacity:1;transform:translate(-50%,-100%) scale(var(--ch,1))}
  100%{opacity:.5;transform:translate(-50%,-108%) scale(var(--ch,1)) translateX(var(--sc,-14px))}
}

/* ---------- pit box hardware ---------- */
/* The jack: a wedge under the car that rises, holds, and drops away. The
   drop is the hit — the whole car falls two inches onto its tyres and the
   crew come off it at once. */
.pitjack{position:absolute;z-index:43;transform:translate(-50%,-100%);
  width:56px;height:16px;
  background:linear-gradient(180deg,#4A5462 0 22%,#1A212C 40%,#080C13);
  border-radius:2px;
  animation:p-jack var(--t-run,10000ms) both}
@keyframes p-jack{
  0%,32%  {opacity:0;transform:translate(-50%,-100%) scaleY(.2)}
  34%     {opacity:1;transform:translate(-50%,-100%) scaleY(.2)}
  38%     {opacity:1;transform:translate(-50%,-100%) scaleY(1)}
  44%     {opacity:1;transform:translate(-50%,-100%) scaleY(1)}
  46%     {opacity:1;transform:translate(-50%,-100%) scaleY(.2)}   /* dropped */
  52%     {opacity:0;transform:translate(-50%,-100%) scaleY(.2)}
  100%    {opacity:0;transform:translate(-50%,-100%) scaleY(.2)}
}
/* Air hoses on the deck, and the overhead light bank that makes a pit box
   the only interior in the set — fluorescent, and slightly sick next to the
   sodium outside. */
.pithose{position:absolute;z-index:42;height:5px;border-radius:3px;
  background:linear-gradient(180deg,#2A323E,#080C13);opacity:.8}
/* Overhead strip lights. A bare gradient panel read as a ceiling tile
   floating in a void — a fixture needs a housing, a tube, and the pool it
   throws, or it is just a light-coloured rectangle. */
.pitlight{position:absolute;z-index:3;
  background:linear-gradient(180deg,#161D28 0 22%,#0C121C 100%);
  border-radius:2px;box-shadow:0 14px 50px 18px rgba(150,200,255,.16)}
.pitlight::after{content:"";position:absolute;left:6%;right:6%;top:26%;height:34%;
  border-radius:2px;background:linear-gradient(180deg,#EAF6FF,#A8CCF0);
  box-shadow:0 0 22px 7px rgba(200,232,255,.85)}
/* The cone it throws onto the box below it. */
.pitbeam{position:absolute;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(196,230,255,.26),rgba(150,196,240,.08) 54%,transparent);
  clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.pitstack{position:absolute;z-index:41;width:34px;height:11px;border-radius:5px;
  background:linear-gradient(180deg,#2C3440,#0A0E15)}
.pitgarage{position:absolute;z-index:2;
  background:linear-gradient(180deg,#131C2B 0%,#0B1220 58%,#070C16 100%)}