/* GENERATED by tools/make_section_07.js from drive.html - do not edit. Every selector is scoped under .sec7; the prototype's read-out, probes and standalone switch are left behind. */ /* ============================================================================ THE DRIVE — a first-person run down his Highway_PPV view, driven by scroll. ONE PROJECTION, WRITTEN OUT, AND NO 3D CONTEXT AT ALL. Everything in the scene - the tarmac, the lane markings, the trees, their shadows, his gantries - is placed by the same three lines: a thing at depth D is drawn at scale f/(f+D), its foot on the road at horizon + eye*scale. That is exactly what `perspective: f` does, done by hand. Doing it by hand rather than with CSS 3D buys three things. A 3D floor plane long enough for this road is 30,000px tall, which is past what a browser will rasterise - it silently paints nothing. Second, everything agrees with everything: a tree, its shadow and the dash beside it all come out of one number. Third, the earth curve is one more term in that number rather than a fight with a transform stack. WHAT MOVES AND WHAT DOES NOT. The road surface, its shoulders, the grass and the sea never move: four shapes, drawn once, re-cut only on resize. Only the lane markings and the things standing on the road are touched per frame, and each of those is a single transform - no reads, no measuring, no layout. ========================================================================= */.sec7 *{box-sizing:border-box}.sec7{height:741vh;position:relative}.sec7 .stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate} /* THE FIREWORKS SIT IN THE SKY, BEHIND THE WORLD. One canvas, under the sea and the road and above the stars, so a shell climbs out from behind the horizon; and deliberately NOT in the fade group, because the whole point is that it is what is left once the ground has gone. */.sec7 .fw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* EVERYTHING THAT STANDS ON THE EARTH fades out together at the end of the road. One property on the stage, read by eight layers - no per-element writes, and the sky, the moon and the starfield simply do not read it. */ /* ONE GROUP AND ONE FADE, at the far end only. */.sec7 .sea, .sec7 #swell, .sec7 .land, .sec7 .road, .sec7 .edge, .sec7 #shadows, .sec7 #marks, .sec7 #props, .sec7 .cloud{opacity:var(--out,1)} /* ---- his sky, his sun, his sea - four gradients, nothing that moves ------ */.sec7 .sky{position:absolute;inset:0; background: linear-gradient(112deg,#fff 0%,#d4e7ff 15%,#a3ccff 36%,#7cb7ff 55%,#60a8ff 73%,#4f9fff 88%,#4a9cff 100%)} /* HIS SUN, LIFTED OUT OF THE SKY INTO A LAYER OF ITS OWN - the same radial he drew, in the same place, painting the same daylight. It is a separate element for one reason: night was a black sheet drawn over the top of it, which is a light being switched off, and what he asked for is a sun going down. Moving a layer is a transform, and a transform is the one thing that interpolates for free on the compositor. IT SETS BEHIND THE WATER. This sits AFTER .sky - so it is over the night gradient that .sky::after fades in, and the sun stays lit while the sky goes dark around it - and BEFORE .sea, so the moment it passes the horizon the water covers it. Nothing clips it and nothing masks it: it goes down behind the sea because the sea is painted on top of it, which is also how it works outside. What is left above the waterline for the last second is the rim of its own glow, and then that goes too. --sun-set IS MEASURED, NOT GUESSED, because the horizon is not at a fixed place on the page: on a phone the sky is taller and the water starts lower down. measure() works out the drop that carries the centre of the glow from its mark to well under the waterline, in that frame's own pixels. */ /* TALLER THAN THE FRAME, ON PURPOSE. A background is clipped to its own box, and the top of this glow sits ABOVE the frame - so the moment the layer slid down, the part that was hanging over the top edge stopped being painted and the sun grew a straight horizontal edge across the sky. The element is given a frame's worth of room above and below and the gradient is placed at 48% of THAT - the same 4% above the stage top he drew it at, now with paint either side of it. .stage clips, so none of it escapes. */ /* AND IT GOES ORANGE ON THE WAY DOWN, which needs the two colours in the gradient to be things that can be ANIMATED. A plain custom property cannot: a gradient behind a changed variable snaps, which is the same wall the dawn ran into. A REGISTERED one can - @property gives the browser a type, and a typed custom property interpolates like any other, gradient and all. Where it is not supported the colour cuts instead of sliding and nothing else changes, which is a fair way to lose. */@property --sun-a{syntax:'';inherits:false;initial-value:rgba(255,255,255,.98)}@property --sun-b{syntax:'';inherits:false;initial-value:rgba(255,255,255,0)}.sec7 .sun{position:absolute;left:0;right:0;top:-100%;height:200%; pointer-events:none;will-change:transform; --sun-a:rgba(255,255,255,.98); --sun-b:rgba(255,255,255,0); background:radial-gradient(760px 620px at 11% 48%, var(--sun-a), var(--sun-b) 60%); transition:transform 1.1s ease-out, opacity .5s linear, --sun-a .6s linear, --sun-b .6s linear} /* AND THE EVENING TAKES ITS TIME. Every number below was set against a road at its open speed, where four seconds of sunset is a screen and a half and the sky is dark before you are level with the thing that started it. The road now eases hard at the billboard AND the whole sequence runs half again longer - a little over six seconds end to end - so the sun goes down over a proper stretch of road instead of between two frames of it. */ /* THE EVENING IS STAGED; THE MORNING IS A SWITCH. A transition belongs to the state being moved TO, so the long delays live in the night rules and the day rules keep their own short ones. Written once on the element they applied BOTH ways - scrolling back up, nothing moved for a second and a half and then took another two to come back, which is a page that looks broken rather than a page turning the light on. */:root[data-mode="night"] .sec7 .sun{transform:translateY(var(--sun-set,70vh));opacity:0; --sun-a:rgba(255,146,42,.95); --sun-b:rgba(255,86,20,0); transition:transform 4.8s cubic-bezier(.35,0,.65,1), --sun-a 1.9s linear .35s, --sun-b 1.9s linear .35s, opacity 1s ease-in 2s} @media (prefers-reduced-motion: reduce){.sec7 .sun, :root[data-mode="night"] .sec7 .sun{transform:none;transition:opacity .35s linear} } /* HIS LIGHT, NOT FLAT PAINT. Every ground in his file is a RADIAL gradient whose centre sits under the sun - top left, the same place the sky's glow is - so the water, the verge and the tarmac are all brightest there and fall away to the far corner. Mine were three flat vertical ramps, which is why the render came back soft and cartoonish beside his: nothing in it agreed about where the light was coming from. One radial each, laid over the ramp that gives the near-to-far falloff, and the whole scene picks a side. */ /* AND THEY ARE HIS COLOURS NOW, OFF HIS OWN FILES, AND THEY RUN HIS WAY UP. Both of mine were dark at the BOTTOM and light at the top, which is a picture of a wall rather than of a plane going away from you. In his New_darker_ocean the water is #00287d at the far edge over a base that runs #004ca2 to #045dc3 across, and the dark only reaches seven tenths of the way down; in his Road the verge is #006837 at the far edge and #39b54a at the near one. Dark at the horizon, opening up as it comes at you - which is both what he drew and what water and grass actually do. HIS RAMP RUNS THE WHOLE HEIGHT OF HIS ROAD DRAWING, though, and the strip of verge this scene can actually see is the top of it - so taken end to end his light green arrived halfway up the picture. The bright end is held back to the last fifteen per cent, which is where his own file puts it. */.sec7 .sea{position:absolute;left:0;right:0; background: radial-gradient(150% 260% at 6% -10%, rgba(120,205,255,.30), rgba(120,205,255,0) 55%), linear-gradient(180deg,#00287d 0%,rgba(0,45,131,.90) 21%,rgba(0,51,140,.78) 30%, rgba(1,61,152,.60) 40%,rgba(2,73,168,.37) 50%,rgba(3,87,188,.10) 62%, rgba(4,93,195,0) 71%), linear-gradient(90deg,#004ca2 0%,#045dc3 100%)}.sec7 .land{position:absolute;left:0; background: radial-gradient(140% 220% at 6% -14%, rgba(170,245,150,.30), rgba(170,245,150,0) 55%), linear-gradient(180deg,#005c31 0%,#00693a 30%,#0a763c 62%,#188540 85%,#2a9d45 100%)}.sec7 .road, .sec7 .edge, .sec7 .dash{position:absolute;left:0;top:0}.sec7 .road{background: radial-gradient(150% 240% at 6% -12%, rgba(255,255,255,.34), rgba(255,255,255,0) 60%), linear-gradient(180deg,#4b4b4b 0%,#3b3b3b 42%,#2e2e2e 100%)} /* HIS EDGES: a white line, then a yellow one just outside it, both sides. The centre dashes stay white. That is his gold on the shoulder line, so the road agrees with the signs without shouting down the middle of it. */.sec7 .edge{background:#fff}.sec7 .edge.gold{background:#ffda00}.sec7 .dash{background:#fff} /* ===== NIGHT ============================================================== ONE SWITCH, data-mode on the root, and everything crossfades over a second. The grounds fade because each carries its night colour as an ::after that goes from 0 to 1 opacity - no second element, and the day paint underneath is untouched. The sprites fade because their day and night filters are the SAME function list in the same order, which is the only way a filter interpolates: change the list and it snaps. EVERYTHING GOES BLUE EXCEPT WHAT MAKES LIGHT. The palms, the water, the verge, the tarmac, the clouds and the metal all rotate into the blues and come down hard in brightness. The boards and the lamp heads do not: a sign is retro-reflective and a lamp is the source, so they stay warm and they are the only warm things in the frame - which is what makes a night scene read as lit rather than as a photograph with the exposure pulled down. */ /* These five never move and never change except when the switch is thrown, so each is worth its own cached layer: will-change on a handful of STATIC full-screen paints is the opposite of putting it on 144 moving sprites. The starfield is six repeating radial gradients across the whole frame - painted once into a layer it is free, repainted every frame it was the single biggest cost in the night scene. */ /* NOTHING FADES IN. The section is SCROLLED to, not dissolved to: the stage rides up from the bottom of the window with the road already on it and only pins once it fills the frame. What joins it to the cards above is colour - that page ends on the exact gradient this sky begins with - not a wash of white over the top of the scene, which is what it was doing and what made the arrival feel like a cut rather than a drive. */ /* THE SUN IS THE CLOCK NOW, AND THE BLACK WAITS FOR IT. Nothing dims while the sun is still high: it starts down at nought and the ground only begins to go at 1.5, which is the moment it is HALF WAY - the drop is three seconds on a symmetric curve, so half the time is half the distance and the two readings are the same reading. The black then runs 1.8 and closes at 3.3, three tenths after the sun is under the water at 3.0. The whole evening, in order: the sun starts down; at 0.35 it starts turning; by 2.25 it is sunset orange; at 1.5, half way, the light starts leaving the land; the moon begins its arc at 1.0 and is on its mark at 3.2; the sun fades out over the last second of its own fall; the sky finishes last. */.sec7 .sky::after, .sec7 .sea::after, .sec7 .land::after, .sec7 .road::after{ content:'';position:absolute;inset:0;opacity:0;transition:opacity 1.4s linear; pointer-events:none;will-change:opacity} /* AND THEY DO NOT ALL GO AT ONCE. They did - one delay, one duration, four grounds - and the tarmac still read as going FIRST, because his road is a mid grey and his water is a saturated blue: the same veil of black over both takes half the light out of the grey while the blue is still plainly blue. Matching the numbers was never going to match the eye. So they are staggered, in the order it happens outside. The water goes first, because the sea is the far distance and the far distance is the first thing to lose a low sun. Then the sky behind it. Then the verge. The tarmac is last - it is the nearest thing in the frame, it is under the lamps, and it is the surface a driver is still looking at when everything else has gone. Eight tenths of a second between the water and the road is enough to read as an order rather than a mistake. */:root[data-mode="night"] .sec7 .sea::after{opacity:1;transition:opacity 2.9s linear 2.2s}:root[data-mode="night"] .sec7 .sky::after{opacity:1;transition:opacity 2.9s linear 2.4s}:root[data-mode="night"] .sec7 .land::after{opacity:1;transition:opacity 2.7s linear 3.0s}:root[data-mode="night"] .sec7 .road::after{opacity:1;transition:opacity 2.9s linear 3.7s}.sec7 .sky::after{background:linear-gradient(180deg,#02060f 0%,#050d1e 34%,#081833 62%,#0d2447 84%,#12305a 100%)} /* AND ON A PHONE THE SKY COMES OUT OF THE WHITE ABOVE IT. His own sky already washes to white, but along a 112-degree diagonal - which on a 1440 frame puts the pale corner across most of the top edge and on a 390 one tucks it into a corner, so what meets section six's white page is a ruled horizontal line. A second wash straight down the top fifth closes it. It is a ::before on the sky itself, which paints over the sky's own gradient and UNDER the clouds and the moon, so nothing in the scene is veiled by it - and under the night sheet, which is ::after and opaque at the top, so after dark it is not there at all and the join is his own black meeting section six's. */ @media (max-width:900px) and (pointer:coarse){.sec7 .sky::before{content:'';position:absolute;left:0;right:0;top:0;height:21vh; background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.72) 34%,rgba(255,255,255,0) 100%)} } /* the moon's wash on the water is tighter than the sun's was - a moon lights a patch of sea, not the whole of it, and at 150% by 260% there was no dark water left on the near side at all */.sec7 .sea::after{background: radial-gradient(78% 150% at 8% -12%, rgba(150,190,255,.34), rgba(150,190,255,0) 46%), linear-gradient(180deg,#08182f 0%,#061225 46%,#040c1a 100%)}.sec7 .land::after{background: radial-gradient(140% 220% at 9% -14%, rgba(150,195,255,.20), rgba(150,195,255,0) 52%), linear-gradient(180deg,#0d1e34 0%,#0a1728 46%,#071120 100%)}.sec7 .road::after{background: radial-gradient(150% 240% at 9% -12%, rgba(160,200,255,.14), rgba(160,200,255,0) 55%), linear-gradient(180deg,#0b1220 0%,#070c17 46%,#05080f 100%)} /* his sky at night: a moon where his sun was, and a tiled starfield. Two background layers of dots repeated is a whole sky for nothing. */ /* the stars come out AFTER the sun is down, not with it */.sec7 .stars{position:absolute;opacity:0;transition:opacity .6s linear; pointer-events:none;will-change:opacity}.sec7 .stars{inset:0;background-image: radial-gradient(1.5px 1.5px at 18% 22%,rgba(255,255,255,.95),transparent), radial-gradient(1.1px 1.1px at 62% 9%,rgba(255,255,255,.75),transparent), radial-gradient(1.3px 1.3px at 84% 41%,rgba(255,255,255,.85),transparent), radial-gradient(1px 1px at 37% 58%,rgba(210,230,255,.7),transparent), radial-gradient(1.6px 1.6px at 8% 74%,rgba(255,255,255,.6),transparent), radial-gradient(1.1px 1.1px at 71% 66%,rgba(220,235,255,.65),transparent); background-size:340px 240px,340px 240px,470px 330px,470px 330px,610px 410px,610px 410px} /* HIS MOON, the one already in the site's night palette - it carries its own halo in the artwork, so the wrapper only adds the wider wash of moonlight the sky takes from it. A box-shadow would have painted the box, not the disc, which is why this is a gradient. */ /* AND IT COMES IN ON AN ARC, which is why there are two elements. A single translate interpolates in a straight line however it is eased - the two ends of the move are joined by a ruler and no timing function bends it. So the across and the down are put on SEPARATE elements with DIFFERENT easings, and the path between them bows: the wrapper brings it in from off the left and is most of the way home by the time it is half over, while the disc inside is still only a sixth of the way down. What that draws is a moon entering at the top left corner and settling down onto its mark on a curve, rather than running up a diagonal. AND IT HAS TO BE ON SCREEN WHILE IT DOES IT. The first go started it nearly two of its own heights above the frame with a hard ease-in underneath, so it spent five sixths of the move off the top edge and what was left was a drop. Just over one height up, and a gentler curve on the way down, is the whole difference between an arc and an entrance. THE TWO LEGS ARE THE SAME LENGTH, and that is what makes it a QUARTER CIRCLE rather than a slide. 125% of its width across and 125% of its height down - the box is square, so those are the same distance - starting off the corner and arriving on its mark. The easings are the circle itself: a quarter circle walked at a constant angle is sin for the across and 1-cos for the down, so the two easings ARE those functions - the standard cubic approximations of ease-out-sine and ease-in-sine, which is a pairing that exists for exactly this. Measured every 200ms against the circle through its own two ends, the path is never more than a hundredth of the radius off it - tools threw the pair away twice before this one. At half time it has done 0.71 of the across and 0.29 of the down, which is a point on a circle and not on a line. Twice as far across as down was the old pair, and twice as far across as down is a slide however it is eased. THE DISTANCES ARE ITS OWN SIZE, not the viewport's. A percentage on `translate` is a share of the element, so this clears the corner on a phone and at 1440 alike - where 26vw is comfortably clear on one and not nearly enough on the other. IT LEAVES THE SAME WAY. Nothing here is an animation; both halves are transitions on data-mode, so taking the switch back to day walks the moon out along the same arc it came in on. */.sec7 .moon{position:absolute;left:6.5%;top:5%;width:clamp(130px,19vh,290px); aspect-ratio:1;opacity:0;pointer-events:none; will-change:transform,opacity;transform:translateX(-125%); transition:opacity .5s linear, transform 1.1s cubic-bezier(.39,.575,.565,1)}.sec7 .moon .orb{position:absolute;inset:0;display:grid;place-items:center; transform:translateY(-125%); transition:transform 1.1s cubic-bezier(.47,0,.745,.715); background:radial-gradient(closest-side,rgba(178,208,255,.20),rgba(140,180,255,0) 76%)}.sec7 .moon img{display:block;width:54%;height:auto}:root[data-mode="night"] .sec7 .stars{opacity:1;transition:opacity 2.6s linear 2.6s}:root[data-mode="night"] .sec7 .moon{opacity:1;transform:none; transition:opacity 1.4s linear 1.6s, transform 2.2s cubic-bezier(.39,.575,.565,1) 1s}:root[data-mode="night"] .sec7 .moon .orb{transform:none; transition:transform 3.5s cubic-bezier(.47,0,.745,.715) 1.6s} @media (prefers-reduced-motion: reduce){.sec7 .moon, :root[data-mode="night"] .sec7 .moon{transform:none;transition:opacity .35s linear}.sec7 .moon .orb, :root[data-mode="night"] .sec7 .moon .orb{transform:none;transition:none} } /* the paint dims - it is only as bright as what falls on it */.sec7 .edge, .sec7 .dash{transition:background-color .9s linear}:root[data-mode="night"] .sec7 .edge, :root[data-mode="night"] .sec7 .dash{ background:#8195b4;transition:background-color 2.9s linear 3.7s}:root[data-mode="night"] .sec7 .edge.gold{background:#8a6a26} /* ---- what stands on it -------------------------------------------------- Sprites, not vector. His four trees carry 247 shapes and 246 gradients - one per frond - and a palm in this scene is never still: it grows the whole way past the camera, and a gradient-filled group has to be re-rasterised at every new scale. Rasterised once at 1024 tall they are 1.7 to 3.4KB each and the compositor scales them for nothing. */ /* NO will-change ANYWHERE. It was on .thing, .cloud, .wave, .road, .edge and .dash - a hint on 144 elements, which is not a hint, it is an instruction to promote 144 compositor layers. Past a browser's layer budget the extra ones are handed back and things start dropping in and out of the frame, which is what the night scene was doing. Everything here moves by transform alone; the compositor promotes what it needs on its own. */.sec7 .thing{position:absolute;left:0;top:0;transform-origin:50% 100%}.sec7 .thing img{display:block;height:100%;width:auto} /* THE SPRITES AT NIGHT. Both states are the same three functions in the same order, which is what lets the browser interpolate between them - a different list, or one function more, and the change snaps instead of fading. */ /* NO IDENTITY FILTER IN DAYLIGHT. Writing brightness(1) saturate(1) hue-rotate(0deg) to give night something to interpolate from costs a filter pass on every sprite in every frame of the day scene, for nothing. Leaving it off is free AND still fades: a filter list interpolating from none is treated as the same list at its identity values, which is exactly what that line was. */ /* AND THEY GO WHEN THE GROUND GOES, on the same 1.5s-to-3.3s as the sky and the sea. A one-second fade off the top of the clock had everything on the earth dark before the sun was half way down, which is a light being switched off in a room with the curtains open. .cloud img is NOT in this list - it has its own line, later, because it goes last. */.sec7 .palm img, .sec7 .lamp img:not(.light), .sec7 .wave img, .sec7 .pole, .sec7 .truss, .sec7 .sign img{ transition:filter .9s linear}:root[data-mode="night"] .sec7 .palm img, :root[data-mode="night"] .sec7 .lamp img:not(.light), :root[data-mode="night"] .sec7 .wave img, :root[data-mode="night"] .sec7 .pole, :root[data-mode="night"] .sec7 .truss, :root[data-mode="night"] .sec7 .sign img{ transition:filter 1.8s linear 1.5s} /* HIS CLOUDS ARE WHITE, AND WHITE HAS NO HUE - rotating it does nothing, which is why they came out as grey smudges rather than blue. sepia() gives the white a hue to rotate, so the four functions together are a duotone: tint, strengthen, turn it to the blue the rest of the scene is in, then darken. Day is the same four with sepia at zero, so it still interpolates. */:root[data-mode="night"] .sec7 .cloud img{ filter:brightness(.4) sepia(1) saturate(6) hue-rotate(200deg) brightness(.45)}:root[data-mode="night"] .sec7 .palm img{filter:brightness(.30) saturate(.62) hue-rotate(116deg)} /* HIS SWELL KEEPS ITS WHITE. Everything else in the frame comes down hard, but the crests are the one thing the moon actually catches - taken as far down as the water they read as dirty blue smears rather than moonlight. */:root[data-mode="night"] .sec7 .wave img{filter:brightness(.68) saturate(.55) hue-rotate(0deg)} /* the lamp's own body is metal, so it goes blue with everything else - the warm is the light it throws, added on top, not the post */:root[data-mode="night"] .sec7 .lamp img:not(.light){filter:brightness(.34) saturate(.70) hue-rotate(184deg)}:root[data-mode="night"] .sec7 .pole, :root[data-mode="night"] .sec7 .truss{ filter:brightness(.40) saturate(.80) hue-rotate(184deg)} /* HIS BOARDS AT NIGHT: his darker green, and lit from his own fixtures. The day board and the night board are two bitmaps stacked, and the night one fades up over the other - a board cannot be recoloured through an , and a filter that darkened the green would darken the gold and the white type with it, which is exactly what he said not to do. */.sec7 .sign{isolation:isolate}.sec7 .sign img{filter:drop-shadow(0 14px 20px rgba(0,0,0,.22))} /* AND HIS BILLBOARD IS AN LED PANEL, so it does not get the sign glow. That glow is a drop-shadow of the whole sprite, and the whole sprite is a rectangle, so what it draws after dark is a rectangle of halo around a board - which is exactly what he saw. An LED board carries its own light IN the face; the light around it belongs to the picture, not to a filter. */.sec7 .sign img.bill, .sec7 .sign img.bill-n{filter:none}.sec7 .sign .night-art{position:absolute;inset:0;height:100%;width:100%; opacity:0;transition:opacity .9s linear}:root[data-mode="night"] .sec7 .sign .night-art{opacity:1; transition:opacity 1.8s linear 1.5s}:root[data-mode="night"] .sec7 .sign img{filter:drop-shadow(0 0 11px rgba(255,186,74,.28))}:root[data-mode="night"] .sec7 .sign img.bill, :root[data-mode="night"] .sec7 .sign img.bill-n{filter:none} /* HIS SIGN LAMPS ARE IN THE BOARDS THEMSELVES. His overlay files were cut to the home page hero's 2.685 to one; both boards on this road are 3.183, so stretched over them the beams land between the brackets rather than under them and their fittings double up with the eight each board already carries. tools/make_boards.js draws the light at each board's own brackets instead, which is also two fewer full-board paints a frame. */ /* THE LAMPS LIGHT THE ROAD, and it costs no elements: the head's glow and the pool it throws are the lamp element's own ::after and ::before, sized in per cent of the lamp, so they travel and scale with it for free. The head sits a third of the way across his sprite from the arm end - his own geometry - and mirrors for the other side. */ /* the lamps come on a little after the land starts going, which is the order it happens in: the light leaves, and then the lights answer it */.sec7 .lamp::after, .sec7 .lamp::before{content:'';position:absolute;pointer-events:none; opacity:0;transition:opacity .8s linear}:root[data-mode="night"] .sec7 .lamp::after, :root[data-mode="night"] .sec7 .lamp::before, :root[data-mode="night"] .sec7 .lamp .light{transition:opacity 1.4s linear 1.9s}.sec7 .lamp::after{width:185%;aspect-ratio:1;left:33.3%;top:4.4%;transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(255,222,158,.98), rgba(255,182,74,.42) 30%,rgba(255,164,40,0) 70%)} /* THE LIGHT A STREET LAMP THROWS, as ONE BITMAP. It was three live layers - a radial for the head, a clip-path triangle for the cone, a second radial for the pool - and every one had to be re-rasterised at a new size on every frame, because a lamp in this scene never stops growing. Measured over a scripted scroll they were a third of all the long frames after dark, and the whole of why the scrolling stuttered. It is the lesson his palms already taught: a gradient that moves is expensive, a bitmap that moves is free. THE CONE IS A RIGHT TRIANGLE, 0 to 45 degrees. A street lamp does not shine straight down and it does not shine symmetrically either - the near edge drops vertically past its own mast and the far edge rakes out at 45 across the road. A symmetric cone tilted over, which is what it was, reads as a spotlight on a stage. The numbers are the sprite's own, in multiples of the LAMP'S height: 1.10 by 1.25 with the bulb at 0.955, 0.112 of it. In per cent of the lamp's WIDTH - which is 0.1921 of its height - that is 572.6% across, and the left edge sits 0.955 of that to the left of the head at 33.3%. */.sec7 .lamp .light{position:absolute;width:572.6%;height:125%;left:-513.5%;top:-9.6%; max-width:none;pointer-events:none;opacity:0;transition:opacity .8s linear}.sec7 .a-lamp-l .light{left:40.9%;transform:scaleX(-1)}:root[data-mode="night"] .sec7 .lamp .light{opacity:1} /* the floating block. It was a grid holding one line of type at a fixed size; it is his own drawing now, so it is sized like every other standing thing. */ /* HIS MAST IS A CYLINDER, WHICH HAS ONE CAP, NOT TWO. border-radius:99px on a tall box is a lozenge - a half-circle at the top AND a half-circle at the bottom - so the thing tapered to a point where it meets the ground and read as hanging rather than standing. His own billboard mast is drawn with a shallow ellipse over the top and nothing at the foot, because the foot is in the grass. Same here: a 6% ellipse at the head, square at the base, and one more stop in the barrel gradient so it turns like a pipe. */.sec7 .pole{background:linear-gradient(90deg,#6f757d 0%,#9aa1a9 9%,#f4f7fa 36%, #e2e8ed 52%,#cdd4db 66%,#9aa1a9 87%,#6d737b 100%); border-radius:50% 50% 0 0 / 6% 6% 0 0} /* HIS GANTRY ARM, the same tile the page already uses over his hero sign, repeated along the arm so the cell keeps its shape whatever length the arm works out to at this distance. The tile is set from script off the hidden above rather than written here: a url() inside an inline