/* ============================================================
   Component · Hero Motion — "the living drawing"
   Layers over the static section drawing, all in the precision-
   instrument vibe. The page-load choreography (page-load.css) owns
   the intro; this file governs the resting / idle / interactive life:
     1. Ambient      — section-cut sweep, grid drift, marching dashes
     2. Scan-read    — sweep flares each floor label as it passes
     3. Cursor       — depth parallax; live CAD coordinate readout
     4. Calibration  — dimension line draws + value counts up (once)
   Everything collapses to a static drawing under reduced-motion.
   ============================================================ */

/* Parallax origin — JS writes --px / --py in the range -1..1.
   Defaults keep every .wire at translate(0,0) before JS runs and
   on touch / no-hover devices (where the handler never attaches). */
.hero__viewer { --px: 0; --py: 0; }

/* Depth layers — deeper element travels further, labels counter-shift
   the opposite way, selling parallax without any rotation. */
.wire { will-change: transform; }
.wire--model  { transform: translate(calc(var(--px) *  7px), calc(var(--py) *  7px)); }
.wire--grid   { transform: translate(calc(var(--px) *  2.5px), calc(var(--py) *  2.5px)); }
.wire--labels { transform: translate(calc(var(--px) * -3.5px), calc(var(--py) * -3.5px)); }

/* === Ambient · grid drift ================================ */
/* Oversized rect (see markup) so the drift never reveals an edge. */
.hero__grid-rect {
  will-change: transform;
  animation: hero-grid-drift 24s var(--ease-in-out) infinite alternate;
}
@keyframes hero-grid-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(20px, 14px); }
}

/* === Ambient · marching section lines ==================== */
/* Dashed construction lines flow slowly — the "active drawing" feel
   from CAD. Offsets are multiples of each dash period so they loop
   seamlessly (2 3 → period 5; 6 4 → period 10; both divide 100). */
.dash-flow { animation: dash-march 6s linear infinite; }
.dash-flow--datum { animation-duration: 8.5s; }
@keyframes dash-march { to { stroke-dashoffset: -100; } }

/* === Interactive · live CAD coordinate readout =========== */
/* Fixed status readout in the viewer's free corner; JS fills the
   values from the cursor position while hovering the drawing. */
.hero__cad {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  pointer-events: none;
  z-index: 3;
}
.hero__viewer:hover .hero__cad { opacity: 0.9; }

/* === Calibration · dimension draws + ticks appear (once) == */
.hero__dim-line { stroke-dasharray: 400; stroke-dashoffset: 400; }
.hero__dim-tick { opacity: 0; }
.hero__dim.is-measured .hero__dim-line {
  transition: stroke-dashoffset 1100ms var(--ease-out);
  stroke-dashoffset: 0;
}
.hero__dim.is-measured .hero__dim-tick {
  transition: opacity 300ms var(--ease-out) 1000ms;
  opacity: 1;
}

/* === Ambient · particle pulses through the column rules === */
/* Slow accent particles drift down the faint 12-column background
   rules, like current through the grid. Each particle is a 1px glow
   streak pinned to a line's x (matching .hero::before), travelling
   top→bottom on its own slow, offset loop so they read as sparse. */
.hero__pulse {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__particle {
  position: absolute;
  width: 1px;
  height: 60px;
  opacity: 0;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--color-accent) 85%, transparent),
    transparent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-accent) 55%, transparent));
  animation: particle-fall linear infinite;
}
@keyframes particle-fall {
  0%   { top: -8%;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 104%; opacity: 0; }
}
/* Each on a different column line, with slow, out-of-phase timing */
.hero__particle:nth-child(1) { left: calc(2 * 100% / 12);  animation-duration: 11s; animation-delay:  0s; }
.hero__particle:nth-child(2) { left: calc(4 * 100% / 12);  animation-duration: 14s; animation-delay: -4s; }
.hero__particle:nth-child(3) { left: calc(5 * 100% / 12);  animation-duration:  9s; animation-delay: -7s; }
.hero__particle:nth-child(4) { left: calc(7 * 100% / 12);  animation-duration: 13s; animation-delay: -2s; }
.hero__particle:nth-child(5) { left: calc(9 * 100% / 12);  animation-duration: 10s; animation-delay: -6s; }
.hero__particle:nth-child(6) { left: calc(10 * 100% / 12); animation-duration: 12s; animation-delay: -9s; }

/* === Hover polish ======================================== */
.hero__viewer { transition: border-color var(--duration-normal) var(--ease-out); }
.hero__viewer-coords { transition: color var(--duration-normal) var(--ease-out); }
.hero__viewer:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.hero__viewer:hover .hero__viewer-coords { color: rgba(255, 255, 255, 0.62); }

/* === Reduced motion · static drawing ===================== */
@media (prefers-reduced-motion: reduce) {
  .hero__grid-rect,
  .dash-flow { animation: none !important; }
  .hero__pulse { display: none; }
  .wire { transform: none !important; will-change: auto; }
  /* Show the dimension fully measured, no draw-on */
  .hero__dim-line { stroke-dashoffset: 0; }
  .hero__dim-tick { opacity: 1; }
}