/* Homepage only: the 02 chamber plate and its candidates (2026-10-07).
   Loaded after dist/output.css, which owns .plate-media / .plate-frame. */

/* output.css positions `.plate-frame > img`; a <picture> (webp + jpg) puts
   the img one level down, so give the picture the same box. */
.plate-frame > picture { position: absolute; inset: 0; display: block; }
.plate-frame > picture > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Drawn parts over a plate, in the plate's own pixel space (viewBox =
   image size, slice = object-fit: cover, so they stay in register). */
.plate-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}
/* Light, not paint: the level in the flow meter adds to the glass behind it,
   so the tube's own highlights still read through it. */
.plate-overlay--light { mix-blend-mode: screen; }

/* ---- Counter in glass: digits lit from behind the smoked pane ---- */
.ctr-digit {
  fill: #D7FFE5;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 118px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}
.ctr-label {
  fill: rgba(200, 228, 212, 0.42);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-anchor: middle;
  text-transform: uppercase;
}
/* Same --sweep rig as the brass drums (main.js, [data-sweep]/[data-detent]). */
.ctr-drum { transform: translateY(calc(var(--sweep, 0) * 1px)); }

/* ---- Flow meter: a level of light rising in the tube ---- */
/* No JS: the level stands mid-tube rather than empty. */
.flow-level { transform: translateY(calc(var(--sweep, -320) * 1px)); }

@media (prefers-reduced-motion: reduce) {
  .ctr-drum { transform: none; }
  /* finished state: the level stands high in the tube */
  .flow-level { transform: translateY(-600px); }
}

/* ---- 01 gauge v3 ---- */
/* plate-v3-gauge (black titanium, smoked glass). The dial is photographed
   without a needle; the needle is drawn in the plate's own pixel space
   (viewBox 0 0 1200 1489, slice = object-fit: cover) so main.js's
   [data-sweep] rig can drive it. data-sweep sits on the group that holds
   both the needle and its bloom; each .gauge3-needle inherits --sweep.
   Pivot: the photographed hub, fitted as a circle on the graded plate
   (597.02, 603.73; r 40). Re-derive it if the plate is ever re-cropped
   (notes/home-2026-10-07/plates/grade-v3.py measure). The scale's major
   ticks sit at -133.7, -101.9, -67.8, -35.3, 0.6, 36.2, 68.3, 101.8 and
   133.0 degrees from the hub; the sweep runs zero tick -> seventh major. */
.gauge3-needle {
  transform-box: view-box;
  transform-origin: 597.02px 603.73px;
  /* No JS: the needle stands on the fifth major tick, a working reading. */
  transform: rotate(calc(var(--sweep, 36.22) * 1deg));
}
/* Paint (titanium gradient, green-lit tip, bloom, drop shadow) lives as
   attributes in the SVG markup, next to the gradients and filters it
   references by id. */

@media (prefers-reduced-motion: reduce) {
  /* finished state: parked on the seventh major tick, where the sweep ends */
  .gauge3-needle { transform: rotate(101.81deg); }
}

/* ---- 01 gauge v4 (3D) ---- */
/* plate-v4-gauge. The still is rendered by js/home-gauge-3d.js itself
   (?gauge=capture), so the picture and the live canvas over it are the same
   object in the same light. js/home-gauge.js mounts the canvas inside
   .plate-frame (figure[data-gauge3d]) and adds .is-gauge3d to the frame only
   after the first frame is on screen, so the swap never flashes blank. Any
   failure removes the canvas and the still simply stays. No overlay SVG: the
   needle is part of the 3D object. Notes: notes/home-2026-10-08/gauge/GAUGE.md */
.gauge3d__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
.plate-frame.is-gauge3d > .gauge3d__canvas { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* the still is the finished state; the loader never mounts, this is a backstop */
  .gauge3d__canvas { display: none; }
}