/* ══════════════════════════════════════════════════════════════════
   Schematic drawings.

   Global rather than per-page: the drawings appear on the home hero and
   on every project detail page, so they cannot live in a pages/ file.
   Token-only, like every other stylesheet here.

   drawings.php emits every drawing twice: a wide plate laid out across
   860 units for the desktop, and a narrow plate laid out down 300 units
   for the phone. The swap below is the whole reason that is worth doing.
   Exactly one variant is ever displayed, so exactly one is ever in the
   accessibility tree and only one animates.
   ══════════════════════════════════════════════════════════════════ */

.drawing {
  display: block;
  width: 100%;
  height: auto;
}

/* ── plate selection ──────────────────────────────────────────────
   760px, matching the breakpoint components.css and pages/work.css
   already use for the drawing frame's padding. Below it the frame gives
   the drawing roughly 300px of usable width, which is exactly the narrow
   viewBox, so an 11px label renders at about 11px instead of the 4.5px
   that made the old mobile drawings unreadable.

   The narrow plate is capped rather than stretched. At 700px of frame the
   same 300-unit viewBox would scale a label up to 25px, which reads as a
   heading, not an annotation. Capped and centred it reads as a plate on a
   sheet, which is the correct drafting answer to a wide margin. */

.drawing--narrow { display: none; }

@media (max-width: 760px) {
  .drawing--wide { display: none; }

  .drawing--narrow {
    display: block;
    max-width: 24rem;
    margin-inline: auto;
  }
}

/* ── type ─────────────────────────────────────────────────────────
   base.css sets `.drawing text` at 11px. These are all written as
   `.drawing text.x` so they out-specify it rather than depending on
   stylesheet order, which would break the day base.css moves. */

.drawing text.drawing__label { fill: var(--text-dim); }

/* Callout numbers and gate names: signal colour, one step down, so they
   read as sheet furniture rather than as content. */
.drawing text.drawing__num {
  font-size: 9px;
  letter-spacing: 0.14em;
  fill: var(--line);
}

/* Dimension captions. Quietest thing on the plate on purpose: a dimension
   is there to be found, not read. */
.drawing text.drawing__cap {
  font-size: 9px;
  letter-spacing: 0.16em;
  fill: var(--text-faint);
}

/* The narrow plate's label budget is about 28 characters. Past that the
   label steps down instead of running off the edge, since SVG has no
   wrapping to fall back on and the overflow is silently clipped. */
.drawing text.drawing__label--tight {
  font-size: 9px;
  letter-spacing: 0.06em;
}

/* ── flow direction ───────────────────────────────────────────────
   A short dash train running along the connector underneath it. The dash
   period is 16 units (2 on, 14 off), so one 16-unit offset cycle is
   seamless. Kept slow and low-contrast: this is a direction cue on a
   technical drawing, not a marquee. */

@keyframes drawing-pulse {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -16; }
}

.drawing__pulse {
  opacity: 0.75;
  animation: drawing-pulse 2.4s linear infinite;
}

/* The cycle's loop carries a 48-unit pattern instead of 16, set on the
   element, so its cycle has to travel three times as far to come back
   round. Same speed on the page, a third as many dashes on the path. */
@keyframes drawing-pulse-loop {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -48; }
}

.drawing__pulse--loop { animation: drawing-pulse-loop 7.2s linear infinite; }

/* Reduced motion leaves the dashes in place and simply stops them. The
   overlay still reads as a marked direction, so nothing is lost except
   the movement. !important is not needed here because no script writes
   to this property; GSAP only touches stroke-dasharray on the traced
   connectors, which are separate elements. */
html.no-motion .drawing__pulse { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .drawing__pulse { animation: none; }
}

/* ── traced connectors ────────────────────────────────────────────
   GSAP scrubs stroke-dashoffset on [data-draw-trace] against pathLength=1
   as the drawing scrolls in. Under no-motion it never runs, so the paths
   must be explicitly whole: without this they would keep whatever dash
   state GSAP's from-vars applied and the leaders would be invisible.
   !important because GSAP writes these as inline styles. */

html.no-motion .drawing [data-draw-trace] {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}

/* ── sheet furniture ──────────────────────────────────────────────
   Registration marks and dimension rails sit behind the subject. Holding
   them at partial opacity rather than picking a lighter token keeps them
   correct in both the paper and the ink themes, where --line-quiet
   inverts. */

.drawing__sheet { opacity: 0.7; }
.drawing__rail  { opacity: 0.85; }