feat(a11y): one-time photosensitivity warning gate

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

simulator/static/app.js

@@ -916,9 +916,29 @@ function jumpToScale(idx) {
 // data the renderer already has (clips, ring, the alteration response, the preload
 // cache) — no server endpoints. Editing labels stays in /author.html.
 const DEV_KEY = "hef.devMode";
+const WARN_KEY = "hef.motionWarnDismissed";
 let devMode = false;
 let devStatsTimer = null;
 
+// One-time photosensitivity notice shown over the stage before the experience
+// begins. Independent of media load; gated visually by the loading splash, then
+// dismissed-once (persisted) so returning visitors go straight to "Run simulation".
+function motionWarnDismissed() {
+  try { return localStorage.getItem(WARN_KEY) === "1"; } catch (_) { return false; }
+}
+function maybeShowMotionWarning() {
+  const gate = $("motion-warning");
+  if (!gate) return;
+  if (motionWarnDismissed()) { gate.classList.add("hidden"); return; }
+  gate.classList.remove("hidden");
+  $("motion-warning-continue").addEventListener("click", () => {
+    try { localStorage.setItem(WARN_KEY, "1"); } catch (_) {}
+    gate.classList.add("hidden");
+    const btn = $("run-sim");
+    if (btn) btn.focus({ preventScroll: true });   // move focus to the entry point
+  }, { once: true });
+}
+
 const escapeHtml = (s) => String(s).replace(/[&<>"]/g,
   (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
 
@@ -1295,6 +1315,7 @@ async function main() {
   await preloadAllMedia();    // download all media, updating the loading bar
   hideLoading();              // experience is ready — boots SILENT (video off, audio 0)
   $("run-sim").classList.remove("hidden");   // reveal the obvious starting point over the black stage
+  maybeShowMotionWarning();                  // first-visit photosensitivity notice, above the button
   // No un-gestured auto-start: a browser autoplay policy blocks an audio play() made
   // outside a user gesture (muted video survives, sound does not), so an auto-start
   // would show video but stay silent. Instead the experience waits for the operator to

simulator/static/i18n.js

@@ -32,6 +32,9 @@
     "knobs.mood":     { en: "Mood — dark ◀ 0 ▶ light", es: "Ánimo — oscuro ◀ 0 ▶ claro", fr: "Humeur — sombre ◀ 0 ▶ clair", ja: "ムード — 暗 ◀ 0 ▶ 明" },
     "devmode.label":  { en: "Dev Mode", es: "Modo desarrollo", fr: "Mode dév", ja: "開発モード" },
     "rm.label":       { en: "Reduce motion", es: "Reducir movimiento", fr: "Réduire les animations", ja: "動きを減らす" },
+    "warn.title":     { en: "Heads up — motion & flashing" },
+    "warn.body":      { en: "This experience contains continuous motion, flashing, and shifting imagery. If you are sensitive to motion or flashing light, turn on “Reduce motion” in the panel before you begin." },
+    "warn.continue":  { en: "Continue" },
     "scale.cosmos":   { en: "cosmos", es: "cosmos", fr: "cosmos", ja: "宇宙" },
     "scale.orbit":    { en: "orbit", es: "órbita", fr: "orbite", ja: "軌道" },
     "scale.sky":      { en: "sky", es: "cielo", fr: "ciel", ja: "空" },

simulator/static/index.html

@@ -30,6 +30,13 @@
         <svg id="affect" viewBox="0 0 100 100" preserveAspectRatio="none"></svg>
         <div id="black" class="black hidden"></div>
         <button type="button" id="run-sim" class="run-sim hidden" data-i18n="run.button">Run simulation</button>
+        <div id="motion-warning" class="motion-warning hidden" role="dialog" aria-modal="true" aria-labelledby="mw-title">
+          <div class="mw-card">
+            <h2 id="mw-title" data-i18n="warn.title">Heads up — motion &amp; flashing</h2>
+            <p data-i18n="warn.body">This experience contains continuous motion, flashing, and shifting imagery. If you are sensitive to motion or flashing light, turn on “Reduce motion” in the panel before you begin.</p>
+            <button type="button" id="motion-warning-continue" class="run-sim" data-i18n="warn.continue">Continue</button>
+          </div>
+        </div>
       </div>
     </section>
 

simulator/static/style.css

@@ -90,6 +90,18 @@ main { display: flex; gap: 1rem; padding: 1rem; flex-wrap: wrap; align-items: fl
 }
 .run-sim:hover { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 6px 30px rgba(78, 156, 255, 0.6); }
 .run-sim:active { transform: translate(-50%, -50%) scale(0.98); }
+/* One-time photosensitivity warning, over the stage (above run-sim's z-60). */
+.motion-warning { position: absolute; inset: 0; z-index: 70; display: flex;
+  align-items: center; justify-content: center; padding: 1rem;
+  background: rgba(2, 4, 10, 0.92); }
+.motion-warning.hidden { display: none; }
+.mw-card { max-width: 30rem; text-align: center; color: #dfeaff; }
+.mw-card h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
+.mw-card p { font-size: 0.95rem; line-height: 1.5; margin: 0 0 1.2rem; color: #c3d2e8; }
+/* The Continue button is centered in flow here, not absolutely positioned. */
+.mw-card .run-sim { position: static; transform: none; }
+.mw-card .run-sim:hover { transform: scale(1.04); }
+.mw-card .run-sim:active { transform: scale(0.98); }
 /* Stack the two Output toggles (Video / Audio) with a little breathing room. */
 .dev-switch + .dev-switch { margin-top: 0.45rem; }
 /* Globe + language select on one row (the select no longer goes full-width here). */