Serif motion study hero

Build "Serif motion study hero" for my site using the Enrichr Library element at https://enrichr.dev/elements/serif-motion-study-hero.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/serif-motion-study-hero.json (markup, CSS, JavaScript, parameters).
Requirements: vanilla JavaScript and CSS, no new dependencies; keep the behaviour of the source unchanged; respect prefers-reduced-motion; work on touch screens; keep it accessible.

Settings:
- eyebrow: THE MOTION ARCHIVE
- headline: Great motion is *studied* / before it is *built*.
- body: Thirty-three small studies from the Enrichr Library, each rebuilt by hand in plain code. Open the wall and drag through what inspired them.
- cta: Open the motion archive
- open: click
- sound: off
- curve: 170
- tiltX: 11
- tiltY: 21
- bob: 5
- stars: 150
- accent: #e6ff55
- background: #0c1e18
- card: #0f3628
- glow: #1a7a4c
- text: #fbf8f1

Verify: reduced motion shows no movement, it works at 375px wide, there are no console errors, and scrolling stays smooth.

<div class="ef-smh">
  <div class="ef-smh__bg"></div>
  <canvas class="ef-smh__stars" aria-hidden="true"></canvas>
  <div class="ef-smh__field" role="region" aria-label="Motion archive: use the left and right arrow keys or Tab to browse the studies, Enter marks one as seen" tabindex="-1"></div>
  <header class="ef-smh__head">
    <div class="ef-smh__logo"><svg class="ef-smh__mark" viewBox="0 0 50 50" aria-hidden="true" focusable="false"><path fill="currentColor" d="m34.213 25.361 c0 2.655 1.381 4.808 3.086 4.808 0.781 0 1.494 -0.452 2.038 -1.198 0.267 -0.366 0.688 -0.589 1.142 -0.589 h0.054 c0.774 0 1.401 0.627 1.401 1.401 v10.65 h-10.651 c-0.774 0 -1.401 0.627 -1.401 1.401 v0.054 c0 0.453 0.222 0.874 0.589 1.141 0.746 0.544 1.198 1.257 1.198 2.038 0 1.705 -2.152 3.086 -4.808 3.086 -2.655 0 -4.808 -1.381 -4.808 -3.086 0 -0.781 0.452 -1.494 1.198 -2.038 0.366 -0.267 0.589 -0.688 0.589 -1.142 v-0.054 c0 -0.774 -0.627 -1.401 -1.401 -1.401 h-10.65 v-10.651 c0 -0.774 -0.627 -1.401 -1.401 -1.401 h-0.054 c-0.453 0 -0.875 0.222 -1.142 0.589 -0.543 0.746 -1.257 1.198 -2.038 1.198 -1.705 0 -3.086 -2.152 -3.086 -4.808 0 -2.655 1.381 -4.808 3.086 -4.808 0.781 0 1.495 0.452 2.038 1.198 0.267 0.366 0.688 0.589 1.141 0.589 h0.054 c0.774 0 1.401 -0.627 1.401 -1.401 v-10.65 h10.65 c0.774 0 1.401 -0.627 1.401 -1.401 v-0.054 c0 -0.453 -0.222 -0.875 -0.589 -1.142 -0.746 -0.543 -1.198 -1.257 -1.198 -2.038 0 -1.705 2.152 -3.086 4.808 -3.086 2.655 0 4.808 1.381 4.808 3.086 0 0.781 -0.452 1.495 -1.198 2.038 -0.366 0.267 -0.589 0.688 -0.589 1.141 v0.054 c0 0.774 0.627 1.401 1.401 1.401 h10.65 v10.65 c0 0.774 -0.627 1.401 -1.401 1.401 h-0.053 c-0.453 0 -0.874 -0.222 -1.141 -0.589 -0.544 -0.746 -1.257 -1.198 -2.038 -1.198 -1.705 0 -3.086 2.152 -3.086 4.808 z"/></svg><span>Enrichr</span></div>
    <div class="ef-smh__top"><span><span class="ef-smh__g">33 studies</span> in motion</span><span class="ef-smh__inf" aria-hidden="true">i</span></div>
    <div class="ef-smh__lang">EN<span class="ef-smh__caret" aria-hidden="true">&#9662;</span></div>
  </header>
  <section class="ef-smh__hero">
    <p class="ef-smh__eyebrow">THE MOTION ARCHIVE</p>
    <h2 class="ef-smh__h"></h2>
    <p class="ef-smh__body">Thirty-three small studies from the Enrichr Library, each rebuilt by hand in plain code. Open the wall and drag through what inspired them.</p>
    <button class="ef-smh__cta" type="button">Open the motion archive</button>
  </section>
  <div class="ef-smh__bottom">
    <button class="ef-smh__audio" type="button" aria-pressed="false" aria-label="Ambient sound">
      <svg viewBox="0 0 34 14" aria-hidden="true" focusable="false"><path class="ef-smh__w1" d="M1 7 Q 5 2, 9 7 T 17 7 T 25 7 T 33 7"/><path class="ef-smh__w2" d="M1 7 Q 5 12, 9 7 T 17 7 T 25 7 T 33 7"/></svg><span class="ef-smh__albl">OFF</span>
    </button>
    <div class="ef-smh__nav">
      <span class="ef-smh__navi"><span class="ef-smh__sl" aria-hidden="true">/</span> <button class="ef-smh__home" type="button">Home</button></span>
      <a class="ef-smh__a" href="#">Library</a><a class="ef-smh__a" href="#">Tools</a><a class="ef-smh__a" href="#">Contact</a>
      <button class="ef-smh__share" type="button">Share a study</button>
    </div>
    <div class="ef-smh__count" aria-live="polite"><span class="ef-smh__d"></span><span>STUDIES SEEN <b class="ef-smh__n">0</b>/33</span></div>
  </div>
  <div class="ef-smh__cursor" aria-hidden="true"></div>
  <div class="ef-smh__hint" aria-hidden="true">DRAG / SCROLL TO EXPLORE</div>
  <div class="ef-smh__grain" aria-hidden="true"></div>
</div>

/* Enrichr Library · https://enrichr.dev */
.ef-smh { --ef-smh-bg: #0c1e18; --ef-smh-acc: #e6ff55; --ef-smh-ink: #0c1e18; --ef-smh-txt: #fbf8f1; --ef-smh-dim: #9db8ad; --ef-smh-card: #0f3628; --ef-smh-glow: #1a7a4c; --ef-smh-fs: 97px; --ef-smh-k: 1; --ef-smh-f: 1; --ef-smh-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  position: relative; box-sizing: border-box; width: 100%; height: 100%; min-height: 28rem; overflow: hidden; border-radius: 1rem; background: #050d0a; color: var(--ef-smh-txt); font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; touch-action: pan-y; isolation: isolate; }
.ef-smh.is-fine { cursor: none; }
.ef-smh.is-fine .ef-smh__cta, .ef-smh.is-fine .ef-smh__audio, .ef-smh.is-fine .ef-smh__home, .ef-smh.is-fine .ef-smh__share, .ef-smh.is-fine .ef-smh__a, .ef-smh.is-fine .ef-smh__card { cursor: none; }
/* atmosphere */
.ef-smh .ef-smh__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 50% 118%, color-mix(in srgb, var(--ef-smh-glow) 34%, transparent) 0%, color-mix(in srgb, #005236 22%, transparent) 28%, transparent 62%), radial-gradient(85% 70% at 50% 42%, color-mix(in srgb, var(--ef-smh-bg) 72%, var(--ef-smh-glow)) 0%, var(--ef-smh-bg) 55%, #050d0a 100%); }
.ef-smh .ef-smh__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.55) 100%); }
.ef-smh .ef-smh__stars { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; pointer-events: none; }
.ef-smh .ef-smh__grain { position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* cursor and hint */
.ef-smh .ef-smh__cursor { position: absolute; left: 0; top: 0; z-index: 200; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, color-mix(in srgb, var(--ef-smh-acc) 55%, transparent) 0%, color-mix(in srgb, var(--ef-smh-acc) 18%, transparent) 45%, transparent 70%); transition: width 0.3s, height 0.3s, margin 0.3s; }
.ef-smh.is-fine.is-in .ef-smh__cursor { opacity: 1; }
.ef-smh .ef-smh__cursor.is-big { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.ef-smh .ef-smh__hint { position: absolute; left: 0; top: 0; z-index: 199; white-space: nowrap; pointer-events: none; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); opacity: 0; }
/* chrome */
.ef-smh .ef-smh__head { position: absolute; top: 0; left: 0; right: 0; z-index: 60; display: flex; justify-content: space-between; align-items: center; padding: calc(30px * var(--ef-smh-k)) 44px; }
.ef-smh .ef-smh__logo { display: inline-flex; align-items: center; gap: 0.35rem; font-family: 'Parkinsans', 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.ef-smh .ef-smh__mark { width: 24px; height: 24px; color: var(--ef-smh-acc); }
.ef-smh .ef-smh__top { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-family: var(--ef-smh-serif); font-size: 16px; white-space: nowrap; opacity: 0; }
.ef-smh .ef-smh__g { color: var(--ef-smh-acc); }
.ef-smh .ef-smh__inf { display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid var(--ef-smh-dim); border-radius: 50%; font-family: 'Instrument Sans', sans-serif; font-size: 9px; color: var(--ef-smh-dim); }
.ef-smh .ef-smh__lang { font-size: 13px; letter-spacing: 0.06em; }
.ef-smh .ef-smh__caret { margin-left: 5px; font-size: 9px; color: var(--ef-smh-dim); }
/* hero */
.ef-smh .ef-smh__hero { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px; text-align: center; }
.ef-smh .ef-smh__eyebrow { margin: 0 0 calc(26px * var(--ef-smh-k)); font-size: 11px; font-weight: 500; letter-spacing: 0.28em; line-height: 1.4; color: var(--ef-smh-dim); opacity: 0; }
.ef-smh .ef-smh__h { margin: 0; font-family: var(--ef-smh-serif); font-weight: 400; font-size: var(--ef-smh-fs); line-height: 1.06; letter-spacing: -0.01em; color: var(--ef-smh-txt); opacity: 1; }
.ef-smh .ef-smh__w { display: inline-block; opacity: 0; will-change: transform, filter, opacity; }
.ef-smh .ef-smh__ul { position: relative; }
.ef-smh .ef-smh__ul svg { position: absolute; left: -1%; bottom: -0.1em; width: 102%; height: 0.14em; overflow: visible; }
.ef-smh .ef-smh__ul path { fill: none; stroke: var(--ef-smh-acc); stroke-width: 2.4; stroke-linecap: round; }
.ef-smh .ef-smh__body { max-width: 520px; margin: calc(30px * var(--ef-smh-k)) 0 0; font-size: 13.5px; line-height: 1.7; color: color-mix(in srgb, var(--ef-smh-txt) 80%, var(--ef-smh-glow)); opacity: 0; }
.ef-smh .ef-smh__cta { position: relative; margin-top: calc(38px * var(--ef-smh-k)); padding: 16px 30px; border: none; border-radius: 7px; background: var(--ef-smh-acc); color: var(--ef-smh-ink); font-family: 'Instrument Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; opacity: 0; box-shadow: 0 0 34px color-mix(in srgb, var(--ef-smh-acc) 35%, transparent), 0 0 90px color-mix(in srgb, var(--ef-smh-acc) 12%, transparent); transition: scale 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s; }
.ef-smh .ef-smh__cta:hover { scale: 1.04; box-shadow: 0 0 46px color-mix(in srgb, var(--ef-smh-acc) 55%, transparent), 0 0 130px color-mix(in srgb, var(--ef-smh-acc) 20%, transparent); }
.ef-smh .ef-smh__cta:focus-visible, .ef-smh .ef-smh__audio:focus-visible, .ef-smh .ef-smh__home:focus-visible, .ef-smh .ef-smh__share:focus-visible, .ef-smh .ef-smh__a:focus-visible { outline: 2px solid var(--ef-smh-acc); outline-offset: 3px; }
/* the card wall */
.ef-smh .ef-smh__field { position: absolute; inset: 0; z-index: 10; perspective: 1150px; perspective-origin: 50% 45%; visibility: hidden; outline: none; }
.ef-smh .ef-smh__card { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, filter; outline: none; }
.ef-smh .ef-smh__cin { position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height: 100%; padding: calc(17px * var(--ef-smh-f)); overflow: hidden; border: 1px solid rgba(190, 235, 215, 0.09); border-radius: calc(15px * var(--ef-smh-f)); background: linear-gradient(168deg, var(--ef-smh-card) 0%, color-mix(in srgb, var(--ef-smh-card) 72%, #050d0a) 100%); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s, border-color 0.45s; }
.ef-smh .ef-smh__card:hover .ef-smh__cin, .ef-smh .ef-smh__card:focus-visible .ef-smh__cin { transform: translateZ(0) scale(1.045); border-color: color-mix(in srgb, var(--ef-smh-acc) 40%, transparent); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 30px color-mix(in srgb, var(--ef-smh-acc) 12%, transparent); }
.ef-smh .ef-smh__card:focus-visible .ef-smh__cin { border-color: var(--ef-smh-acc); }
.ef-smh .ef-smh__cin::before, .ef-smh .ef-smh__cin::after { content: ""; position: absolute; width: 14px; height: 14px; opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.ef-smh .ef-smh__cin::before { left: 7px; bottom: 7px; border-left: 1.5px solid var(--ef-smh-acc); border-bottom: 1.5px solid var(--ef-smh-acc); }
.ef-smh .ef-smh__cin::after { right: 7px; top: 7px; border-right: 1.5px solid var(--ef-smh-acc); border-top: 1.5px solid var(--ef-smh-acc); }
.ef-smh .ef-smh__card:hover .ef-smh__cin::before, .ef-smh .ef-smh__card:hover .ef-smh__cin::after, .ef-smh .ef-smh__card:focus-visible .ef-smh__cin::before, .ef-smh .ef-smh__card:focus-visible .ef-smh__cin::after { opacity: 0.9; }
.ef-smh .ef-smh__ph { flex-shrink: 0; margin-bottom: calc(13px * var(--ef-smh-f)); overflow: hidden; border-radius: calc(9px * var(--ef-smh-f)); }
.ef-smh .ef-smh__ph canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.ef-smh .ef-smh__ct { margin: 0; font-family: var(--ef-smh-serif); font-weight: 400; font-size: calc(21.5px * var(--ef-smh-f)); line-height: 1.17; letter-spacing: 0.005em; color: color-mix(in srgb, var(--ef-smh-txt) 92%, var(--ef-smh-glow)); opacity: 1; }
.ef-smh .ef-smh__ct.is-top { margin-top: 6px; }
.ef-smh .ef-smh__who { display: flex; align-items: center; gap: calc(9px * var(--ef-smh-f)); margin-top: auto; padding-top: calc(14px * var(--ef-smh-f)); }
.ef-smh .ef-smh__av { flex-shrink: 0; width: calc(27px * var(--ef-smh-f)); height: calc(27px * var(--ef-smh-f)); border-radius: 50%; }
.ef-smh .ef-smh__wn { display: block; font-size: calc(11.5px * var(--ef-smh-f)); font-weight: 500; line-height: 1.25; color: color-mix(in srgb, var(--ef-smh-txt) 92%, var(--ef-smh-glow)); }
.ef-smh .ef-smh__wo { display: block; margin-top: 2px; font-style: normal; font-size: calc(8px * var(--ef-smh-f)); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ef-smh-dim); }
.ef-smh .ef-smh__vdot { position: absolute; top: 11px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--ef-smh-acc); opacity: 0; box-shadow: 0 0 8px var(--ef-smh-acc); }
.ef-smh .ef-smh__card.is-seen .ef-smh__vdot { opacity: 1; }
/* bottom chrome */
.ef-smh .ef-smh__bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: space-between; align-items: center; padding: calc(24px * var(--ef-smh-k)) 44px; opacity: 0; visibility: hidden; }
.ef-smh .ef-smh__audio { display: flex; align-items: center; gap: 9px; margin: 0; padding: 4px 0; border: 0; background: none; font-family: inherit; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; color: var(--ef-smh-dim); cursor: pointer; }
.ef-smh .ef-smh__audio svg { width: 34px; height: 14px; }
.ef-smh .ef-smh__audio path { fill: none; stroke: var(--ef-smh-acc); stroke-width: 1.6; stroke-linecap: round; opacity: 0.85; }
.ef-smh .ef-smh__audio.is-off path { stroke: var(--ef-smh-dim); opacity: 0.5; }
.ef-smh .ef-smh__w1, .ef-smh .ef-smh__w2 { animation: ef-smh-wave 2.2s ease-in-out infinite alternate; }
.ef-smh .ef-smh__w2 { animation-delay: -1.1s; opacity: 0.5; }
.ef-smh .ef-smh__audio.is-off .ef-smh__w1, .ef-smh .ef-smh__audio.is-off .ef-smh__w2 { animation-play-state: paused; }
@keyframes ef-smh-wave { from { transform: translateY(-1px); } to { transform: translateY(1px); } }
.ef-smh .ef-smh__nav { display: flex; align-items: center; gap: 30px; font-size: 13.5px; }
.ef-smh .ef-smh__sl { color: var(--ef-smh-acc); }
.ef-smh .ef-smh__home, .ef-smh .ef-smh__a { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--ef-smh-txt); text-decoration: none; opacity: 0.88; cursor: pointer; }
.ef-smh .ef-smh__home:hover, .ef-smh .ef-smh__a:hover { opacity: 1; }
.ef-smh .ef-smh__share { padding: 12px 18px; border: 1px solid color-mix(in srgb, var(--ef-smh-txt) 28%, transparent); border-radius: 4px; background: rgba(5, 25, 18, 0.3); font-family: inherit; font-size: 13px; color: var(--ef-smh-txt); cursor: pointer; transition: border-color 0.3s, background 0.3s; }
.ef-smh .ef-smh__share:hover { border-color: color-mix(in srgb, var(--ef-smh-acc) 55%, transparent); background: color-mix(in srgb, var(--ef-smh-acc) 8%, transparent); }
.ef-smh .ef-smh__count { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.13em; color: color-mix(in srgb, var(--ef-smh-txt) 80%, var(--ef-smh-glow)); }
.ef-smh .ef-smh__d { width: 7px; height: 7px; border-radius: 50%; background: var(--ef-smh-acc); box-shadow: 0 0 9px var(--ef-smh-acc); }
.ef-smh .ef-smh__n { color: #fff; }
/* small boxes: the original's phone layout */
.ef-smh.is-compact .ef-smh__head, .ef-smh.is-compact .ef-smh__bottom { padding-left: 20px; padding-right: 20px; }
.ef-smh.is-compact .ef-smh__nav, .ef-smh.is-compact .ef-smh__top { display: none; }

// Enrichr Library · https://enrichr.dev
// Serif motion study hero: a dark green hero under a twinkling starfield. The small caps line rises in, each headline word
// fades up out of a 14px blur (1.15 s expo.out, 0.09 s apart), hand-drawn underlines draw themselves, then the text and
// the button rise in. The button opens a wall of 33 study cards: they tumble in from deep space, centre first, and land
// on a concave wall where every card's tilt, depth, blur and brightness come from its place on screen. Drag, swipe,
// scroll or use the arrow keys to pan the endless wall (with inertia); cards bob gently, lift on hover, and a click (or
// Enter) marks one as seen. Home flies the cards away and plays the intro again. A glow cursor and an optional ambient
// synth pad (off by default) come from the original. No GSAP: the tweens are requestAnimationFrame with the same eases.
// Reduced motion shows everything at rest, opens the wall without the flight and stops the bob, twinkle and streaks.
// The loop pauses off screen and in hidden tabs.
// mount(root, { eyebrow, headline (*word* = underlined, / = line break), body, cta, open ("click" | "auto"),
//               sound ("off" | "on"), curve (wall depth, px), tiltX (deg), tiltY (deg), bob (px), stars (count),
//               accent, background, card, glow, text }) -> { update, open, close, destroy }
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var fine = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
  var box = root.querySelector(".ef-smh");
  var stars = box.querySelector(".ef-smh__stars"), sx = stars.getContext("2d");
  var field = box.querySelector(".ef-smh__field"), hero = box.querySelector(".ef-smh__hero");
  var eyebrow = box.querySelector(".ef-smh__eyebrow"), head = box.querySelector(".ef-smh__h"), bodyEl = box.querySelector(".ef-smh__body"), cta = box.querySelector(".ef-smh__cta");
  var top = box.querySelector(".ef-smh__top"), bottom = box.querySelector(".ef-smh__bottom");
  var audioBtn = box.querySelector(".ef-smh__audio"), albl = box.querySelector(".ef-smh__albl"), homeBtn = box.querySelector(".ef-smh__home");
  var cNum = box.querySelector(".ef-smh__n"), cDot = box.querySelector(".ef-smh__d");
  var cursor = box.querySelector(".ef-smh__cursor"), hint = box.querySelector(".ef-smh__hint");
  var TITLES = ["Start with one moving dot", "Easing is the whole trick", "The pause as a tool", "It began as a CodePen",
    "Make room for mistakes", "The brief nobody asked for", "Let go of the mouse", "Motion with a reason",
    "Stillness directs too", "Rebuild it to learn it", "Version seven was the one", "A client who said no",
    "The day I deleted everything", "Working with the lights off", "Sixty frames or nothing", "The best motion goes unseen",
    "The project that chose me", "Slow is smooth", "Starting over at forty", "The first honest critique",
    "A sketch on a napkin", "Saying yes without knowing", "The bug that paid the rent", "Look more, design less",
    "Obsession as a compass", "Nothing new under the sun", "Delete the third animation", "Intuition arrives late",
    "Play, but seriously", "The craft of waiting", "Respect reduced motion", "Designing for my mum", "The future was already here"];
  var TECH = ["WEBGL", "CANVAS", "SVG", "CSS 3D", "SCROLL", "POINTER", "TYPE", "SHADER", "PHYSICS", "PARALLAX", "EASING", "NO LIBRARIES"];
  var COLS = 17, ROWS = 2, N = 33;

  var opts = {}, raf = 0, last = 0, visible = true, destroyed = false, io = null, ro = null, hintTimer = 0;
  var W = 1, H = 1, S = 1, PITCH = 1, TOTALW = 1, cards = [], starList = [], streak = null, nextStreak = 3500;
  var ox = 0, oy = 0, tox = 0, toy = 0, vx2 = 0, inField = false, opening = false, dragging = false, dragDist = 0, lx = 0, lastDx = 0;
  var mx = 0, my = 0, hintOn = false, seen = 0, words = [], paths = [], anims = [], actx = null, gainMaster = null, audioOn = false;

  // ---------- eases ----------
  function expoOut(p) { return p >= 1 ? 1 : 1 - Math.pow(2, -10 * p); }
  function p2io(p) { return p < 0.5 ? Math.pow(p * 2, 3) / 2 : 1 - Math.pow((1 - p) * 2, 3) / 2; } // power2.inOut
  function p2in(p) { return p * p * p; }                     // power2.in
  function p2out(p) { return 1 - Math.pow(1 - p, 3); }       // power2.out
  function p3out(p) { return 1 - Math.pow(1 - p, 4); }       // power3.out
  function p1out(p) { return 1 - (1 - p) * (1 - p); }        // power1.out (GSAP default)
  function num(v, d) { v = Number(v); return isFinite(v) ? v : d; }
  function hexRgb(h, d) { var m = /^#?([0-9a-f]{6})$/i.exec(h || ""); var v = parseInt(m ? m[1] : d, 16); return [v >> 16, (v >> 8) & 255, v & 255]; }

  // ---------- tweens: anim(delay s, duration s, ease, fn(e), done) ----------
  function anim(delay, dur, ease, fn, done) { var a = { t: -delay, dur: dur, ease: ease, fn: fn, done: done, dead: false }; anims.push(a); wake(); return a; }
  function stepAnims(dt) {
    var list = anims.slice();
    for (var i = 0; i < list.length; i++) {
      var a = list[i];
      if (a.dead) continue;
      a.t += dt;
      if (a.t < 0) continue;
      var p = a.dur > 0 ? Math.min(1, a.t / a.dur) : 1;
      a.fn(a.ease(p));
      if (p >= 1) { a.dead = true; if (a.done) a.done(); }
    }
    anims = anims.filter(function (a) { return !a.dead; });
  }
  function killAll(tag) { anims.forEach(function (a) { if (!tag || a.tag === tag) a.dead = true; }); }

  // ---------- procedural duotone "photos" and avatars (same generator as the original, tinted green) ----------
  function photo(seed, w, h) {
    var c = document.createElement("canvas"); c.width = w; c.height = h;
    var x = c.getContext("2d");
    function r(n) { var s = Math.sin(seed * 91.7 + n * 47.3) * 43758.5453; return s - Math.floor(s); }
    var base = 120 + r(1) * 70;
    x.fillStyle = "rgb(" + base + "," + base + "," + base + ")"; x.fillRect(0, 0, w, h);
    var cx = w * (0.3 + r(2) * 0.4), cy = h * (0.34 + r(3) * 0.2), rad = Math.max(w, h) * (0.3 + r(4) * 0.25), dk = 26 + r(5) * 40;
    var g = x.createRadialGradient(cx, cy, rad * 0.08, cx, cy, rad);
    g.addColorStop(0, "rgba(" + dk + "," + dk + "," + dk + ",.95)");
    g.addColorStop(0.6, "rgba(" + (dk + 60) + "," + (dk + 60) + "," + (dk + 60) + ",.45)");
    g.addColorStop(1, "rgba(0,0,0,0)");
    x.fillStyle = g; x.beginPath(); x.arc(cx, cy, rad, 0, 6.283); x.fill();
    var g2 = x.createLinearGradient(0, 0, 0, h);
    g2.addColorStop(0, "rgba(255,255,255,.14)"); g2.addColorStop(1, "rgba(0,0,0,.5)");
    x.fillStyle = g2; x.fillRect(0, 0, w, h);
    var img = x.getImageData(0, 0, w, h), d = img.data;
    for (var i = 0; i < d.length; i += 4) { var n = (Math.random() - 0.5) * 30, v = d[i] + n; d[i] = v * 0.88; d[i + 1] = v * 0.99; d[i + 2] = v * 0.92; }
    x.putImageData(img, 0, 0);
    return c;
  }

  // ---------- the wall: 33 cards on a virtual plane, wrapped horizontally ----------
  function buildCards() {
    field.textContent = ""; cards = [];
    for (var i = 0; i < N; i++) {
      var hasPhoto = (i % 3) !== 2;
      var el = document.createElement("div");
      el.className = "ef-smh__card"; el.tabIndex = -1; el.setAttribute("role", "button"); el.setAttribute("aria-pressed", "false");
      var nn = (i < 9 ? "0" : "") + (i + 1), tech = TECH[i % TECH.length];
      el.setAttribute("aria-label", "Study " + nn + ": " + TITLES[i] + ", " + tech.toLowerCase());
      var cin = document.createElement("div"); cin.className = "ef-smh__cin";
      var ph = null;
      if (hasPhoto) { ph = document.createElement("div"); ph.className = "ef-smh__ph"; ph.appendChild(photo(i + 1, 300, 170)); cin.appendChild(ph); }
      var h3 = document.createElement("h3"); h3.className = "ef-smh__ct" + (hasPhoto ? "" : " is-top"); h3.textContent = TITLES[i]; cin.appendChild(h3);
      var who = document.createElement("div"); who.className = "ef-smh__who";
      var av = document.createElement("canvas"); av.className = "ef-smh__av"; av.width = 54; av.height = 54; av.getContext("2d").drawImage(photo(i + 40, 54, 54), 0, 0);
      var wd = document.createElement("div");
      var b = document.createElement("b"); b.className = "ef-smh__wn"; b.textContent = "Study " + nn;
      var it = document.createElement("i"); it.className = "ef-smh__wo"; it.textContent = tech;
      wd.appendChild(b); wd.appendChild(it); who.appendChild(av); who.appendChild(wd); cin.appendChild(who);
      var vd = document.createElement("span"); vd.className = "ef-smh__vdot"; cin.appendChild(vd);
      el.appendChild(cin); field.appendChild(el);
      var c = { el: el, i: i, ph: ph, hasPhoto: hasPhoto, w: 1, h: 1, baseX: 0, baseY: 0,
        jz: (Math.random() - 0.5) * 5, bph: Math.random() * 7, it: 0,
        intro: { fx: (Math.random() - 0.5) * 560, fy: (Math.random() - 0.5) * 400, fz: -1500 - Math.random() * 900,
          rx: (Math.random() - 0.5) * 140, ry: (Math.random() - 0.5) * 140, rz: (Math.random() - 0.5) * 100 },
        fl: -1, fb: -1 };
      el.addEventListener("click", cardClick.bind(null, c));
      el.addEventListener("keydown", cardKey.bind(null, c));
      el.addEventListener("focus", cardFocus.bind(null, c));
      cards.push(c);
    }
  }
  function layoutCards() {
    var COLW = 228 * S, GAPX = 66 * S, ROWPITCH = 345 * S;
    PITCH = COLW + GAPX; TOTALW = COLS * PITCH;
    cards.forEach(function (c) {
      var col = Math.floor(c.i / ROWS), row = c.i % ROWS;
      c.w = COLW; c.h = (c.hasPhoto ? 318 : 268) * S + (c.i % 2 ? 14 : -8) * S;
      c.baseX = col * PITCH - TOTALW / 2 + PITCH / 2 + (row ? PITCH * 0.42 : 0);
      c.baseY = (row - 0.5) * ROWPITCH + ((col % 2) ? 26 : -26) * S;
      c.el.style.width = c.w.toFixed(1) + "px"; c.el.style.height = c.h.toFixed(1) + "px";
      if (c.ph) c.ph.style.height = (128 * S).toFixed(1) + "px";
    });
  }
  function wrapX(x) { var m = (x + TOTALW / 2) % TOTALW; if (m < 0) m += TOTALW; return m - TOTALW / 2; }
  function wall(t, k60) {
    if (!dragging) { tox += vx2 * k60; vx2 *= Math.pow(0.94, k60); if (Math.abs(vx2) < 0.04) vx2 = 0; }
    toy += (Math.min(150, Math.max(-150, toy)) - toy) * (1 - Math.pow(0.86, k60));      // rubber-band y home
    var f = 1 - Math.pow(1 - 0.085, k60);
    ox += (tox - ox) * f; oy += (toy - oy) * f;
    var cx = W / 2, cy = H / 2;
    for (var i = 0; i < cards.length; i++) {
      var c = cards[i];
      var x = wrapX(c.baseX + ox), y = c.baseY + oy * 0.92 + (reduce ? 0 : Math.sin(t / 1400 + c.bph) * opts.bob);
      var nx = x / (cx * 1.06), ny = y / (cy * 0.95);
      var it = c.it, inv = 1 - it;
      // wall pose comes from screen position: tilt toward the centre, push the edges back
      var rx = -ny * opts.tiltX * it, ry = -nx * opts.tiltY * it, z = -(nx * nx + ny * ny) * opts.curve * it;
      var px = x * it + c.intro.fx * inv, py = y * it + c.intro.fy * inv, pz = z * it + c.intro.fz * inv;
      c.el.style.transform = "translate3d(" + (cx + px - c.w / 2).toFixed(2) + "px," + (cy + py - c.h / 2).toFixed(2) + "px," + pz.toFixed(1) + "px) " +
        "rotateX(" + (rx + c.intro.rx * inv).toFixed(2) + "deg) rotateY(" + (ry + c.intro.ry * inv).toFixed(2) + "deg) rotateZ(" + (c.jz * it + c.intro.rz * inv).toFixed(2) + "deg)";
      c.el.style.opacity = String(Math.min(1, it * 1.6));
      // depth of field and edge falloff, rounded so the filter only changes in small steps
      var r = Math.hypot(nx, ny * 1.15);
      var bl = Math.round(Math.min(5.5, Math.max(0, (r - 0.68) * 10)) * 2) / 2;
      var br = Math.round(Math.max(0.62, 1 - Math.max(0, (r - 0.55) * 0.6)) * 20) / 20;
      if (bl !== c.fl || br !== c.fb) { c.el.style.filter = "blur(" + bl + "px) brightness(" + br + ")"; c.fl = bl; c.fb = br; }
    }
  }

  // ---------- starfield + shooting streaks ----------
  function makeStars() {
    starList = [];
    for (var i = 0; i < opts.stars; i++) starList.push({ x: Math.random(), y: Math.random(), r: 0.4 + Math.random() * 1.1, a: 0.08 + Math.random() * 0.4, tw: 0.5 + Math.random() * 2, ph: Math.random() * 7, acc: Math.random() < 0.16 });
  }
  function drawStars(t, dtMs) {
    sx.clearRect(0, 0, W, H);
    var acc = opts.accent, pale = "#dfe9e1", k60 = dtMs / 16;
    for (var i = 0; i < starList.length; i++) {
      var s = starList[i];
      sx.globalAlpha = s.a * (0.6 + 0.4 * Math.sin(t / 900 * s.tw + s.ph));
      sx.fillStyle = s.acc ? acc : pale;
      sx.fillRect(s.x * W, s.y * H, s.r, s.r);
    }
    if (!reduce && dtMs > 0) {
      nextStreak -= dtMs;
      if (nextStreak < 0 && !streak) {
        streak = { x: W * (0.05 + Math.random() * 0.3), y: H * (0.55 + Math.random() * 0.3), t: 0, dx: 2.6 + Math.random() * 1.4, dy: 1.5 + Math.random() * 0.9, len: 90 + Math.random() * 70 };
        nextStreak = 6000 + Math.random() * 7000;
      }
      if (streak) {
        streak.t += dtMs; streak.x += streak.dx * k60; streak.y += streak.dy * k60;
        var life = streak.t / 1100, al = Math.sin(Math.min(life, 1) * Math.PI) * 0.5, rgb = hexRgb(acc, "e6ff55").join(",");
        var ex = streak.x - streak.dx * streak.len / 3, ey = streak.y - streak.dy * streak.len / 3;
        var g = sx.createLinearGradient(streak.x, streak.y, ex, ey);
        g.addColorStop(0, "rgba(" + rgb + "," + al + ")"); g.addColorStop(1, "rgba(" + rgb + ",0)");
        sx.globalAlpha = 1; sx.strokeStyle = g; sx.lineWidth = 1.4;
        sx.beginPath(); sx.moveTo(streak.x, streak.y); sx.lineTo(ex, ey); sx.stroke();
        if (life > 1) streak = null;
      }
    }
    sx.globalAlpha = 1;
  }

  // ---------- headline: words, underlines ----------
  function buildHeadline() {
    head.textContent = ""; words = []; paths = [];
    var curves = ["M2 6 C 28 3.5, 62 8, 98 5", "M2 5.5 C 30 8, 70 3.4, 98 6"];
    var label = String(opts.headline).replace(/\*/g, "").replace(/\s*\/\s*/g, " ").replace(/\s+/g, " ").trim();
    head.setAttribute("aria-label", label);
    var tokens = String(opts.headline).split(/\s+/).filter(Boolean), first = true;
    tokens.forEach(function (tok) {
      if (tok === "/") { head.appendChild(document.createElement("br")); first = true; return; }
      if (!first) head.appendChild(document.createTextNode(" "));
      first = false;
      var m = /^\*([^*]+)\*([^\w*]*)$/.exec(tok);
      if (m) {
        var w = document.createElement("span"); w.className = "ef-smh__w ef-smh__ul"; w.setAttribute("aria-hidden", "true"); w.textContent = m[1];
        var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("viewBox", "0 0 100 10"); svg.setAttribute("preserveAspectRatio", "none"); svg.setAttribute("aria-hidden", "true");
        var p = document.createElementNS("http://www.w3.org/2000/svg", "path"); p.setAttribute("d", curves[paths.length % 2]); svg.appendChild(p); w.appendChild(svg);
        head.appendChild(w); words.push(w); paths.push(p);
        if (m[2]) { var pw = document.createElement("span"); pw.className = "ef-smh__w"; pw.setAttribute("aria-hidden", "true"); pw.textContent = m[2]; head.appendChild(pw); words.push(pw); }
      } else {
        var s = document.createElement("span"); s.className = "ef-smh__w"; s.setAttribute("aria-hidden", "true"); s.textContent = tok.replace(/\*/g, ""); head.appendChild(s); words.push(s);
      }
    });
    paths.forEach(function (p) { var L = p.getTotalLength ? p.getTotalLength() : 100; p.__L = L; p.style.strokeDasharray = L; p.style.strokeDashoffset = L; });
  }
  function setRise(el, op, y, blur) {
    el.style.opacity = String(op);
    el.style.transform = y ? "translateY(" + y.toFixed(2) + "px)" : "";
    if (blur !== undefined) el.style.filter = blur > 0.01 ? "blur(" + blur.toFixed(2) + "px)" : "";
  }
  // intro: the original GSAP timeline (delay .35), positions resolved to absolute seconds
  function intro() {
    killAll("intro");
    hero.style.display = "";
    var D = 0.35, n = words.length, m = paths.length;
    function a(delay, dur, ease, fn) { var x = anim(D + delay, dur, ease, fn); x.tag = "intro"; return x; }
    if (reduce) {
      setRise(eyebrow, 1, 0); words.forEach(function (w) { setRise(w, 1, 0, 0); }); paths.forEach(function (p) { p.style.strokeDashoffset = 0; });
      setRise(bodyEl, 1, 0); setRise(cta, 1, 0); autoOpen(0.5); return;
    }
    setRise(eyebrow, 0, 14); words.forEach(function (w) { setRise(w, 0, 26, 14); }); paths.forEach(function (p) { p.style.strokeDashoffset = p.__L; });
    setRise(bodyEl, 0, 16); setRise(cta, 0, 18);
    a(0, 0.9, expoOut, function (e) { setRise(eyebrow, e, 14 * (1 - e)); });
    var wStart = 0.9 - 0.55;                                            // '-=.55'
    words.forEach(function (w, i) { a(wStart + i * 0.09, 1.15, expoOut, function (e) { setRise(w, e, 26 * (1 - e), 14 * (1 - e)); }); });
    var wEnd = wStart + Math.max(0, n - 1) * 0.09 + 1.15, uStart = wEnd - 0.5;  // '-=.5'
    paths.forEach(function (p, i) { a(uStart + i * 0.18, 0.85, p2io, function (e) { p.style.strokeDashoffset = (p.__L * (1 - e)).toFixed(2); }); });
    var uEnd = uStart + Math.max(0, m - 1) * 0.18 + 0.85, bStart = Math.max(wEnd, uEnd) - 0.7;  // '-=.7'
    a(bStart, 0.8, expoOut, function (e) { setRise(bodyEl, e, 16 * (1 - e)); });
    var cStart = bStart + 0.8 - 0.55;                                   // '-=.55'
    a(cStart, 0.8, expoOut, function (e) { setRise(cta, e, 18 * (1 - e)); });
    autoOpen(D + cStart + 0.8);
  }
  function autoOpen(at) {
    if (opts.open !== "auto") return;
    var x = anim(at + 1.2, 0, p1out, function () {}, function () { open(); }); x.tag = "intro";
  }

  // ---------- open the wall (the original CTA handler) ----------
  function open() {
    if (inField || opening || destroyed) return;
    killAll("intro"); killAll("close");
    if (opts.sound === "on" && !actx) setAudio(true);
    field.style.visibility = "visible";
    var focusWall = box.contains(document.activeElement) && document.activeElement !== document.body;
    if (!reduce) {
      words.forEach(function (w, i) { anim(i * 0.03, 0.6, p2in, function (e) { setRise(w, 1 - e, -30 * e, 10 * e); }).tag = "out"; });
      [eyebrow, bodyEl, cta].forEach(function (el) { var s0 = Number(el.style.opacity || 1); anim(0.1, 0.45, p1out, function (e) { el.style.opacity = String(s0 * (1 - e)); }).tag = "out"; });
      anim(0, 0.6 + Math.max(0, words.length - 1) * 0.03, p1out, function () {}, function () { hero.style.display = "none"; }).tag = "out";
    } else hero.style.display = "none";
    // swarm: centre-out, from deep z with a tumble, onto the wall
    var order = cards.slice().sort(function (a, b) { return Math.abs(a.baseX) - Math.abs(b.baseX); });
    order.forEach(function (c, k) {
      c.el.tabIndex = 0;
      if (reduce) { c.it = 1; return; }
      anim(0.45 + k * 0.028 + Math.random() * 0.06, 1.6, p3out, function (e) { c.it = e; }).tag = "swarm";
    });
    inField = true;
    bottom.style.visibility = "visible";
    if (reduce) { top.style.opacity = "1"; bottom.style.opacity = "1"; }
    else {
      anim(1.1, 0.9, expoOut, function (e) { top.style.opacity = String(e); top.style.transform = "translate(-50%," + (-12 * (1 - e)).toFixed(2) + "px)"; }).tag = "chrome";
      anim(1.3, 0.9, expoOut, function (e) { bottom.style.opacity = String(e); bottom.style.transform = "translateY(" + (16 * (1 - e)).toFixed(2) + "px)"; }).tag = "chrome";
    }
    if (fine && !reduce) { clearTimeout(hintTimer); hintTimer = setTimeout(showHint, 1600); }
    if (focusWall) field.focus({ preventScroll: true });
  }
  // Home: the cards fall back into the distance, then the hero plays its intro again
  function close() {
    if (!inField || destroyed) return;
    killAll("swarm"); killAll("chrome"); killAll("out"); hideHint();
    var homeFocus = document.activeElement === homeBtn;
    var order = cards.slice().sort(function (a, b) { return Math.abs(b.baseX) - Math.abs(a.baseX); });
    var dur = reduce ? 0 : 0.9;
    order.forEach(function (c, k) { c.el.tabIndex = -1; var s0 = c.it; anim(reduce ? 0 : k * 0.012, dur, p2in, function (e) { c.it = s0 * (1 - e); }).tag = "close"; });
    var t0 = Number(bottom.style.opacity || 1);
    anim(0, reduce ? 0 : 0.4, p1out, function (e) { bottom.style.opacity = String(t0 * (1 - e)); top.style.opacity = String(t0 * (1 - e)); }).tag = "close";
    anim(reduce ? 0 : 0.9 + N * 0.012, 0, p1out, function () {}, function () {
      inField = false; field.style.visibility = "hidden"; bottom.style.visibility = "hidden";
      tox = ox = 0; vx2 = 0;
      intro();
      if (homeFocus) cta.focus({ preventScroll: true });
    }).tag = "close";
  }

  // ---------- cards: seen state, keyboard ----------
  function markSeen(c) {
    if (c.el.classList.contains("is-seen")) return;
    c.el.classList.add("is-seen"); c.el.setAttribute("aria-pressed", "true"); seen++;
    cNum.textContent = String(seen);
    if (!reduce) anim(0, 0.44, function (p) { return p; }, function (p) { var e = p < 0.5 ? p2out(p * 2) : p2out((1 - p) * 2); cDot.style.transform = "scale(" + (1 + 0.9 * e).toFixed(3) + ")"; });
  }
  function cardClick(c) { if (dragDist > 6 || !inField) return; markSeen(c); }
  function cardKey(c, e) { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); markSeen(c); } }
  function cardFocus(c) { if (!inField || dragging) return; tox -= wrapX(c.baseX + tox); vx2 = 0; }   // bring the focused card to the centre
  function fieldKey(e) {
    if (!inField) return;
    if (e.key === "ArrowLeft") { tox += PITCH; e.preventDefault(); hideHint(); }
    else if (e.key === "ArrowRight") { tox -= PITCH; e.preventDefault(); hideHint(); }
  }

  // ---------- input: drag + wheel, cursor, hint ----------
  function down(e) {
    if (!inField || e.button > 0 || (e.target.closest && e.target.closest("button,a,.ef-smh__audio,.ef-smh__nav"))) return;
    dragging = true; dragDist = 0; lx = e.clientX; vx2 = 0; lastDx = 0; hideHint();
    window.addEventListener("pointermove", drag); window.addEventListener("pointerup", up); window.addEventListener("pointercancel", up);
  }
  function drag(e) { var dx = e.clientX - lx; lx = e.clientX; tox += dx; lastDx = dx; dragDist += Math.abs(dx); }
  function up() {
    if (dragging) { vx2 = lastDx * 0.9; lastDx = 0; }
    dragging = false;
    window.removeEventListener("pointermove", drag); window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", up);
  }
  function wheel(e) { if (!inField) return; tox -= e.deltaY * 0.9 + e.deltaX * 0.9; hideHint(); }
  function hover(e) {
    var r = box.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
    box.classList.add("is-in");
    if (fine) {
      cursor.style.transform = "translate(" + mx.toFixed(1) + "px," + my.toFixed(1) + "px)";
      if (hintOn) hint.style.transform = "translate(" + (mx + 24).toFixed(1) + "px," + my.toFixed(1) + "px) translateY(-50%)";
      cursor.classList.toggle("is-big", !!(e.target.closest && e.target.closest(".ef-smh__card,button,a,.ef-smh__audio")));
    }
  }
  function leave() { box.classList.remove("is-in"); }
  // tabbing to a card off to the side would scroll the clipped box; keep it pinned (the wall pans to the card instead)
  function pin() { if (box.scrollLeft || box.scrollTop) { box.scrollLeft = 0; box.scrollTop = 0; } }
  function showHint() {
    hintOn = true;
    hint.style.transform = "translate(" + (mx + 24).toFixed(1) + "px," + my.toFixed(1) + "px) translateY(-50%)";
    killAll("hint"); var s0 = Number(hint.style.opacity || 0);
    anim(0.9, 0.5, p1out, function (e) { hint.style.opacity = String(s0 + (1 - s0) * e); }).tag = "hint";
  }
  function hideHint() {
    clearTimeout(hintTimer);
    if (!hintOn) return; hintOn = false;
    killAll("hint"); var s0 = Number(hint.style.opacity || 0);
    anim(0, 0.35, p1out, function (e) { hint.style.opacity = String(s0 * (1 - e)); }).tag = "hint";
  }

  // ---------- ambient pad: four detuned sines through a low-pass, about -30 dBFS, only after a click ----------
  function setAudio(on) {
    audioOn = on;
    audioBtn.classList.toggle("is-off", !on); audioBtn.setAttribute("aria-pressed", on ? "true" : "false"); albl.textContent = on ? "ON" : "OFF";
    try {
      if (on && !actx) {
        var AC = window.AudioContext || window.webkitAudioContext; if (!AC) return;
        actx = new AC();
        gainMaster = actx.createGain(); gainMaster.gain.value = 0;
        var lp = actx.createBiquadFilter(); lp.type = "lowpass"; lp.frequency.value = 340;
        gainMaster.connect(lp); lp.connect(actx.destination);
        [[110, 0.5], [164.81, 0.32], [220, 0.22], [329.63, 0.12]].forEach(function (fg) {
          var osc = actx.createOscillator(), og = actx.createGain();
          osc.type = "sine"; osc.frequency.value = fg[0]; og.gain.value = fg[1] * 0.028;
          osc.connect(og); og.connect(gainMaster); osc.start();
          var lfo = actx.createOscillator(), lg = actx.createGain();
          lfo.frequency.value = 0.06 + Math.random() * 0.05; lg.gain.value = fg[0] * 0.004;
          lfo.connect(lg); lg.connect(osc.frequency); lfo.start();
        });
        gainMaster.gain.linearRampToValueAtTime(1, actx.currentTime + 3);
      } else if (actx) {
        gainMaster.gain.cancelScheduledValues(actx.currentTime);
        gainMaster.gain.setValueAtTime(gainMaster.gain.value, actx.currentTime);
        gainMaster.gain.linearRampToValueAtTime(on ? 1 : 0, actx.currentTime + 0.8);
      }
    } catch (err) { /* no audio: the toggle still works visually */ }
  }
  function audioClick() { setAudio(!audioOn); }

  // ---------- loop ----------
  function wake() { if (!raf && !destroyed) { last = performance.now(); raf = requestAnimationFrame(loop); } }
  function loop(now) {
    raf = 0;
    var dtMs = Math.min(50, now - last || 0); last = now;
    if (!visible || document.hidden) return;   // the IntersectionObserver wakes it again
    stepAnims(dtMs / 1000);
    if (!reduce) drawStars(now, dtMs);
    if (inField) wall(now, dtMs / 16.667);
    if (!reduce || inField || anims.length) raf = requestAnimationFrame(loop);
  }
  function layout() {
    W = Math.max(1, box.clientWidth); H = Math.max(1, box.clientHeight);
    var dpr = Math.min(window.devicePixelRatio || 1, 2);
    stars.width = Math.round(W * dpr); stars.height = Math.round(H * dpr); sx.setTransform(dpr, 0, 0, dpr, 0, 0);
    S = Math.min(1, Math.max(0.5, Math.min(W / 1500, H / 845)));
    box.style.setProperty("--ef-smh-f", Math.max(0.6, Math.min(1.17, S / 0.853)).toFixed(3));
    box.style.setProperty("--ef-smh-fs", Math.max(30, Math.min(104, 0.076 * W, 0.135 * H)).toFixed(1) + "px");
    box.style.setProperty("--ef-smh-k", Math.max(0.55, Math.min(1, H / 720)).toFixed(3));
    box.classList.toggle("is-compact", W < 760);
    layoutCards();
    if (reduce) { drawStars(0, 0); if (inField) wall(0, 1); }
  }
  function update(partial) {
    var prev = opts;
    opts = Object.assign({ eyebrow: "THE MOTION ARCHIVE", headline: "Great motion is *studied* / before it is *built*.", body: "Thirty-three small studies from the Enrichr Library, each rebuilt by hand in plain code. Open the wall and drag through what inspired them.",
      cta: "Open the motion archive", open: "click", sound: "off", curve: 170, tiltX: 11, tiltY: 21, bob: 5, stars: 150,
      accent: "#e6ff55", background: "#0c1e18", card: "#0f3628", glow: "#1a7a4c", text: "#fbf8f1" }, opts, partial || {});
    opts.curve = num(opts.curve, 170); opts.tiltX = num(opts.tiltX, 11); opts.tiltY = num(opts.tiltY, 21); opts.bob = Math.max(0, num(opts.bob, 5));
    opts.stars = Math.max(0, Math.min(600, Math.round(num(opts.stars, 150))));
    box.style.setProperty("--ef-smh-acc", opts.accent); box.style.setProperty("--ef-smh-bg", opts.background);
    box.style.setProperty("--ef-smh-card", opts.card); box.style.setProperty("--ef-smh-glow", opts.glow); box.style.setProperty("--ef-smh-txt", opts.text);
    box.style.setProperty("--ef-smh-ink", opts.background);
    eyebrow.textContent = opts.eyebrow; bodyEl.textContent = opts.body; cta.textContent = opts.cta;
    if (prev.stars !== opts.stars) makeStars();
    if (prev.headline !== opts.headline) {
      buildHeadline();
      if (prev.headline !== undefined && !destroyed) {
        if (inField) words.forEach(function (w) { setRise(w, 0, 0, 0); });   // hidden while the wall is open; the next intro shows them
        else intro();
      }
    }
    if (prev.open !== undefined && prev.open !== opts.open && opts.open === "auto" && !inField && !destroyed) intro();
    if (reduce && !destroyed) { drawStars(0, 0); if (inField) wall(0, 1); }
  }

  buildCards();
  update(o);
  layout();
  if (fine) box.classList.add("is-fine");
  audioBtn.classList.add("is-off");
  cta.addEventListener("click", open);
  homeBtn.addEventListener("click", close);
  audioBtn.addEventListener("click", audioClick);
  box.addEventListener("pointerdown", down);
  box.addEventListener("pointermove", hover);
  box.addEventListener("pointerleave", leave);
  box.addEventListener("wheel", wheel, { passive: true });
  field.addEventListener("keydown", fieldKey);
  box.addEventListener("scroll", pin);
  intro();
  if (reduce) drawStars(0, 0);
  if ("IntersectionObserver" in window) { io = new IntersectionObserver(function (e) { visible = e[0].isIntersecting; if (visible) wake(); }); io.observe(box); }
  if ("ResizeObserver" in window) { ro = new ResizeObserver(function () { if (!destroyed) layout(); }); ro.observe(box); }
  document.addEventListener("visibilitychange", wake);
  wake();
  return {
    update: update, open: open, close: close,
    destroy: function () {
      destroyed = true; cancelAnimationFrame(raf); raf = 0; clearTimeout(hintTimer); anims = [];
      if (io) io.disconnect();
      if (ro) ro.disconnect();
      up();
      cta.removeEventListener("click", open); homeBtn.removeEventListener("click", close); audioBtn.removeEventListener("click", audioClick);
      box.removeEventListener("pointerdown", down); box.removeEventListener("pointermove", hover); box.removeEventListener("pointerleave", leave);
      box.removeEventListener("wheel", wheel); field.removeEventListener("keydown", fieldKey); box.removeEventListener("scroll", pin);
      document.removeEventListener("visibilitychange", wake);
      if (actx) { try { actx.close(); } catch (err) {} actx = null; }
    }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"eyebrow":"THE MOTION ARCHIVE","headline":"Great motion is *studied* / before it is *built*.","body":"Thirty-three small studies from the Enrichr Library, each rebuilt by hand in plain code. Open the wall and drag through what inspired them.","cta":"Open the motion archive","open":"click","sound":"off","curve":170,"tiltX":11,"tiltY":21,"bob":5,"stars":150,"accent":"#e6ff55","background":"#0c1e18","card":"#0f3628","glow":"#1a7a4c","text":"#fbf8f1"});