/* Daewangam Park Footbridge stage (stage-daewangam.svg), an exact copy of the project's own
   system diagram: schematic on top (drawn in the diagram's pixels, scaled 1.4x in .dw-sch;
   its labels are scaled back so their sizes here are stage px), the night photo below, and
   three big arrows from the photo's lights up to the fixture rows.
   Chapters: 0 the kit (beats: OCTO, DIN Ethergate, DIN RDS4, switch, ELM, S-PLAY + buttons,
   4G LTE router), 1 the show runs, 2 a passer-by presses a button, 3 control from Seoul (loops).
   The amber, warm white and blue on the fixtures are the bridge's own light, not UI colours.
   Every selector is scoped to the root class .st-daewangam. */

/* ---- the drawing, in the diagram's style ---- */
.st-daewangam .dw-lbl { font-size: 15px; font-weight: 700; fill: #2f2f2f; letter-spacing: 0; transition: fill .4s var(--eds-ease); }
.st-daewangam .dw-lbl--sm { font-size: 13px; font-weight: 600; fill: #4c4c4c; }
.st-daewangam .dw-call { font-size: 22px; font-weight: 700; font-style: italic; fill: #0ea5df; letter-spacing: 0; }
.st-daewangam .dw-dev { fill: none; stroke: #2f2f2f; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.st-daewangam :is(.dw-dev--fill, .dw-dev--dot) { fill: #2f2f2f; stroke: none; }
.st-daewangam .dw-globe :is(circle, ellipse, path) { fill: none; stroke: #0ea5df; stroke-width: 2.6; }
.st-daewangam .dw-box { fill: #fff; stroke: #2f2f2f; stroke-width: 2; }
.st-daewangam :is(.dw-base, .dw-port) { fill: #2f2f2f; }
.st-daewangam .dw-jack { fill: none; stroke: #2f2f2f; stroke-width: 1.4; }
.st-daewangam .dw-x { fill: none; stroke: #2f2f2f; stroke-width: 1.3; }
.st-daewangam .dw-ring { fill: #fff; stroke: #2f2f2f; stroke-width: 2; }
.st-daewangam .dw-press { fill: #bfbfbf; transition: fill .4s var(--eds-ease); }
.st-daewangam .dw-fx { fill: #fff; stroke: #6b6b6b; stroke-width: 1; }

/* Cables: each group carries its colour (--w) and liveness (--ss-live, the engine's dot).
   Grey while the kit lands; the diagram's own colours (blue network, black data) from the
   show on. A dot travels only on the cables the current chapter is about. */
.st-daewangam .dw-w { --w: #cfd6db; transition: opacity .5s var(--eds-ease); }
.st-daewangam .dw-w--dmx { --w: #c9c9c9; }
.st-daewangam .dw-sch :is(.ss-net, .ss-dmx) { stroke: var(--w); stroke-width: 1.6; transition: stroke .5s var(--eds-ease); }
.st-daewangam .dw-sch .ss-pulse { stroke-width: 4.6; }
.st-daewangam .dw-hd { fill: var(--w); transition: fill .5s var(--eds-ease); }
.st-daewangam .dw-brk { fill: none; stroke: var(--w); stroke-width: 1.6; stroke-linecap: round; }
.st-daewangam .dw-brk-bg { fill: none; stroke: #fff; stroke-width: 6; }
.st-daewangam .dw-more > path:not(.ss-pulse) { stroke-dasharray: 2.6 2.6; }
.st-daewangam .dw-more .ss-pulse { display: none; }
.st-daewangam:not([data-chapter="0"]) .dw-w--net { --w: #0ea5df; }
.st-daewangam:not([data-chapter="0"]) .dw-w--dmx { --w: #2f2f2f; }

/* The photo: dark until ELM starts the show, then lit. */
.st-daewangam .dw-frame { fill: none; stroke: #d9d9d9; stroke-width: 1.5; }
.st-daewangam .dw-shot { filter: brightness(.3) saturate(.2); transition: filter 1s var(--eds-ease); }
.st-daewangam:not([data-chapter="0"]) .dw-shot { filter: none; }

/* The big arrows: ENTTEC blue (the diagram's are teal), drawn in, head last. Nested like
   the original: point lights innermost, RGBW bars outermost. */
.st-daewangam .dw-big__line { fill: none; stroke: #0ea5df; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s var(--eds-ease); }
.st-daewangam .dw-big__head { fill: #0ea5df; opacity: 0; transition: opacity .3s var(--eds-ease) 1.1s; }
.st-daewangam .dw-big--b .dw-big__line { transition-delay: .25s; }
.st-daewangam .dw-big--b .dw-big__head { transition-delay: 1.35s; }
.st-daewangam .dw-big--a .dw-big__line { transition-delay: .5s; }
.st-daewangam .dw-big--a .dw-big__head { transition-delay: 1.6s; }
.st-daewangam .dw-big--seoul .dw-big__line { transition-delay: .3s; }
.st-daewangam .dw-big--seoul .dw-big__head { transition-delay: 1.4s; }
.st-daewangam:not([data-chapter="0"]) :is(.dw-big--a, .dw-big--b, .dw-big--c) .dw-big__line,
.st-daewangam[data-chapter="3"] .dw-big--seoul .dw-big__line { stroke-dashoffset: 0; }
.st-daewangam:not([data-chapter="0"]) :is(.dw-big--a, .dw-big--b, .dw-big--c) .dw-big__head,
.st-daewangam[data-chapter="3"] .dw-big--seoul .dw-big__head { opacity: 1; }
.st-daewangam .dw-mark { fill: none; stroke: #fff; stroke-width: 3; opacity: 0; transition: opacity .4s var(--eds-ease); }
.st-daewangam:not([data-chapter="0"]) .dw-mark { opacity: 1; animation: dw-ping 2.4s ease-in-out infinite; }
@keyframes dw-ping { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }

/* ---- 0: THE KIT. Each part lands on its beat; the remote side waits for chapter 3. ---- */
.st-daewangam[data-chapter="0"] .ss-part { opacity: 0; transform: translateY(10px); }
.st-daewangam:not([data-chapter="3"]) :is(.dw-devices, .dw-globe, .dw-web, .dw-seoul) { opacity: 0; }
.st-daewangam[data-chapter="0"] .dw-w { opacity: 0; }
.st-daewangam[data-chapter="0"][data-beat="0"] .dw-octo,
.st-daewangam[data-chapter="0"][data-beat="1"] :is(.dw-octo, .dw-gate, .dw-pts),
.st-daewangam[data-chapter="0"][data-beat="2"] :is(.dw-octo, .dw-gate, .dw-pts, .dw-rds4),
.st-daewangam[data-chapter="0"][data-beat="3"] :is(.dw-octo, .dw-gate, .dw-pts, .dw-rds4, .dw-switch),
.st-daewangam[data-chapter="0"][data-beat="4"] :is(.dw-octo, .dw-gate, .dw-pts, .dw-rds4, .dw-switch, .dw-laptop),
.st-daewangam[data-chapter="0"][data-beat="5"] :is(.dw-octo, .dw-gate, .dw-pts, .dw-rds4, .dw-switch, .dw-laptop, .dw-splay, .dw-button),
.st-daewangam[data-chapter="0"][data-beat="6"] .ss-part:not(.dw-devices, .dw-globe, .dw-seoul) { opacity: 1; transform: none; }
.st-daewangam[data-chapter="0"][data-beat] :is(.dw-w--pix-a, .dw-w--pix-b),
.st-daewangam[data-chapter="0"]:not([data-beat="0"]) .dw-w--pix-c,
.st-daewangam[data-chapter="0"]:is([data-beat="3"], [data-beat="4"], [data-beat="5"], [data-beat="6"]) :is(.dw-w--a, .dw-w--b, .dw-w--c),
.st-daewangam[data-chapter="0"]:is([data-beat="4"], [data-beat="5"], [data-beat="6"]) .dw-w--elm,
.st-daewangam[data-chapter="0"]:is([data-beat="5"], [data-beat="6"]) :is(.dw-w--splay, .dw-w--btn),
.st-daewangam[data-chapter="0"][data-beat="6"] .dw-w--router { opacity: 1; }
/* While the kit lands, names are grey and the part a beat is about gets its name in black. */
.st-daewangam[data-chapter="0"] .dw-lbl { fill: #8a8a8a; }
.st-daewangam[data-chapter="0"][data-beat="0"] .dw-octo .dw-lbl,
.st-daewangam[data-chapter="0"][data-beat="1"] .dw-gate .dw-lbl,
.st-daewangam[data-chapter="0"][data-beat="2"] .dw-rds4 .dw-lbl,
.st-daewangam[data-chapter="0"][data-beat="4"] .dw-laptop .dw-lbl,
.st-daewangam[data-chapter="0"][data-beat="5"] :is(.dw-splay, .dw-button) .dw-lbl,
.st-daewangam[data-chapter="0"][data-beat="6"] .dw-router .dw-lbl { fill: #000; }
/* The laptop wakes to ELM (the classic mark, dark on a white screen) from its beat on. */
.st-daewangam[data-chapter="0"]:is([data-beat="4"], [data-beat="5"], [data-beat="6"]) .ss-laptop__screen,
.st-daewangam:not([data-chapter="0"]) .ss-laptop__screen { fill: #fff; }
.st-daewangam[data-chapter="0"]:is([data-beat="4"], [data-beat="5"], [data-beat="6"]) .ss-laptop__logo,
.st-daewangam:not([data-chapter="0"]) .ss-laptop__logo { opacity: 1; }

/* ---- 1 on: ELM plays. Network live out to every row, data live along every run, and
   each fixture symbol lights in the bridge's own colours. ---- */
.st-daewangam:not([data-chapter="0"]) :is(.dw-w--elm, .dw-w--a, .dw-w--b, .dw-w--c, .dw-w--pix-a, .dw-w--pix-b, .dw-w--pix-c) { --ss-live: 1; }
.st-daewangam:not([data-chapter="0"]) .dw-fx--rgbw { animation: dw-rgbw 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.25s); }
.st-daewangam:not([data-chapter="0"]) .dw-fx--ww { animation: dw-ww 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
.st-daewangam:not([data-chapter="0"]) .dw-fx--pt { animation: dw-pt 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
@keyframes dw-rgbw { 0%, 100% { fill: #0ea5df; } 50% { fill: #9be7ff; } }
@keyframes dw-ww { 0%, 100% { fill: #f5b94a; } 50% { fill: #ffe2a6; } }
@keyframes dw-pt { 0%, 100% { fill: #0ea5df; } 50% { fill: #e6f7ff; } }

/* ---- 2: A BUTTON. The press lights, the trigger runs to the S-PLAY, through the switch
   and back up to ELM, and the show changes. ---- */
.st-daewangam[data-chapter="2"] .dw-press { fill: #0ea5df; animation: dw-press 1.6s ease-in-out infinite; }
.st-daewangam[data-chapter="2"] :is(.dw-w--btn, .dw-w--splay) { --ss-live: 1; }
.st-daewangam[data-chapter="2"] .dw-w--elm .ss-pulse { animation-direction: reverse; }
.st-daewangam[data-chapter="2"] .dw-shot { animation: dw-scene 9s ease-in-out both; }
@keyframes dw-press { 0%, 100% { r: 5; } 50% { r: 7; } }
@keyframes dw-scene { 0%, 44% { filter: none; } 50% { filter: brightness(1.6) saturate(1.3); } 60%, 100% { filter: none; } }

/* ---- 3: SEOUL. The devices and the internet appear, the web leg goes live through the
   4G LTE router, and the callout arrow draws in. ---- */
.st-daewangam[data-chapter="3"] :is(.dw-devices, .dw-globe, .dw-seoul) { opacity: 1; transform: none; }
.st-daewangam[data-chapter="3"] .dw-web { opacity: 1; }
.st-daewangam[data-chapter="3"] :is(.dw-w--web1, .dw-w--web2, .dw-w--router) { --ss-live: 1; }

@media (prefers-reduced-motion: reduce) {
  .st-daewangam:not([data-chapter="0"]) :is(.dw-fx--rgbw, .dw-fx--pt) { fill: #0ea5df; }
  .st-daewangam:not([data-chapter="0"]) .dw-fx--ww { fill: #f5b94a; }
  .st-daewangam[data-chapter="2"] .dw-press { fill: #0ea5df; }
}