/* ==========================================================================
   ATHERION - SCENE LAYER
   The art-directed mechanical-engineering environment: perspective grids,
   construction planes, dimension annotations and drawing-sheet framing.

   These are ATMOSPHERE, not UI. Nothing here is a panel, card or container -
   type sits inside this world rather than on top of a box.
   Every element is pointer-events:none and aria-hidden.
   ========================================================================== */

.scene {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene path, .scene line, .scene polyline, .scene rect, .scene circle {
  vector-effect: non-scaling-stroke;
}

/* ---- Perspective grid: converging + foreshortened depth lines ---------- */
.sc-conv, .sc-depth { fill: none; stroke: rgba(255,255,255,.085); stroke-width: 1; }
.sc-depth { stroke: rgba(255,255,255,.06); }
.sc-conv-a { fill: none; stroke: rgba(1,41,229,.5); stroke-width: 1; }

.g-white .sc-conv  { stroke: rgba(0,0,0,.10); }
.g-white .sc-depth { stroke: rgba(0,0,0,.07); }
.g-white .sc-conv-a { stroke: rgba(1,41,229,.42); }

/* Fade the environment out toward the edges so it reads as depth, not wallpaper */
.scene--fade svg {
  -webkit-mask-image: radial-gradient(ellipse 92% 86% at var(--vpx, 70%) var(--vpy, 46%), #000 6%, transparent 78%);
  mask-image: radial-gradient(ellipse 92% 86% at var(--vpx, 70%) var(--vpy, 46%), #000 6%, transparent 78%);
}

/* ---- Construction plane ------------------------------------------------ */
.sc-plane { fill: rgba(1,41,229,.055); stroke: rgba(1,41,229,.28); stroke-width: 1; }
.g-white .sc-plane { fill: rgba(1,41,229,.045); stroke: rgba(1,41,229,.30); }

/* ---- Drawing-sheet framing -------------------------------------------- */
.sheet-frame {
  position: absolute; inset: clamp(14px, 2.2vw, 34px);
  pointer-events: none; z-index: 5;
  border: 1px solid rgba(255,255,255,.07);
}
.g-white .sheet-frame { border-color: rgba(0,0,0,.09); }
.sheet-frame::before, .sheet-frame::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--blue); opacity: .85;
}
.sheet-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.sheet-frame::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Sparse annotation set along the sheet edge */
.anno {
  position: absolute; z-index: 6;
  font-size: 9.5px; font-weight: var(--w-md);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(223,223,223,.30);
  font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap;
}
.g-white .anno { color: rgba(0,0,0,.32); }
.anno--tl { top: clamp(24px, 3.4vw, 52px); left: clamp(26px, 3.6vw, 56px); }
.anno--tr { top: clamp(24px, 3.4vw, 52px); right: clamp(26px, 3.6vw, 56px); }
/* On stages that sit under the fixed nav, drop the top annotations clear of it
   so they never collide with the wordmark or the nav CTA. */
.hero .anno--tl, .hero .anno--tr { top: calc(var(--nav-h) + clamp(18px, 2.4vw, 34px)); }
.hero .anno--br { display: none; }      /* the scroll cue owns that corner */
.anno--bl { bottom: clamp(24px, 3.4vw, 52px); left: clamp(26px, 3.6vw, 56px); }
.anno--br { bottom: clamp(24px, 3.4vw, 52px); right: clamp(26px, 3.6vw, 56px); }
.anno--rot { writing-mode: vertical-rl; letter-spacing: .26em; }
@media (max-width: 700px) { .anno--tr, .anno--br { display: none; } }

/* ---- Dimension annotation --------------------------------------------- */
.dimline {
  position: absolute; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}
.dimline i {
  display: block; height: 1px; background: rgba(255,255,255,.22);
  position: relative; flex: 1 1 auto; min-width: 40px;
}
.dimline i::before, .dimline i::after {
  content: ''; position: absolute; top: -4px; width: 1px; height: 9px;
  background: rgba(255,255,255,.34);
}
.dimline i::before { left: 0; } .dimline i::after { right: 0; }
.dimline span {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(223,223,223,.34); font-variant-numeric: tabular-nums;
}
.g-white .dimline i { background: rgba(0,0,0,.2); }
.g-white .dimline i::before, .g-white .dimline i::after { background: rgba(0,0,0,.34); }
.g-white .dimline span { color: rgba(0,0,0,.4); }

/* ---- The signal path, rebuilt as part of the drawing -------------------
   Same scroll-driven dashoffset, but styled as construction linework: no
   bloom along the run, only a small square junction light at the head. */
.wire { z-index: 4; }
.w-fg { stroke-width: 1; }
.w-head { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: none;
  border: 1px solid var(--blue); }
.w-head::after {
  width: 26px; height: 26px;
  background: radial-gradient(circle, rgba(1,41,229,.42) 0%, rgba(1,41,229,0) 70%);
}
.w-head[data-end] { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--blue); }
.w-head[data-end]::after { width: 56px; height: 56px; background: radial-gradient(circle, rgba(1,41,229,.6) 0%, rgba(1,41,229,0) 72%); }
.w-node { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.g-white .w-fg { stroke: var(--blue); }

/* ==========================================================================
   CAD WORKSPACE MOTIF
   Graph-paper linework used as a recurring brand texture. Pure CSS, no JS,
   no elements - applied to a section as a ::before so it costs nothing.
   Directional fades keep it from becoming wallpaper: it should enter from an
   edge and dissolve, not tile the whole page.
   ========================================================================== */

.cad { position: relative; isolation: isolate; }
.cad::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    /* coarse construction lines */
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    /* fine graph paper */
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:
    var(--cad-major, 128px) var(--cad-major, 128px),
    var(--cad-major, 128px) var(--cad-major, 128px),
    var(--cad-minor, 32px)  var(--cad-minor, 32px),
    var(--cad-minor, 32px)  var(--cad-minor, 32px);
  background-position: var(--cad-x, 0) var(--cad-y, 0);
}
.g-white.cad::before {
  background-image:
    linear-gradient(rgba(0,0,0,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.075) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.038) 1px, transparent 1px);
}

/* Directional dissolves - pick one per section so the motif never repeats flat */
.cad--l::before   { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 62%); mask-image: linear-gradient(90deg, #000 0%, transparent 62%); }
.cad--r::before   { -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 62%); mask-image: linear-gradient(270deg, #000 0%, transparent 62%); }
.cad--t::before   { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, transparent 70%); }
.cad--b::before   { -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 70%); mask-image: linear-gradient(0deg, #000 0%, transparent 70%); }
.cad--c::before   { -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 8%, transparent 76%); mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 8%, transparent 76%); }
.cad--tr::before  { -webkit-mask-image: radial-gradient(ellipse 96% 96% at 88% 8%, #000 4%, transparent 66%); mask-image: radial-gradient(ellipse 96% 96% at 88% 8%, #000 4%, transparent 66%); }

/* Registration crosshair - a single quiet mark, used sparingly */
.xhair { position: absolute; width: 16px; height: 16px; pointer-events: none; z-index: 2; opacity: .5; }
.xhair::before, .xhair::after { content: ''; position: absolute; background: var(--blue-2); }
.xhair::before { left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
.xhair::after  { top: 50%; left: 0; right: 0; height: 1px; margin-top: -.5px; }
.g-white .xhair::before, .g-white .xhair::after { background: var(--blue); }

/* Coordinate tick strip - a measured edge, not a ruler graphic */
.ticks { position: absolute; left: 0; right: 0; height: 9px; pointer-events: none; z-index: 2;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px var(--tick, 44px));
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
}
.g-white .ticks { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 1px, transparent 1px var(--tick, 44px)); }

/* Static mechanical stills sit IN the scene - edges are faded to true black in
   the files, so screen blending dissolves the crop box entirely. */
.part-still { display: block; width: 100%; height: auto; mix-blend-mode: screen; }