/* The masthead art's colours, from the host's theme. A host sets these on the masthead (or any
   ancestor) from its own tokens; the fallbacks are a plain light theme.

     --masthead-accent    the animation's colour
     --masthead-bg        the page behind it
     --masthead-border    faint lines and flap edges
     --masthead-surface   the Solari board's flaps
     --masthead-mono      the Solari board's font
     --masthead-strength  the art's opacity: 0.55 sits behind a masthead's text; 1 is full

   The art fills its container, so the host places and sizes the container. */
.masthead-art {
  --_accent: var(--masthead-accent, #2563eb);
  --_bg: var(--masthead-bg, #ffffff);
  --_border: var(--masthead-border, #d4d4d8);
  --_surface: var(--masthead-surface, #f4f4f5);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  color: color-mix(in srgb, var(--_accent) 25%, var(--_border));
  opacity: var(--masthead-strength, 0.55);
}

/* The circuit. #masthead-pulse, the glow, is art.svg's; #masthead-fade is the circuit's own. */
.masthead-circuit-traces { fill: none; stroke: url(#masthead-fade); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.masthead-circuit-nodes circle { fill: color-mix(in srgb, var(--_accent) 18%, var(--_bg)); opacity: 0.5; }
.masthead-glow { stop-color: var(--_accent); }
.masthead-spark { fill: var(--_accent); }
.masthead-trace { fill: none; stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 1; }

/* The variants. */
.masthead-boids { opacity: 0.8; }
.masthead-terrainflight { opacity: 0.78; }
.masthead-terrain-horizon { fill: none; stroke: color-mix(in srgb, var(--_accent) 54%, var(--_bg)); stroke-width: 1.25; opacity: 0.48; }
.masthead-terrain-ridge { fill: none; stroke: color-mix(in srgb, var(--_accent) 68%, var(--_bg)); stroke-linecap: round; stroke-linejoin: round; }
.masthead-terrain-glow { fill: none; stroke: var(--_accent); stroke-linecap: round; stroke-linejoin: round; filter: blur(2px); }
.masthead-life { opacity: 0.5; }
.masthead-life-cells { fill: color-mix(in srgb, var(--_accent) 52%, var(--_bg)); shape-rendering: crispEdges; }
.masthead-signalnoise { fill: color-mix(in srgb, var(--_accent) 66%, var(--_bg)); shape-rendering: crispEdges; }
.masthead-noise-line { opacity: 0.35; }
.masthead-noise-scan { opacity: 0.3; }
.masthead-noise-band { opacity: 0.22; }
.masthead-fractal { fill: none; stroke: var(--_accent); stroke-linecap: round; stroke-linejoin: round; }
/* The fractal's lines are fine and the art is squashed to fit, so it's lifted out of the art's
   fade and its lines are a little heavier (ui-pudl #98). */
.masthead-art[data-masthead="fractal"] { opacity: max(var(--masthead-strength, 0.55), 0.85); }
.masthead-fractal-glow { opacity: 0.2; stroke-width: 5; }
.masthead-fractal-trunk { opacity: 0.8; stroke-width: 2; }
.masthead-fractal-branches { opacity: 0.66; stroke-width: 1.4; }
.masthead-fractal-twigs { opacity: 0.5; stroke-width: 1; }
.masthead-fractal-tips { opacity: 0.82; stroke: none; }
/* The Solari board, lifted out of the art's fade but kept behind the name: at the usual strength
   the layer holds it at 0.2, as approved on bytecode.news, rising to 1 at full strength. */
.masthead-art[data-masthead="solari"] { opacity: 1; }
.masthead-solari { opacity: clamp(0.2, (var(--masthead-strength, 0.55) - 0.55) / 0.45, 1); font: 700 20px var(--masthead-mono, ui-monospace, monospace); }
.masthead-solari-cell { fill: var(--_surface); stroke: var(--_border); stroke-width: 0.7; }
.masthead-solari-hinge { stroke: var(--_border); stroke-width: 0.6; }
.masthead-solari-glyph { fill: var(--_accent); }

/* Bytecode: hex in the accent, its heads brightest, and an instruction decoded now and then. */
.masthead-bytecode { font: 600 16px var(--masthead-mono, ui-monospace, monospace); }
.masthead-bytecode-glyph { fill: color-mix(in srgb, var(--_accent) 72%, var(--_bg)); }
.masthead-bytecode-head { fill: var(--_accent); filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--_accent) 70%, transparent)); }
.masthead-bytecode-note { fill: var(--_accent); font-size: 14px; font-weight: 500; }

/* City defense: trails from the top, rings where counter-missiles burst, cities along the foot. */
.masthead-citydefense { fill: none; }
.masthead-citydefense-ground { stroke: color-mix(in srgb, var(--_accent) 50%, var(--_border)); stroke-width: 1.2; }
.masthead-citydefense-base { stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.3; }
.masthead-citydefense-city { fill: color-mix(in srgb, var(--_accent) 30%, var(--_bg)); stroke: var(--_accent); stroke-width: 1; }
.masthead-citydefense-rubble { fill: none; opacity: 0.6; }
.masthead-citydefense-trail { stroke: color-mix(in srgb, var(--_accent) 75%, var(--_bg)); stroke-width: 1; }
.masthead-citydefense-counter { stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 1; stroke-dasharray: 3 3; }
.masthead-citydefense-burst { fill: url(#masthead-pulse); stroke: var(--_accent); stroke-width: 1.2; }

/* Duel: two fencers on the ground line, their blades, and the spark where they meet. */
.masthead-duel-ground { fill: none; stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 1.2; }
.masthead-duel-body { fill: none; stroke: var(--_accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.masthead-duel-head { stroke: var(--_accent); stroke-width: 2; }
.masthead-duel-fencer-0 .masthead-duel-head { fill: var(--_accent); }
.masthead-duel-fencer-1 .masthead-duel-head { fill: var(--_bg); }
.masthead-duel-blade { fill: none; stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.3; stroke-linecap: round; }
.masthead-duel-spark { fill: none; stroke: var(--_accent); stroke-width: 1.4; stroke-linecap: round; }

/* Ghostrider: a wireframe road toward a high horizon, hills along it. */
.masthead-ghostrider { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.masthead-ghostrider-edge { stroke: color-mix(in srgb, var(--_accent) 80%, var(--_bg)); stroke-width: 1.4; }
.masthead-ghostrider-rumble { stroke: var(--_accent); stroke-width: 2; }
.masthead-ghostrider-dash { stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.2; }
.masthead-ghostrider-post { stroke: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); stroke-width: 1.2; }
.masthead-ghostrider-hills { stroke: color-mix(in srgb, var(--_accent) 50%, var(--_border)); stroke-width: 1.1; }
.masthead-ghostrider-horizon { stroke: color-mix(in srgb, var(--_accent) 35%, var(--_border)); stroke-width: 1; opacity: 0.6; }

/* Grass: three depths of blade, the nearest strongest. */
.masthead-grass { fill: none; stroke-linecap: round; }
.masthead-grass-blades { stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); }
.masthead-grass-depth-0 { stroke-width: 0.9; opacity: 0.45; }
.masthead-grass-depth-1 { stroke-width: 1.1; opacity: 0.7; }
.masthead-grass-depth-2 { stroke-width: 1.4; }
.masthead-grass-heads { stroke: var(--_accent); stroke-width: 2; }

/* Lander: jagged ground, its pad, and the lander with its flame. */
.masthead-lander { fill: none; stroke-linejoin: round; }
.masthead-lander-ground { stroke: color-mix(in srgb, var(--_accent) 60%, var(--_border)); stroke-width: 1.2; }
.masthead-lander-pad { stroke: var(--_accent); stroke-width: 2.5; }
.masthead-lander-ship { stroke: var(--_accent); stroke-width: 1.3; }
.masthead-lander-flame { stroke: color-mix(in srgb, var(--_accent) 60%, var(--_bg)); stroke-width: 1.2; }

/* Paddles: the net, two paddles, the ball, the scores. */
.masthead-paddles-net { stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 2; }
.masthead-paddles-paddle, .masthead-paddles-ball { fill: var(--_accent); }
.masthead-paddles-score { fill: color-mix(in srgb, var(--_accent) 60%, var(--_bg)); font: 700 28px var(--masthead-mono, ui-monospace, monospace); }

/* Pong wars: one side a faint wash of the accent, the other the page; a ball of each. */
.masthead-pongwars-cell { fill: color-mix(in srgb, var(--_accent) 22%, var(--_bg)); }
.masthead-pongwars-ball-1 { fill: var(--_accent); }
.masthead-pongwars-ball-0 { fill: var(--_bg); stroke: var(--_accent); stroke-width: 1.5; }

/* Rocks: outlines drifting, the ship, its shots and the dust of a broken rock. */
.masthead-rocks { fill: none; stroke-linejoin: round; }
.masthead-rocks-rock { stroke: color-mix(in srgb, var(--_accent) 75%, var(--_bg)); stroke-width: 1.3; }
.masthead-rocks-ship { stroke: var(--_accent); stroke-width: 1.4; }
.masthead-rocks-shot { stroke: var(--_accent); stroke-width: 1.6; stroke-linecap: round; }
.masthead-rocks-dust { fill: var(--_accent); }

/* Stix: claimed ground hatched, the field's border, the cut, the Stix and its fading copies. */
.masthead-stix { fill: none; }
.masthead-stix-hatching { stroke: color-mix(in srgb, var(--_accent) 45%, var(--_bg)); stroke-width: 1; }
.masthead-stix-border { stroke: color-mix(in srgb, var(--_accent) 60%, var(--_border)); stroke-width: 1.2; }
.masthead-stix-cut { stroke: var(--_accent); stroke-width: 1.6; stroke-linejoin: round; }
.masthead-stix-line { stroke: var(--_accent); stroke-width: 1.3; }
.masthead-stix-marker { fill: var(--_accent); }

/* Train: ASCII art along a track at the foot of the masthead, trailing smoke. */
.masthead-train { font: 600 12px var(--masthead-mono, ui-monospace, monospace); }
.masthead-train-cars { fill: color-mix(in srgb, var(--_accent) 85%, var(--_bg)); }
.masthead-train-track { fill: none; stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 1.2; opacity: 0.7; }
.masthead-train-smoke { fill: color-mix(in srgb, var(--_accent) 40%, var(--_border)); }

/* Water: lines across a surface, nearer ones stronger. */
.masthead-water-line { fill: none; stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.1; stroke-linejoin: round; }

/* Wind farm: low hills, towers, and turning rotors. */
.masthead-windfarm { fill: none; }
.masthead-windfarm-hills { stroke: color-mix(in srgb, var(--_accent) 55%, var(--_border)); stroke-width: 1.2; }
.masthead-windfarm-tower { fill: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); }
.masthead-windfarm-blade { fill: color-mix(in srgb, var(--_accent) 35%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 80%, var(--_bg)); stroke-width: 0.9; }
.masthead-windfarm-hub { fill: var(--_accent); }

/* October. */
/* Bats: dark wings against the masthead. */
.masthead-bats-bat { fill: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); stroke: var(--_accent); stroke-width: 0.6; }
/* Eyes: pale whites with dark pupils, in the accent. */
.masthead-eyes-white { fill: color-mix(in srgb, var(--_accent) 30%, var(--_bg)); stroke: var(--_accent); stroke-width: 1; }
.masthead-eyes-pupil { fill: var(--_accent); }
/* Ghosts: pale sheets, outlined, with dark eyes and mouths. */
.masthead-ghosts-sheet { fill: color-mix(in srgb, var(--_accent) 12%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 80%, var(--_bg)); stroke-width: 1.2; }
.masthead-ghosts-face { fill: var(--_accent); }
/* Graveyard: the moon, wisps of cloud and fog, the hill, its stones and trees. */
.masthead-graveyard-face { fill: color-mix(in srgb, var(--_accent) 18%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.2; }
.masthead-graveyard-halo { opacity: 0.35; }
.masthead-graveyard-crater { fill: none; stroke: color-mix(in srgb, var(--_accent) 45%, var(--_bg)); stroke-width: 0.9; }
.masthead-graveyard-cloud, .masthead-graveyard-fog { fill: none; stroke: color-mix(in srgb, var(--_accent) 40%, var(--_border)); stroke-width: 1.4; stroke-linecap: round; }
.masthead-graveyard-fog { opacity: 0.6; }
.masthead-graveyard-hill, .masthead-graveyard-tree { fill: none; stroke: color-mix(in srgb, var(--_accent) 65%, var(--_bg)); stroke-width: 1.2; stroke-linecap: round; }
.masthead-graveyard-stone { fill: color-mix(in srgb, var(--_accent) 15%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.1; }
.masthead-graveyard-bat { fill: var(--_accent); }
.masthead-graveyard-sheet { fill: color-mix(in srgb, var(--_accent) 12%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 80%, var(--_bg)); stroke-width: 1; }
.masthead-graveyard-eyes { fill: var(--_accent); }
/* Pumpkins: outlined bodies and stems, faces lit from inside. */
.masthead-pumpkins-body { fill: color-mix(in srgb, var(--_accent) 18%, var(--_bg)); stroke: var(--_accent); stroke-width: 1.2; }
.masthead-pumpkins-stem { fill: none; stroke: color-mix(in srgb, var(--_accent) 70%, var(--_border)); stroke-width: 1.4; }
.masthead-pumpkins-face { fill: var(--_accent); }
/* Spider: its web, its thread, and the spider. */
.masthead-spider-web, .masthead-spider-thread { fill: none; stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 0.8; }
.masthead-spider-body { fill: var(--_accent); }
.masthead-spider-legs { fill: none; stroke: var(--_accent); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }

/* ?ambientDebug=1 names the running animation and its seed in the masthead's corner. */
.masthead-debug {
  position: absolute;
  right: 0.5rem;
  bottom: 0.25rem;
  margin: 0;
  font: 0.625rem var(--masthead-mono, ui-monospace, monospace);
  opacity: 0.7;
}