/* ================================================================
   jeffreyjorgensen.dev — "Plotter" motion layer
   Loaded alongside blueprint.css. Everything here is progressive
   enhancement: start-states apply ONLY when html.js is set (see the
   inline head script, which self-removes if motion.js never boots)
   AND the visitor has not asked for reduced motion.
   ================================================================ */

/* ---------------- Dimension line (drawing annotation) ---------------- */
/* Dimension lines are "continuous thin" in ISO 128-2 — the same weight class as
   leaders and hatching, deliberately lighter than the 2px frame they measure.
   At 2px they competed with the block instead of annotating it. */
.dim{display:flex;align-items:center;gap:12px;margin:26px 0 0;height:14px;color:var(--mut-2)}
.dim .tk{flex:none;width:1px;height:12px;background:currentColor}
.dim .ln{flex:1;height:1px;background:currentColor;position:relative}
.dim .ln.l{transform-origin:100% 50%}
.dim .ln.r{transform-origin:0 50%}
.dim .ln::after{content:"";position:absolute;top:-3.5px;width:0;height:0;
  border-top:4px solid transparent;border-bottom:4px solid transparent}
.dim .ln.l::after{left:0;border-right:8px solid currentColor}
.dim .ln.r::after{right:0;border-left:8px solid currentColor}
.dim .vl{flex:none;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;white-space:nowrap;color:var(--mut)}
@media(max-width:560px){.dim{gap:8px}.dim .vl{font-size:9.5px;letter-spacing:.1em}}

/* ---------------- Frame drawn over .diagram ---------------- */
/* The containing block for an absolutely positioned child is the PADDING box, so
   top/left:0 would sit 2px inside the border this path is standing in for — the
   frame then jumped by its own width when the CSS border took over. Pull it out
   by the border width and size it to the border box, fractions included. */
.frame-draw{position:absolute;top:-2px;left:-2px;
  width:calc(100% + 4px);height:calc(100% + 4px);
  color:var(--ink);pointer-events:none;overflow:visible}

/* ---------------- Crosshair (desktop pointer only) ---------------- */
.xhair{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;
  transition:opacity var(--dur-fade) var(--ease-out)}
.xhair.on{opacity:1}
/* the 90ms settle absorbs the 27px grid snap in draw(); ease-out lands it
   quickly so the line reads as attached to the pointer, not trailing it */
.xhair i{position:absolute;background:var(--blue);opacity:.28;
  transition:transform var(--dur-settle) var(--ease-out)}
.xhair .xh{left:0;top:0;width:100%;height:1px}
.xhair .xv{left:0;top:0;width:1px;height:100%}
.xhair .xc{position:absolute;left:0;top:0;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.11em;color:var(--blue-ink);background:var(--paper);
  border:1px solid var(--blue-dim);padding:2px 6px;white-space:nowrap;
  transition:transform var(--dur-settle) var(--ease-out);font-variant-numeric:tabular-nums}

/* ================================================================
   Start states — only with JS confirmed and motion allowed
   ================================================================ */
@media (prefers-reduced-motion:no-preference){

  /* hero is above the fold, so its start state has to come from CSS */
  html.js .hero .sheet-tag,
  html.js .hero>.lab,
  html.js .hero .lead,
  html.js .hero .cta-row .btn{opacity:0}
  html.js .hero h1{opacity:0}
  html.js .hero h1 .w{display:inline-block;opacity:0;transform:translateY(14px)}

  /* underline on the emphasised phrase, drawn left to right */
  html.js .hero h1 em{box-shadow:none;
    background-image:linear-gradient(var(--blue),var(--blue));
    background-repeat:no-repeat;background-position:0 100%;background-size:0% .14em}

  /* signature diagram: the box is drawn as an SVG path, then handed back
     to the real CSS border on the frame the path completes */
  html.js .diagram{border-color:transparent}
  html.js .diagram.drawn{border-color:var(--ink)}
  html.js .diagram .cnr,
  html.js .diagram .dh,
  html.js .diagram .eq>*,
  html.js .diagram .cap{opacity:0}
}

/* a dimension line sits tight against the block it measures */
.dim + .schedule,.dim + .plist,.dim + .teasers{margin-top:12px}
/* the closing figure needs a box to scale */
html.js .diagram .cap .ok{display:inline-block}