/* "A single sign or feature" stage (stage-small.svg): an illustrative example, not a real
   project. One S-PLAY Mini on a DIN rail with its supply, one DMX universe daisy-chained to
   four LED wall washers lighting a sign, a push button and a motion sensor on its inputs,
   its relay switching other equipment, a laptop on Ethernet for setup.
   Chapters: 0 the kit (beats: S-PLAY + supply, fixtures + sign, inputs, relay, laptop),
   1 build the show in a browser, 2 runs on its own (laptop gone), 3 someone walks up (loops).
   The warm white and the colour look on the fixtures are the sign's own light, not UI colours.
   Every selector is scoped to the root class .st-small. */

/* ---- the drawing ---- */
.st-small .sm-lbl { font-size: 15px; font-weight: 700; fill: #2f2f2f; letter-spacing: 0; transition: fill .4s var(--eds-ease); }
.st-small .sm-rail__bar { fill: #d4d8db; stroke: #b5babd; stroke-width: 1; }
.st-small .sm-rail__slot { fill: #f4f6f7; }
.st-small .sm-psu__box { fill: #f7f7f7; stroke: #4c4c4c; stroke-width: 2; }
.st-small .sm-psu__term { fill: #1fb14b; }
.st-small .sm-psu__fins { fill: none; stroke: #d9d9d9; stroke-width: 2; stroke-linecap: round; }
.st-small .sm-psu__led { fill: #bfbfbf; transition: fill .4s var(--eds-ease); }

.st-small .sm-wall { fill: #f4f4f4; stroke: #d9d9d9; stroke-width: 1.5; }
.st-small .sm-panel { fill: #e6e6e6; stroke: #cfcfcf; stroke-width: 1.5; transition: fill .8s var(--eds-ease); }
.st-small .sm-glyph { fill: #cfcfcf; transition: fill .8s var(--eds-ease); }
.st-small .sm-beam { --b: #ffd9a0; fill: var(--b); opacity: 0; transition: opacity .9s var(--eds-ease), fill .8s var(--eds-ease); }
.st-small .sm-fx__body { fill: #333; }
.st-small .sm-fx__lens { fill: #8a8a8a; transition: fill .8s var(--eds-ease); }
.st-small .sm-fx__foot { fill: none; stroke: #4c4c4c; stroke-width: 3; }

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

.st-small .sm-term { fill: #fff; stroke: #2f2f2f; stroke-width: 2; }
.st-small .sm-lever { fill: none; stroke: #2f2f2f; stroke-width: 2.5; stroke-linecap: round; transform-origin: 565px 560px; transform: rotate(0deg); transition: transform .35s var(--eds-ease); }
.st-small .sm-equip__box { fill: #fff; stroke: #2f2f2f; stroke-width: 2; }
.st-small .sm-equip__vent { fill: none; stroke: #bfbfbf; stroke-width: 2; stroke-linecap: round; }
.st-small .sm-equip__term { fill: #1fb14b; }
.st-small .sm-equip__led { fill: #d9d9d9; transition: fill .3s var(--eds-ease); }

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

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

/* ---- 0: THE KIT. Each group lands on its beat. ---- */
.st-small[data-chapter="0"] .ss-part { opacity: 0; transform: translateY(12px); }
.st-small[data-chapter="0"][data-beat="0"] .sm-splay,
.st-small[data-chapter="0"][data-beat="1"] :is(.sm-splay, .sm-fxg),
.st-small[data-chapter="0"][data-beat="2"] :is(.sm-splay, .sm-fxg, .sm-inputs),
.st-small[data-chapter="0"][data-beat="3"] :is(.sm-splay, .sm-fxg, .sm-inputs, .sm-relay),
.st-small[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-small[data-chapter="0"] .sm-lbl { fill: #8a8a8a; }
.st-small[data-chapter="0"][data-beat="0"] .sm-splay .sm-lbl,
.st-small[data-chapter="0"][data-beat="1"] .sm-fxg .sm-lbl,
.st-small[data-chapter="0"][data-beat="2"] .sm-inputs .sm-lbl,
.st-small[data-chapter="0"][data-beat="3"] .sm-relay .sm-lbl,
.st-small[data-chapter="0"][data-beat="4"] .sm-laptop .sm-lbl { fill: #000; }
/* Each landing group's own runs show their dot once, so what it adds reads clearly. */
.st-small[data-chapter="0"][data-beat="0"] .sm-c--pwr,
.st-small[data-chapter="0"][data-beat="2"] .sm-in,
.st-small[data-chapter="0"][data-beat="3"] .sm-rly { --ss-live: 1; }
.st-small[data-chapter="0"][data-beat="1"] .sm-dmx,
.st-small[data-chapter="0"][data-beat="4"] .sm-eth { --c: #0ea5df; --ss-live: 1; }
/* Power on: the supply's LED from the first beat. */
.st-small .sm-psu__led { fill: #1fb14b; }

/* ---- 1: BUILD THE SHOW. Ethernet live, the browser open, cues dropping into the lane. ---- */
.st-small[data-chapter="0"][data-beat="4"] .ss-laptop__screen,
.st-small[data-chapter="1"] .ss-laptop__screen { fill: #fff; }
.st-small[data-chapter="0"][data-beat="4"] .sm-browser,
.st-small[data-chapter="1"] .sm-browser { opacity: 1; }
.st-small[data-chapter="1"] .sm-eth { --c: #0ea5df; --ss-live: 1; }
.st-small[data-chapter="1"] .sm-cue { animation: sm-drop 9s var(--eds-ease) both; animation-delay: calc(var(--i) * 1.4s + .6s); }
@keyframes sm-drop {
  0% { opacity: 0; transform: translateY(-30px); }
  12% { opacity: 1; transform: translateY(-30px); }
  24%, 100% { opacity: 1; transform: none; }
}

/* ---- 2 on: the laptop is gone, DMX is live and the sign is lit. ---- */
.st-small:is([data-chapter="2"], [data-chapter="3"]) .sm-laptop { opacity: .18; }
.st-small:is([data-chapter="2"], [data-chapter="3"]) .sm-eth { opacity: 0; }
.st-small:is([data-chapter="2"], [data-chapter="3"]) .sm-dmx { --c: #0ea5df; --ss-live: 1; }
.st-small:is([data-chapter="2"], [data-chapter="3"]) :is(.ss-rec, .ss-rec__playing) { opacity: 1; }
.st-small:is([data-chapter="2"], [data-chapter="3"]) .sm-beam { opacity: .55; }
.st-small:is([data-chapter="2"], [data-chapter="3"]) .sm-fx__lens { fill: var(--l, #ffd9a0); }
.st-small[data-chapter="2"] .sm-panel { fill: #fff3df; }
.st-small[data-chapter="2"] .sm-glyph { fill: #f5b94a; }

/* ---- 3: SOMEONE WALKS UP. The sensor sees them and the button is pressed, both inputs
   live; the fixtures change to a colour look and the relay closes to the equipment. ---- */
.st-small[data-chapter="3"] .sm-in { --c: #2f2f2f; --ss-live: 1; }
.st-small[data-chapter="3"] .sm-in .ss-pulse { animation-direction: reverse; }
.st-small[data-chapter="3"] .sm-wave { animation: sm-wave 1.8s ease-out infinite; animation-delay: calc(var(--i) * .3s); }
.st-small[data-chapter="3"] .sm-press { fill: #0ea5df; animation: sm-press 1.8s ease-in-out infinite; }
.st-small[data-chapter="3"] .sm-lever { transform: rotate(25deg); transition-delay: .8s; }
.st-small[data-chapter="3"] .sm-rly { --c: #2f2f2f; --ss-live: 1; }
.st-small[data-chapter="3"] .sm-equip__led { fill: #1fb14b; transition-delay: 1s; }
.st-small[data-chapter="3"] .sm-beam { animation: sm-look 6s linear infinite; animation-delay: calc(var(--i) * -.5s); }
.st-small[data-chapter="3"] .sm-fx__lens { animation: sm-lens 6s linear infinite; animation-delay: calc(var(--i) * -.5s); }
.st-small[data-chapter="3"] .sm-panel { fill: #eaf7fd; }
.st-small[data-chapter="3"] .sm-glyph { animation: sm-glyph 6s linear infinite; animation-delay: calc(var(--i) * -.5s); }
@keyframes sm-wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sm-press { 0%, 100% { r: 13px; } 50% { r: 16px; } }
@keyframes sm-look { 0%, 100% { fill: #0ea5df; } 33% { fill: #8e5cf2; } 66% { fill: #2fd3c4; } }
@keyframes sm-lens { 0%, 100% { fill: #0ea5df; } 33% { fill: #8e5cf2; } 66% { fill: #2fd3c4; } }
@keyframes sm-glyph { 0%, 100% { fill: #0ea5df; } 33% { fill: #8e5cf2; } 66% { fill: #2fd3c4; } }

@media (prefers-reduced-motion: reduce) {
  .st-small[data-chapter="1"] .sm-cue { opacity: 1; }
  .st-small[data-chapter="3"] :is(.sm-beam, .sm-fx__lens, .sm-glyph) { fill: #0ea5df; }
  .st-small[data-chapter="3"] .sm-wave { opacity: 1; }
  .st-small[data-chapter="3"] .sm-press { fill: #0ea5df; }
}

/* 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, no PLAYING label. */
.st-small.is-idle .sm-laptop, .st-small.is-idle .sm-eth { opacity: 1; }
.st-small.is-idle :is(.ss-rec, .ss-rec__playing) { opacity: 0; }