/* ==========================================================================
   PowerTrans Industrial — Visual Effects Layer
   Sits on top of motion.css. These are EFFECTS, not interactions:
     A. Blueprint draw-on     — the drawing drafts itself as you scroll
     B. Torque particle flow  — canvas stream running through the dark rail
     C. Metrology scan        — laser sweep + live coordinate readout
     D. Measurement cursor    — crosshair caliper with mm readout
     E. Odometer counters     — mechanical digit roll
     F. Gear train divider    — meshing gears at the correct ratio
     G. Specular sweep        — light passing across dark metal
   Every effect is motivated by the subject. Reduced motion collapses all of it.
   ========================================================================== */

/* ---------- A. Blueprint ---------- */
.blueprint { position: relative; background: var(--canvas-steel); overflow: hidden; }
.blueprint::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11, 16, 20, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 16, 20, .05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.bp-sheet { position: relative; padding-block: 76px 66px; }
.bp-svg { display: block; width: 100%; height: auto; }

.bp-draw { fill: none; stroke: rgba(11, 16, 20, .62); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bp-hair { stroke-width: 1; stroke: rgba(11, 16, 20, .34); }
.bp-center { stroke: var(--accent); stroke-width: 1; opacity: .7; }
.bp-dim { stroke: var(--accent); stroke-width: 1.1; opacity: .9; }
.bp-hole { fill: #fff; stroke: rgba(11, 16, 20, .48); stroke-width: 1.1; }
.bp-node { fill: var(--accent); }

.bp-note {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .09em;
  fill: rgba(11, 16, 20, .62); text-transform: uppercase;
}
.bp-note--sm { font-size: 11px; fill: rgba(11, 16, 20, .5); }
.bp-note--acc { fill: var(--accent); font-size: 13px; }
.bp-title rect { fill: rgba(255, 255, 255, .74); stroke: rgba(11, 16, 20, .34); stroke-width: 1; }
.bp-title text {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  fill: rgba(11, 16, 20, .74); text-transform: uppercase;
}
.bp-fade { opacity: 0; }
@media (max-width: 767px) {
  .bp-note--sm, .bp-title { display: none; }
  .bp-note { font-size: 19px; }
}

/* ---------- B. Torque particle canvas ---------- */
.canvas-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 0;
}
.pan-track { position: relative; z-index: 1; }

/* ---------- C. Metrology scan ---------- */
.spec-zone { position: relative; }
.spec-zone .spec-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0;
  pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(224, 86, 11, .95), transparent);
  box-shadow: 0 0 16px rgba(224, 86, 11, .55);
}
.spec-zone.is-scanning .spec-scan { animation: specSweep 1.5s cubic-bezier(.22, 1, .36, 1) 1; }
@keyframes specSweep {
  0%   { top: 0; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: calc(100% - 2px); opacity: 0; }
}
.spec-coord {
  position: absolute; z-index: 4; pointer-events: none;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  color: rgba(255, 255, 255, .84);
  background: rgba(11, 16, 20, .55); border: 1px solid rgba(255, 255, 255, .16);
  padding: 3px 6px; border-radius: 5px; backdrop-filter: blur(4px);
}
.spec-coord b { color: var(--accent); font-weight: 600; }
.spec-coord[data-pos="tl"] { top: 10px; left: 10px; }
.spec-coord[data-pos="tr"] { top: 10px; right: 10px; }
.spec-coord[data-pos="br"] { bottom: 10px; right: 10px; }
@media (max-width: 640px) { .spec-coord[data-pos="tr"] { display: none; } }

/* ---------- D. Measurement cursor ---------- */
html.measuring [data-measure],
html.measuring [data-measure] * { cursor: none; }
.metric-cursor {
  position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 96;
  pointer-events: none; opacity: 0; transition: opacity .18s ease;
}
.metric-cursor.is-on { opacity: 1; }
.metric-cursor .mc-x { position: absolute; left: -13px; top: -.5px; width: 26px; height: 1px; background: rgba(224, 86, 11, .85); }
.metric-cursor .mc-y { position: absolute; top: -13px; left: -.5px; height: 26px; width: 1px; background: rgba(224, 86, 11, .85); }
.metric-cursor .mc-dot { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.metric-cursor .mc-ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border: 1px solid rgba(224, 86, 11, .45); border-radius: 50%; }
.metric-cursor .mc-label {
  position: absolute; left: 17px; top: 13px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: #fff;
  background: rgba(11, 16, 20, .84); border: 1px solid rgba(224, 86, 11, .45);
  padding: 3px 7px; border-radius: 5px;
}

/* ---------- E. Odometer ---------- */
.odo { display: inline-flex; align-items: baseline; overflow: hidden; }
.odo-col { display: inline-block; overflow: hidden; height: 1em; line-height: 1; }
.odo-strip { display: block; will-change: transform; }
.odo-strip > span { display: block; height: 1em; line-height: 1; }
.odo-sign { display: inline-block; }

/* ---------- F. Gear train ---------- */
.gear-band { position: relative; background: var(--ink); overflow: hidden; }
.gear-band .machine-grid { position: absolute; inset: 0; opacity: .55; }
.gear-train {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding-block: 58px 50px;
}
.gear-train svg { display: block; width: 100%; max-width: 760px; overflow: visible; }

/* ---------- G. Specular sweep ---------- */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -70%; width: 34%;
  transform: rotate(12deg); opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent);
}
.sheen.is-in::after { animation: sheenSweep 1.25s cubic-bezier(.22, 1, .36, 1) 1 .15s; }
@keyframes sheenSweep {
  0%   { left: -70%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 140%; opacity: 0; }
}

/* ---------- Reduced motion: collapse every effect ---------- */
@media (prefers-reduced-motion: reduce) {
  .canvas-layer { display: none; }
  .spec-zone.is-scanning .spec-scan { animation: none; opacity: 0; }
  .sheen.is-in::after { animation: none; }
  .bp-fade { opacity: 1 !important; }
  .metric-cursor { display: none; }
  html.measuring [data-measure],
  html.measuring [data-measure] * { cursor: auto; }
}