/* vrc.dj  Rig: stage hardware as an object - the truss, the chain hoists, the
   hanging LED panels and their seven-segment digits (views/rig.php).
   One owner for the look wherever a rig is drawn: the home page's welcome
   slide (its site counts) and its vrc.dj TV slide (the stage monitor with
   CHANNEL and WATCHING panels), and /tv's LED clock. Loaded as page CSS by
   the pages that draw one. The --rig-* colours are core.css tokens. */

/* ── Welcome rig: the site counts as stage hardware ─────────────────────────
   A box truss spans the bottom of the welcome slide, hung on two chain
   hoists, with one LED panel per count clamped to its bottom chord
   (views/rig.php, drawn for it by partials/welcome_rig.php). Everything is
   literal colour: aluminium,
   black housings, LED light - it is the same object in both themes.

   Construction. The rig (.wr-rig) is ONE moving assembly: chains, motors,
   truss and panels. The chains are children of the rig, so they cannot
   detach from it during the choreography - the earlier version grew the
   chains in place while the truss travelled separately, each from its own
   start, and the two never met. The motors ride on the truss and climb the
   chain (Klettermotoren), so the chain itself hangs still in the world: its
   link pattern scrolls against the rig's travel on the same timeline and
   easing. .wr-asm (truss + panels) can tilt inside the rig while the
   chains stay vertical.

   Choreography, cued by the carousel's slide classes:
     intro (.is-active)   the rig comes down 1.4s with a soft overshoot; the
                          right hoist runs a hair late, so the truss arrives
                          tilted 1.3deg and levels out in the last third,
                          the right chain being that much longer meanwhile.
                          The panels swing after, harder on the late side.
                          Motor lamps light at once; the digits flicker on
                          like a lazy starter ~1.6s in.
     exit  (.is-exiting)  digits off, the rig lifts out in .55s; left pulls
                          first this time. home-carousel.js keeps
                          .is-exiting on the outgoing slide for 700ms.
   It opts out of the [data-hero-el] stagger (never carries the attribute)
   and is hidden while its slide is neither active nor exiting.

   Placement. The rig is the last child of .hero-content, in flow, so it
   hangs a fixed 44px under the buttons and the whole group (headline,
   copy, buttons, rig) is centred in the hero as one block - anchored to
   the slide's floor it drifted 200px away from the text on tall heroes.
   Full-bleed by the margin trick (50% - 50vw), clipped by the slide. Its
   layout height is the truss plus the panels; the chains rise out of it.
   The welcome slide's `safe center` (hero.css) keeps the group top-aligned
   instead of pushing the headline under the nav when a short window cannot
   fit it all. */
.wr-rig {
  --wr-c1: var(--rig-led-violet); --wr-c2: #67e8f9; --wr-c3: #fcd34d;   /* scope colours as LED light */
  --wr-m1: var(--rig-alu-1); --wr-m2: var(--rig-alu-2); --wr-m3: var(--rig-alu-3); --wr-m4: var(--rig-alu-4); --wr-mk: var(--rig-alu-k);  /* aluminium (core.css) */
  --wr-ps: .82;          /* panel scale */
  --wr-boot: .55s;       /* when the digits come on: mid-drop, while the rig is still flying in */
  --wr-drop: 1.4s; --wr-ease: cubic-bezier(.3,.75,.35,1);
  --wr-lift: .55s; --wr-lease: cubic-bezier(.6,0,.85,.4);
  --wr-travel: max(600px, 90vh);   /* how far above its seat the rig starts: clear of the slide on any hero */
  position: relative;
  /* Behind the copy: the chains climb through the headline's lines and on
     narrow heroes the truss meets the buttons. Negative z-index paints the
     rig under every in-flow child of .hero-content (its stacking context,
     z-index 1) while it still sits above the slide backdrop outside it. */
  z-index: -1;
  width: calc(100vw + 48px);
  height: calc(60px + 110px * var(--wr-ps));   /* truss + hanging panels */
  margin: 44px 0 0 calc(50% - 50vw - 24px);
  pointer-events: none;
}
.hero--carousel .hero-slide:not(.is-active):not(.is-exiting) .wr-rig { opacity: 0; }
.wr-asm { position: absolute; inset: 0; transform-origin: calc(12% + 25px) 18px; }
.wr-truss { position: absolute; left: 0; top: 0; display: block; }

/* chains: 9px link pattern, hanging from far above the slide */
.wr-chain {
  position: absolute;
  bottom: calc(100% - 18px);
  width: 9px;
  height: 1200px;
  z-index: 1;
  background:
    radial-gradient(ellipse 2.2px 4.6px at 50% 50%, #e7e7ea 0 20%, #9d9ea6 45%, #5e5f68 70%, transparent 72%) 0 5px / 9px 10px,
    radial-gradient(ellipse 3.6px 5px at 50% 50%, transparent 52%, #d4d4d8 56% 66%, #7a7b83 78% 86%, transparent 88%) 0 0 / 9px 10px;
}
.wr-chain--l { left: calc(12% + 21px); }
.wr-chain--r { right: calc(12% + 21px); }
/* climbing hoist on the top chord: body, chain guide on top, lamp, chain bag */
.wr-motor {
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 34px;
  height: 46px;
  translate: -50% 0;
  z-index: 2;
  border-radius: 5px;
  border: 1px solid #101013;
  background: linear-gradient(90deg, #2a2a31, #3b3b44 30%, #26262d 75%, #1b1b20);
  box-shadow: 0 8px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
}
.wr-motor::before { content: ''; position: absolute; left: 4px; right: 4px; top: 6px; height: 6px; border-radius: 2px; background: repeating-linear-gradient(90deg, #15151a 0 2px, #3a3a42 2px 4px); }
.wr-motor::after  { content: ''; position: absolute; left: 50%; top: -9px; width: 9px; height: 10px; translate: -50% 0; background: #7a7b83; border-radius: 2px 2px 0 0; box-shadow: inset 0 0 0 1px #4c4d56; }
.wr-motor-lamp { position: absolute; right: 5px; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: #2a2a30; }
.wr-motor-bag  { position: absolute; left: -9px; top: 30px; width: 20px; height: 30px; border-radius: 4px 4px 10px 10px; background: radial-gradient(ellipse at 50% 30%, #23232a, #0e0e12 80%); box-shadow: inset 0 -3px 0 rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.5); }
.wr-motor-bag::before { content: ''; position: absolute; left: 3px; right: 3px; top: 3px; height: 2px; background: #5a5a63; border-radius: 1px; }
.wr-motor-tail { position: absolute; left: -4px; top: 22px; width: 9px; height: 18px; rotate: 22deg; background:
    radial-gradient(ellipse 2.2px 4.6px at 50% 50%, #e7e7ea 0 20%, #9d9ea6 45%, #5e5f68 70%, transparent 72%) 0 5px / 9px 10px,
    radial-gradient(ellipse 3.6px 5px at 50% 50%, transparent 52%, #d4d4d8 56% 66%, #7a7b83 78% 86%, transparent 88%) 0 0 / 9px 10px; }

/* panels on the bottom chord */
.wr-units { position: absolute; left: 0; right: 0; top: 50px; display: flex; justify-content: center; gap: 64px; }
.wr-unit {
  position: relative;
  display: block;
  width: 154px;
  height: 118px;
  transform-origin: 50% -6px;
  scale: var(--wr-ps);
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}
.wr-unit--artist    { --wr-c: var(--wr-c1); }
.wr-unit--community { --wr-c: var(--wr-c2); }
.wr-unit--liveset   { --wr-c: var(--wr-c3); }
/* half coupler with wing nut on the chord */
.wr-clamp { position: absolute; left: 50%; top: -14px; width: 24px; height: 20px; translate: -50% 0; border: 4px solid var(--wr-m3); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--wr-mk), 0 1px 2px rgba(0,0,0,.4); }
.wr-clamp::before { content: ''; position: absolute; left: -1px; right: -1px; top: 6px; height: 2px; background: var(--wr-mk); opacity: .6; }
.wr-bolt { position: absolute; left: 50%; top: 6px; width: 6px; height: 12px; translate: -50% 0; background: linear-gradient(90deg, var(--wr-m2), var(--wr-m3)); }
.wr-wing { position: absolute; left: 50%; top: 14px; width: 20px; height: 6px; translate: -50% 0; background: linear-gradient(180deg, var(--wr-m2), var(--wr-m3)); border-radius: 3px; box-shadow: 0 1px 1px rgba(0,0,0,.5); }
.wr-wing::before, .wr-wing::after { content: ''; position: absolute; top: -2px; width: 5px; height: 10px; background: var(--wr-m3); border-radius: 2px; }
.wr-wing::before { left: -3px; rotate: -18deg; }
.wr-wing::after  { right: -3px; rotate: 18deg; }
/* yoke */
.wr-yoke { position: absolute; left: 0; right: 0; top: 20px; height: 40px; border: 5px solid var(--wr-m2); border-bottom: 0; border-radius: 6px 6px 0 0; box-shadow: inset 0 1px 0 var(--wr-m1), 0 2px 3px rgba(0,0,0,.35); }
.wr-piv { position: absolute; top: 26px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--wr-m1), var(--wr-m3) 70%); box-shadow: 0 0 0 1px var(--wr-mk); }
.wr-piv--l { left: -8px; }
.wr-piv--r { right: -8px; }
/* housing */
.wr-box { position: absolute; left: 7px; right: 7px; top: 32px; height: 82px; border-radius: 4px; background: linear-gradient(180deg, var(--rig-case-1), var(--rig-case-2) 60%, var(--rig-case-3)); border: 1.5px solid var(--rig-case-edge); box-shadow: 0 12px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.09); transition: box-shadow .2s; }
.wr-unit:hover .wr-box, .wr-unit:focus-visible .wr-box { box-shadow: 0 12px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 2px color-mix(in srgb, var(--wr-c) 55%, transparent); }
.wr-unit:focus-visible { outline: none; }
.wr-scr { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d0d0d6, #6f707a 65%, #3a3a42); box-shadow: 0 0 0 1px #08070a; }
.wr-scr::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(0deg, transparent 42%, #2a2a30 42% 58%, transparent 58%), linear-gradient(90deg, transparent 42%, #2a2a30 42% 58%, transparent 58%); }
.wr-scr--tl { left: 4px; top: 4px; }  .wr-scr--tr { right: 4px; top: 4px; }
.wr-scr--bl { left: 4px; bottom: 4px; } .wr-scr--br { right: 4px; bottom: 4px; }
.wr-win { position: absolute; left: 9px; right: 9px; top: 8px; height: 48px; border-radius: 3px; background: var(--rig-window); box-shadow: inset 0 2px 6px #000, inset 0 0 0 1px rgba(255,255,255,.05); overflow: hidden; display: flex; align-items: center; justify-content: center; animation: wr-breathe 3.2s ease-in-out infinite alternate; }
.wr-win::after { content: ''; position: absolute; inset: 0; background: linear-gradient(168deg, rgba(255,255,255,.09), transparent 38%); pointer-events: none; }
/* seven-segment display: segments are skewed slabs, lit in the scope colour
   with a glow, unlit a faint ghost so the display reads as hardware even
   before boot. Cells right-aligned, leading blanks hidden. */
.wr-sg { display: flex; gap: 5px; font-size: 30px; }
.wr-dg { position: relative; width: .6em; height: 1em; --t: .13em; skew: -5deg; filter: drop-shadow(0 0 2px var(--wr-c)) drop-shadow(0 0 5px color-mix(in srgb, var(--wr-c) 45%, transparent)); }
.wr-dg--blank { display: none; }
.wr-dg i { position: absolute; background: rgba(255,255,255,.07); }
.wr-dg i.on { background: var(--wr-c); }
.wr-dg .a, .wr-dg .d, .wr-dg .g { left: .09em; right: .09em; height: var(--t); clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%); }
.wr-dg .a { top: 0; }
.wr-dg .d { bottom: 0; }
.wr-dg .g { top: calc(50% - var(--t) / 2); }
.wr-dg .b, .wr-dg .c, .wr-dg .e, .wr-dg .f { width: var(--t); height: .44em; clip-path: polygon(0 9%, 50% 0, 100% 9%, 100% 91%, 50% 100%, 0 91%); }
.wr-dg .b { right: 0; top: .045em; }
.wr-dg .c { right: 0; bottom: .045em; }
.wr-dg .e { left: 0; bottom: .045em; }
.wr-dg .f { left: 0; top: .045em; }
.wr-unit:hover .wr-dg { filter: drop-shadow(0 0 3px var(--wr-c)) drop-shadow(0 0 8px color-mix(in srgb, var(--wr-c) 60%, transparent)); }
/* engraved label; sizes set as longhands - `inherit` is not valid inside the
   font shorthand, and an invalid shorthand left this at body size */
.wr-lbl { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-size: 7px; font-weight: 700; line-height: 1; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.55); text-indent: .28em; white-space: nowrap; }
.wr-sl  { position: absolute; left: 9px; bottom: 9px; width: 4px; height: 4px; border-radius: 50%; background: #2a2a30; }
.wr-tag { position: absolute; right: 8px; bottom: 3px; font-size: 5px; font-weight: 600; line-height: 1; font-family: ui-monospace, Consolas, monospace; font-style: normal; color: rgba(255,255,255,.28); letter-spacing: .05em; }
/* mains cable up to the truss, safety wire round the chord */
.wr-cable { position: absolute; right: -14px; top: -26px; z-index: -1; }
.wr-cable path { stroke: #141118; stroke-width: 3; stroke-linecap: round; }
.wr-safety { position: absolute; left: 26px; top: -2px; }
.wr-safety path { stroke: #cfd0d6; stroke-width: 1.3; }
.wr-safety circle { fill: none; stroke: #cfd0d6; stroke-width: 1.2; }

/* choreography */
@keyframes wr-drop      { 0% { translate: 0 calc(-1 * var(--wr-travel)); } 84% { translate: 0 7px; } 100% { translate: 0 0; } }
@keyframes wr-lift      { to { translate: 0 calc(-1 * var(--wr-travel)); } }
@keyframes wr-chain-pay { 0% { background-position: 0 calc(var(--wr-travel) + 5px), 0 var(--wr-travel); } 84% { background-position: 0 -2px, 0 -7px; } 100% { background-position: 0 5px, 0 0; } }
@keyframes wr-chain-take { to { background-position: 0 calc(var(--wr-travel) + 5px), 0 var(--wr-travel); } }
@keyframes wr-tilt      { 0% { rotate: 0deg; } 55% { rotate: 1.3deg; } 84% { rotate: -.35deg; } 100% { rotate: 0deg; } }
@keyframes wr-chain-late { 0% { translate: 0 0; } 55% { translate: 0 16px; } 84% { translate: 0 -4px; } 100% { translate: 0 0; } }
@keyframes wr-tilt-out  { 0% { rotate: 0deg; } 40% { rotate: -.9deg; } 100% { rotate: -.9deg; } }
@keyframes wr-chain-early { 0% { translate: 0 0; } 40% { translate: 0 -11px; } 100% { translate: 0 -11px; } }
@keyframes wr-sway      { 0% { rotate: 0deg; } 20% { rotate: 3.4deg; } 48% { rotate: -2.1deg; } 74% { rotate: .9deg; } 100% { rotate: 0deg; } }
@keyframes wr-lamp-on   { to { background: #39ff6a; box-shadow: 0 0 4px #39ff6a; } }
@keyframes wr-breathe   { to { filter: brightness(.82); } }
/* boot: a lazy starter, each digit on its own random beat; exit: segments drop
   in a sweep across the cells */
@keyframes wr-flick     { 0%, 11% { background: rgba(255,255,255,.07); } 12%, 19% { background: var(--wr-c); } 20%, 37% { background: rgba(255,255,255,.07); } 38%, 45% { background: var(--wr-c); } 46%, 59% { background: rgba(255,255,255,.07); } 60%, 100% { background: var(--wr-c); } }
@keyframes wr-off       { to { background: rgba(255,255,255,.07); } }
.hero--carousel .hero-slide.is-active .wr-rig        { animation: wr-drop var(--wr-drop) var(--wr-ease) both; }
.hero--carousel .hero-slide.is-active .wr-chain      { animation: wr-chain-pay var(--wr-drop) var(--wr-ease) both; }
.hero--carousel .hero-slide.is-active .wr-chain--r   { animation: wr-chain-pay var(--wr-drop) var(--wr-ease) both, wr-chain-late var(--wr-drop) var(--wr-ease) both; }
.hero--carousel .hero-slide.is-active .wr-asm        { animation: wr-tilt var(--wr-drop) var(--wr-ease) both; }
.hero--carousel .hero-slide.is-active .wr-unit       { animation: wr-sway 1.6s ease-in-out calc(1.1s + var(--i, 0) * .08s) both; }
.hero--carousel .hero-slide.is-active .wr-unit:last-child { animation-duration: 1.9s; }
.hero--carousel .hero-slide.is-active .wr-motor-lamp { animation: wr-lamp-on 1ms step-end .1s both; }
.hero--carousel .hero-slide.is-active .wr-sl         { animation: wr-lamp-on 1ms step-end calc(var(--wr-boot) - .15s) both; }
.hero--carousel .hero-slide.is-active .wr-dg i.on    { animation: wr-flick .6s step-end calc(var(--wr-boot) + var(--r, 0) * 320ms) both; }
.hero--carousel .hero-slide.is-exiting .wr-dg i.on   { animation: wr-off 1ms step-end calc(var(--x, 0) * 30ms) both; }
.hero--carousel .hero-slide.is-exiting .wr-rig       { animation: wr-lift var(--wr-lift) var(--wr-lease) .15s both; }
.hero--carousel .hero-slide.is-exiting .wr-chain     { animation: wr-chain-take var(--wr-lift) var(--wr-lease) .15s both; }
.hero--carousel .hero-slide.is-exiting .wr-chain--r  { animation: wr-chain-take var(--wr-lift) var(--wr-lease) .15s both, wr-chain-early var(--wr-lift) var(--wr-lease) .15s both; }
.hero--carousel .hero-slide.is-exiting .wr-asm       { animation: wr-tilt-out var(--wr-lift) var(--wr-lease) .15s both; }
:root[data-motion="reduce"] .wr-rig, :root[data-motion="reduce"] .wr-rig *,
:root[data-motion="reduce"] .hero--carousel .hero-slide.is-active .wr-rig, :root[data-motion="reduce"] .hero--carousel .hero-slide.is-active .wr-chain, :root[data-motion="reduce"] .hero--carousel .hero-slide.is-active .wr-chain--r,
:root[data-motion="reduce"] .hero--carousel .hero-slide.is-active .wr-asm, :root[data-motion="reduce"] .hero--carousel .hero-slide.is-active .wr-unit, :root[data-motion="reduce"] .hero--carousel .hero-slide.is-active .wr-dg i.on,
:root[data-motion="reduce"] .hero--carousel .hero-slide.is-exiting .wr-rig, :root[data-motion="reduce"] .hero--carousel .hero-slide.is-exiting .wr-chain, :root[data-motion="reduce"] .hero--carousel .hero-slide.is-exiting .wr-chain--r,
:root[data-motion="reduce"] .hero--carousel .hero-slide.is-exiting .wr-asm { animation: none; }
:root[data-motion="reduce"] .hero--carousel .hero-slide.is-active .wr-sl, :root[data-motion="reduce"] .hero--carousel .hero-slide.is-active .wr-motor-lamp { background: #39ff6a; box-shadow: 0 0 4px #39ff6a; }
:root[data-motion="reduce"] .hero--carousel .hero-slide.is-exiting .wr-rig { opacity: 0; transition: opacity .3s; }
/* phones: smaller panels, closer together, the rig a little lower */
@media (max-width: 640px) {
  .wr-rig { --wr-ps: .62; margin-top: 32px; }
  .wr-units { gap: 4px; }
}
@media (max-width: 400px) {
  .wr-rig { --wr-ps: .56; }
}
/* short windows (a 620px-tall desktop, phone landscape): the hero is at its
   440px floor, so the rig sits lower and smaller and the headline gives up
   a size step, or the two-line scenario titles run under the nav */
@media (max-height: 700px) {
  .wr-rig { --wr-ps: .6; margin-top: 24px; }
}
/* a clock's colon (render_seven_segment() with ':'): two lit dots between digits */
.wr-colon { display: flex; flex-direction: column; justify-content: center; gap: .26em; width: .13em; height: 1em; }
.wr-colon i { width: .13em; height: .13em; border-radius: 1px; background: var(--wr-c); }

/* ── Stage monitor: vrc.dj TV's screen (views/tv_monitor.php) ────────────────
   A black housing with screws, the ON AIR tally on its top bezel and an
   engraved tag on its foot, around a 16:9 screen. Hung (.wr-mon--hung) it
   has two clamps and rods for the chord of a rig (the home page's Channel 1
   slide); standing it is /tv's screen. Literal hardware colours: the same
   object in both themes. Nothing is drawn over the picture. */
.wr-mon { position: relative; display: block; --wr-m1: var(--rig-alu-1); --wr-m2: var(--rig-alu-2); --wr-m3: var(--rig-alu-3); --wr-mk: var(--rig-alu-k); }
.wr-mon--hung { padding-top: 24px; transform-origin: 50% -6px; pointer-events: auto; }
.wr-mon-c { top: -14px; translate: 0 0; }
.wr-mon-c--l { left: 16%; }
.wr-mon-c--r { left: auto; right: 16%; }
.wr-mon-rod { position: absolute; top: 4px; width: 6px; height: 22px; background: linear-gradient(90deg, var(--wr-m2), var(--wr-m3)); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.wr-mon-rod--l { left: calc(16% + 9px); }
.wr-mon-rod--r { right: calc(16% + 9px); }
.wr-mon-box { position: relative; display: block; padding: 22px 11px 13px; border-radius: 5px;
  background: linear-gradient(180deg, var(--rig-case-1), var(--rig-case-2) 60%, var(--rig-case-3)); border: 1.5px solid var(--rig-case-edge);
  box-shadow: 0 16px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09); text-shadow: var(--text-shadow-on-dark); }
.wr-mon-box .wr-tag { bottom: 3px; right: 12px; }
.wr-mon-tally { position: absolute; left: 50%; top: 5px; translate: -50% 0; display: flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.45); white-space: nowrap; }
.wr-mon-tally i { width: 7px; height: 7px; border-radius: 50%; background: #3a2a2e; box-shadow: inset 0 1px 1px rgba(255,255,255,.2); }
.wr-mon-tally.is-on { color: #ffd5db; }
.wr-mon-tally.is-on i { background: #ff3b55; }
.wr-mon-screen { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: #000; box-shadow: 0 0 0 3px var(--rig-window); }
.wr-mon-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wr-mon-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(168deg, rgba(255,255,255,.09), transparent 36%); pointer-events: none; }
.wr-mon-elapsed { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.45); }
.wr-mon-elapsed::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: var(--tv-tone, #f43f5e); }
/* nothing on: the test card, muted */
.wr-mon-bars { position: absolute; inset: 0; filter: saturate(.7) brightness(.78);
  background:
    linear-gradient(90deg, #1f2a6b 0 14.28%, #111 14.28% 28.57%, #8a2b8a 28.57% 42.85%, #111 42.85% 57.14%, #1d8a8a 57.14% 71.42%, #111 71.42% 85.71%, #bdbdbd 85.71%) 0 100% / 100% 30% no-repeat,
    linear-gradient(90deg, #bdbdbd 0 14.28%, #bdbd2b 14.28% 28.57%, #2bbdbd 28.57% 42.85%, #2bbd2b 42.85% 57.14%, #bd2bbd 57.14% 71.42%, #bd2b2b 71.42% 85.71%, #2b2bbd 85.71%) 0 0 / 100% 70% no-repeat; }
/* hung in a carousel slide: it swings once after the rig lands */
.hero--carousel .hero-slide.is-active .wr-mon--hung { animation: wr-mon-sway 2.2s ease-in-out 1.15s both; }
@keyframes wr-mon-sway { 0% { rotate: 0deg; } 24% { rotate: 1.4deg; } 52% { rotate: -.8deg; } 78% { rotate: .3deg; } 100% { rotate: 0deg; } }
:root[data-motion="reduce"] .hero--carousel .hero-slide.is-active .wr-mon--hung { animation: none; }