Remove unused hero image and related styles for cleaner layout

index.html

@@ -10,7 +10,6 @@
   Anti Coding Coding Club — cover page.
   Layout language borrowed, with admiration, from labs.ramp.com/swebench.
   All text is original. All artwork is public domain / CC0:
-    hero — Jean-Honoré Fragonard, "Young Girl Reading" (c. 1769), NGA, CC0
     typewriter — Jewett typewriter advertisement engraving, PD
     fern — Boston Public Library fern specimen chromolithograph, PD
     brain — Gray's Anatomy, plate 724, PD
@@ -143,17 +142,6 @@ h1.classic-title {
 
 .hero-stage { position: absolute; inset: 0; z-index: 4; }
 
-.hero-figure {
-  position: absolute;
-  left: 50%;
-  bottom: 37px;
-  transform: translateX(-50%);
-  width: clamp(240px, 27.5vw, 430px);
-  z-index: 5;
-  animation: image-enter 1.6s cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
-}
-
-.hero-figure img,
 .satellite img,
 .desk-object img {
   display: block;
@@ -163,21 +151,6 @@ h1.classic-title {
   -webkit-user-drag: none;
 }
 
-.hero-figure img {
-  pointer-events: none;
-  filter: url(#sticker-lg) drop-shadow(2px 3px 3px rgba(18, 13, 6, 0.28)) drop-shadow(10px 16px 20px rgba(18, 13, 6, 0.20));
-  transition: filter 0.28s ease;
-}
-
-.hero-figure:hover img {
-  filter: url(#sticker-lg) drop-shadow(3px 5px 4px rgba(18, 13, 6, 0.30)) drop-shadow(16px 26px 32px rgba(18, 13, 6, 0.24));
-}
-
-@keyframes image-enter {
-  0%   { filter: blur(4px); opacity: 0; transform: translateX(-50%) translate3d(0, 44%, 0) scale(0.98); }
-  100% { filter: blur(0);   opacity: 1; transform: translateX(-50%) translate3d(0, 0, 0) scale(1); }
-}
-
 .satellite {
   position: absolute;
   top: 50%;
@@ -211,15 +184,13 @@ h1.classic-title {
 }
 
 .satellite.wiggling img,
-.hero-figure.wiggling img,
 .desk-object.wiggling img { animation: sticker-wiggle 0.6s ease-in-out; }
 
-.satellite, .hero-figure, .desk-object { cursor: grab; touch-action: none; }
+.satellite, .desk-object { cursor: grab; touch-action: none; }
 .dragging { cursor: grabbing !important; }
 .dragging img { animation: none !important; }
 .satellite.dragging img,
 .desk-object.dragging img { filter: url(#sticker) drop-shadow(3px 6px 5px rgba(18, 13, 6, 0.30)) drop-shadow(16px 26px 30px rgba(18, 13, 6, 0.27)) !important; }
-.hero-figure.dragging img { filter: url(#sticker-lg) drop-shadow(4px 7px 6px rgba(18, 13, 6, 0.30)) drop-shadow(20px 32px 40px rgba(18, 13, 6, 0.26)) !important; }
 
 @keyframes satellite-enter {
   0% {
@@ -340,7 +311,6 @@ h1.classic-title {
 @media (max-width: 767px) {
   .hero-copy { margin-top: max(8vh, 52px); }
   .ct-line { font-size: clamp(24px, 7.4vw, 38px); letter-spacing: 0.11em; margin-right: -0.11em; }
-  .hero-figure { width: clamp(220px, 64vw, 340px); }
   .desk-object { left: calc(50% + 31vw); bottom: 48px; width: clamp(44px, 13vw, 64px); }
   .credit { display: none; }
 }
@@ -348,11 +318,11 @@ h1.classic-title {
 /* ---------- reduced motion ---------- */
 
 @media (prefers-reduced-motion: reduce) {
-  .hero-copy, .hero-figure { animation: none; }
+  .hero-copy { animation: none; }
   .satellite { animation: none; }
   .ticker-track { animation: none; }
   .desk-object[data-knocked="true"] img { animation: none; }
-  .satellite.wiggling img, .hero-figure.wiggling img, .desk-object.wiggling img { animation: none; }
+  .satellite.wiggling img, .desk-object.wiggling img { animation: none; }
 }
 </style>
 </head>
@@ -366,12 +336,6 @@ h1.classic-title {
       <feComposite in="edge" in2="dil" operator="in" result="border"/>
       <feMerge><feMergeNode in="border"/><feMergeNode in="SourceGraphic"/></feMerge>
     </filter>
-    <filter id="sticker-lg" x="-12%" y="-12%" width="124%" height="124%">
-      <feMorphology in="SourceAlpha" operator="dilate" radius="12" result="dil"/>
-      <feFlood flood-color="#ffffff" result="edge"/>
-      <feComposite in="edge" in2="dil" operator="in" result="border"/>
-      <feMerge><feMergeNode in="border"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
   </defs>
 </svg>
 
@@ -386,11 +350,7 @@ h1.classic-title {
     </h1>
   </div>
 
-  <div class="hero-stage" aria-hidden="true">
-    <div class="hero-figure">
-      <img src="static/images/collage/hero-reader.webp" alt="" fetchpriority="high" draggable="false">
-    </div>
-  </div>
+  <div class="hero-stage" aria-hidden="true"></div>
 
   <button class="desk-object" id="snail" aria-label="The club snail. Click, gently.">
     <img src="static/images/collage/sat-snail.webp" alt="" draggable="false">
@@ -419,13 +379,25 @@ h1.classic-title {
 (function () {
   "use strict";
 
-  var DESKTOP = [{"x": "-38vw", "y": "-25vh", "w": "clamp(150px, 18.5vw, 285px)", "rot": "-13deg", "delay": 0, "src": "static/images/collage/sat-typewriter.webp"}, {"x": "-26.5vw", "y": "-44vh", "w": "clamp(105px, 13vw, 195px)", "rot": "8deg", "delay": 45, "src": "static/images/collage/sat-fern.webp"}, {"x": "35vw", "y": "-8vh", "w": "clamp(115px, 14.5vw, 220px)", "rot": "-9deg", "delay": 35, "src": "static/images/collage/sat-books.webp"}, {"x": "41.5vw", "y": "24vh", "w": "clamp(82px, 10.5vw, 158px)", "rot": "-12deg", "delay": 60, "src": "static/images/collage/sat-watch.webp"}, {"x": "24vw", "y": "23vh", "w": "clamp(110px, 14vw, 215px)", "rot": "6deg", "delay": 85, "src": "static/images/collage/sat-coffee.webp"}, {"x": "-34.5vw", "y": "9vh", "w": "clamp(110px, 14vw, 215px)", "rot": "-7deg", "delay": 30, "src": "static/images/collage/sat-phone.webp"}, {"x": "-41vw", "y": "-9vh", "w": "clamp(82px, 10.5vw, 158px)", "rot": "10deg", "delay": 105, "src": "static/images/collage/sat-armchair.webp"}, {"x": "29vw", "y": "-34vh", "w": "clamp(78px, 9.5vw, 145px)", "rot": "-8deg", "delay": 75, "src": "static/images/collage/sat-hourglass.webp"}];
-  var MOBILE = [{"x": "-30vw", "y": "-8vh", "w": "clamp(80px, 23vw, 116px)", "rot": "-13deg", "delay": 0, "src": "static/images/collage/sat-typewriter.webp"}, {"x": "-41vw", "y": "-45vh", "w": "clamp(64px, 19vw, 96px)", "rot": "8deg", "delay": 45, "src": "static/images/collage/sat-fern.webp"}, null, null, {"x": "33vw", "y": "26vh", "w": "clamp(68px, 21vw, 104px)", "rot": "6deg", "delay": 85, "src": "static/images/collage/sat-coffee.webp"}, {"x": "37vw", "y": "-4vh", "w": "clamp(64px, 20vw, 100px)", "rot": "-7deg", "delay": 30, "src": "static/images/collage/sat-phone.webp"}, null, {"x": "-36vw", "y": "22vh", "w": "clamp(52px, 15vw, 80px)", "rot": "-8deg", "delay": 75, "src": "static/images/collage/sat-hourglass.webp"}];
+  /* w: desktop width spec, mw: mobile width spec (null = hidden on mobile),
+     each spec is [min px, vw, max px] for clamp() */
+  var STICKERS = [
+    { src: "static/images/collage/sat-typewriter.webp", w: [150, 18.5, 285], mw: [80, 23, 116] },
+    { src: "static/images/collage/sat-fern.webp",       w: [105, 13, 195],   mw: [64, 19, 96] },
+    { src: "static/images/collage/sat-books.webp",      w: [115, 14.5, 220], mw: null },
+    { src: "static/images/collage/sat-watch.webp",      w: [82, 10.5, 158],  mw: null },
+    { src: "static/images/collage/sat-coffee.webp",     w: [110, 14, 215],   mw: [68, 21, 104] },
+    { src: "static/images/collage/sat-phone.webp",      w: [110, 14, 215],   mw: [64, 20, 100] },
+    { src: "static/images/collage/sat-armchair.webp",   w: [82, 10.5, 158],  mw: null },
+    { src: "static/images/collage/sat-hourglass.webp",  w: [78, 9.5, 145],   mw: [52, 15, 80] }
+  ];
 
   var stage = document.querySelector(".hero-stage");
+  var heroEl = document.querySelector(".hero");
+  var copyEl = document.querySelector(".hero-copy");
   var els = [];
 
-  DESKTOP.forEach(function (s, i) {
+  STICKERS.forEach(function (s) {
     var el = document.createElement("div");
     el.className = "satellite";
     var img = document.createElement("img");
@@ -438,27 +410,67 @@ h1.classic-title {
     els.push(el);
   });
 
-  function apply(configs) {
+  function resolveClamp(spec, W) {
+    return Math.min(Math.max(spec[0], spec[1] * W / 100), spec[2]);
+  }
+
+  /* Fresh random arrangement on every load: best-candidate sampling —
+     each sticker tries many random spots and keeps the one farthest from
+     the stickers already placed, so the spread stays even. Spots that
+     would sit on the title are rejected. */
+  function layout() {
+    var mobile = mq.matches;
+    var W = heroEl.clientWidth, H = heroEl.clientHeight;
+    var hr = heroEl.getBoundingClientRect();
+    var cr = copyEl.getBoundingClientRect();
+    var title = { l: cr.left - hr.left - 10, t: cr.top - hr.top - 10, r: cr.right - hr.left + 10, b: cr.bottom - hr.top + 10 };
+    var bottomSafe = 58; /* ticker strip */
+    var placed = [{ x: (title.l + title.r) / 2, y: (title.t + title.b) / 2 }];
+
+    els.forEach(function (el) { el.style.display = "none"; });
+
     els.forEach(function (el, i) {
-      var s = configs[i % configs.length];
-      var hideOnMobile = configs === MOBILE && !s;
-      if (!s) { el.style.display = "none"; return; }
+      var spec = mobile ? STICKERS[i].mw : STICKERS[i].w;
+      if (!spec) return;
       el.style.display = "";
-      var ang = i * 1.92 + 0.8;
-      el.style.setProperty("--x", s.x);
-      el.style.setProperty("--y", s.y);
-      el.style.setProperty("--w", s.w);
-      el.style.setProperty("--rot", s.rot);
-      el.style.setProperty("--delay", (s.delay * 4) + "ms");
-      el.style.setProperty("--fx", (Math.cos(ang) * 7).toFixed(1) + "px");
-      el.style.setProperty("--fy", (Math.sin(ang) * 8 + 4).toFixed(1) + "px");
-      el.style.setProperty("--fr", ((i % 2 === 0 ? 1 : -1) * 1.6) + "deg");
-      el.style.setProperty("--fdur", (5.5 + (i % 5)) + "s");
+
+      var w = resolveClamp(spec, W), h = w; /* height unknown pre-load; square is close enough for spacing */
+      var margin = Math.min(24, w * 0.2);
+      var best = null, bestD = -1, fallback = null;
+
+      for (var k = 0; k < 60; k++) {
+        var x = margin + w / 2 + Math.random() * Math.max(1, W - w - margin * 2);
+        var y = margin + h / 2 + Math.random() * Math.max(1, H - bottomSafe - h - margin * 2);
+        if (!fallback) fallback = { x: x, y: y };
+
+        /* how much of the title this spot would cover — allow a grazing edge only */
+        var ox = Math.min(x + w / 2, title.r) - Math.max(x - w / 2, title.l);
+        var oy = Math.min(y + h / 2, title.b) - Math.max(y - h / 2, title.t);
+        if (ox > 0 && oy > 0 && ox * oy > 0.08 * w * h) continue;
+
+        var d = Infinity;
+        for (var p = 0; p < placed.length; p++) {
+          var dx = x - placed[p].x, dy = y - placed[p].y;
+          d = Math.min(d, dx * dx + dy * dy);
+        }
+        if (d > bestD) { bestD = d; best = { x: x, y: y }; }
+      }
+      if (!best) best = fallback;
+      placed.push(best);
+
+      el.style.setProperty("--x", (best.x - W / 2).toFixed(1) + "px");
+      el.style.setProperty("--y", (best.y - H / 2).toFixed(1) + "px");
+      el.style.setProperty("--w", w.toFixed(0) + "px");
+      el.style.setProperty("--rot", (Math.random() * 26 - 13).toFixed(1) + "deg");
+      el.style.setProperty("--delay", Math.round(Math.random() * 420) + "ms");
+      el.style.setProperty("--fx", (Math.random() * 14 - 7).toFixed(1) + "px");
+      el.style.setProperty("--fy", (Math.random() * 10 + 2).toFixed(1) + "px");
+      el.style.setProperty("--fr", ((Math.random() < 0.5 ? 1 : -1) * (1 + Math.random())).toFixed(2) + "deg");
+      el.style.setProperty("--fdur", (5.5 + Math.random() * 4).toFixed(1) + "s");
     });
   }
 
   var mq = window.matchMedia("(max-width: 767px)");
-  function layout() { apply(mq.matches ? MOBILE : DESKTOP); }
   layout();
   if (mq.addEventListener) mq.addEventListener("change", layout);
 
@@ -536,8 +548,6 @@ h1.classic-title {
   }
 
   els.forEach(function (el) { makeDraggable(el, satRot); addWiggle(el); });
-  var heroFig = document.querySelector(".hero-figure");
-  makeDraggable(heroFig); addWiggle(heroFig);
   var snailEl = document.getElementById("snail");
   makeDraggable(snailEl); addWiggle(snailEl);