Pin the backdrop to the viewport and give the blocks depth

src/app/global.css

@@ -42,15 +42,25 @@
    to lose and nothing to exclude from pointer events. It also replaces ocean's dark-mode gradient
    wash, which was the only non-flat surface on the site.
 
+   Blocks are grouped into five opacity bands so the field has depth rather than being one flat
+   stencil. The bands mostly follow size, since a nearer block is both bigger and more solid, but
+   a few sit off that curve on purpose: a strict size-to-opacity correlation reads as a fade down
+   the page instead of as blocks at different distances.
+
+   Two things about the rect list look like untidiness and are not. Large, medium and small blocks
+   are mixed at every height rather than sorted, because clustering one size in one area reads as
+   banding. And heights are capped around 85 tile units: the largest layer scales by about 1.5, so
+   anything taller stops being a block and becomes a streak down a third of the screen.
+
    The cost is that moving `background-position` repaints the viewport each frame. At this size and
    speed that is cheap, and it buys a backdrop with no element, no canvas and no JS. If it ever
    shows up in a profile, the upgrade is a fixed pseudo-element moved with `transform` instead. */
 :root {
-  --blocks: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='500' fill='rgb(12,99,233)' fill-opacity='.05'><rect x='12' y='0' width='5' height='64'/><rect x='48' y='150' width='3' height='40'/><rect x='86' y='60' width='7' height='96'/><rect x='130' y='320' width='4' height='52'/><rect x='168' y='20' width='6' height='78'/><rect x='205' y='230' width='3' height='36'/><rect x='238' y='100' width='8' height='110'/><rect x='272' y='390' width='5' height='60'/><rect x='28' y='300' width='4' height='44'/><rect x='110' y='440' width='6' height='70'/><rect x='190' y='410' width='4' height='48'/><rect x='255' y='270' width='3' height='34'/></svg>");
+  --blocks: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='900' fill='rgb(12,99,233)'><g fill-opacity='0.045'><rect x='14' y='10' width='11' height='78'/><rect x='216' y='90' width='7' height='50'/><rect x='74' y='300' width='10' height='72'/><rect x='58' y='470' width='5' height='38'/></g><g fill-opacity='0.0324'><rect x='96' y='0' width='6' height='46'/><rect x='140' y='60' width='12' height='84'/><rect x='118' y='260' width='3' height='24'/><rect x='228' y='240' width='11' height='80'/><rect x='180' y='560' width='6' height='42'/><rect x='104' y='690' width='3' height='22'/></g><g fill-opacity='0.0222'><rect x='186' y='20' width='2' height='18'/><rect x='262' y='30' width='10' height='70'/><rect x='30' y='250' width='6' height='44'/><rect x='196' y='290' width='2' height='16'/><rect x='276' y='350' width='6' height='48'/><rect x='20' y='500' width='2' height='20'/><rect x='134' y='490' width='9' height='64'/><rect x='64' y='760' width='5' height='38'/><rect x='226' y='780' width='2' height='20'/><rect x='120' y='870' width='2' height='14'/></g><g fill-opacity='0.0144'><rect x='62' y='40' width='3' height='22'/><rect x='152' y='330' width='5' height='40'/><rect x='100' y='540' width='3' height='26'/><rect x='258' y='520' width='5' height='36'/><rect x='26' y='700' width='2' height='18'/><rect x='178' y='720' width='9' height='60'/><rect x='268' y='700' width='6' height='40'/></g><g fill-opacity='0.009'><rect x='222' y='610' width='2' height='18'/><rect x='144' y='820' width='2' height='16'/></g></svg>");
 }
 
 .dark {
-  --blocks: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='500' fill='rgb(130,175,255)' fill-opacity='.07'><rect x='12' y='0' width='5' height='64'/><rect x='48' y='150' width='3' height='40'/><rect x='86' y='60' width='7' height='96'/><rect x='130' y='320' width='4' height='52'/><rect x='168' y='20' width='6' height='78'/><rect x='205' y='230' width='3' height='36'/><rect x='238' y='100' width='8' height='110'/><rect x='272' y='390' width='5' height='60'/><rect x='28' y='300' width='4' height='44'/><rect x='110' y='440' width='6' height='70'/><rect x='190' y='410' width='4' height='48'/><rect x='255' y='270' width='3' height='34'/></svg>");
+  --blocks: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='900' fill='rgb(130,175,255)'><g fill-opacity='0.06'><rect x='14' y='10' width='11' height='78'/><rect x='216' y='90' width='7' height='50'/><rect x='74' y='300' width='10' height='72'/><rect x='58' y='470' width='5' height='38'/></g><g fill-opacity='0.0432'><rect x='96' y='0' width='6' height='46'/><rect x='140' y='60' width='12' height='84'/><rect x='118' y='260' width='3' height='24'/><rect x='228' y='240' width='11' height='80'/><rect x='180' y='560' width='6' height='42'/><rect x='104' y='690' width='3' height='22'/></g><g fill-opacity='0.03'><rect x='186' y='20' width='2' height='18'/><rect x='262' y='30' width='10' height='70'/><rect x='30' y='250' width='6' height='44'/><rect x='196' y='290' width='2' height='16'/><rect x='276' y='350' width='6' height='48'/><rect x='20' y='500' width='2' height='20'/><rect x='134' y='490' width='9' height='64'/><rect x='64' y='760' width='5' height='38'/><rect x='226' y='780' width='2' height='20'/><rect x='120' y='870' width='2' height='14'/></g><g fill-opacity='0.0192'><rect x='62' y='40' width='3' height='22'/><rect x='152' y='330' width='5' height='40'/><rect x='100' y='540' width='3' height='26'/><rect x='258' y='520' width='5' height='36'/><rect x='26' y='700' width='2' height='18'/><rect x='178' y='720' width='9' height='60'/><rect x='268' y='700' width='6' height='40'/></g><g fill-opacity='0.012'><rect x='222' y='610' width='2' height='18'/><rect x='144' y='820' width='2' height='16'/></g></svg>");
 }
 
 /* `.dark body` is named explicitly because ocean sets both `background-image` and
@@ -59,10 +69,14 @@ body,
 .dark body {
   background-image: var(--blocks), var(--blocks), var(--blocks);
   background-repeat: repeat;
+  /* Anchor the field to the viewport so it stays a backdrop instead of scrolling off with the page.
+     iOS Safari has historically ignored this and fallen back to scrolling, which is a fine
+     degradation here: the pattern tiles, so it is still there either way. */
+  background-attachment: fixed;
   background-size:
-    320px 533px,
-    210px 350px,
-    470px 783px;
+    300px 900px,
+    380px 1140px,
+    460px 1380px;
   background-position:
     0 0,
     70px 0,
@@ -72,9 +86,9 @@ body,
 @keyframes blockfall {
   to {
     background-position:
-      0 533px,
-      70px 350px,
-      160px 783px;
+      0 900px,
+      70px 1140px,
+      160px 1380px;
   }
 }