/* The loader in the Matrix (Chris, 29 Oct: "a matrix version loading yacht animation"): while the yacht's Matrix switch is on (matrix-mode.js sets
   <html data-mx="on"> before the loader is drawn), the same picture of her is drawn as edges in phosphor green, her windows light green one by one,
   with the code falling behind her and the name and steps in the monospace face. It is the loader's own drawing recoloured (no second drawing), and
   it holds still under reduced motion. Its own file: style.css and splash-art.css are past their ceilings. */
:root[data-mx='on'] .splash { background: #010a05; overflow: hidden; }
:root[data-mx='on'] .splash > * { position: relative; z-index: 1; }
/* The code is splash-rain.js's canvas, under everything. A dark pool in the middle lets her and the name read; the operators' screen has scan lines, a
   dark rim and a faint flicker over it all. */
/* The streams (splash-rain.js): one element per run of glyphs, lit from nothing at the tail to white at the head, moved by a transform animation alone so the
   browser keeps it going on its compositor while the page is busy starting up. */
:root[data-mx='on'] .splash .splash-rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
:root[data-mx='on'] .splash-rain i::before { content: attr(data-g); }
:root[data-mx='on'] .splash-rain i { position: absolute; top: 0; width: 13px; font: 700 12px/13px ui-monospace, 'Cascadia Mono', Consolas, monospace; font-style: normal; white-space: pre; text-align: center;
  color: transparent; background-image: linear-gradient(180deg, rgba(54, 255, 138, 0), rgba(54, 255, 138, 0.45) 35%, #36ff8a 88%, #e6fff0 100%);
  -webkit-background-clip: text; background-clip: text; will-change: transform; transform: translate3d(0, -100%, 0);
  animation: spr-fall 5s linear infinite; }
@keyframes spr-fall { to { transform: translate3d(0, 100vh, 0); } }
@media (prefers-reduced-motion: reduce) { :root[data-mx='on'] .splash-rain i { animation: none; transform: none; will-change: auto; } }
:root[data-mx='on'] .splash::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* over the rain, under her and the name */
  background: radial-gradient(ellipse 64% 36% at 50% 51%, rgba(1, 10, 5, 0.94) 0 55%, transparent 100%); }
:root[data-mx='on'] .splash::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 6, 2, 0.75) 100%);
  animation: spm-flicker 5s steps(1, end) infinite; }
@keyframes spm-flicker { 0%, 93%, 100% { opacity: 1; } 94% { opacity: 0.82; } 96% { opacity: 1; } 97% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { :root[data-mx='on'] .splash::after { animation: none; } }
:root[data-mx='on'] .splash-name { color: #c8ffe0; text-shadow: 0 0 10px rgba(54, 255, 138, 0.6); }
:root[data-mx='on'] .splash-name::before { content: '> '; opacity: 0.7; }
:root[data-mx='on'] .splash-line { color: #36ff8a; }
:root[data-mx='on'] .splash-steps li.on { color: #c8ffe0; }
:root[data-mx='on'] .splash-steps .lamp { background: #1f6b3e; border-radius: 0; }
:root[data-mx='on'] .splash-steps li.on .lamp { background: #36ff8a; box-shadow: 0 0 8px rgba(54, 255, 138, 0.9); }

/* Her: every shape an edge. The day's sky, sun and clouds never show here, and the haze and glow go. */
:root[data-mx='on'] .y8 { filter: drop-shadow(0 0 5px rgba(54, 255, 138, 0.55)); }
:root[data-mx='on'] .y8 .sp-sky, :root[data-mx='on'] .y8 .sp-sun, :root[data-mx='on'] .y8 .sp-clouds, :root[data-mx='on'] .y8 .sp-haze, :root[data-mx='on'] .y8 .sp-glow { display: none; }
:root[data-mx='on'] .y8 .sp-ridge, :root[data-mx='on'] .y8 .sp-ridge2, :root[data-mx='on'] .y8 .sp-town, :root[data-mx='on'] .y8 .sp-tower, :root[data-mx='on'] .y8 .sp-sea,
:root[data-mx='on'] .y8 .sp-hull, :root[data-mx='on'] .y8 .sp-house, :root[data-mx='on'] .y8 .sp-plate, :root[data-mx='on'] .y8 .sp-dome {
  fill: rgba(2, 26, 12, 0.92); stroke: #36ff8a; stroke-width: 0.5; stroke-opacity: 0.85; }
:root[data-mx='on'] .y8 .sp-sea { fill: rgba(2, 26, 12, 0.6); stroke-opacity: 0.35; }
:root[data-mx='on'] .y8 .sp-ridge, :root[data-mx='on'] .y8 .sp-ridge2, :root[data-mx='on'] .y8 .sp-town, :root[data-mx='on'] .y8 .sp-tower { stroke-opacity: 0.4; }
:root[data-mx='on'] .y8 .sp-stripe, :root[data-mx='on'] .y8 .sp-rail, :root[data-mx='on'] .y8 .sp-arch, :root[data-mx='on'] .y8 .sp-mast,
:root[data-mx='on'] .y8 .sp-shimmer, :root[data-mx='on'] .y8 .sp-glint { fill: none; stroke: #36ff8a; stroke-opacity: 0.9; }
:root[data-mx='on'] .y8 .sp-city, :root[data-mx='on'] .y8 .sp-front, :root[data-mx='on'] .y8 .sp-star, :root[data-mx='on'] .y8 .sp-moon, :root[data-mx='on'] .y8 .sp-masthead,
:root[data-mx='on'] .y8 .sp-pennant { fill: #36ff8a; stroke: none; opacity: 0.8; }
:root[data-mx='on'] .y8 .sp-win { fill: #04260f; stroke: #36ff8a; stroke-width: 0.3; }
:root[data-mx='on'] .splash.lit .y8 .sp-win { fill: #36ff8a; }
@media (prefers-reduced-motion: reduce) { :root[data-mx='on'] .y8 .sp-win { fill: #36ff8a; } }
@media (prefers-reduced-motion: no-preference) { :root[data-mx='on'] .y8 .sp-win { animation-name: spm-light; } }
@keyframes spm-light { 0%, 100% { fill: #04260f; } 50% { fill: #36ff8a; } }

/* The session card he is on, in the Matrix lane: a filled green card with a bar down its left edge, so it reads at a glance. */
:root[data-mx='on'] .detail .work-strip-item.on { background-color: rgba(8, 70, 36, 0.96) !important; border: 2px solid #36ff8a; box-shadow: inset 5px 0 0 #36ff8a, 0 0 14px rgba(54, 255, 138, 0.45), 0 4px 14px rgba(0, 0, 0, 0.6); color: #fff; }
:root[data-mx='on'] .detail .work-strip-item.on .work-strip-meta { color: #c8ffe0; }
:root[data-mx='on'] .detail .work-strip-item.new.on { box-shadow: 0 0 14px rgba(54, 255, 138, 0.45); }
:root[data-mx='on'] .splash-bar { border-radius: 0; }
:root[data-mx='on'] .splash-bar i { border-radius: 0; background: linear-gradient(90deg, #1f9d57, #36ff8a); box-shadow: 0 0 10px rgba(54, 255, 138, 0.7); }