/* "A building facade" stage (stage-facade.svg): a typical system, not a named project. One
   S-PLAY SP1-1 on Ethernet to PoE network switches, a STORM 10 on every floor, RGBW DMX pixel
   dots under each floor's balconies. A building management system, a button and a motion
   sensor trigger it; a laptop builds the show.
   Chapters: 0 the kit (beats: S-PLAY, switches, STORM 10s, tower + dots, laptop + BMS +
   inputs), 1 build the show, 2 the show runs (laptop gone), 3 on a schedule (the clock grows,
   the tower changes look by time of day), 4 triggers from the building (loops).
   The dot colours are the show's own light, not UI colours.
   Every selector is scoped to the root class .st-facade. Sibling of small.css and landmark.css. */

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

.st-facade .fc-bldg { fill: #f4f4f4; stroke: #d9d9d9; stroke-width: 1.5; }
.st-facade .fc-more path { fill: none; stroke: #bfbfbf; stroke-width: 1.5; stroke-dasharray: 5 6; }
.st-facade .fc-floor, .st-facade .fc-ground { fill: none; stroke: #d9d9d9; stroke-width: 1.5; }
.st-facade .fc-win { fill: #e6e6e6; }
.st-facade .fc-rail { fill: #fff; fill-opacity: .7; stroke: #cfcfcf; stroke-width: 1.2; }
.st-facade .fc-slab { fill: #bfbfbf; }
.st-facade .fc-dot { fill: #8a8a8a; transition: fill .6s var(--eds-ease); }

.st-facade .fc-bms__box { fill: #fff; stroke: #2f2f2f; stroke-width: 2; transition: stroke .4s var(--eds-ease); }
.st-facade .fc-bms__icon { fill: none; stroke: #2f2f2f; stroke-width: 2; stroke-linejoin: round; }
.st-facade .fc-clock circle { fill: #fff; stroke: #2f2f2f; }
.st-facade .fc-clock line { stroke: #2f2f2f; }
.st-facade .fc-clock__face { transform: scale(1); transition: transform .6s var(--eds-ease); }

/* Power injection: a small DC supply between each floor's balconies, plus its key. Light grey
   so it reads as a note on the run, not a second system. */
.st-facade .fc-inj__box { fill: #fff; stroke: #8a8a8a; stroke-width: 1.5; }
.st-facade .fc-inj__bolt { fill: #f5b94a; }
.st-facade .fc-inj__w { fill: none; stroke: #8a8a8a; stroke-width: 1.5; stroke-linejoin: round; }
.st-facade .fc-lbl--note { font-weight: 600; fill: #4c4c4c; }

/* Time of day (chapter 3 only): sun, sunset, moon, in step with the tower's looks. */
.st-facade .fc-sky { opacity: 0; transition: opacity .4s var(--eds-ease); }
.st-facade .fc-sky > * { opacity: 0; }
.st-facade .fc-sky__disc { fill: #f5b94a; }
.st-facade .fc-sky__disc--set { fill: #f08a3c; }
.st-facade .fc-sky__ray, .st-facade .fc-sky__hz { fill: none; stroke: #f5b94a; stroke-width: 2.5; stroke-linecap: round; }
.st-facade .fc-sky__hz { stroke: #8a8a8a; stroke-width: 2; }
.st-facade .fc-sky__moon { fill: #4c4c4c; }

.st-facade .fc-ring { fill: #fff; stroke: #2f2f2f; stroke-width: 2.5; }
.st-facade .fc-press { fill: #bfbfbf; transition: fill .3s var(--eds-ease); }
.st-facade .fc-sensor__plate { fill: #4c4c4c; }
.st-facade .fc-sensor__dome { fill: #fff; stroke: #2f2f2f; stroke-width: 2.5; }
.st-facade .fc-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 .fc-browser { opacity: 0; transition: opacity .5s var(--eds-ease); }
.st-facade .fc-browser__bar { fill: #e3e3e3; }
.st-facade .fc-browser__dot { fill: #bfbfbf; }
.st-facade .fc-browser__url { fill: #fff; }
.st-facade .fc-browser__lane { fill: #f4f6f7; stroke: #d9d9d9; stroke-width: 1; }
.st-facade .fc-browser__tile { fill: #e6f6fc; stroke: #0ea5df; stroke-width: 1; }
.st-facade .fc-cue { fill: #0ea5df; opacity: 0; }

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

/* ---- 0: THE KIT. Each group lands on its beat. ---- */
.st-facade[data-chapter="0"] .ss-part { opacity: 0; transform: translateY(12px); }
.st-facade[data-chapter="0"][data-beat="0"] .fc-splay,
.st-facade[data-chapter="0"][data-beat="1"] :is(.fc-splay, .fc-net),
.st-facade[data-chapter="0"][data-beat="2"] :is(.fc-splay, .fc-net, .fc-storms),
.st-facade[data-chapter="0"][data-beat="3"] :is(.fc-splay, .fc-net, .fc-storms, .fc-tower),
.st-facade[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[data-chapter="0"] .fc-lbl { fill: #8a8a8a; }
.st-facade[data-chapter="0"][data-beat="0"] .fc-splay .fc-lbl,
.st-facade[data-chapter="0"][data-beat="1"] .fc-net .fc-lbl,
.st-facade[data-chapter="0"][data-beat="2"] .fc-storms .fc-lbl,
.st-facade[data-chapter="0"][data-beat="3"] .fc-tower .fc-lbl,
.st-facade[data-chapter="0"][data-beat="4"] :is(.fc-laptop, .fc-bmsg, .fc-inputs) .fc-lbl { fill: #000; }
/* Each landing group's own runs show their dot once, so what it adds reads clearly. */
.st-facade[data-chapter="0"][data-beat="1"] .fc-up,
.st-facade[data-chapter="0"][data-beat="2"] .fc-st,
.st-facade[data-chapter="0"][data-beat="3"] .fc-dmx,
.st-facade[data-chapter="0"][data-beat="4"] :is(.fc-lap, .fc-bms) { --c: #0ea5df; --ss-live: 1; }
.st-facade[data-chapter="0"][data-beat="4"] .fc-in { --c: #2f2f2f; --ss-live: 1; }
.st-facade[data-chapter="0"][data-beat="3"] .fc-dot { 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[data-chapter="1"] .ss-laptop__screen { fill: #fff; }
.st-facade[data-chapter="1"] .fc-browser { opacity: 1; }
.st-facade[data-chapter="1"] .fc-lap { --c: #0ea5df; --ss-live: 1; }
.st-facade[data-chapter="1"] .fc-cue { animation: fc-drop 9s var(--eds-ease) both; animation-delay: calc(var(--i) * 1s + .5s); }
.st-facade[data-chapter="1"] .ss-rec { opacity: 1; transition-delay: 5.2s; }
.st-facade[data-chapter="1"] .ss-rec__on { opacity: 1; animation: ss-rec 1.2s ease-in-out 5.2s infinite; }
@keyframes fc-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 switches to every STORM 10 live, then
   the floors light up in turn, top to bottom. The clock: it runs on a schedule. ---- */
.st-facade:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) .fc-laptop { opacity: .18; }
.st-facade:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) .fc-lap { opacity: 0; }
.st-facade:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) :is(.fc-up, .fc-st, .fc-dmx) { --c: #0ea5df; --ss-live: 1; }
.st-facade:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) :is(.ss-rec, .ss-rec__playing) { opacity: 1; }
.st-facade:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) .fc-clock { opacity: 1; }
.st-facade:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) .fc-hand--m { animation: ss-clock 3s linear infinite; }
.st-facade:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) .fc-hand--h { animation: ss-clock 36s linear infinite; }
.st-facade[data-chapter="2"] .fc-dot { animation: fc-look-a 2.4s linear infinite backwards; animation-delay: calc(var(--f) * .45s + var(--x) * .05s + .6s); }
/* Before its floor's turn (the delay), the 0% frame holds: unlit grey. */
@keyframes fc-look-a { 0% { fill: #8a8a8a; } 1%, 99% { fill: #ffc861; } 50% { fill: #0ea5df; } 100% { fill: #ffc861; } }

/* ---- 3: ON A SCHEDULE. The clock grows and runs fast through a day; the sky beside it goes
   sun, sunset, moon, and the whole tower changes look with it. ---- */
.st-facade[data-chapter="3"] .fc-clock__face { transform: scale(1.9); }
.st-facade[data-chapter="3"] .fc-hand--m { animation-duration: 1.5s; }
.st-facade[data-chapter="3"] .fc-hand--h { animation-duration: 18s; }
.st-facade[data-chapter="3"] .fc-sky { opacity: 1; }
.st-facade[data-chapter="3"] .fc-sky__sun { animation: fc-sky-1 9s linear infinite; }
.st-facade[data-chapter="3"] .fc-sky__set { animation: fc-sky-2 9s linear infinite; }
.st-facade[data-chapter="3"] .fc-sky__moon { animation: fc-sky-3 9s linear infinite; }
.st-facade[data-chapter="3"] .fc-dot { animation: fc-look-day 9s linear infinite; animation-delay: calc(var(--f) * .08s); }
@keyframes fc-sky-1 { 0%, 30% { opacity: 1; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fc-sky-2 { 0%, 30% { opacity: 0; } 36%, 63% { opacity: 1; } 69%, 100% { opacity: 0; } }
@keyframes fc-sky-3 { 0%, 63% { opacity: 0; } 69%, 94% { opacity: 1; } 100% { opacity: 0; } }
/* Day: a soft warm white. Sunset: orange. Night: blue and violet. */
@keyframes fc-look-day { 0%, 30% { fill: #ffd38a; } 36%, 63% { fill: #f08a3c; } 69%, 80% { fill: #0ea5df; } 87%, 94% { fill: #8e5cf2; } 100% { fill: #ffd38a; } }

/* ---- 4: 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 tower changes to a new look. ---- */
.st-facade[data-chapter="4"] .fc-bms { --c: #0ea5df; --ss-live: 1; }
.st-facade[data-chapter="4"] .fc-bms__box { stroke: #0ea5df; }
.st-facade[data-chapter="4"] .fc-in { --c: #2f2f2f; --ss-live: 1; }
.st-facade[data-chapter="4"] .fc-in .ss-pulse { animation-direction: reverse; }
.st-facade[data-chapter="4"] .fc-wave { animation: fc-wave 1.8s ease-out infinite; animation-delay: calc(var(--i) * .3s); }
.st-facade[data-chapter="4"] .fc-press { fill: #0ea5df; animation: fc-press 1.8s ease-in-out infinite; }
.st-facade[data-chapter="4"] .fc-dot { animation: fc-look-b 3s linear infinite backwards; animation-delay: calc(2.4s + var(--f) * .12s - var(--x) * .06s); }
@keyframes fc-look-b { 0% { fill: #ffc861; } 1%, 99% { fill: #f5b94a; } 50% { fill: #8e5cf2; } 100% { fill: #f5b94a; } }
@keyframes fc-wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fc-press { 0%, 100% { r: 13px; } 50% { r: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .st-facade[data-chapter="1"] .fc-cue { opacity: 1; }
  .st-facade[data-chapter="2"] .fc-dot { fill: #ffc861; }
  .st-facade[data-chapter="3"] .fc-dot { fill: #f5b94a; }
  .st-facade[data-chapter="3"] .fc-sky__set { opacity: 1; }
  .st-facade[data-chapter="4"] .fc-dot { fill: #f5b94a; }
  .st-facade[data-chapter="4"] .fc-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 tower lit in
   its look, no PLAYING label and no trigger pulses. */
.st-facade.is-idle .fc-laptop, .st-facade.is-idle .fc-lap { opacity: 1; }
.st-facade.is-idle :is(.ss-rec, .ss-rec__playing) { opacity: 0; }
.st-facade.is-idle :is(.fc-bms, .fc-in) { --c: #d9d9d9; --ss-live: 0; }
.st-facade.is-idle .fc-bms__box { stroke: #2f2f2f; }
.st-facade.is-idle .fc-wave { animation: none; opacity: 0; }
.st-facade.is-idle .fc-press { animation: none; fill: #bfbfbf; }
.st-facade.is-idle .fc-sky { opacity: 0; }
.st-facade.is-idle .fc-clock__face { transform: none; }
.st-facade.is-idle .fc-dot { animation-delay: calc(var(--f) * .12s - var(--x) * .06s); }