/* ==========================================================================
   NewLine Break — figures
   One drawing vocabulary for every diagram on the page: hairline panels, traces
   in the signal colour, mono labels, and a single coral step where the line crosses the
   break. This is the logo mark at its third scale, not a new device.
   ========================================================================== */

.fig {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--mono);
}

/* Surfaces */
.fig .panel { fill: var(--raised); stroke: var(--line-lit); stroke-width: 1; }
.fig .board { fill: var(--strata); stroke: var(--line-lit); stroke-width: 1.5; }
.fig .grid  { stroke: none; opacity: 0.55; }
.fig pattern circle { fill: var(--line-lit); }
.fig .hole  { fill: var(--ground); stroke: var(--line-lit); stroke-width: 1; }
.fig .rule  { fill: none; stroke: var(--line-lit); stroke-width: 1; }

/* The boundary between the two sides. Dashed, so it reads as a division on a
   drawing and never as a wire. */
.fig .seam-line {
  fill: none;
  stroke: var(--fog-dim);
  stroke-width: 1;
  stroke-dasharray: 2 7;
  opacity: 0.55;
}

/* Type */
.fig .glyph {
  font-size: 78px;
  font-weight: 500;
  fill: var(--break);
  letter-spacing: -0.02em;
}

.fig .tag  { fill: var(--fog-dim); font-size: 10.5px; letter-spacing: 0.22em; }
/* pre: the log and the route table are column-aligned with spaces. */
.fig .txt  { fill: var(--fog); font-size: 13px; white-space: pre; }
.fig .silk { fill: var(--fog-dim); font-size: 9.5px; letter-spacing: 0.12em; }

.fig .silk--mid  { text-anchor: middle; }
.fig .txt--dim   { fill: var(--fog-dim); }
.fig .txt--lit   { fill: var(--signal-lit); }
.fig .tag--break { fill: var(--break); }

/* Signal */
.fig .wire {
  fill: none;
  stroke: var(--signal-lit);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fig .wire--thin { stroke-width: 1.5; }

.fig .trace {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fig .trace--power { stroke-width: 2.75; }

.fig .arc {
  fill: none;
  stroke: var(--signal-lit);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.fig .part      { fill: var(--ground); stroke: var(--signal); stroke-width: 1.5; }
.fig .part--cap { stroke: var(--line-lit); stroke-width: 1; }
.fig .part--hdr { stroke: var(--line-lit); }
.fig .pin       { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; }
.fig .pad       { fill: var(--ground); stroke: var(--signal-lit); stroke-width: 1.5; }
.fig .open-end  { fill: var(--strata); stroke: var(--signal-lit); stroke-width: 1.5; }
.fig .lit       { fill: var(--signal-dim); stroke: var(--signal-lit); stroke-width: 1.5; }

/* The break. The only coral in any figure. */
.fig .step { fill: none; stroke: var(--break); stroke-width: 2; stroke-linecap: round; }
.fig .node { fill: var(--break); }
.fig .halo { fill: var(--break-dim); }

/* A packet in transit. It only exists while it is moving, so at rest, and
   wherever scroll cannot drive it, it is simply absent. */
.fig .pulse {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Caption
   -------------------------------------------------------------------------- */

.fig-cap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog-dim);
}

.fig-cap__n {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line-lit);
  color: var(--fog);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Scroll-drawn parts

   Each figure decides which timeline drives it; these are only the moves.
   Every keyframe set leaves its end state unstated, so a part settles on
   whatever its own rule says and the finished drawing is identical to the
   static one. The hidden start state lives only inside the animation, which
   is why nothing here needs a .js gate: no animation, no hidden state.

     .d    a stroke that draws itself (needs pathLength="1")
     .f    a part that fades in
     .p    a node that lands
     .run  a pulse that travels a path once
   -------------------------------------------------------------------------- */

@keyframes fig-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes fig-fade { from { opacity: 0; } }
@keyframes fig-pop  { from { opacity: 0; transform: scale(0.35); } }

@keyframes fig-run {
  0%   { stroke-dashoffset: 0.08; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}