/* "A landmark or city-scale show", pure-pixel version (stage-landmark-pixel.svg): a typical
   system, not a real project. One ELM HUB in a rack running ELM 2026 Architectural; its two
   10 Gb ports each on their own network and switch. Each network feeds a row of OCTO MK3
   (three drawn plus a dotted "more"); each OCTO drives several vertical runs of SPI pixel
   neon flex. Network A's row lights the facade's upper tier, network B's the lower.
   Chapters: 0 the kit (beats: HUB, two networks + switches, OCTO rows, the facade, BMS),
   1 one screen, 2 the show runs, 3 triggers from the building (loops).
   The pixel colours are the show's own light, not UI colours.
   Every selector is scoped to the root class .st-landmark-pixel. Sibling of landmark.css. */

/* ---- the drawing ---- */
.st-landmark-pixel .lp-lbl { font-size: 15px; font-weight: 700; fill: #2f2f2f; letter-spacing: 0; transition: fill .4s var(--eds-ease); }
.st-landmark-pixel .lp-lbl--sub { font-weight: 600; fill: #4c4c4c; }
.st-landmark-pixel .lp-rack__cab { fill: #f4f4f4; stroke: #d9d9d9; stroke-width: 1.5; }
.st-landmark-pixel .lp-rack__blank { fill: #ececec; stroke: #d4d8db; stroke-width: 1; }
/* The 19-inch rack, front-on: rails with the hole pattern, panels screwed to them. */
.st-landmark-pixel .lp-rack__rail { fill: #d4d8db; }
.st-landmark-pixel .lp-rack__hole { fill: #9aa0a4; }
.st-landmark-pixel .lp-rack__screw { fill: #b5babd; }
.st-landmark-pixel .lp-rack__vent { fill: #d4d8db; }
.st-landmark-pixel .lp-screen polygon { opacity: 0; transition: opacity .5s var(--eds-ease); }
.st-landmark-pixel .lp-screen__tint { fill: #0ea5df; }
.st-landmark-pixel .lp-screen__bar { fill: #f5b94a; }

.st-landmark-pixel .lp-bldg { fill: #f4f4f4; stroke: #d9d9d9; stroke-width: 1.5; }
.st-landmark-pixel .lp-run { fill: #333; }
.st-landmark-pixel .lp-px { fill: #8a8a8a; transition: fill .6s var(--eds-ease); }

.st-landmark-pixel .lp-more__box { fill: none; stroke: #bfbfbf; stroke-width: 2; stroke-dasharray: 5 5; }
.st-landmark-pixel .lp-more__dot { fill: #8a8a8a; }

.st-landmark-pixel .lp-bms__box { fill: #fff; stroke: #2f2f2f; stroke-width: 2; transition: stroke .4s var(--eds-ease); }
.st-landmark-pixel .lp-bms__icon { fill: none; stroke: #2f2f2f; stroke-width: 2; stroke-linejoin: round; }

.st-landmark-pixel .lp-clock circle { fill: #fff; stroke: #2f2f2f; }
.st-landmark-pixel .lp-clock line { stroke: #2f2f2f; }

/* Cables: each group carries its colour (--c) and liveness (--ss-live, the engine's dot). */
.st-landmark-pixel .lp-c { --c: #d9d9d9; transition: opacity .5s var(--eds-ease); }
.st-landmark-pixel .lp-c :is(.ss-net, .ss-dmx) { stroke: var(--c); transition: stroke .5s var(--eds-ease); }
/* The bus on to "more" controllers: dotted (pathLength units), the same colour as the rest. */
.st-landmark-pixel .lp-bus--more > path:first-child { stroke-dasharray: 1.2 1.6; }
.st-landmark-pixel .ss-rec { opacity: 0; }

/* ---- 0: THE KIT. Each group lands on its beat. ---- */
.st-landmark-pixel[data-chapter="0"] .ss-part { opacity: 0; transform: translateY(12px); }
.st-landmark-pixel[data-chapter="0"][data-beat="0"] .lp-hub,
.st-landmark-pixel[data-chapter="0"][data-beat="1"] :is(.lp-hub, .lp-net),
.st-landmark-pixel[data-chapter="0"][data-beat="2"] :is(.lp-hub, .lp-net, .lp-octog),
.st-landmark-pixel[data-chapter="0"][data-beat="3"] :is(.lp-hub, .lp-net, .lp-octog, .lp-face),
.st-landmark-pixel[data-chapter="0"][data-beat="4"] .ss-part { opacity: 1; transform: none; }
/* While the kit lands, names are grey and the group a beat is about has its names in black. */
.st-landmark-pixel[data-chapter="0"] .lp-lbl { fill: #8a8a8a; }
.st-landmark-pixel[data-chapter="0"][data-beat="0"] .lp-hub .lp-lbl,
.st-landmark-pixel[data-chapter="0"][data-beat="1"] .lp-net .lp-lbl,
.st-landmark-pixel[data-chapter="0"][data-beat="2"] .lp-octog .lp-lbl,
.st-landmark-pixel[data-chapter="0"][data-beat="3"] .lp-face .lp-lbl,
.st-landmark-pixel[data-chapter="0"][data-beat="4"] .lp-bmsg .lp-lbl { fill: #000; }
/* Each landing group's own runs show their dot once, so what it adds reads clearly. */
.st-landmark-pixel[data-chapter="0"][data-beat="1"] .lp-leg,
.st-landmark-pixel[data-chapter="0"][data-beat="2"] .lp-bus,
.st-landmark-pixel[data-chapter="0"][data-beat="3"] .lp-pix,
.st-landmark-pixel[data-chapter="0"][data-beat="4"] .lp-bms { --c: #0ea5df; --ss-live: 1; }
/* The facade's runs glow a plain white once they land, before any content is mapped. */
.st-landmark-pixel[data-chapter="0"][data-beat="3"] .lp-px { fill: #e6f6fc; }

/* ---- 1 on: the show is playing. Both networks live end to end. ---- */
.st-landmark-pixel:not([data-chapter="0"]) :is(.lp-leg, .lp-bus, .lp-pix) { --c: #0ea5df; --ss-live: 1; }
.st-landmark-pixel:not([data-chapter="0"]) :is(.ss-rec, .ss-rec__playing) { opacity: 1; }

/* ---- 1: ONE SCREEN, and 2: THE SHOW RUNS. One slow diagonal sweep crosses both tiers as a
   single picture (--x and --y count across the whole facade, not per controller). One rule
   for both chapters, so the sweep carries on unbroken from 1 into 2. ---- */
.st-landmark-pixel:is([data-chapter="1"], [data-chapter="2"]) .lp-px {
  animation: lp-look-a 6s linear infinite; animation-delay: calc(var(--x) * -.12s + var(--y) * -.06s);
}
@keyframes lp-look-a { 0%, 100% { fill: #0ea5df; } 33% { fill: #e6f6fc; } 66% { fill: #8e5cf2; } }
/* The HUB's own screen shows the one map while chapter 1 explains it. */
.st-landmark-pixel[data-chapter="1"] .lp-screen__tint { opacity: .3; }

/* ---- 2 and 3: the scheduler's clock turns. ---- */
.st-landmark-pixel:is([data-chapter="2"], [data-chapter="3"]) .lp-clock { opacity: 1; }
.st-landmark-pixel:is([data-chapter="2"], [data-chapter="3"]) .lp-hand--m { animation: ss-clock 3s linear infinite; }
.st-landmark-pixel:is([data-chapter="2"], [data-chapter="3"]) .lp-hand--h { animation: ss-clock 36s linear infinite; }

/* ---- 3: TRIGGERS FROM THE BUILDING. The BMS link pulses into the HUB, the HUB's screen
   flags the new look, then it wipes across the facade left to right. Look A keeps running
   under look B until each pixel's own moment (look B's fill-mode is none, so during its
   delay the earlier animation in the list shows). ---- */
.st-landmark-pixel[data-chapter="3"] .lp-bms { --c: #0ea5df; --ss-live: 1; }
.st-landmark-pixel[data-chapter="3"] .lp-bms__box { stroke: #0ea5df; }
.st-landmark-pixel[data-chapter="3"] .lp-screen__bar { opacity: 1; transition-delay: 2s; }
.st-landmark-pixel[data-chapter="3"] .lp-px {
  animation: lp-look-a 6s linear infinite, lp-look-b 4s linear infinite;
  animation-delay: calc(var(--x) * -.12s + var(--y) * -.06s), calc(2.6s + var(--x) * .05s + var(--y) * .02s);
}
@keyframes lp-look-b { 0%, 100% { fill: #f5b94a; } 50% { fill: #e8594a; } }

/* Reduced motion: the engine stops every animation, so each chapter gets a still picture of
   its look, a static left-to-right blend standing in for the sweep. */
@media (prefers-reduced-motion: reduce) {
  .st-landmark-pixel:is([data-chapter="1"], [data-chapter="2"]) .lp-px { fill: color-mix(in srgb, #8e5cf2 calc(var(--x) * 3.2%), #0ea5df); }
  .st-landmark-pixel[data-chapter="3"] .lp-px { fill: color-mix(in srgb, #e8594a calc(var(--x) * 3.2%), #f5b94a); }
}

/* Before play (the story shell's is-idle): a calm, full-strength overview. Every part shown,
   every network line blue but still, the facade holding one frame of the one-screen sweep;
   no PLAYING label, no trigger pulse, no flag on the HUB screen. */
.st-landmark-pixel.is-idle :is(.lp-leg, .lp-bus, .lp-pix) { --c: #0ea5df; --ss-live: 0; }
.st-landmark-pixel.is-idle .lp-bms { --c: #d9d9d9; --ss-live: 0; }
.st-landmark-pixel.is-idle .lp-bms__box { stroke: #2f2f2f; }
.st-landmark-pixel.is-idle .lp-px {
  fill: color-mix(in srgb, #8e5cf2 calc(var(--x) * 3.2%), #0ea5df);
  animation: lp-look-a 6s linear infinite paused; animation-delay: calc(var(--x) * -.12s + var(--y) * -.06s);
}
.st-landmark-pixel.is-idle :is(.lp-screen__tint, .lp-screen__bar, .lp-clock) { opacity: 0; }
.st-landmark-pixel.is-idle :is(.ss-rec, .ss-rec__playing) { opacity: 0; }