/* ============================================================================
   SHARED THREAD-ORIGIN — promoted from the Hybrid+ bake (2026-06-18).
   "Thread from the mark": a filled amber CIRCLE seed is born at the live nav
   wordmark glyph and settles onto a single amber RAIL; gutter-text sections DOCK
   with the system DIAMOND (.pnode idiom) + reach-and-pin gesture, the vertical pin
   planting ~--to-clear short of the headline's left edge. Origins/termini stay
   filled amber circles. Load AFTER components.css. Wiring: thread-origin.js.

   Per-page geometry via custom properties:
     --to-x      rail x (left). Default 4vw (clears a 5vw hero headline).
     --to-clear  pin clearance off the headline's left text edge. Default 18px.
     --to-reach  (per .to-dock) distance from the rail to the headline left edge.
   ============================================================================ */
:root{ --to-x:4vw; --to-clear:18px; }

/* ---- the single RAIL (scroll-drawn via thread-origin.js; reduced-motion = full static) ---- */
.to-rail{ position:absolute; left:var(--to-x); width:2px; background:var(--amber); transform-origin:top; z-index:1; pointer-events:none; }
.anim .to-rail{ transform:scaleY(0); }

/* ---- FROM-THE-MARK ORIGIN — seed (filled amber circle) at the wordmark glyph (placed by JS),
        a connector that settles onto the rail (draws on load; static under reduced-motion). ---- */
.to-origin{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.to-seed{ position:absolute; width:13px; height:13px; border-radius:50%; background:var(--amber); transform:translate(-50%,-50%); box-shadow:0 0 0 5px rgba(212,163,116,.16); }
.to-link{ position:absolute; height:2px; }                                   /* JS sets left/top/width/rotate */
.to-link .to-link-fill{ display:block; width:100%; height:100%; background:var(--amber); transform-origin:left center; }
.anim .to-link .to-link-fill{ transform:scaleX(0); transition:transform .6s cubic-bezier(.16,.84,.3,1) .25s; }
.to-origin.drawn .to-link .to-link-fill{ transform:scaleX(1); }

/* ---- DOCK — system diamond (.pnode) seats on the rail + heavier connector (3px > 2px rail)
        reaches ACROSS the gutter + a vertical PIN plants ~--to-clear short of the headline. ---- */
.to-dock{ position:absolute; left:var(--to-x); z-index:2; }
/* DIAMOND = discrete PULSE: fills + scales on .lit (JS arms on enter, re-arms at a scroll threshold) */
.to-dock .to-dia{ position:absolute; left:1px; top:0; width:12px; height:12px; border:2px solid var(--amber); background:transparent; transform:translate(-50%,-50%) rotate(45deg) scale(.7); transition:transform .5s cubic-bezier(.2,1.7,.45,1), background .5s ease, box-shadow .45s ease; }   /* left:1px centres the diamond on the 2px rail (rail stays at --to-x; only the diamond moves) */
.to-dock .to-dia.lit{ background:var(--amber); transform:translate(-50%,-50%) rotate(45deg) scale(1); box-shadow:0 0 0 6px rgba(212,163,116,.20); }
/* CONNECTOR + PIN = scroll-linked LINES: JS drives scaleX/scaleY inline per scroll position (NO transition,
   so they track the scroll exactly + retract on scroll-up, like the rail). Base = undrawn. */
.to-dock .to-conn{ position:absolute; left:0; top:0; height:3px; background:var(--amber); transform:translateY(-50%) scaleX(0); transform-origin:left;
  width:calc(var(--to-reach, 11.4vw) - var(--to-clear)); }
.to-dock .to-pin{ position:absolute; top:0; width:3px; height:1.6rem; background:var(--amber); transform:translate(-50%,-50%) scaleY(0); transform-origin:center;
  left:calc(var(--to-reach, 11.4vw) - var(--to-clear)); }

/* ---- ORIGIN/TERMINUS circle (system) — reusable filled amber dot for a circle terminus ---- */
.to-end{ width:13px; height:13px; border-radius:50%; background:var(--amber); }

@media (prefers-reduced-motion:reduce){
  .to-rail{ transform:scaleY(1); }
  .to-link .to-link-fill{ transform:scaleX(1); }
  .to-dock .to-dia{ background:var(--amber); transform:translate(-50%,-50%) rotate(45deg) scale(1); box-shadow:0 0 0 6px rgba(212,163,116,.20); transition:none; }
  .to-dock .to-conn{ transform:translateY(-50%) scaleX(1); transition:none; }
  .to-dock .to-pin{ transform:translate(-50%,-50%) scaleY(1); transition:none; }
}