/* War Machine load-and-weld cycle (homepage #machine, war-machine #cycle): the live line drawing straight on the
   block navy (transparent, so it follows --blue in both themes), with the cycle HUD in the four corners. Under 900 px of
   figure width the HUD moves into rows above and below the drawing so it stays legible. The poster is a still of the
   same drawing (light ink on transparent), painted only when the live drawing can't run (.live-still, styles.css).
   .wm-hero (homepage hero) is the same cycle on the page paper: see the end of this file. */
.wm-cycle {
  container: wm / inline-size; position: relative; margin-top: clamp(2rem, 4vw, 3rem);
  /* light inks for the navy in both themes; wm-line.js reads these for the lines, beads and red overlays.
     The red is lifted from the brand red so small HUD text keeps 4.5:1 on either navy */
  --ink: #eaf2ff; --ink-2: var(--block-sub); --red: #ff7266; --line-2: rgba(234, 242, 255, .2);
  color: var(--ink); background-color: transparent; overflow: hidden;
}
.wm-frame { display: grid; grid-template: "a" auto / minmax(0, 1fr); }
.wm-frame > * { grid-area: a; min-width: 0; }
.wm-stage { position: relative; aspect-ratio: 16 / 9; }
.wm-stage img, .wm-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wm-stage img { object-fit: contain; }
.wm-stage canvas { opacity: 0; transition: opacity .6s ease; }
.wm-cycle.is-live .wm-stage canvas { opacity: 1; }
.wm-gl-holder { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.wm-gl-holder canvas { display: block; visibility: hidden; color: var(--ink); }

/* HUD: the site's micro-labels, scaled with the figure */
.wm-hud { display: grid; align-content: start; gap: .45em; margin: 2.2cqi 2.6cqi; pointer-events: none; font-size: clamp(.6rem, .82cqi, .78rem); z-index: 1; }
.wm-cycle .wm-hud .lbl {
  display: flex; gap: .75em; align-items: center; font-size: 1em; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.wm-cycle .wm-hud .lbl b { color: var(--ink); font-weight: 600; }
/* close and turning views run lines under the corners: a halo in the block navy keeps the HUD readable */
.wm-cycle:not([data-wm-view="wide"]) .wm-hud .lbl { text-shadow: 0 0 2px var(--blue), 0 0 5px var(--blue), 0 0 10px var(--blue), 0 0 16px var(--blue); }
.wm-hud-tl { justify-self: start; align-self: start; }
.wm-hud-tr { justify-self: end; align-self: start; justify-items: end; }
.wm-hud-bl { justify-self: start; align-self: end; align-content: end; }
.wm-hud-br { justify-self: end; align-self: end; align-content: end; justify-items: end; }
.wm-hud .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink-2); flex: none; }
.wm-hud .st.on::before { background: var(--red); border-color: var(--red); }
.wm-cycle .wm-hud .st.on b { color: var(--red); }
.wm-hud [hidden] { display: none; }
.wm-cycle .wm-hud .timer { align-items: baseline; }
.wm-cycle .wm-hud .timer b { font-size: 1.9em; letter-spacing: .04em; line-height: 1; min-width: 3.4em; text-align: right; }

/* what the drawing shows beyond the standard cell, under the drawing in the HUD's type */
.wm-cycle .wm-note {
  display: flex; gap: .75em; align-items: center; flex-wrap: wrap; max-width: none; white-space: normal;
  margin: 0 2.6cqi 1.4cqi; padding-top: .7em; border-top: 1px solid var(--line-2);
  font-size: clamp(.6rem, .82cqi, .78rem); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink-2);
}
.wm-cycle .wm-note b { color: var(--ink); font-weight: 600; }

@container wm (max-width: 900px) {
  .wm-frame { grid-template: "tl tr" auto "stage stage" auto "bl br" auto / minmax(0, 1fr) minmax(0, 1fr); gap: .75rem 1rem; padding: 1rem; }
  .wm-stage { grid-area: stage; margin: 0 -1rem; }
  .wm-hud { margin: 0; font-size: .6rem; }
  .wm-hud-tl { grid-area: tl; }
  .wm-hud-tr { grid-area: tr; }
  .wm-hud-bl { grid-area: bl; align-self: start; }
  .wm-hud-br { grid-area: br; align-self: start; }
  .wm-cycle .wm-hud .lbl { flex-wrap: wrap; gap: .1em .75em; white-space: normal; }
  .wm-hud-tr .lbl, .wm-hud-br .lbl { justify-content: flex-end; text-align: right; }
  .wm-cycle .wm-hud .timer b { font-size: 1.6em; min-width: 0; }
  .wm-cycle .wm-note { margin: 0 1rem 1rem; font-size: .6rem; }
}

/* view switcher (war-machine #cycle): a row of HUD-style keys above the figure; the picked one lights its dot red */
.wm-views {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(234, 242, 255, .55); border-bottom: 1px solid rgba(234, 242, 255, .28);
}
.wm-views + .wm-cycle { margin-top: 0; }
.wm-views:has(+ .wm-cycle.is-static) { display: none; }
.wm-views > .lbl { display: flex; align-items: center; padding: 0 1.1rem 0 0; color: var(--block-sub); }
.wm-views button {
  display: inline-flex; align-items: center; gap: .6em; min-height: 2.75rem; padding: .55rem 1rem;
  font: inherit; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; white-space: nowrap;
  color: var(--block-sub); background: transparent; border: 0; border-left: 1px solid rgba(234, 242, 255, .28);
  border-radius: 0; cursor: pointer; transition: color .15s ease, background-color .15s ease;
}
.wm-views button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; flex: none; }
.wm-views button:hover { color: #fff; background: rgba(234, 242, 255, .06); }
.wm-views button[aria-pressed="true"] { color: #fff; background: rgba(234, 242, 255, .1); box-shadow: inset 0 -2px 0 #eaf2ff; }
.wm-views button[aria-pressed="true"]::before { background: #ff7266; border-color: #ff7266; }
.wm-views button:focus-visible { outline: 2px solid #eaf2ff; outline-offset: -4px; }
@media (max-width: 760px) {
  .wm-views > .lbl { flex: 1 0 100%; padding: .6rem 0; border-bottom: 1px solid rgba(234, 242, 255, .28); }
  .wm-views button { flex: 1 1 25%; justify-content: center; padding: .55rem .5rem; border-left: 0; border-right: 1px solid rgba(234, 242, 255, .28); }
  .wm-views button:nth-of-type(4n) { border-right: 0; }
  .wm-views button:nth-of-type(n + 5) { border-top: 1px solid rgba(234, 242, 255, .28); }
}

/* homepage hero: the cycle framed close on the whole cell (view "hero"), on the page paper with the page inks (so the
   drawing follows the theme like the other hero drawings), no HUD and no caption. The figure spans
   the hero from the ticket-head rule down to the yellow band; the still is dark ink, flipped by --draw-filter. */
.wm-cycle.wm-hero {
  --ink: inherit; --ink-2: inherit; --red: inherit;
  display: flex; flex-direction: column; margin: 0; overflow: visible;
}
.hero-grid > .wm-hero { align-self: stretch; margin: -1.75rem 0 calc(-1 * clamp(2.5rem, 5vw, 4.5rem)); }
.wm-hero .wm-frame { display: block; position: relative; flex: 1 1 auto; min-height: 0; padding: 0; }
.wm-hero .wm-stage { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; }
.wm-hero .wm-stage img { max-height: none; object-position: center; }
@media (max-width: 900px) {
  .hero-grid > .wm-hero { margin: 0; height: clamp(340px, 110vw, 72vh); }
}

@media (prefers-reduced-motion: reduce) {
  .wm-stage canvas { transition: none; }
  .wm-views button { transition: none; }
}