Merge pull request 'Seasonal: Halloween redesign (#239), needs human approval' (#242) from seasonal/halloween into lotus

Merge seasonal/halloween: Halloween redesign (#239), approved by Jared

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

src/app/components/DeviceVerification.tsx

@@ -8,7 +8,6 @@ import {
 import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VerificationMethod } from 'matrix-js-sdk/lib/types';
-import QRCode from 'qrcode';
 import {
   Box,
   Button,
@@ -221,12 +220,16 @@ function QrCodeImage({ data }: { data: Uint8ClampedArray }) {
     const canvas = canvasRef.current;
     if (!canvas) return;
     // Byte-mode so the raw verification bytes round-trip (a string value would
-    // mangle high bytes via UTF-8).
-    QRCode.toCanvas(canvas, [{ data: new Uint8Array(data), mode: 'byte' }], {
-      width: 220,
-      margin: 2,
-      color: { dark: '#000000', light: '#ffffff' },
-    }).catch(() => undefined);
+    // mangle high bytes via UTF-8). The QR library is loaded on demand.
+    import('qrcode')
+      .then(({ default: QRCode }) =>
+        QRCode.toCanvas(canvas, [{ data: new Uint8Array(data), mode: 'byte' }], {
+          width: 220,
+          margin: 2,
+          color: { dark: '#000000', light: '#ffffff' },
+        }),
+      )
+      .catch(() => undefined);
   }, [data]);
   return (
     <Box justifyContent="Center">

src/app/components/QrScanner.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Box, Button, color, config, Text } from 'folds';
-import jsQR from 'jsqr';
 
 type QrScannerProps = {
   onScan: (bytes: Uint8ClampedArray) => void;
@@ -10,6 +9,7 @@ type QrScannerProps = {
 // Camera QR scanner. Decodes frames with jsQR and hands back the raw byte
 // segment (`result.binaryData`) — Matrix QR verification needs the raw bytes,
 // not a decoded string, so the string-only `BarcodeDetector` can't be used.
+// jsQR is loaded on demand: it is large and only needed while scanning.
 export function QrScanner({ onScan, onCancel }: QrScannerProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [error, setError] = useState<string>();
@@ -20,15 +20,22 @@ export function QrScanner({ onScan, onCancel }: QrScannerProps) {
     let raf = 0;
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    let decode: typeof import('jsqr').default | undefined;
 
     const tick = () => {
       const video = videoRef.current;
-      if (!doneRef.current && video && ctx && video.readyState === video.HAVE_ENOUGH_DATA) {
+      if (
+        decode &&
+        !doneRef.current &&
+        video &&
+        ctx &&
+        video.readyState === video.HAVE_ENOUGH_DATA
+      ) {
         canvas.width = video.videoWidth;
         canvas.height = video.videoHeight;
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
         const image = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const result = jsQR(image.data, image.width, image.height);
+        const result = decode(image.data, image.width, image.height);
         if (result && result.binaryData.length > 0) {
           doneRef.current = true;
           onScan(new Uint8ClampedArray(result.binaryData));
@@ -40,9 +47,12 @@ export function QrScanner({ onScan, onCancel }: QrScannerProps) {
 
     (async () => {
       try {
-        stream = await navigator.mediaDevices.getUserMedia({
-          video: { facingMode: 'environment' },
-        });
+        const [lib, media] = await Promise.all([
+          import('jsqr'),
+          navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }),
+        ]);
+        decode = lib.default;
+        stream = media;
         if (videoRef.current) {
           videoRef.current.srcObject = stream;
           await videoRef.current.play();

src/app/components/seasonal/SeasonalEffect.tsx

@@ -59,7 +59,7 @@ function buildOverlayContent(
 ): React.ReactNode {
   switch (theme) {
     case 'halloween':
-      return <HalloweenOverlay reduced={reduced} />;
+      return <HalloweenOverlay reduced={reduced} preview={preview} />;
     case 'christmas':
       return <ChristmasOverlay reduced={reduced} />;
     case 'newyear':

src/app/components/seasonal/themes/Halloween.css.ts

@@ -1,56 +1,146 @@
-import { keyframes } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 
 /**
- * Halloween overlay keyframes. Every animation touches ONLY `transform` and
- * `opacity` so the compositor can run them on the GPU without layout/paint.
- * keyframes() returns the generated animation-name string, applied inline.
+ * Halloween overlay styles. Motion is transform/opacity only.
+ *
+ * [#239] Colours come from two custom properties set on the overlay root so
+ * the bats/spider stay dark silhouettes on light themes and turn to a pale
+ * dusk-violet on dark themes (a black bat on a black theme is invisible).
  */
-
-/** Slow breathing of the sickly moon-glow vignette. */
-export const animMoonPulse = keyframes({
-  '0%': { transform: 'scale(1)', opacity: '0.55' },
-  '50%': { transform: 'scale(1.06)', opacity: '0.8' },
-  '100%': { transform: 'scale(1)', opacity: '0.55' },
+export const halloweenRoot = style({
+  position: 'absolute',
+  inset: 0,
+  vars: {
+    '--hw-ink': 'oklch(0.24 0.04 300)',
+    '--hw-web': 'oklch(0.42 0.02 290 / 0.42)',
+    '--hw-eye': 'oklch(0.72 0.18 55)',
+  },
+  selectors: {
+    'body.dark-theme &, body.butter-theme &': {
+      vars: {
+        '--hw-ink': 'oklch(0.72 0.06 300)',
+        '--hw-web': 'oklch(0.85 0.02 290 / 0.36)',
+        '--hw-eye': 'oklch(0.8 0.17 60)',
+      },
+    },
+  },
 });
 
-/** Low fog band: drifts sideways while gently rising and swelling. */
-export const animFogDrift = keyframes({
-  '0%': { transform: 'translate3d(-12%, 6%, 0) scale(1.1)', opacity: '0' },
-  '15%': { opacity: '0.5' },
-  '50%': { transform: 'translate3d(6%, -2%, 0) scale(1.25)', opacity: '0.65' },
-  '85%': { opacity: '0.45' },
-  '100%': { transform: 'translate3d(18%, 4%, 0) scale(1.1)', opacity: '0' },
+/** A bat group crosses the top of the screen in ~9 s, then a long calm. */
+export const animBatFlight = keyframes({
+  '0%': { transform: 'translate3d(-10vw, 0, 0)', opacity: '0' },
+  '1%': { opacity: '1' },
+  '29%': { opacity: '1' },
+  '30%': { transform: 'translate3d(110vw, -6vh, 0)', opacity: '0' },
+  '100%': { transform: 'translate3d(110vw, -6vh, 0)', opacity: '0' },
 });
 
-/** A bat flaps slowly across the sky in a shallow arc. */
-export const animBatGlide = keyframes({
-  '0%': { transform: 'translate3d(-12vw, 8vh, 0) scale(0.9)', opacity: '0' },
-  '10%': { opacity: '0.7' },
-  '45%': { transform: 'translate3d(45vw, -4vh, 0) scale(1)' },
-  '80%': { transform: 'translate3d(85vw, 6vh, 0) scale(0.95)', opacity: '0.6' },
-  '100%': { transform: 'translate3d(112vw, 2vh, 0) scale(0.9)', opacity: '0' },
+/** Up-and-down bobbing on each bat, so the group doesn't move as one block. */
+export const animBatBob = keyframes({
+  '0%': { transform: 'translate3d(0, 0, 0)' },
+  '50%': { transform: 'translate3d(0, 14px, 0)' },
+  '100%': { transform: 'translate3d(0, 0, 0)' },
 });
 
-/** The bat's wings beat — fast vertical squash of the wing element. */
-export const animWingFlap = keyframes({
-  '0%': { transform: 'scaleY(1) scaleX(1)' },
-  '50%': { transform: 'scaleY(0.35) scaleX(1.08)' },
-  '100%': { transform: 'scaleY(1) scaleX(1)' },
+/** Wing beat: the silhouette squashes vertically around the body. */
+export const animBatFlap = keyframes({
+  '0%': { transform: 'scaleY(1)' },
+  '50%': { transform: 'scaleY(0.62)' },
+  '100%': { transform: 'scaleY(1)' },
 });
 
-/** Will-o'-wisp ember: floats upward, swaying, pulsing in brightness. */
-export const animEmberFloat = keyframes({
-  '0%': { transform: 'translate3d(0, 0, 0) scale(0.7)', opacity: '0' },
-  '12%': { opacity: '0.85' },
-  '35%': { transform: 'translate3d(14px, -28vh, 0) scale(1)' },
-  '65%': { transform: 'translate3d(-12px, -55vh, 0) scale(0.9)', opacity: '0.7' },
-  '90%': { opacity: '0.25' },
-  '100%': { transform: 'translate3d(8px, -82vh, 0) scale(0.6)', opacity: '0' },
+/** The spider bobs on its thread (thread and spider move together). */
+export const animSpiderBob = keyframes({
+  '0%': { transform: 'translate3d(0, 0, 0)' },
+  '50%': { transform: 'translate3d(0, 18px, 0)' },
+  '100%': { transform: 'translate3d(0, 0, 0)' },
 });
 
-/** Soft twinkle for embers — independent opacity flicker layered on top. */
-export const animEmberTwinkle = keyframes({
-  '0%': { opacity: '0.6' },
-  '50%': { opacity: '1' },
-  '100%': { opacity: '0.6' },
+/** A slow sway of the spider itself on the end of the thread. */
+export const animSpiderSway = keyframes({
+  '0%': { transform: 'rotate(-6deg)' },
+  '50%': { transform: 'rotate(6deg)' },
+  '100%': { transform: 'rotate(-6deg)' },
+});
+
+/**
+ * A small ghost rises from the lower part of the screen, drifting sideways,
+ * and fades out — ~8 s in a 50 s cycle.
+ */
+export const animGhost = keyframes({
+  '0%': { transform: 'translate3d(0, 0, 0) scale(0.9)', opacity: '0' },
+  '3%': { opacity: '0.8' },
+  '8%': { transform: 'translate3d(6vw, -20vh, 0) scale(1)' },
+  '13%': { opacity: '0.75' },
+  '16%': { transform: 'translate3d(-2vw, -42vh, 0) scale(1.05)', opacity: '0' },
+  '100%': { transform: 'translate3d(-2vw, -42vh, 0) scale(1.05)', opacity: '0' },
+});
+
+/** The ghost's tail wisps, a gentle wobble. */
+export const animGhostWobble = keyframes({
+  '0%': { transform: 'rotate(-4deg)' },
+  '50%': { transform: 'rotate(4deg)' },
+  '100%': { transform: 'rotate(-4deg)' },
+});
+
+/** [#239] Will-o'-the-wisp: a slow wandering loop (paired with a pulse). */
+export const animWispWander = keyframes({
+  '0%': { transform: 'translate3d(0, 0, 0)' },
+  '25%': { transform: 'translate3d(40px, -30px, 0)' },
+  '50%': { transform: 'translate3d(-10px, -60px, 0)' },
+  '75%': { transform: 'translate3d(-45px, -20px, 0)' },
+  '100%': { transform: 'translate3d(0, 0, 0)' },
+});
+
+/** Soft breathing glow of a wisp. */
+export const animWispPulse = keyframes({
+  '0%': { opacity: '0.35', transform: 'scale(0.85)' },
+  '50%': { opacity: '0.9', transform: 'scale(1.1)' },
+  '100%': { opacity: '0.35', transform: 'scale(0.85)' },
+});
+
+/** A witch on a broom crosses high up, right to left, in ~11 s of 60 s. */
+export const animWitch = keyframes({
+  '0%': { transform: 'translate3d(0, 0, 0) rotate(-4deg)', opacity: '0' },
+  '1%': { opacity: '1' },
+  '9%': { transform: 'translate3d(-60vw, -3vh, 0) rotate(3deg)' },
+  '17.5%': { opacity: '1' },
+  '18%': { transform: 'translate3d(-118vw, 2vh, 0) rotate(-3deg)', opacity: '0' },
+  '100%': { transform: 'translate3d(-118vw, 2vh, 0) rotate(-3deg)', opacity: '0' },
+});
+
+/**
+ * The big spider: bobs for most of the cycle, then climbs up its thread,
+ * pauses, and drops back with a little bounce (24 s cycle).
+ */
+export const animSpiderClimb = keyframes({
+  '0%': { transform: 'translate3d(0, 0, 0)' },
+  '20%': { transform: 'translate3d(0, 14px, 0)' },
+  '40%': { transform: 'translate3d(0, 0, 0)' },
+  '55%': { transform: 'translate3d(0, -22vh, 0)' },
+  '68%': { transform: 'translate3d(0, -22vh, 0)' },
+  '71%': { transform: 'translate3d(0, 24px, 0)' },
+  '74%': { transform: 'translate3d(0, -8px, 0)' },
+  '77%': { transform: 'translate3d(0, 6px, 0)' },
+  '80%': { transform: 'translate3d(0, 0, 0)' },
+  '100%': { transform: 'translate3d(0, 0, 0)' },
+});
+
+/** Jack-o'-lantern candle flicker (opacity of the glow behind the face). */
+export const animCandle = keyframes({
+  '0%': { opacity: '0.75' },
+  '20%': { opacity: '1' },
+  '35%': { opacity: '0.6' },
+  '55%': { opacity: '0.95' },
+  '70%': { opacity: '0.7' },
+  '100%': { opacity: '0.75' },
+});
+
+/** The swarm crosses faster than the regular bats: ~7 s of a 60 s cycle. */
+export const animSwarmFlight = keyframes({
+  '0%': { transform: 'translate3d(-10vw, 0, 0)', opacity: '0' },
+  '0.5%': { opacity: '1' },
+  '11.5%': { opacity: '1' },
+  '12%': { transform: 'translate3d(110vw, -8vh, 0)', opacity: '0' },
+  '100%': { transform: 'translate3d(110vw, -8vh, 0)', opacity: '0' },
 });

src/app/components/seasonal/themes/Halloween.tsx

@@ -1,267 +1,486 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { SeasonalOverlayProps } from '../types';
 import {
-  animMoonPulse,
-  animFogDrift,
-  animBatGlide,
-  animWingFlap,
-  animEmberFloat,
-  animEmberTwinkle,
+  animBatBob,
+  animBatFlap,
+  animBatFlight,
+  animCandle,
+  animGhost,
+  animGhostWobble,
+  animSpiderBob,
+  animSpiderClimb,
+  animSpiderSway,
+  animSwarmFlight,
+  animWispPulse,
+  animWispWander,
+  animWitch,
+  halloweenRoot,
 } from './Halloween.css';
 
-// ─── Palette (oklch) ──────────────────────────────────────────────────────────
-// Deep haunted indigo, sickly toxic-green moon glow, warm ember orange.
-const PURPLE_DEEP = 'oklch(0.20 0.12 300)';
-const PURPLE_FAINT = 'oklch(0.28 0.10 300 / 0.45)';
-const TOXIC_GREEN = 'oklch(0.80 0.18 150)';
-const TOXIC_GREEN_SOFT = 'oklch(0.72 0.16 150 / 0.35)';
-const EMBER_ORANGE = 'oklch(0.70 0.18 50)';
-const FOG_TINT = 'oklch(0.45 0.06 280 / 0.32)';
+/**
+ * HalloweenOverlay — cobwebs, a dangling spider and bats, over the app as is.
+ *
+ * The parent supplies a fixed inset:0 overflow:hidden pointer-events:none
+ * container; everything here is aria-hidden and absolutely positioned.
+ *
+ * [#239] No full-screen purple wash or blurred "moon": they tinted the whole
+ * app and the moon glow sat over the member list, making it unreadable.
+ * Colours are theme-aware via --hw-ink / --hw-web (see Halloween.css.ts).
+ *
+ * Composition:
+ *   1. cobwebs in the two top corners (thin threads, readable in both themes)
+ *   2. a spider on a thread in the empty space under the member list, bobbing
+ *   3. every 30 s a small group of bats flaps across the top of the screen
+ * `reduced`: webs and the spider at rest, no bats flying.
+ * `preview`: a night-sky swatch for Settings.
+ */
 
-// A corner cobweb, drawn once as an inline SVG data-URI (CSP-safe, no assets).
-// strokeWidth kept hairline so it reads as gossamer thread, not a cage.
-const cobwebUri = (() => {
-  const svg =
-    `<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'>` +
-    `<g fill='none' stroke='rgba(196,176,224,0.32)' stroke-width='0.8'>` +
-    // radial threads
-    `<line x1='0' y1='0' x2='180' y2='180'/>` +
-    `<line x1='0' y1='0' x2='180' y2='90'/>` +
-    `<line x1='0' y1='0' x2='90' y2='180'/>` +
-    `<line x1='0' y1='0' x2='180' y2='40'/>` +
-    `<line x1='0' y1='0' x2='40' y2='180'/>` +
-    // concentric catch-threads (gentle sag via quadratic curves)
-    `<path d='M40 0 Q22 22 0 40'/>` +
-    `<path d='M85 0 Q48 48 0 85'/>` +
-    `<path d='M130 0 Q74 74 0 130'/>` +
-    `<path d='M180 0 Q104 104 0 180'/>` +
-    `<path d='M180 60 Q120 120 60 180'/>` +
-    `</g></svg>`;
-  return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
-})();
+/** Corner web (corner at 0,0): radial threads + sagging catch-rings. */
+function webPath(size = 100): string {
+  const angles = [0, 16, 32, 48, 64, 80, 90].map((a) => (a * Math.PI) / 180);
+  const spokes = angles
+    .map((a) => `M0 0 L${(Math.cos(a) * size).toFixed(1)} ${(Math.sin(a) * size).toFixed(1)}`)
+    .join(' ');
+  const rings = [0.28, 0.48, 0.68, 0.88].map((f) => {
+    const r = f * size;
+    const pts = angles.map((a) => [Math.cos(a) * r, Math.sin(a) * r]);
+    let d = `M${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
+    for (let i = 1; i < pts.length; i += 1) {
+      const [x0, y0] = pts[i - 1];
+      const [x1, y1] = pts[i];
+      // Control point pulled toward the corner so each segment sags.
+      const cx = ((x0 + x1) / 2) * 0.86;
+      const cy = ((y0 + y1) / 2) * 0.86;
+      d += ` Q${cx.toFixed(1)} ${cy.toFixed(1)} ${x1.toFixed(1)} ${y1.toFixed(1)}`;
+    }
+    return d;
+  });
+  return `${spokes} ${rings.join(' ')}`;
+}
+const WEB = webPath();
 
-// A single silhouetted bat, inline SVG. Wings are separate so the wrapper can
-// glide while an inner element flaps independently — we re-use one body shape.
-function BatSilhouette() {
+function Cobweb({ corner, size }: { corner: 'left' | 'right'; size: number }) {
   return (
     <svg
-      width="46"
-      height="22"
-      viewBox="0 0 46 22"
       aria-hidden="true"
-      style={{ display: 'block', overflow: 'visible' }}
+      viewBox="0 0 100 100"
+      width={size}
+      height={size}
+      style={{
+        position: 'absolute',
+        top: 0,
+        [corner]: 0,
+        transform: corner === 'right' ? 'scaleX(-1)' : undefined,
+        overflow: 'visible',
+      }}
     >
       <path
-        fill="oklch(0.12 0.04 300 / 0.85)"
-        d="M23 6c1.6 0 2.7 1.3 3 3 .9-1.4 2.4-2.6 4.2-2.6-.5 1-.4 2.1.2 2.9 2-2.4 5.4-4 8.6-3.7-1.5 1-2.3 2.6-2.4 4.3 1.3-.8 3-1 4.4-.4-2.2.8-3.9 2.5-5.2 4.5-2 3-4.8 5-8.3 4.4-1.9-.3-3.4-1.6-4.5-3.2-1.1 1.6-2.6 2.9-4.5 3.2-3.5.6-6.3-1.4-8.3-4.4-1.3-2-3-3.7-5.2-4.5 1.4-.6 3.1-.4 4.4.4-.1-1.7-.9-3.3-2.4-4.3 3.2-.3 6.6 1.3 8.6 3.7.6-.8.7-1.9.2-2.9 1.8 0 3.3 1.2 4.2 2.6.3-1.7 1.4-3 3-3z"
+        d={WEB}
+        fill="none"
+        stroke="var(--hw-web)"
+        strokeWidth={0.9}
+        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
       />
     </svg>
   );
 }
 
-export function HalloweenOverlay({ reduced }: SeasonalOverlayProps) {
-  // Deterministic per-mount generation — never per-frame React state.
-  const embers = useMemo(
-    () =>
-      Array.from({ length: 12 }, (_, i) => {
-        const green = i % 3 === 0; // ~1/3 toxic-green wisps, rest warm embers
-        return {
-          left: (i * 6151 + 113) % 100,
-          bottom: (i * 3137 + 47) % 28, // start near floor
-          size: 3 + (i % 4),
-          duration: 11 + (i % 6) * 2.2,
-          delay: (i * 0.83) % 11,
-          twinkle: 2.4 + (i % 5) * 0.6,
-          color: green ? TOXIC_GREEN : EMBER_ORANGE,
-        };
-      }),
-    [],
-  );
-
-  const bats = useMemo(
-    () =>
-      Array.from({ length: 3 }, (_, i) => ({
-        top: 8 + i * 13,
-        duration: 22 + i * 7,
-        delay: i * 6.5,
-        flap: 0.5 + i * 0.12,
-        scale: 0.7 + i * 0.18,
-      })),
-    [],
-  );
-
-  const fogBands = useMemo(
-    () =>
-      Array.from({ length: 3 }, (_, i) => ({
-        bottom: -6 + i * 9,
-        duration: 26 + i * 8,
-        delay: i * 5,
-        height: 130 + i * 30,
-      })),
-    [],
-  );
+// Classic bat silhouette, wings spread (viewBox 0 0 100 50).
+const BAT_PATH =
+  'M50 18 L46 10 L45 17 C40 17 36 19 33 23 C28 15 18 11 4 14 C12 18 14 23 12 29 ' +
+  'C7 27 3 28 0 31 C10 31 17 35 21 42 C25 36 31 34 37 36 C41 41 46 43 50 46 ' +
+  'C54 43 59 41 63 36 C69 34 75 36 79 42 C83 35 90 31 100 31 C97 28 93 27 88 29 ' +
+  'C86 23 88 18 96 14 C82 11 72 15 67 23 C64 19 60 17 55 17 L54 10 Z';
 
+function Bat({ width, flap }: { width: number; flap?: number }) {
   return (
-    <>
-      {/* ── Sky: layered indigo→black gradient with toxic-green moon vignette ── */}
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 100 50"
+      width={width}
+      height={width / 2}
+      style={{
+        display: 'block',
+        transformOrigin: '50% 60%',
+        animation: flap ? `${animBatFlap} ${flap}s ease-in-out infinite` : undefined,
+      }}
+    >
+      <path d={BAT_PATH} fill="var(--hw-ink)" />
+    </svg>
+  );
+}
+
+function Spider({ size }: { size: number }) {
+  const legs = [-1, 1]
+    .flatMap((side) =>
+      [0, 1, 2, 3].map((i) => {
+        const y = 38 + i * 7;
+        const kx = 50 + side * (16 + i * 2);
+        const fx = 50 + side * (30 + (i === 1 || i === 2 ? 6 : 0));
+        const fy = y + (i < 2 ? -8 : 10);
+        return `M${50 + side * 7} ${y} Q${kx} ${y - 12} ${fx} ${fy}`;
+      }),
+    )
+    .join(' ');
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 100 100"
+      width={size}
+      height={size}
+      style={{ display: 'block' }}
+    >
+      <path d={legs} fill="none" stroke="var(--hw-ink)" strokeWidth={4} strokeLinecap="round" />
+      <ellipse cx="50" cy="52" rx="13" ry="16" fill="var(--hw-ink)" />
+      <circle cx="50" cy="33" r="8" fill="var(--hw-ink)" />
+      <circle cx="47" cy="32" r="1.8" fill="var(--hw-eye)" />
+      <circle cx="53" cy="32" r="1.8" fill="var(--hw-eye)" />
+    </svg>
+  );
+}
+
+/** Spider hanging from the top edge; thread and body move together. */
+function HangingSpider({
+  left,
+  length,
+  animate,
+  size = 30,
+  climb = false,
+}: {
+  left: string;
+  length: string;
+  animate: boolean;
+  size?: number;
+  climb?: boolean;
+}) {
+  let motion: string | undefined;
+  if (animate) {
+    motion = climb
+      ? `${animSpiderClimb} 24s ease-in-out 6s infinite`
+      : `${animSpiderBob} 7s ease-in-out infinite`;
+  }
+  return (
+    <div
+      aria-hidden="true"
+      style={{ position: 'absolute', top: 0, left, width: size, animation: motion }}
+    >
       <div
-        aria-hidden="true"
         style={{
-          position: 'absolute',
-          inset: 0,
-          contain: 'layout paint style',
-          backgroundColor: 'transparent',
-          backgroundImage: [
-            // sickly moon glow, upper-right
-            `radial-gradient(38vmax 38vmax at 78% 14%, ${TOXIC_GREEN_SOFT} 0%, transparent 58%)`,
-            // cold counter-glow lower-left for depth
-            `radial-gradient(46vmax 46vmax at 12% 92%, ${PURPLE_FAINT} 0%, transparent 60%)`,
-            // overall indigo→black wash, darker toward edges (vignette)
-            `radial-gradient(120% 120% at 50% 30%, transparent 32%, ${PURPLE_DEEP} 100%)`,
-            `linear-gradient(180deg, ${PURPLE_DEEP} 0%, transparent 45%)`,
-          ].join(', '),
-          opacity: 0.5,
+          marginLeft: size / 2 - 0.5,
+          width: 1,
+          height: length,
+          background: 'var(--hw-web)',
         }}
       />
-
-      {/* ── Moon disc + breathing halo (the only backdrop-filter, kept cheap) ── */}
       <div
-        aria-hidden="true"
         style={{
-          position: 'absolute',
-          top: '8%',
-          right: '12%',
-          width: '160px',
-          height: '160px',
-          borderRadius: '50%',
-          willChange: 'transform, opacity',
-          backgroundImage: `radial-gradient(circle at 42% 40%, ${TOXIC_GREEN} 0%, oklch(0.55 0.14 150 / 0.5) 38%, transparent 72%)`,
-          filter: 'blur(2px)',
-          backdropFilter: 'saturate(1.15)',
-          animation: reduced ? 'none' : `${animMoonPulse} 9s ease-in-out infinite`,
-        }}
-      />
-
-      {/* ── Low drifting fog bands ── */}
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          inset: 0,
-          contain: 'layout paint style',
-          overflow: 'hidden',
+          marginTop: -size * 0.13,
+          transformOrigin: '50% 0',
+          animation: animate ? `${animSpiderSway} 5s ease-in-out infinite` : undefined,
         }}
       >
-        {fogBands.map((f, i) => (
-          <div
-            key={i}
-            aria-hidden="true"
-            style={{
-              position: 'absolute',
-              left: '-15%',
-              right: '-15%',
-              bottom: `${f.bottom}%`,
-              height: `${f.height}px`,
-              backgroundImage: `radial-gradient(60% 100% at 50% 100%, ${FOG_TINT} 0%, transparent 75%)`,
-              filter: 'blur(14px)',
-              willChange: reduced ? undefined : 'transform, opacity',
-              opacity: reduced ? 0.5 : undefined,
-              transform: reduced ? 'translate3d(2%, 0, 0) scale(1.18)' : undefined,
-              animation: reduced
-                ? 'none'
-                : `${animFogDrift} ${f.duration}s ease-in-out ${f.delay}s infinite`,
-            }}
-          />
-        ))}
+        <Spider size={size} />
       </div>
+    </div>
+  );
+}
 
-      {/* ── Will-o'-wisps / floating embers ── */}
-      {embers.map((e, i) => (
+/** Small jack-o'-lantern hanging on a short thread, candle flickering. */
+function HangingLantern({ right, length, size }: { right: number; length: number; size: number }) {
+  return (
+    <div aria-hidden="true" style={{ position: 'absolute', top: 0, right, width: size }}>
+      <div
+        style={{
+          marginLeft: size / 2 - 0.5,
+          width: 1,
+          height: length,
+          background: 'var(--hw-web)',
+        }}
+      />
+      <svg viewBox="0 0 60 56" width={size} height={size * 0.93} style={{ display: 'block' }}>
+        <path
+          d="M30 2 C31 6 33 8 36 9"
+          stroke="oklch(0.45 0.08 140)"
+          strokeWidth="3"
+          fill="none"
+          strokeLinecap="round"
+        />
+        <path
+          d="M30 10 C18 8 4 16 4 32 C4 46 16 54 30 54 C44 54 56 46 56 32 C56 16 42 8 30 10 Z"
+          fill="oklch(0.66 0.17 50)"
+        />
+        <path
+          d="M30 11 C24 20 24 44 30 53 M30 11 C36 20 36 44 30 53"
+          stroke="oklch(0.55 0.15 45)"
+          strokeWidth="1.5"
+          fill="none"
+        />
+        <g style={{ animation: `${animCandle} 1.6s ease-in-out infinite` }}>
+          <path d="M14 26 L22 22 L22 30 Z M46 26 L38 22 L38 30 Z" fill="oklch(0.93 0.14 95)" />
+          <path
+            d="M14 38 C20 46 40 46 46 38 L41 41 L37 38 L33 42 L30 38 L27 42 L23 38 L19 41 Z"
+            fill="oklch(0.93 0.14 95)"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+// Witch on a broom, flying left (viewBox 0 0 120 60).
+const WITCH_PATH = [
+  'M4 42 L80 37 L80 40 L4 45 Z', // broom handle
+  'M80 34 C88 32 98 28 108 24 C104 32 106 38 116 46 C104 44 92 42 80 42 Z', // bristles
+  'M32 20 C36 17 50 16 58 19 L55 21 C50 19 40 20 35 22 Z', // hat brim
+  'M40 19 L64 2 L52 19 Z', // hat cone, leaning back
+  'M39 25 A5 5 0 1 0 49 25 A5 5 0 1 0 39 25 Z', // head
+  'M39 24 L34 26 L39 27 Z', // nose
+  'M40 29 C44 28 52 28 56 30 C64 30 72 28 80 24 C76 30 70 34 62 38 L44 38 C40 36 38 32 40 29 Z', // cloak
+  'M42 31 L32 37 L34 39 L44 34 Z', // arm on the broom
+  'M48 38 L44 50 L38 52 L38 54 L47 53 L52 39 Z', // leg and boot
+].join(' ');
+
+function Witch({ width }: { width: number }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 120 60"
+      width={width}
+      height={width / 2}
+      style={{ display: 'block' }}
+    >
+      <path d={WITCH_PATH} fill="var(--hw-ink)" />
+    </svg>
+  );
+}
+
+const WISPS = [
+  { left: 12, top: 62, size: 30, hue: 'oklch(0.82 0.19 145)', wander: 26, pulse: 3.2, delay: -3 },
+  { left: 34, top: 80, size: 24, hue: 'oklch(0.8 0.16 60)', wander: 31, pulse: 2.6, delay: -11 },
+  { left: 55, top: 48, size: 28, hue: 'oklch(0.82 0.19 145)', wander: 28, pulse: 3.8, delay: -7 },
+  { left: 72, top: 72, size: 34, hue: 'oklch(0.8 0.16 60)', wander: 34, pulse: 2.9, delay: -19 },
+  { left: 88, top: 55, size: 24, hue: 'oklch(0.82 0.19 145)', wander: 24, pulse: 3.4, delay: -5 },
+  { left: 46, top: 30, size: 22, hue: 'oklch(0.8 0.16 60)', wander: 29, pulse: 2.4, delay: -15 },
+];
+
+const BAT_PERIOD = 20; // s between flights
+const BAT_FIRST = 5; // s after load
+const BATS = [
+  { top: 9, width: 64, offset: 0, bob: 1.3, flap: 0.3 },
+  { top: 16, width: 46, offset: 0.5, bob: 1.1, flap: 0.26 },
+  { top: 6, width: 38, offset: 0.9, bob: 1.5, flap: 0.24 },
+  { top: 20, width: 54, offset: 1.4, bob: 1.2, flap: 0.28 },
+];
+
+// Every 60 s a bigger, faster swarm of small bats, offset from the regular group.
+const SWARM_PERIOD = 60;
+const SWARM_FIRST = 38;
+const SWARM = Array.from({ length: 8 }, (_, i) => ({
+  top: 4 + ((i * 7) % 22),
+  width: 22 + (i % 3) * 8,
+  offset: (i * 0.23) % 1.4,
+  bob: 0.9 + (i % 3) * 0.25,
+  flap: 0.18 + (i % 3) * 0.03,
+}));
+
+const WITCH_PERIOD = 60;
+const WITCH_FIRST = 22;
+
+const GHOST_PERIOD = 50;
+const GHOST_FIRST = 16;
+
+/** A small, friendly ghost: pale body with an ink outline (shows on light). */
+function Ghost({ size }: { size: number }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 60 72"
+      width={size}
+      height={size * 1.2}
+      style={{ display: 'block' }}
+    >
+      <path
+        d="M30 4 C14 4 6 16 6 32 L6 62 L13 55 L20 63 L27 55 L34 63 L41 55 L48 63 L54 56 L54 32 C54 16 46 4 30 4 Z"
+        fill="oklch(0.98 0.01 290 / 0.55)"
+        stroke="var(--hw-ink)"
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+      <ellipse cx="22" cy="28" rx="3.5" ry="5" fill="var(--hw-ink)" />
+      <ellipse cx="38" cy="28" rx="3.5" ry="5" fill="var(--hw-ink)" />
+      <ellipse cx="30" cy="41" rx="4" ry="3" fill="var(--hw-ink)" opacity="0.8" />
+    </svg>
+  );
+}
+
+export function HalloweenOverlay({ reduced, preview }: SeasonalOverlayProps) {
+  // Phones: smaller webs, and a shorter thread so the spider hangs near the top.
+  const narrow = typeof window !== 'undefined' && window.matchMedia('(max-width: 750px)').matches;
+  if (preview) {
+    return (
+      <div className={halloweenRoot} aria-hidden="true">
         <div
-          key={i}
-          aria-hidden="true"
           style={{
             position: 'absolute',
-            left: `${e.left}%`,
-            bottom: `${e.bottom}%`,
-            willChange: reduced ? undefined : 'transform, opacity',
-            transform: reduced ? 'scale(0.9)' : undefined,
-            opacity: reduced ? 0.4 : undefined,
-            animation: reduced
-              ? 'none'
-              : `${animEmberFloat} ${e.duration}s ease-in ${e.delay}s infinite`,
+            inset: 0,
+            background:
+              'linear-gradient(180deg, oklch(0.22 0.08 300) 0%, oklch(0.16 0.06 290) 70%, oklch(0.12 0.04 280) 100%)',
           }}
-        >
-          <div
-            aria-hidden="true"
-            style={{
-              width: `${e.size}px`,
-              height: `${e.size}px`,
-              borderRadius: '50%',
-              backgroundColor: e.color,
-              boxShadow: `0 0 ${e.size * 2.5}px ${e.color}`,
-              animation: reduced
-                ? 'none'
-                : `${animEmberTwinkle} ${e.twinkle}s ease-in-out infinite`,
-            }}
-          />
+        />
+        {/* Crescent moon */}
+        <div
+          style={{
+            position: 'absolute',
+            right: '14%',
+            top: '14%',
+            width: '30%',
+            aspectRatio: '1',
+            borderRadius: '50%',
+            boxShadow: 'inset -9px 4px 0 0 oklch(0.93 0.06 95), 0 0 18px oklch(0.9 0.08 95 / 0.35)',
+          }}
+        />
+        {/* The big bat crosses the moon, the classic silhouette. */}
+        <div style={{ position: 'absolute', left: '52%', top: '22%', width: '34%' }}>
+          <svg viewBox="0 0 100 50" style={{ width: '100%' }}>
+            <path d={BAT_PATH} fill="oklch(0.1 0.02 300)" />
+          </svg>
         </div>
-      ))}
+        <div style={{ position: 'absolute', left: '26%', top: '56%', width: '20%' }}>
+          <svg viewBox="0 0 100 50" style={{ width: '100%' }}>
+            <path d={BAT_PATH} fill="oklch(0.1 0.02 300)" />
+          </svg>
+        </div>
+        <svg
+          viewBox="0 0 100 100"
+          style={{ position: 'absolute', left: 0, top: 0, width: '42%', overflow: 'visible' }}
+        >
+          <path d={WEB} fill="none" stroke="oklch(0.85 0.02 290 / 0.6)" strokeWidth={1.2} />
+        </svg>
+      </div>
+    );
+  }
 
-      {/* ── Silhouetted bats gliding across (skip entirely when reduced) ── */}
+  return (
+    <div className={halloweenRoot} aria-hidden="true">
+      <Cobweb corner="left" size={narrow ? 64 : 88} />
+      <Cobweb corner="right" size={narrow ? 76 : 108} />
+      {/* In the empty space under the member list on desktop; near the right
+          edge on narrow screens. */}
+      <HangingSpider
+        left="calc(100% - 64px)"
+        length={narrow ? '22vh' : '50vh'}
+        animate={!reduced}
+        climb
+      />
+      {/* A second, smaller spider on the left web. */}
+      <HangingSpider
+        left={narrow ? '30px' : '46px'}
+        length={narrow ? '9vh' : '13vh'}
+        animate={!reduced}
+        size={20}
+      />
+      {!narrow && <HangingLantern right={126} length={30} size={26} />}
+
+      {/* Will-o'-the-wisps: soft glows wandering slowly, always present while
+          animating. Not in the still scene: static glows would sit on text. */}
       {!reduced &&
-        bats.map((b, i) => (
+        WISPS.map((w, i) => (
           <div
-            key={i}
-            aria-hidden="true"
+            key={`wisp-${i}`}
             style={{
               position: 'absolute',
-              top: `${b.top}%`,
-              left: 0,
-              willChange: 'transform, opacity',
-              animation: `${animBatGlide} ${b.duration}s linear ${b.delay}s infinite`,
+              left: `${w.left}%`,
+              top: `${w.top}%`,
+              animation: `${animWispWander} ${w.wander}s ease-in-out ${w.delay}s infinite`,
             }}
           >
             <div
-              aria-hidden="true"
               style={{
-                transform: `scale(${b.scale})`,
-                animation: `${animWingFlap} ${b.flap}s ease-in-out infinite`,
+                width: w.size,
+                height: w.size,
+                borderRadius: '50%',
+                background: `radial-gradient(circle, oklch(0.97 0.05 100) 0%, ${w.hue} 22%, ${w.hue.replace(')', ' / 0.35)')} 48%, transparent 72%)`,
+                animation: `${animWispPulse} ${w.pulse}s ease-in-out ${w.delay}s infinite`,
               }}
-            >
-              <BatSilhouette />
+            />
+          </div>
+        ))}
+
+      {!reduced &&
+        BATS.map((bat, i) => (
+          <div
+            key={`bat-${i}`}
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: `${bat.top}%`,
+              opacity: 0,
+              willChange: 'transform, opacity',
+              animation: `${animBatFlight} ${BAT_PERIOD}s linear ${BAT_FIRST + bat.offset}s infinite`,
+            }}
+          >
+            <div style={{ animation: `${animBatBob} ${bat.bob}s ease-in-out infinite` }}>
+              <Bat width={bat.width} flap={bat.flap} />
             </div>
           </div>
         ))}
 
-      {/* ── Cobwebs tucked into two corners (top-left, top-right mirrored) ── */}
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '180px',
-          height: '180px',
-          backgroundImage: cobwebUri,
-          backgroundRepeat: 'no-repeat',
-          opacity: 0.7,
-        }}
-      />
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          width: '180px',
-          height: '180px',
-          backgroundImage: cobwebUri,
-          backgroundRepeat: 'no-repeat',
-          transform: 'scaleX(-1)',
-          opacity: 0.7,
-        }}
-      />
-    </>
+      {!reduced &&
+        SWARM.map((bat, i) => (
+          <div
+            key={`swarm-${i}`}
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: `${bat.top}%`,
+              opacity: 0,
+              willChange: 'transform, opacity',
+              animation: `${animSwarmFlight} ${SWARM_PERIOD}s linear ${SWARM_FIRST + bat.offset}s infinite`,
+            }}
+          >
+            <div style={{ animation: `${animBatBob} ${bat.bob}s ease-in-out infinite` }}>
+              <Bat width={bat.width} flap={bat.flap} />
+            </div>
+          </div>
+        ))}
+
+      {!reduced && (
+        <div
+          style={{
+            position: 'absolute',
+            right: '-14vw',
+            top: narrow ? '11%' : '12%',
+            opacity: 0,
+            willChange: 'transform, opacity',
+            animation: `${animWitch} ${WITCH_PERIOD}s linear ${WITCH_FIRST}s infinite`,
+          }}
+        >
+          <Witch width={narrow ? 84 : 120} />
+        </div>
+      )}
+
+      {!reduced && (
+        <div
+          style={{
+            position: 'absolute',
+            left: '18%',
+            top: '78%',
+            opacity: 0,
+            willChange: 'transform, opacity',
+            animation: `${animGhost} ${GHOST_PERIOD}s linear ${GHOST_FIRST}s infinite`,
+          }}
+        >
+          <div
+            style={{
+              transformOrigin: '50% 20%',
+              animation: `${animGhostWobble} 2.4s ease-in-out infinite`,
+            }}
+          >
+            <Ghost size={narrow ? 34 : 44} />
+          </div>
+        </div>
+      )}
+    </div>
   );
 }