feat(theme): play Ender Dragon growl during fly-across (#307)

* feat(theme): play canonical Ender Dragon growl during fly-across

Adds the dragon idle/growl SFX (~3s, ~26 KB MP3 transcoded from
minecraft.wiki's Ender_dragon_idle1.ogg) that fires on every off→on
minecraft theme activation, in lockstep with the existing dragon
fly-across GIF. Gated on the same `minecraft-sound` localStorage flag
used by the click-sound effect in minecraft-background.tsx so a single
mute toggle covers all SFX, and skipped when prefers-reduced-motion is
set (matching the visual suppression). Browsers block autoplay before
the first user gesture — that's silently caught; the very next theme
toggle is itself a gesture and unlocks subsequent plays.

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

* chore(theme): hover dragon mid-screen so the growl lands on a pause

Extends the fly-across to 12s with a 35%→60% (4.2s–7.2s) hold at center,
and delays the audio start by 4.2s so the 3s growl sample plays during
the held position instead of bleeding across the entrance/exit motion.
The wing-flap GIF keeps the dragon visually alive during the hover.

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

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: functionstackx

packages/app/public/decorative/minecraft/ender-dragon.mp3

@@ -321,7 +321,10 @@
 
 /* Ender-dragon fly-across — one-shot animation on minecraft theme activation,
  * triggered from minecraft-decorations.tsx. Plays once (iteration-count: 1)
- * and lands the dragon off-screen left so the GIF stops being rendered. */
+ * and lands the dragon off-screen left so the GIF stops being rendered. The
+ * dragon hovers in the center between 35% and 60% (4.2s–7.2s of the 12s
+ * total) so the canonical 3s growl SFX from minecraft-decorations.tsx lines
+ * up with a deliberate mid-screen pause rather than a moving target. */
 @keyframes mc-dragon-flyacross {
   0% {
     transform: translate(110vw, 0) scale(1);
@@ -330,8 +333,11 @@
   8% {
     opacity: 0.95;
   }
-  50% {
-    transform: translate(40vw, -3vh) scale(1.05);
+  35% {
+    transform: translate(40vw, -2vh) scale(1.05);
+  }
+  60% {
+    transform: translate(40vw, -2vh) scale(1.05);
   }
   92% {
     opacity: 0.95;
@@ -343,7 +349,7 @@
 }
 
 .mc-dragon-flyacross {
-  animation: mc-dragon-flyacross 9s cubic-bezier(0.4, 0, 0.6, 1) 1 forwards;
+  animation: mc-dragon-flyacross 12s cubic-bezier(0.4, 0, 0.6, 1) 1 forwards;
   will-change: transform, opacity;
 }
 

packages/app/src/app/globals.css

@@ -12,9 +12,12 @@ import { useEffect, useState } from 'react';
  * All static images are `pointer-events: none` at low z-index. The dragon is
  * absolutely positioned and flies right-to-left once per theme activation
  * (animation-iteration-count: 1) — the GIF's wing-flap plays during the
- * traversal so the entrance feels alive.
+ * traversal so the entrance feels alive, accompanied by the canonical
+ * dragon idle/growl SFX (gated on the existing `minecraft-sound` toggle
+ * and on `prefers-reduced-motion`).
  *
- * Asset provenance: minecraft.wiki (CC BY-NC-SA 3.0) for blocks/items/dragon.
+ * Asset provenance: minecraft.wiki (CC BY-NC-SA 3.0) for blocks/items/dragon
+ * (audio + visuals).
  */
 const DECORATIONS = [
   // Top-left: Zombified Piglin, mirrored so its sword arm points toward the
@@ -102,6 +105,37 @@ export function MinecraftDecorations() {
     return () => observer.disconnect();
   }, []);
 
+  // Dragon roar SFX — fires on each dragonNonce bump (off→on theme transition,
+  // and once at mount if the user lands directly on the minecraft theme).
+  // Gated on `minecraft-sound` (the same toggle that controls click sounds in
+  // `minecraft-background.tsx`) and on prefers-reduced-motion (skipping the
+  // sound when the visual fly-across is suppressed). On the first page load
+  // the browser blocks autoplay until a user gesture exists — silent fail is
+  // fine; the next theme toggle is itself a gesture and unlocks audio.
+  //
+  // The growl is delayed to land on the dragon's mid-screen pause (35% of
+  // the 12s `mc-dragon-flyacross` keyframes ≈ 4.2s) so the 3s sample plays
+  // in lockstep with the ~3s hover (35%→60%) rather than over a moving
+  // target.
+  useEffect(() => {
+    if (dragonNonce === 0) return;
+    if (localStorage.getItem('minecraft-sound') === 'false') return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+    const audio = new Audio('/decorative/minecraft/ender-dragon.mp3');
+    audio.volume = 0.5;
+    const timeout = window.setTimeout(() => {
+      audio.play().catch(() => {
+        /* browser blocked autoplay — no prior user gesture */
+      });
+    }, 4200);
+    return () => {
+      window.clearTimeout(timeout);
+      audio.pause();
+      audio.src = '';
+    };
+  }, [dragonNonce]);
+
   if (!active) return null;
 
   return (