/* "A building facade", pixel-strip version (stage-facade-pixel.svg): a typical system, not a
   named project. One S-PLAY SP1-1 on Ethernet to a network switch, three OCTO MK3 pixel
   controllers sending SPI to vertical runs of pixel neon flex and strip
   on a commercial frontage, one power supply per two runs. A building management system, a button and a motion sensor
   trigger it; a laptop builds the show.
   Chapters: 0 the kit (beats: S-PLAY, switch, OCTO MK3s, frontage + runs, laptop + BMS +
   inputs), 1 build the show, 2 the show runs (laptop gone), 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-facade-pixel. Sibling of facade.css. */

/* ---- the drawing ---- */
.st-facade-pixel .fp-lbl { font-size: 15px; font-weight: 700; fill: #2f2f2f; letter-spacing: 0; transition: fill .4s var(--eds-ease); }

.st-facade-pixel .fp-bldg { fill: #f4f4f4; stroke: #d9d9d9; stroke-width: 1.5; }
.st-facade-pixel .fp-fascia { fill: #e3e3e3; }
.st-facade-pixel .fp-ground { fill: none; stroke: #d9d9d9; stroke-width: 1.5; }
.st-facade-pixel .fp-win { fill: #e6e6e6; }
.st-facade-pixel .fp-win--low { fill: #dedede; }
.st-facade-pixel .fp-tube { fill: #fff; stroke: #cfcfcf; stroke-width: 1.2; }
.st-facade-pixel .fp-px { fill: #8a8a8a; transition: fill .6s var(--eds-ease); }

/* Power: one supply per two runs in the fascia, a thin feed injecting every 5 m. Kept light. */
.st-facade-pixel .fp-pwr__box { fill: #fff; stroke: #8a8a8a; stroke-width: 1.5; }
.st-facade-pixel .fp-pwr__bolt { fill: #f5b94a; }
.st-facade-pixel .fp-pwr__w { fill: none; stroke: #bdbdbd; stroke-width: 1; }
.st-facade-pixel .fp-pwr__tap { fill: #f5b94a; r: 2px; }
.st-facade-pixel .fp-lbl--note { font-weight: 600; fill: #4c4c4c; }

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

.st-facade-pixel .fp-ring { fill: #fff; stroke: #2f2f2f; stroke-width: 2.5; }
.st-facade-pixel .fp-press { fill: #bfbfbf; transition: fill .3s var(--eds-ease); }
.st-facade-pixel .fp-sensor__plate { fill: #4c4c4c; }
.st-facade-pixel .fp-sensor__dome { fill: #fff; stroke: #2f2f2f; stroke-width: 2.5; }
.st-facade-pixel .fp-wave { fill: none; stroke: #0ea5df; stroke-width: 2.5; stroke-linecap: round; opacity: 0; }

/* The laptop: the engine's dark machine; the screen wakes to the S-PLAY web interface. */
.st-facade-pixel .fp-browser { opacity: 0; transition: opacity .5s var(--eds-ease); }
.st-facade-pixel .fp-browser__bar { fill: #e3e3e3; }
.st-facade-pixel .fp-browser__dot { fill: #bfbfbf; }
.st-facade-pixel .fp-browser__url { fill: #fff; }
.st-facade-pixel .fp-browser__lane { fill: #f4f6f7; stroke: #d9d9d9; stroke-width: 1; }
.st-facade-pixel .fp-browser__tile { fill: #e6f6fc; stroke: #0ea5df; stroke-width: 1; }
.st-facade-pixel .fp-cue { fill: #0ea5df; opacity: 0; }

/* Cables: each group carries its colour (--c) and liveness (--ss-live, the engine's dot). */
.st-facade-pixel .fp-c { --c: #d9d9d9; transition: opacity .5s var(--eds-ease); }
.st-facade-pixel .fp-c :is(.ss-net, .ss-dmx) { stroke: var(--c); transition: stroke .5s var(--eds-ease); }
.st-facade-pixel .ss-rec { opacity: 0; }

/* ---- 0: THE KIT. Each group lands on its beat. ---- */
.st-facade-pixel[data-chapter="0"] .ss-part { opacity: 0; transform: translateY(12px); }
.st-facade-pixel[data-chapter="0"][data-beat="0"] .fp-splay,
.st-facade-pixel[data-chapter="0"][data-beat="1"] :is(.fp-splay, .fp-net),
.st-facade-pixel[data-chapter="0"][data-beat="2"] :is(.fp-splay, .fp-net, .fp-octos),
.st-facade-pixel[data-chapter="0"][data-beat="3"] :is(.fp-splay, .fp-net, .fp-octos, .fp-bldgg),
.st-facade-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-facade-pixel[data-chapter="0"] .fp-lbl { fill: #8a8a8a; }
.st-facade-pixel[data-chapter="0"][data-beat="0"] .fp-splay .fp-lbl,
.st-facade-pixel[data-chapter="0"][data-beat="1"] .fp-net .fp-lbl,
.st-facade-pixel[data-chapter="0"][data-beat="2"] .fp-octos .fp-lbl,
.st-facade-pixel[data-chapter="0"][data-beat="3"] .fp-bldgg .fp-lbl,
.st-facade-pixel[data-chapter="0"][data-beat="4"] :is(.fp-laptop, .fp-bmsg, .fp-inputs) .fp-lbl { fill: #000; }
/* Each landing group's own runs show their dot once, so what it adds reads clearly. */
.st-facade-pixel[data-chapter="0"][data-beat="1"] .fp-up,
.st-facade-pixel[data-chapter="0"][data-beat="2"] .fp-oc,
.st-facade-pixel[data-chapter="0"][data-beat="3"] .fp-spi,
.st-facade-pixel[data-chapter="0"][data-beat="4"] :is(.fp-lap, .fp-bms) { --c: #0ea5df; --ss-live: 1; }
.st-facade-pixel[data-chapter="0"][data-beat="4"] .fp-in { --c: #2f2f2f; --ss-live: 1; }
.st-facade-pixel[data-chapter="0"][data-beat="3"] .fp-px { fill: #0ea5df; }

/* ---- 1: BUILD THE SHOW. The laptop link live, the web interface open, cues dropping into
   the lane; then REC on the S-PLAY as the show is recorded onto it. ---- */
.st-facade-pixel[data-chapter="1"] .ss-laptop__screen { fill: #fff; }
.st-facade-pixel[data-chapter="1"] .fp-browser { opacity: 1; }
.st-facade-pixel[data-chapter="1"] .fp-lap { --c: #0ea5df; --ss-live: 1; }
.st-facade-pixel[data-chapter="1"] .fp-cue { animation: fp-drop 9s var(--eds-ease) both; animation-delay: calc(var(--i) * 1s + .5s); }
.st-facade-pixel[data-chapter="1"] .ss-rec { opacity: 1; transition-delay: 5.2s; }
.st-facade-pixel[data-chapter="1"] .ss-rec__on { opacity: 1; animation: ss-rec 1.2s ease-in-out 5.2s infinite; }
@keyframes fp-drop {
  0% { opacity: 0; transform: translateY(-26px); }
  12% { opacity: 1; transform: translateY(-26px); }
  24%, 100% { opacity: 1; transform: none; }
}

/* ---- 2 on: THE SHOW RUNS. Laptop gone; S-PLAY to switch to every OCTO MK3 live, SPI live,
   then the runs light up, a colour chase climbing each run, section by section. The clock:
   it runs on a schedule. ---- */
.st-facade-pixel:is([data-chapter="2"], [data-chapter="3"]) .fp-laptop { opacity: .18; }
.st-facade-pixel:is([data-chapter="2"], [data-chapter="3"]) .fp-lap { opacity: 0; }
.st-facade-pixel:is([data-chapter="2"], [data-chapter="3"]) :is(.fp-up, .fp-oc, .fp-spi) { --c: #0ea5df; --ss-live: 1; }
.st-facade-pixel:is([data-chapter="2"], [data-chapter="3"]) :is(.ss-rec, .ss-rec__playing) { opacity: 1; }
.st-facade-pixel:is([data-chapter="2"], [data-chapter="3"]) .fp-clock { opacity: 1; }
.st-facade-pixel:is([data-chapter="2"], [data-chapter="3"]) .fp-hand--m { animation: ss-clock 3s linear infinite; }
.st-facade-pixel:is([data-chapter="2"], [data-chapter="3"]) .fp-hand--h { animation: ss-clock 36s linear infinite; }
.st-facade-pixel[data-chapter="2"] .fp-px { animation: fp-look-a 2.4s linear infinite backwards; animation-delay: calc(var(--r) * .18s + var(--p) * .07s + .6s); }
/* Before its run's turn (the delay), the 0% frame holds: unlit grey. */
@keyframes fp-look-a { 0% { fill: #8a8a8a; } 1%, 99% { fill: #ffc861; } 50% { fill: #0ea5df; } 100% { fill: #ffc861; } }

/* ---- 3: TRIGGERS FROM THE BUILDING. The BMS link pulses into the S-PLAY, the sensor sees
   someone and the button is pressed; a moment later the facade changes to a new look, a
   sweep across the runs instead of a climb. ---- */
.st-facade-pixel[data-chapter="3"] .fp-bms { --c: #0ea5df; --ss-live: 1; }
.st-facade-pixel[data-chapter="3"] .fp-bms__box { stroke: #0ea5df; }
.st-facade-pixel[data-chapter="3"] .fp-in { --c: #2f2f2f; --ss-live: 1; }
.st-facade-pixel[data-chapter="3"] .fp-in .ss-pulse { animation-direction: reverse; }
.st-facade-pixel[data-chapter="3"] .fp-wave { animation: fp-wave 1.8s ease-out infinite; animation-delay: calc(var(--i) * .3s); }
.st-facade-pixel[data-chapter="3"] .fp-press { fill: #0ea5df; animation: fp-press 1.8s ease-in-out infinite; }
.st-facade-pixel[data-chapter="3"] .fp-px { animation: fp-look-b 3s linear infinite backwards; animation-delay: calc(2.4s + var(--r) * .1s - var(--p) * .03s); }
@keyframes fp-look-b { 0% { fill: #ffc861; } 1%, 99% { fill: #f5b94a; } 50% { fill: #8e5cf2; } 100% { fill: #f5b94a; } }
@keyframes fp-wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fp-press { 0%, 100% { r: 13px; } 50% { r: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .st-facade-pixel[data-chapter="1"] .fp-cue { opacity: 1; }
  .st-facade-pixel[data-chapter="2"] .fp-px { fill: #ffc861; }
  .st-facade-pixel[data-chapter="3"] .fp-px { fill: #f5b94a; }
  .st-facade-pixel[data-chapter="3"] .fp-wave { opacity: 1; }
}

/* Before play (the story shell's is-idle): the whole system at full strength, so the first
   picture is an overview, not the last step. Laptop and its cable shown, the runs lit in
   their look, no PLAYING label and no trigger pulses. */
.st-facade-pixel.is-idle .fp-laptop, .st-facade-pixel.is-idle .fp-lap { opacity: 1; }
.st-facade-pixel.is-idle :is(.ss-rec, .ss-rec__playing) { opacity: 0; }
.st-facade-pixel.is-idle :is(.fp-bms, .fp-in) { --c: #d9d9d9; --ss-live: 0; }
.st-facade-pixel.is-idle .fp-bms__box { stroke: #2f2f2f; }
.st-facade-pixel.is-idle .fp-wave { animation: none; opacity: 0; }
.st-facade-pixel.is-idle .fp-press { animation: none; fill: #bfbfbf; }
.st-facade-pixel.is-idle .fp-px { animation-delay: calc(var(--r) * .1s - var(--p) * .03s); }