Fix word-wrap and retriggering animation on touch (both on mobile)

Author: musicog

lets-encode-logo.js

@@ -156,22 +156,29 @@
       window.setTimeout(function () { play(); schedule(); }, 800 + idx * 850);
     });
 
-    // One trigger mechanism only: hover on devices that have it, touch on those
-    // that don't. We never bind "click", so a tap doesn't double-fire and a
-    // mouse click on desktop stays inert.
-    var canHover = window.matchMedia("(hover: hover)").matches;
+    // One trigger per input type, discriminated by pointerType rather than a
+    // (hover: hover) media query — devices with a hovering stylus (e.g. the
+    // Galaxy S24 Ultra's S Pen) report hover:hover even though the user taps
+    // with a finger, which would otherwise trap touch in the hover path (plays
+    // once, then needs a mouseleave elsewhere before it can replay).
+    //   - mouse / pen hover: replay on enter, restore the loop on leave.
+    //   - finger touch: replay on every tap, then restart the loop clock.
+    // We never bind "click", so a tap doesn't double-fire and a desktop click
+    // stays inert.
     Array.prototype.forEach.call(document.querySelectorAll("h2"), function (h2) {
       var gx = h2.querySelector(".gx");
       if (!gx) return;
-      if (canHover) {
-        h2.addEventListener("mouseenter", function () { gx._pause(); gx._play(); });
-        h2.addEventListener("mouseleave", function () { gx._pause(); gx._resume(); });
-      } else {
-        // Touch screens: replay once on tap, then restart the auto-loop clock.
-        h2.addEventListener("touchstart", function () {
-          gx._pause(); gx._play(); gx._resume();
-        }, { passive: true });
-      }
+      h2.addEventListener("pointerenter", function (e) {
+        if (e.pointerType === "touch") return; // touch handled below
+        gx._pause(); gx._play();
+      });
+      h2.addEventListener("pointerleave", function (e) {
+        if (e.pointerType === "touch") return;
+        gx._pause(); gx._resume();
+      });
+      h2.addEventListener("touchstart", function () {
+        gx._pause(); gx._play(); gx._resume();
+      }, { passive: true });
     });
   }
 

styles.css

@@ -511,7 +511,7 @@ section.alt {
   /* clear the sticky topbar on anchor jumps so the section kicker stays visible
      (desktop's larger section padding already handles this) */
   html {
-    scroll-padding-top: 23px;
+    scroll-padding-top: 26px;
   }
 
   /* burger button on the right; brand stays on the left */
@@ -608,8 +608,12 @@ section.alt {
 /* Keeps a word intact when a hand splits it: the .gx wrapper is inline-block,
    which would otherwise let the line break mid-word (e.g. "camp"/"aign"). The
    word's text fragments + its .gx live inside .gw so wrapping happens only at
-   the spaces between words, never inside the hand markup. */
+   the spaces between words, never inside the hand markup.
+   inline-block (not merely nowrap) makes the word a firm atomic unit — Gecko
+   (Firefox Android) still takes the wrap opportunity around the inline-block
+   .gx inside a plain nowrap *inline*, so the word must be inline-block too. */
 .gw {
+  display: inline-block;
   white-space: nowrap;
 }