/* Tasman Bridge stage: the project's own control diagram, redrawn and animated.
   Chapters: 0 the kit (beats: RGBW modules, CVC4, Pixelator Mini, switches, S-Play, ELM),
   1 warm white, 2 colour at will, 3 remote access to the S-Plays, 4 scheduled special-event
   shows (beats: red, pink, blue; loops). The red, green, blue and white wires and the bar
   colours are the fixtures' own RGBW coding, not UI colours. Every blue line is #0ea5df. */
.st-tasman .ts-lbl { font-size: 15px; font-weight: 700; fill: #2f2f2f; transition: fill .3s var(--eds-ease); }

/* Cables: each run is a group carrying its colour as --c, so the line, its travelling dot
   and its arrowhead change together. Network grey at rest, ENTTEC blue once it carries data. */
.st-tasman .ts-c { --c: #d9d9d9; transition: opacity .5s var(--eds-ease); }
.st-tasman .ts-c .ss-net, .st-tasman .ts-c .ss-dmx { stroke: var(--c); transition: stroke .5s var(--eds-ease); }
.st-tasman .ts-head { fill: var(--c); transition: fill .5s var(--eds-ease); }
.st-tasman .ts-c--wr { --c: #e5262a; }
.st-tasman .ts-c--wg { --c: #1fb14b; }
.st-tasman .ts-c--wb { --c: #0ea5df; }
.st-tasman .ts-c--ww { --c: #bdbdbd; }
.st-tasman .ss-dmx { stroke-width: 2.5; }

/* The switch, drawn the diagram's way: white box, dark outline, port grid, crossed arrows. */
.st-tasman .ts-sw__box, .st-tasman .ts-xbox { fill: #fff; stroke: #2f2f2f; stroke-width: 2.5; }
.st-tasman .ts-xbox { stroke-width: 1.5; }
.st-tasman .ts-port { fill: #2f2f2f; }
.st-tasman .ts-xarr { fill: none; stroke: #2f2f2f; stroke-width: 1.5; stroke-linecap: round; }
.st-tasman .ts-brk-bg { stroke: #fff; stroke-width: 8; }
.st-tasman .ts-brk { fill: none; stroke: #0ea5df; stroke-width: 2.5; stroke-linecap: round; }

/* The laptop: a light-grey machine with ELM's classic mark on a white screen once it is on. */
.st-tasman .ss-laptop__lid { fill: #4c4c4c; }
.st-tasman .ss-laptop__base { fill: #bfbfbf; }

/* The Chameleon bars: white with a dark outline, as drawn, until a chapter lights them. */
.st-tasman .ts-fx { fill: #fff; stroke: #4c4c4c; stroke-width: 1.5; transition: fill .8s var(--eds-ease); }

/* S-Play highlight (remote access) and the schedule clock. */
.st-tasman .ts-hl { fill: none; stroke: #0ea5df; stroke-width: 2.5; opacity: 0; transition: opacity .4s var(--eds-ease); }
.st-tasman .ts-clock circle { fill: #fff; }

/* 0: THE KIT. Each group lands on its beat, cables arriving with the group that owns them. */
.st-tasman[data-chapter="0"] .ss-part { opacity: 0; transform: translateY(14px); }
.st-tasman[data-chapter="0"][data-beat="0"] .ts-fxg,
.st-tasman[data-chapter="0"][data-beat="1"] :is(.ts-fxg, .ts-cvc),
.st-tasman[data-chapter="0"][data-beat="2"] :is(.ts-fxg, .ts-cvc, .ts-pix),
.st-tasman[data-chapter="0"][data-beat="3"] :is(.ts-fxg, .ts-cvc, .ts-pix, .ts-swg),
.st-tasman[data-chapter="0"][data-beat="4"] :is(.ts-fxg, .ts-cvc, .ts-pix, .ts-swg, .ts-sp),
.st-tasman[data-chapter="0"][data-beat="5"] .ss-part { opacity: 1; transform: none; }
/* The group that just landed has its names in black, the rest stay dark grey. */
.st-tasman[data-chapter="0"][data-beat="0"] .ts-fxg .ts-lbl,
.st-tasman[data-chapter="0"][data-beat="1"] .ts-cvc .ts-lbl,
.st-tasman[data-chapter="0"][data-beat="2"] .ts-pix .ts-lbl,
.st-tasman[data-chapter="0"][data-beat="4"] .ts-sp .ts-lbl,
.st-tasman[data-chapter="0"][data-beat="5"] .ts-elm .ts-lbl { fill: #000; }
/* Each landing group's own runs show their dot once, so the path it adds reads clearly. */
.st-tasman[data-chapter="0"][data-beat="2"] :is(.ts-c--cvc),
.st-tasman[data-chapter="0"][data-beat="3"] :is(.ts-c--pix, .ts-c--chain),
.st-tasman[data-chapter="0"][data-beat="4"] .ts-c--sp,
.st-tasman[data-chapter="0"][data-beat="5"] .ts-c--elm { --c: #0ea5df; --ss-live: 1; }

/* The laptop wakes to ELM on its beat and stays on from then on. */
.st-tasman[data-chapter="0"][data-beat="5"] .ss-laptop__screen,
.st-tasman:not([data-chapter="0"]) .ss-laptop__screen { fill: #fff; }
.st-tasman[data-chapter="0"][data-beat="5"] .ss-laptop__logo,
.st-tasman:not([data-chapter="0"]) .ss-laptop__logo { opacity: 1; }

/* 1 on: the system is running. Every network run is blue; ELM's link stays blue but quiet. */
.st-tasman:not([data-chapter="0"]) :is(.ts-c--elm, .ts-c--sp, .ts-c--chain, .ts-c--pix, .ts-c--cvc) { --c: #0ea5df; }

/* 1: WARM WHITE. Data flows and only the W channel is live; the bars glow 3000K. */
.st-tasman:is([data-chapter="1"], [data-chapter="3"]) :is(.ts-c--sp, .ts-c--chain, .ts-c--pix, .ts-c--cvc, .ts-c--ww) { --ss-live: 1; }
.st-tasman:is([data-chapter="1"], [data-chapter="3"]) .ts-fx { fill: #ffd9a0; }

/* 2: COLOUR AT WILL. All four channels live and the bars chase through R, G, B and W,
   staggered along the bridge. */
.st-tasman[data-chapter="2"] :is(.ts-c--sp, .ts-c--chain, .ts-c--pix, .ts-c--cvc, .ts-c--wr, .ts-c--wg, .ts-c--wb, .ts-c--ww) { --ss-live: 1; }
.st-tasman[data-chapter="2"] .ts-fx { animation: ts-rgbw 6s linear infinite; animation-delay: calc(var(--i) * -.35s); }
@keyframes ts-rgbw {
  0%, 20% { fill: #e5262a; }
  25%, 45% { fill: #1fb14b; }
  50%, 70% { fill: #0ea5df; }
  75%, 95% { fill: #ffd9a0; }
  100% { fill: #e5262a; }
}

/* 3: REMOTE ACCESS. The S-Plays are outlined and their network runs carry the dot; the
   bridge stays in its everyday warm white (set with chapter 1 above). */
.st-tasman[data-chapter="3"] .ts-hl { opacity: 1; animation: ts-ping 2.4s ease-in-out infinite; }
.st-tasman[data-chapter="3"] :is(.ts-c--pix, .ts-c--cvc, .ts-c--ww) { --ss-live: 0; }
.st-tasman[data-chapter="3"] .ts-sp .ts-lbl { fill: #000; }
@keyframes ts-ping { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }

/* 4: SPECIAL EVENTS (loops). The schedule clock runs; each beat is one event's colour, with
   the channels that make it live. Red is also the no-JS and reduced-motion frame. */
.st-tasman[data-chapter="4"] .ts-clock { opacity: 1; }
.st-tasman[data-chapter="4"] .ts-clock__m { animation: ss-clock 3.5s linear infinite; }
.st-tasman[data-chapter="4"] .ts-clock__h { animation: ss-clock 42s linear infinite; }
.st-tasman[data-chapter="4"] :is(.ts-c--sp, .ts-c--chain, .ts-c--pix, .ts-c--cvc) { --ss-live: 1; }
.st-tasman[data-chapter="4"] .ts-fx { fill: #e5262a; transition-delay: calc(var(--i) * 25ms); }
.st-tasman[data-chapter="4"]:not([data-beat="1"], [data-beat="2"]) .ts-c--wr { --ss-live: 1; }
.st-tasman[data-chapter="4"][data-beat="1"] .ts-fx { fill: #ff6fae; }
.st-tasman[data-chapter="4"][data-beat="1"] :is(.ts-c--wr, .ts-c--wb, .ts-c--ww) { --ss-live: 1; }
.st-tasman[data-chapter="4"][data-beat="2"] .ts-fx { fill: #0ea5df; }
.st-tasman[data-chapter="4"][data-beat="2"] .ts-c--wb { --ss-live: 1; }

@media (prefers-reduced-motion: reduce) {
  .st-tasman .ss-part { transform: none !important; }
  /* Chapter 2 is a chase when moving; as a still frame it shows the four channels side by side. */
  .st-tasman[data-chapter="2"] .ts-fx[style*="--j:0"] { fill: #e5262a; }
  .st-tasman[data-chapter="2"] .ts-fx[style*="--j:1"] { fill: #1fb14b; }
  .st-tasman[data-chapter="2"] .ts-fx[style*="--j:2"] { fill: #0ea5df; }
  .st-tasman[data-chapter="2"] .ts-fx[style*="--j:3"] { fill: #ffd9a0; }
  .st-tasman[data-chapter="3"] .ts-hl { opacity: 1; }
}