/* CSW-ASEAN TOD Skybridge stage: an exact copy of the project's control diagram, animated.
   Chapters: 0 the kit (beats: ELM, S-PLAYs, switches, STORMs, wall washers, monitoring PC +
   4G router), 1 programmed in ELM, 2 the show runs, 3 on schedule, 4 remote access (loops).
   Network lines are ENTTEC blue when live and grey at rest; DMX lines are the diagram's
   green (fixture-side colour coding), pale at rest. The wall washer tints are the bridge's own
   light (pink, violet, green in the project video), not UI colours. */
.st-csw .ss-name { font-size: 14px; fill: #2f2f2f; font-weight: 600; }
.st-csw .csw-strong { font-weight: 700; }
.st-csw .csw-note { font-weight: 600; fill: #2f2f2f; }

/* The control room: the diagram's light grey dashed group with its big white italic label. */
.st-csw .csw-room__box { fill: #e6e6e6; stroke: #a6a6a6; stroke-width: 1.5; stroke-dasharray: 6 4; }
.st-csw .csw-room__t { fill: #fff; font: italic 700 38px var(--enttec-font-body, sans-serif); letter-spacing: .01em; }

/* Generic kit, drawn like the diagram: dark outlines, white faces. */
.st-csw .csw-dev { fill: #fff; stroke: #4c4c4c; stroke-width: 2.2; stroke-linejoin: round; }
.st-csw .csw-dev__screen, .st-csw .csw-pc__screen { fill: #f2f2f2; stroke: #4c4c4c; stroke-width: 1.2; transition: fill .5s var(--eds-ease); }
.st-csw .csw-key { stroke: #4c4c4c; stroke-width: 1.5; }
.st-csw .csw-globe :is(circle, ellipse, path) { fill: none; stroke: #4c4c4c; stroke-width: 2.4; }
.st-csw .csw-globe circle { fill: #fff; transition: fill .5s var(--eds-ease); }
.st-csw .csw-router__body, .st-csw .csw-switch__body { fill: #fff; stroke: #4c4c4c; stroke-width: 2; }
.st-csw .csw-port { fill: #4c4c4c; }
.st-csw .csw-router__fan { fill: #4c4c4c; }
.st-csw .csw-switch__ico { fill: none; stroke: #4c4c4c; stroke-width: 1.5; }
.st-csw .csw-switch__x { stroke: #4c4c4c; stroke-width: 1.5; }
/* ELM on the laptop: a small pixel map, ELM's look in the diagram's screenshot. */
.st-csw .csw-px { fill: hsl(calc(200 + var(--i) * 9) 70% 52%); opacity: .55; transition: opacity .4s var(--eds-ease); }

/* Cables. Arrowheads follow their cable's colour. */
.st-csw .ss-net, .st-csw .ss-dmx { stroke-width: 2.4; transition: stroke .4s var(--eds-ease), opacity .5s var(--eds-ease); }
.st-csw .ss-pulse { stroke-width: 6.5; }
.st-csw .ss-dmx { stroke: #c9e9d3; }
.st-csw .csw-head { fill: #d9d9d9; transition: fill .4s var(--eds-ease); }
.st-csw [class*="csw-w--dmx"] .csw-head { fill: #c9e9d3; }
.st-csw .csw-w { transition: opacity .5s var(--eds-ease); }
.st-csw .csw-brk-gap { stroke: #fff; stroke-width: 4; }
.st-csw .csw-brk { fill: none; stroke: #4c4c4c; stroke-width: 2; stroke-linecap: round; }
.st-csw .csw-brks { transition: opacity .5s var(--eds-ease); }

/* Wall washer tags: the diagram's pointed labels. */
.st-csw .csw-tag__box { fill: #fff; stroke: #8a8a8a; stroke-width: 1.3; transition: fill .4s var(--eds-ease); }
.st-csw .csw-tag__t { font-size: 12px; font-style: italic; font-weight: 600; }

/* 0: THE KIT. One group per beat; the end-user side and its caption wait for chapter 4. */
.st-csw[data-chapter="0"] .ss-part { opacity: 0; transform: translateY(14px); }
.st-csw:not([data-chapter="4"]) :is(.csw-devices, .csw-globe, .csw-remote-note, .csw-w--web-r, .csw-w--web-d) { opacity: 0; }
.st-csw[data-chapter="0"] :is(.csw-w, .csw-brks) { opacity: 0; }
.st-csw[data-chapter="0"]:not([data-beat="0"]) .csw-room { opacity: 1; }
.st-csw[data-chapter="0"][data-beat="0"] .csw-room { opacity: .35; }
.st-csw .csw-room { transition: opacity .5s var(--eds-ease); }
.st-csw[data-chapter="0"][data-beat="0"] .csw-laptop,
.st-csw[data-chapter="0"][data-beat="1"] :is(.csw-laptop, .csw-splay),
.st-csw[data-chapter="0"][data-beat="2"] :is(.csw-laptop, .csw-splay, .csw-switch),
.st-csw[data-chapter="0"][data-beat="3"] :is(.csw-laptop, .csw-splay, .csw-switch, .csw-storm, .csw-more),
.st-csw[data-chapter="0"][data-beat="4"] :is(.csw-laptop, .csw-splay, .csw-switch, .csw-storm, .csw-more, .csw-washers),
.st-csw[data-chapter="0"][data-beat="5"] :is(.csw-laptop, .csw-splay, .csw-switch, .csw-storm, .csw-more, .csw-washers, .csw-pc, .csw-router) { opacity: 1; transform: none; }
.st-csw[data-chapter="0"]:not([data-beat="0"]) :is(.csw-w--elm-a, .csw-w--elm-b),
.st-csw[data-chapter="0"]:is([data-beat="2"], [data-beat="3"], [data-beat="4"], [data-beat="5"]) :is(.csw-w--splay-a, .csw-w--splay-b, .csw-w--sw-t, .csw-w--sw-b),
.st-csw[data-chapter="0"]:is([data-beat="3"], [data-beat="4"], [data-beat="5"]) :is(.csw-w--storm-t, .csw-w--storm-b, .csw-w--more, .csw-brks),
.st-csw[data-chapter="0"]:is([data-beat="4"], [data-beat="5"]) [class*="csw-w--dmx"],
.st-csw[data-chapter="0"][data-beat="5"] :is(.csw-w--router-pc, .csw-w--pc-sw) { opacity: 1; }

/* 1: PROGRAMMED IN ELM. The laptop's pixel map plays and the two programming lines go live. */
.st-csw[data-chapter="1"] .csw-px { opacity: 1; animation: csw-map 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.06s); }
.st-csw[data-chapter="1"] :is(.csw-w--elm-a, .csw-w--elm-b) { --ss-live: 1; }
.st-csw[data-chapter="1"] :is(.csw-w--elm-a, .csw-w--elm-b) .ss-net { stroke: #0ea5df; }
.st-csw[data-chapter="1"] :is(.csw-w--elm-a, .csw-w--elm-b) .csw-head { fill: #0ea5df; }
@keyframes csw-map { 0%, 100% { fill: #ff4fa3; } 33% { fill: #8f5cff; } 66% { fill: #2ee67a; } }

/* 2 on: THE SHOW RUNS from the S-PLAYs. Network live out through every switch to the STORMs
   and on to more; DMX live green out of every STORM; the wall washers chase. */
.st-csw:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) :is(.csw-w--splay-a, .csw-w--splay-b, .csw-w--sw-t, .csw-w--sw-b, .csw-w--storm-t, .csw-w--storm-b, .csw-w--more) { --ss-live: 1; }
.st-csw:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) :is(.csw-w--splay-a, .csw-w--splay-b, .csw-w--sw-t, .csw-w--sw-b, .csw-w--storm-t, .csw-w--storm-b, .csw-w--more) .ss-net { stroke: #0ea5df; }
.st-csw:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) :is(.csw-w--sw-t, .csw-w--sw-b, .csw-w--more) .csw-head { fill: #0ea5df; }
.st-csw:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) [class*="csw-w--dmx"] { --ss-live: 1; }
.st-csw:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) [class*="csw-w--dmx"] .ss-dmx { stroke: #1fa84f; }
.st-csw:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) [class*="csw-w--dmx"] .csw-head { fill: #1fa84f; }
.st-csw:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) .csw-tag__box { animation: csw-wash 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
@keyframes csw-wash { 0%, 100% { fill: #ffd3e8; } 33% { fill: #e2d5ff; } 66% { fill: #cff5dc; } }

/* 3: ON SCHEDULE. A clock on each S-PLAY, hands turning. */
.st-csw:is([data-chapter="3"], [data-chapter="4"]) .csw-clock { opacity: 1; }
.st-csw .csw-clock circle { fill: #fff; stroke: #2f2f2f; }
.st-csw .csw-clock line { stroke: #2f2f2f; }
.st-csw[data-chapter="3"] .csw-hand--m { animation: ss-clock 3s linear infinite; }
.st-csw[data-chapter="3"] .csw-hand--h { animation: ss-clock 36s linear infinite; }

/* 4: REMOTE ACCESS. The end-user devices, the internet and the 4G router come in, and the
   route the diagram draws (router, monitoring PC, switch) goes live. The PC is not given a
   role beyond its place on that route: the project page does not say what it does. */
.st-csw[data-chapter="4"] :is(.csw-devices, .csw-globe, .csw-remote-note) { opacity: 1; transform: none; }
.st-csw[data-chapter="4"] :is(.csw-w--web-r, .csw-w--web-d, .csw-w--router-pc, .csw-w--pc-sw) { opacity: 1; --ss-live: 1; }
.st-csw[data-chapter="4"] :is(.csw-w--web-r, .csw-w--web-d, .csw-w--router-pc, .csw-w--pc-sw) .ss-net { stroke: #0ea5df; }
.st-csw[data-chapter="4"] :is(.csw-w--web-r, .csw-w--web-d, .csw-w--router-pc, .csw-w--pc-sw) .csw-head { fill: #0ea5df; }
.st-csw[data-chapter="4"] .csw-dev__screen { fill: #0ea5df; }
.st-csw[data-chapter="4"] .csw-globe circle { fill: #e7f6fc; }

@media (prefers-reduced-motion: reduce) {
  .st-csw:is([data-chapter="2"], [data-chapter="3"], [data-chapter="4"]) .csw-tag__box { fill: #e2d5ff; }
  .st-csw .ss-part { transform: none !important; }
}