/* ============================================================
   ALIMONTA : tech-motion.css
   Opt-in technical-drawing graphics + motion layer.
   Pairs with js/tech-motion.js. Including this file changes
   NOTHING until you add one of the hooks below to an element.

   Everything reads the existing design tokens (--text, --line,
   --lime, --font-mono, --ease) so each effect auto-adapts to the
   dark base AND to a `.paper` band. `.paper` overrides are added
   only where the cream variant needs a different value.
   ============================================================ */

/* ---- shared local tokens (resolve against current band) ---- */
:root{
  --tm-line: var(--text);          /* stroke colour for drawn graphics */
  --tm-grid: rgba(255,255,255,.05);/* blueprint fine grid on dark */
  --tm-grid-major: rgba(199,242,21,.11); /* lime hairline on dark */
}
.paper{
  --tm-grid: rgba(24,23,27,.055);
  --tm-grid-major: rgba(124,151,0,.18);
}

/* ============================================================
   a) ANIMATED LINE-DRAW  ->  .draw-on-scroll
   Wrap an inline <svg> whose path/line/polyline/circle strokes
   draw themselves in when scrolled into view. JS measures each
   stroke and sets the dash; CSS just defines the fallback look
   and the transition. No-op safe: if JS/GSAP absent, strokes
   show normally (no dash applied) so the drawing is just visible.
   ============================================================ */
.draw-on-scroll svg{ display:block; width:100%; height:auto; overflow:visible; }
/* primed = JS has measured strokes and is holding them hidden */
.draw-on-scroll.is-primed svg :is(path,line,polyline,circle,rect,ellipse){
  stroke-dashoffset:var(--tm-dash, 0);
}
/* respect reduced motion: never hide, never animate */
@media(prefers-reduced-motion:reduce){
  .draw-on-scroll.is-primed svg :is(path,line,polyline,circle,rect,ellipse){
    stroke-dashoffset:0 !important;
    stroke-dasharray:none !important;
  }
}

/* ============================================================
   b) BLUEPRINT GRID BACKGROUND  ->  .blueprint-bg
   Paints a faint technical grid behind a section. Pure CSS
   gradients: a fine grid + a brighter (lime) hairline every Nth
   line. Put it on a positioned section; content should sit above.
   Tune density with --tm-grid-size (default 34px) and the major
   multiple with --tm-grid-major-size (default 170px = every 5th).
   ============================================================ */
.blueprint-bg{ position:relative; }
.blueprint-bg::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  --g: var(--tm-grid-size, 34px);
  --G: var(--tm-grid-major-size, 170px);
  background-image:
    /* major lime hairlines */
    linear-gradient(to right,  var(--tm-grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tm-grid-major) 1px, transparent 1px),
    /* fine grid */
    linear-gradient(to right,  var(--tm-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tm-grid) 1px, transparent 1px);
  background-size:
    var(--G) var(--G),
    var(--G) var(--G),
    var(--g) var(--g),
    var(--g) var(--g);
  /* fade the grid out toward the edges so it reads as a watermark */
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%, #000 35%, transparent 92%);
          mask-image:radial-gradient(120% 100% at 50% 40%, #000 35%, transparent 92%);
  opacity:.9;
}
/* keep any direct children above the grid without forcing it on .wrap */
.blueprint-bg>*{ position:relative; z-index:1; }

/* ============================================================
   c) DIMENSION-LINE REVEAL  ->  .dim-line  (component)
   A reusable measurement annotation: two end ticks, a rule that
   draws out, and a Space Mono label that fades in. Reveal is
   driven by adding `.in` (JS does this on scroll; it also works
   if you already use [data-reveal], add both).
   Markup:
     <span class="dim-line" data-reveal>
       <span class="dim-line__rule"></span>
       <span class="dim-line__label">820 MM</span>
     </span>
   ============================================================ */
.dim-line{
  --tm-dim-w: 160px;
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim);
}
.dim-line__rule{
  position:relative;
  display:block; height:1px; width:var(--tm-dim-w);
  background:var(--line);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .9s var(--ease);
}
/* end ticks */
.dim-line__rule::before,
.dim-line__rule::after{
  content:""; position:absolute; top:-4px;
  width:1px; height:9px; background:var(--line);
}
.dim-line__rule::before{ left:0; }
.dim-line__rule::after { right:0; }
.dim-line__label{
  opacity:0; transform:translateX(-6px);
  transition:opacity .7s var(--ease) .25s, transform .7s var(--ease) .25s;
  white-space:nowrap;
}
.dim-line.in .dim-line__rule{ transform:scaleX(1); }
.dim-line.in .dim-line__label{ opacity:1; transform:none; }
/* the tick / rule can carry the lime accent when wanted */
.dim-line--lime .dim-line__rule,
.dim-line--lime .dim-line__rule::before,
.dim-line--lime .dim-line__rule::after{ background:var(--lime); }
.dim-line--lime .dim-line__label{ color:var(--lime); }
@media(prefers-reduced-motion:reduce){
  .dim-line__rule{ transform:scaleX(1); transition:none; }
  .dim-line__label{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   d) COUNT-UP  ->  data-countup="40"  (optional data-suffix="+")
   JS tweens the text 0 -> value on reveal. CSS only sets the
   look (tabular figures so the width does not jump while ticking).
   Pair with .stat-num for the display treatment, optional.
   ============================================================ */
[data-countup]{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.stat-num{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.4rem,6vw,4.2rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--text);
}
.stat-num--lime{ color:var(--lime); }
.paper .stat-num--lime{ color:#7C9700; }
.stat-label{
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-faint);
  margin-top:.6rem;
}

/* ============================================================
   e) PARALLAX DRIFT  ->  .tech-drift  (data-drift="40")
   Slow yPercent on scroll for background motifs. JS reads
   data-drift (total travel in % of element height, default 40)
   and reuses the same scrub pattern as main.js parallax.
   No-op under reduced motion (JS skips it).
   ============================================================ */
.tech-drift{ will-change:transform; }

/* ============================================================
   BACKGROUND MOTIF LAYER  ->  .techbg + .techbg--motif
   The base site already ships `.techbg`/`.has-techbg`. This adds
   placement variants so the motif-*.svg files can sit faintly
   behind a section in different corners, and a `.draw` partner so
   a motif can also draw itself in (when used as inline svg).
   These only restyle the motif image; they never force a layout.
   ============================================================ */
.techbg--motif img{
  opacity:.14;
  width:min(560px,46%);
}
.paper .techbg--motif img{ opacity:.10; filter:invert(1); }

/* placement helpers (apply to the .techbg wrapper) */
.techbg--tl img{ left:-3%; right:auto; top:6%; transform:none; }
.techbg--tr img{ right:-3%; left:auto;  top:6%; transform:none; }
.techbg--bl img{ left:-3%; right:auto; top:auto; bottom:-6%; transform:none; }
.techbg--br img{ right:-3%; left:auto;  top:auto; bottom:-6%; transform:none; }
.techbg--c  img{ left:50%; right:auto; top:50%; transform:translate(-50%,-50%); width:min(680px,64%); opacity:.07; }
.paper .techbg--c img{ opacity:.06; }

@media(max-width:760px){
  .techbg--motif img{ width:min(420px,72%); opacity:.10; }
}

/* a faint hairline frame you can drop on a figure/panel to make it
   read as a technical plate. Opt-in, adapts to band via --line. */
.tech-plate{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
}
.tech-plate::after{
  content:"";
  position:absolute; inset:8px;
  border:1px solid var(--line);
  border-radius:calc(var(--r) - 8px);
  pointer-events:none;
  opacity:.5;
}
/* ============================================================
   TECHNICAL-DRAWING CARD  ->  .spec__img.spec__viz  (inline <svg>)
   Turns a deliverable / spec card's 16:10 image box into a
   blueprint plate: faint grid + a centred line-drawing that
   draws itself on scroll (pair with .draw-on-scroll). The svg
   is authored in a 640x400 (16:10) canvas so it fills the box
   with no letterboxing. No-op safe: without JS the drawing is
   simply visible. Replaces an <img>, keeps the same box size.
   ============================================================ */
.spec__viz{
  display:block;
  background-color:#262932;
  background-image:
    /* major lime hairlines */
    linear-gradient(to right,  rgba(199,242,21,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(199,242,21,.05) 1px, transparent 1px),
    /* fine grid */
    linear-gradient(to right,  rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.038) 1px, transparent 1px),
    /* soft centre lift */
    radial-gradient(125% 120% at 50% 38%, rgba(255,255,255,.05) 0%, transparent 60%);
  background-size:108px 108px,108px 108px,27px 27px,27px 27px,100% 100%;
  border-bottom:1px solid var(--line-soft);
}
.spec__viz svg{ display:block; width:100%; height:100%; overflow:visible; }
.paper .spec__viz{
  background-color:#ece7dc;
  background-image:
    linear-gradient(to right,  rgba(124,151,0,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124,151,0,.14) 1px, transparent 1px),
    linear-gradient(to right,  rgba(24,23,27,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24,23,27,.06) 1px, transparent 1px),
    radial-gradient(125% 120% at 50% 38%, rgba(0,0,0,.04) 0%, transparent 60%);
  background-size:108px 108px,108px 108px,27px 27px,27px 27px,100% 100%;
}
.paper .spec__viz svg{ stroke:#26252b; }
.paper .spec__viz svg [fill="#F4F5F2"]{ fill:#26252b; }

/* corner crop-marks for the plate */
.tech-plate--marks::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(var(--line),var(--line)) left  10px top 10px/14px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) left  10px top 10px/1px 14px no-repeat,
    linear-gradient(var(--line),var(--line)) right 10px top 10px/14px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) right 10px top 10px/1px 14px no-repeat,
    linear-gradient(var(--line),var(--line)) left  10px bottom 10px/14px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) left  10px bottom 10px/1px 14px no-repeat,
    linear-gradient(var(--line),var(--line)) right 10px bottom 10px/14px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) right 10px bottom 10px/1px 14px no-repeat;
}