/* ═══════════════════════════════════════════════════════════════════════════
   Deltawing Labs — motion, light and depth.
   Implements the specimen sheet DW-MOT-001 / REV A ("Motion Light and Depth.dc.html")
   as a layer over the existing site. Loaded after site.css.

   Two rules govern this file:

     1. IT CHANGES NO CONTENT. Every effect is a pseudo-element, a filter, or a
        transition. Not one word of markup is added, moved or removed.

     2. THE § 00 HERO IS SEALED. The field section is excluded from every effect
        here — by stacking order for the grain, and by an explicit reset block
        at § 14. Nothing in this file may reach inside `.field`.

   The sheet's argument, carried over: no loop shares a period with another;
   nothing snaps; hover answers with light, never with colour or displacement.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Motion tokens ─────────────────────────────────────────────────── */

:root {
  --dw-ease:  cubic-bezier(.2, 0, 0, 1);      /* the system ease, everywhere */
  --dw-spec:  cubic-bezier(.22, 1, .36, 1);   /* specular sweep only */

  --dw-nav:   420ms;   /* nav link */
  --dw-row:   800ms;   /* row surface lift */
  --dw-sweep: 1600ms;  /* specular pass across a row */
  --dw-lift:  900ms;   /* panel lift */
  --dw-btn:   700ms;   /* control */
  --dw-rise:  700ms;   /* entrance — see the note at § 13 */

  --dw-bone: 244, 241, 234;
}

/* ── 02 · Keyframes — carried over from the sheet ───────────────────────── */

@keyframes dw-grain {
  0%   { transform: translate3d(0, 0, 0) }
  20%  { transform: translate3d(-3px, 2px, 0) }
  40%  { transform: translate3d(2px, -3px, 0) }
  60%  { transform: translate3d(-2px, -2px, 0) }
  80%  { transform: translate3d(3px, 1px, 0) }
  100% { transform: translate3d(0, 0, 0) }
}
@keyframes dw-drift-a {
  0%, 100% { transform: translate3d(-5%, -3%, 0) scale(1) }
  50%      { transform: translate3d(9%, 7%, 0) scale(1.22) }
}
@keyframes dw-drift-b {
  0%, 100% { transform: translate3d(6%, 4%, 0) scale(1.12) }
  50%      { transform: translate3d(-8%, -6%, 0) scale(.94) }
}
@keyframes dw-drift-c {
  0%, 100% { transform: translate3d(0, 6%, 0) scale(.96) }
  50%      { transform: translate3d(4%, -5%, 0) scale(1.16) }
}
@keyframes dw-sheen-line {
  0%   { opacity: 0; transform: translateX(-45%) }
  45%  { opacity: 1 }
  100% { opacity: 0; transform: translateX(45%) }
}
@keyframes dw-shimmer {
  0%   { background-position: 0% 50% }
  100% { background-position: 200% 50% }
}
@keyframes dw-field {
  0%, 100% { opacity: .16 }
  50%      { opacity: .46 }
}
@keyframes dw-field-quiet {
  0%, 100% { opacity: .05 }
  50%      { opacity: .15 }
}
@keyframes dw-field-page {
  0%, 100% { opacity: .09 }
  50%      { opacity: .24 }
}
@keyframes dw-scan-x {
  0%   { transform: translateX(0); opacity: 0 }
  10%  { opacity: .7 }
  90%  { opacity: .7 }
  100% { transform: translateX(var(--dw-sx, 100%)); opacity: 0 }
}
@keyframes dw-breathe {
  0%, 100% { transform: scale(1);     opacity: .42 }
  50%      { transform: scale(1.055); opacity: .72 }
}
@keyframes dw-rise {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* ── 03 · Grain — one fixed plate over the whole surface ────────────────── */

body::after {
  content: '';
  position: fixed;
  inset: -6px;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  background-image: radial-gradient(rgba(var(--dw-bone), .9) .5px, transparent .5px);
  background-size: 3px 3px;
  animation: dw-grain 5.5s steps(1, end) infinite;
}

/* ── 04 · Stacking order ────────────────────────────────────────────────────
   The grain sits at z-90. The hero is lifted above it and given the page
   ground as an opaque fill, so the grain paints *behind* the hero and the
   § 00 section is left exactly as it was. The nav clears both.
   ─────────────────────────────────────────────────────────────────────────── */

.skip  { z-index: 110; }
.nav   { z-index: 100; }
.field { z-index: 95; background: #0b0b0a; }  /* identical to the body ground */

/* ── 05 · Nav — glass, and a sheen that crosses the seam ────────────────── */

.nav {
  background: rgba(14, 14, 12, .58);
  backdrop-filter: blur(20px) saturate(.85);
  -webkit-backdrop-filter: blur(20px) saturate(.85);
  position: sticky;
}
.nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--dw-bone), .42), transparent);
  animation: dw-sheen-line 17s ease-in-out infinite;
}

.nav-link {
  padding: 6px 0;
  transition:
    color var(--dw-nav) var(--dw-ease),
    box-shadow var(--dw-nav) var(--dw-ease);
}
.nav-link:hover,
.nav-link[aria-current="page"] {
  box-shadow: inset 0 -1px 0 rgba(var(--dw-bone), .8);
}
.nav-link--signal:hover { box-shadow: inset 0 -1px 0 var(--signal); }

/* ── 06 · Section blooms ────────────────────────────────────────────────────
   One soft source per section, drifting on a long unresolved path. Isolated
   so the negative-z pseudo stays behind that section's own copy and nothing
   else. Alpha is held low enough that body text keeps its full contrast.
   ─────────────────────────────────────────────────────────────────────────── */

.sec, .entry, .contact, .stub {
  position: relative;
  isolation: isolate;
}
.sec::before,
.entry::before,
.contact::before,
.stub::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -25%; left: -12%;
  width: 72%; height: 150%;
  background: radial-gradient(closest-side, rgba(var(--dw-bone), .055), transparent 72%);
  filter: blur(24px);
  animation: dw-drift-a 41s ease-in-out infinite;
}
/* No two in phase — alternate the path and the period. */
.sec:nth-of-type(even)::before,
.entry:nth-of-type(even)::before {
  left: auto; right: -10%;
  width: 64%;
  background: radial-gradient(closest-side, rgba(var(--dw-bone), .042), transparent 70%);
  animation: dw-drift-b 53s ease-in-out -11s infinite;
}
.sec:nth-of-type(3n)::before,
.entry:nth-of-type(3n)::before {
  animation: dw-drift-c 34s ease-in-out -7s infinite;
}

/* ── 07 · The plate — interior page heads take the pointer light ────────────
   § 02 of the sheet. The light follows the pointer with a .055 lerp and, when
   left alone, keeps moving on a path of its own (7.3s / 5.1s). Driven by
   motion.js through --dw-lx / --dw-ly; the fallback centre keeps it correct
   with scripting off.
   ─────────────────────────────────────────────────────────────────────────── */

.pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.pagehead::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    var(--dw-lr, 360px) circle at var(--dw-lx, 50%) var(--dw-ly, 45%),
    rgba(var(--dw-bone), .11),
    rgba(var(--dw-bone), 0) 62%);
}
.pagehead::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0; top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--dw-bone), .35), transparent);
}

/* ── 08 · Surface — rows answer with light ──────────────────────────────────
   § 05 of the sheet, verbatim in behaviour: a bar of light at the left edge,
   a slow specular pass, a 5% surface lift. Nothing moves position — the
   reader's eye keeps its place.
   ─────────────────────────────────────────────────────────────────────────── */

.date,
.prow:not(.prow--head),
.belief,
.product,
.mech,
.claim,
.step,
.leaf,
.concept__row,
.qrow:not(.qrow--head),
.tree__row,
.trio > * {
  position: relative;
  transition:
    background var(--dw-row) var(--dw-ease),
    box-shadow var(--dw-row) var(--dw-ease);
}

.date::after,
.prow:not(.prow--head)::after,
.belief::after,
.product::after,
.mech::after,
.claim::after,
.step::after,
.leaf::after,
.concept__row::after,
.qrow:not(.qrow--head)::after,
.tree__row::after,
.trio > *::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg,
    transparent 36%,
    rgba(var(--dw-bone), .13) 50%,
    transparent 64%);
  background-size: 250% 100%;
  background-position: 130% 0;
  transition:
    opacity 600ms var(--dw-ease),
    background-position var(--dw-sweep) var(--dw-spec);
}

.date:hover, .date:focus-within,
.prow:not(.prow--head):hover,
.belief:hover, .belief:focus-within,
.product:hover, .product:focus-within,
.mech:hover,
.claim:hover,
.step:hover,
.leaf:hover,
.concept__row:hover,
.qrow:not(.qrow--head):hover,
.tree__row:hover, .tree__row:focus-visible {
  background: rgba(var(--dw-bone), .05);
}

/* The three-up cells sit flush to the column edge — light, but no wash. */
.trio > *:hover { background: rgba(var(--dw-bone), .04); }

/* ── The edge light ─────────────────────────────────────────────────────────
   Was a 3px inset rule at bone 65% — a hard bright line landing directly
   against the row number, which crowded it and read as a divider rather than
   as light. It is now a broad wash that starts 44px out in the gutter and
   falls away across 190px at a sixth of the alpha: the row is lit from the
   left rather than ruled off on the left, and the copy gets air around it.
   ─────────────────────────────────────────────────────────────────────────── */

.date::before,
.prow:not(.prow--head)::before,
.belief::before,
.product::before,
.mech::before,
.claim::before,
.step::before,
.leaf::before,
.concept__row::before,
.qrow:not(.qrow--head)::before,
.tree__row::before {
  content: '';
  position: absolute;
  left: -44px;
  top: 0;
  bottom: 0;
  width: 190px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    rgba(var(--dw-bone), .10) 0%,
    rgba(var(--dw-bone), .045) 30%,
    rgba(var(--dw-bone), 0) 84%);
  transition: opacity var(--dw-row) var(--dw-ease);
}

.date:hover::before, .date:focus-within::before, .date.is-on::before,
.prow:not(.prow--head):hover::before, .prow.is-on::before,
.belief:hover::before, .belief:focus-within::before,
.product:hover::before, .product:focus-within::before,
.mech:hover::before,
.claim:hover::before,
.step:hover::before,
.leaf:hover::before,
.concept__row:hover::before,
.qrow:not(.qrow--head):hover::before,
.tree__row:hover::before, .tree__row:focus-visible::before, .tree__row.is-on::before {
  opacity: 1;
}

.date:hover::after, .date:focus-within::after,
.prow:not(.prow--head):hover::after,
.belief:hover::after, .belief:focus-within::after,
.product:hover::after, .product:focus-within::after,
.mech:hover::after,
.claim:hover::after,
.step:hover::after,
.leaf:hover::after,
.concept__row:hover::after,
.qrow:not(.qrow--head):hover::after,
.tree__row:hover::after, .tree__row:focus-visible::after,
.trio > *:hover::after {
  opacity: 1;
  background-position: -40% 0;
}

/* The JS-driven selected state keeps its own surface; its edge light is
   carried by the ::before wash above, not by a rule. */

/* Doctrine and limits entries — same language, longer measure. */
.entry { transition: background var(--dw-row) var(--dw-ease); }
.entry:hover { background: rgba(var(--dw-bone), .022); }

/* ── 09 · Controls ──────────────────────────────────────────────────────────
   The sheet's primary action lifts 2px over 700ms and casts a soft bone
   shadow. Colour is untouched — signal stays signal, ghost stays ghost.
   ─────────────────────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  overflow: hidden;
  transition:
    background var(--dw-btn) var(--dw-ease),
    border-color var(--dw-btn) var(--dw-ease),
    color var(--dw-btn) var(--dw-ease),
    transform var(--dw-btn) var(--dw-ease),
    box-shadow var(--dw-btn) var(--dw-ease);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg,
    transparent 34%,
    rgba(var(--dw-bone), .16) 50%,
    transparent 66%);
  background-size: 260% 100%;
  background-position: 130% 0;
  transition:
    opacity 700ms var(--dw-ease),
    background-position 1500ms var(--dw-spec);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { opacity: 1; background-position: -50% 0; }
.btn--signal:hover { box-shadow: 0 18px 40px -22px rgba(226, 84, 58, .55); }
.btn--ghost:hover  { box-shadow: 0 18px 40px -24px rgba(var(--dw-bone), .45); }
.btn:active { transform: translateY(0); }

.quiet-link {
  transition:
    color var(--dw-nav) var(--dw-ease),
    border-color var(--dw-nav) var(--dw-ease);
}

/* ── 10 · Panels ────────────────────────────────────────────────────────────
   The tree earns a field behind it — two dot densities on unrelated periods,
   plus one slow bloom. The machine box and the exception queue take a single
   scan traverse. All strictly behind the copy.
   ─────────────────────────────────────────────────────────────────────────── */

.tree {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Two densities on unrelated periods, as the sheet's Field specimen. Held far
   below the specimen's .16 → .46: there, the field is the subject; here it is
   behind six rows of 10px mono, and at the sheet's strength it competes with
   the labels it is supposed to sit under. */
.tree::before,
.tree::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(var(--dw-bone), .45) 1px, transparent 1px);
  background-size: 18px 18px;
  animation: dw-field-quiet 11s ease-in-out infinite;
}
.tree::after {
  background-position: 9px 9px;
  animation: dw-field-quiet 17s ease-in-out -5s infinite;
}

.machine__box,
.queue {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.machine__box::after,
.queue::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  pointer-events: none;
  --dw-sx: 100vw;
  background: linear-gradient(180deg, transparent, rgba(var(--dw-bone), .5), transparent);
  animation: dw-scan-x 14s cubic-bezier(.4, 0, .2, 1) infinite;
}
.queue::after { animation-duration: 19s; animation-delay: -6s; }

/* ── 11 · Shimmer — display type only ───────────────────────────────────────
   § 00's headline is excluded (see § 14). Applied to the interior page heads
   and the two homepage display statements. The dimmest stop is held at .58
   rather than the sheet's .48: at 40px+ this is large text, and .58 keeps it
   above 3:1 against the ground through the whole sweep.
   ─────────────────────────────────────────────────────────────────────────── */

.pagehead__h1,
.mega--sec,
.mega--partners {
  background: linear-gradient(104deg,
    #ffffff 0%,
    #f4f1ea 26%,
    rgba(var(--dw-bone), .58) 58%,
    #f4f1ea 84%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dw-shimmer 26s linear infinite;
}
.mega--partners { animation-duration: 31s; }
.mega--sec      { animation-duration: 29s; }

/* Selection has to stay legible on clipped text. */
.pagehead__h1::selection,
.mega--sec::selection,
.mega--partners::selection { -webkit-text-fill-color: #f4f1ea; }

/* ── 12 · Footer ────────────────────────────────────────────────────────── */

.foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.foot::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -60%; left: 20%;
  width: 60%; height: 220%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--dw-bone), .07), transparent 70%);
  filter: blur(24px);
  animation: dw-drift-b 61s ease-in-out infinite;
}

/* ── 13 · Entrance ──────────────────────────────────────────────────────────
   Sections rise once as they enter. Gated on `html.dw-js`, which motion.js
   sets, so with scripting off nothing is ever hidden.

   The sheet's own dw-rise runs 1400–1500ms, but that is a hero playing once
   on load with nothing racing it. Bound to a scroll, that length reads as an
   announcement — which § 01 of the sheet forbids — and leaves a section blank
   while the reader is already looking at it. Held to 700ms and 10px: enough
   to feel led, short enough that nobody waits on it.
   ─────────────────────────────────────────────────────────────────────────── */

.dw-js .sec > *,
.dw-js .entry > *,
.dw-js .pagehead__in > *,
.dw-js .contact > *,
.dw-js .stub > * {
  opacity: 0;
  transform: translateY(10px);
}
.dw-js .is-in > * {
  animation: dw-rise var(--dw-rise) var(--dw-ease) both;
}
.dw-js .is-in > *:nth-child(2) { animation-delay: 80ms; }
.dw-js .is-in > *:nth-child(3) { animation-delay: 150ms; }
.dw-js .is-in > *:nth-child(4) { animation-delay: 210ms; }

/* ── 14 · Parallax ──────────────────────────────────────────────────────────
   The blooms already behind each section travel slower than the copy, so
   passing from one section to the next has a floor that lags rather than a
   cut. Nothing new is drawn.

   The offset rides the independent `translate` property, not `transform`,
   because the drift animation already owns `transform` and the two would
   otherwise overwrite each other.
   ─────────────────────────────────────────────────────────────────────────── */

.sec::before,
.entry::before {
  translate: 0 var(--dw-lag, 0px);
}

/* ── 16 · GLASS · the contact pane ──────────────────────────────────────────
   § 04 of the sheet, on the one surface that plainly qualifies: a single pane
   with a bloom behind it and nothing else on the page competing for the eye.
   The sheet's numbers, with two departures — radius stays 0, because the
   identity is squared and the deviation note licenses gradient, glow and
   shadow but says nothing about corners; and the pane does not lift, because
   a form that jumps 9px when the pointer crosses it is a shove, not a hover.
   The specular pass fires on focus instead, when the pane is being used.
   ─────────────────────────────────────────────────────────────────────────── */

[data-page="contact"] .form {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: linear-gradient(152deg,
    rgba(var(--dw-bone), .085),
    rgba(var(--dw-bone), .018));
  backdrop-filter: blur(26px) saturate(.9);
  -webkit-backdrop-filter: blur(26px) saturate(.9);
  border: 1px solid rgba(var(--dw-bone), .13);
  box-shadow:
    inset 0 1px 0 rgba(var(--dw-bone), .26),
    inset 0 -60px 80px -60px rgba(0, 0, 0, .8),
    0 30px 60px -40px rgba(0, 0, 0, .9);
  transition:
    border-color var(--dw-lift) var(--dw-ease),
    box-shadow var(--dw-lift) var(--dw-ease);
}
[data-page="contact"] .form:focus-within {
  border-color: rgba(var(--dw-bone), .30);
  box-shadow:
    inset 0 1px 0 rgba(var(--dw-bone), .45),
    inset 0 -60px 80px -60px rgba(0, 0, 0, .8),
    0 46px 80px -44px rgba(0, 0, 0, .95);
}
[data-page="contact"] .form::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg,
    transparent 34%,
    rgba(var(--dw-bone), .16) 50%,
    transparent 66%);
  background-size: 260% 100%;
  background-position: 130% 0;
  transition:
    opacity 700ms var(--dw-ease),
    background-position 1500ms var(--dw-spec);
}
[data-page="contact"] .form:focus-within::after {
  opacity: 1;
  background-position: -50% 0;
}
[data-page="contact"] .form__fields { position: relative; z-index: 1; }

/* ── 17 · DEPTH · the deck ──────────────────────────────────────────────────
   § 03 of the sheet, landed on the Cockpit tree — the one section on the site
   that is literally a hierarchy of levels, on a page where nothing else is
   competing. Five planes 42px apart, perspective 1500, rotateX 56° rotateZ
   −40°, floating on 15–31s, answering the pointer by ±3.5° through motion.js.

   Held to the right of the column and masked, so it reads as a structure
   standing beside the tree rather than a pattern printed under the words.
   ─────────────────────────────────────────────────────────────────────────── */

.dw-deck {
  position: absolute;
  z-index: -1;
  top: 4%;
  right: -22%;
  width: 52%;
  height: 92%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
  opacity: .5;
  /* Weighted right and faded hard on the left, so the stack clears the
     description column rather than printing under the last line of it. */
  mask-image: linear-gradient(100deg, transparent 16%, #000 52%, #000 80%, transparent 99%);
  -webkit-mask-image: linear-gradient(100deg, transparent 16%, #000 52%, #000 80%, transparent 99%);
}
.dw-deck__stage {
  position: relative;
  width: min(430px, 88%);
  height: 62%;
  transform-style: preserve-3d;
  transform: rotateX(var(--dw-rx, 56deg)) rotateZ(var(--dw-rz, -40deg));
  will-change: transform;
}
.dw-deck__plane {
  position: absolute;
  inset: 0;
  transform: translateZ(var(--z));
  animation: dw-floatz var(--dw-fd, 19s) ease-in-out var(--dw-delay, 0s) infinite;
}
@keyframes dw-floatz {
  0%, 100% { transform: translateZ(var(--z)) translateY(0) }
  50%      { transform: translateZ(var(--z)) translateY(-7px) }
}
.dw-deck__plane:nth-child(1) {
  --z: 210px; --dw-fd: 15s;
  border: 1px solid rgba(var(--dw-bone), .30);
  background-image:
    linear-gradient(rgba(var(--dw-bone), .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dw-bone), .085) 1px, transparent 1px);
  background-size: 26px 26px;
}
.dw-deck__plane:nth-child(2) {
  --z: 150px; --dw-fd: 19s; --dw-delay: -4s;
  border: 1px solid rgba(var(--dw-bone), .22);
  background-image: linear-gradient(90deg, rgba(var(--dw-bone), .07) 1px, transparent 1px);
  background-size: 18px 100%;
}
.dw-deck__plane:nth-child(3) {
  --z: 90px; --dw-fd: 23s; --dw-delay: -9s;
  border: 1px solid rgba(var(--dw-bone), .17);
  background-image: radial-gradient(rgba(var(--dw-bone), .45) 1px, transparent 1px);
  background-size: 20px 20px;
}
.dw-deck__plane:nth-child(4) {
  --z: 34px; --dw-fd: 27s; --dw-delay: -13s;
  border: 1px solid rgba(var(--dw-bone), .12);
  background-image: linear-gradient(rgba(var(--dw-bone), .055) 1px, transparent 1px);
  background-size: 100% 22px;
}
.dw-deck__plane:nth-child(5) {
  --z: -24px; --dw-fd: 31s; --dw-delay: -6s;
  border: 1px solid rgba(var(--dw-bone), .085);
  background: rgba(0, 0, 0, .45);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
}

/* ── 18 · TELEMETRY · the queue ─────────────────────────────────────────────
   § 06: "Data breathes on a slower cycle than the page." Landed under the
   Avax exception queue, which is the one place on the site that is a running
   system with rows ageing in it. Draw 3.4s once, scaleY 1 → 1.14 on 17s, scan
   traverse 14s, dot field under it.

   Weighted below the rows and masked upward, so the trace reads as signal
   beneath the data rather than lines crossing it.
   ─────────────────────────────────────────────────────────────────────────── */

.dw-telemetry {
  position: absolute;
  z-index: -1;
  left: -3%;
  right: -3%;
  top: 14%;
  height: 150%;
  pointer-events: none;
  overflow: hidden;
  opacity: .55;
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 72%, transparent 97%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 72%, transparent 97%);
}
.dw-telemetry__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--dw-bone), .5) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .11;
}
.dw-telemetry__wave {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  animation: dw-wave 17s ease-in-out infinite;
}
.dw-telemetry__wave svg { width: 100%; height: 100%; display: block; }
@keyframes dw-wave {
  0%, 100% { transform: scaleY(1) }
  50%      { transform: scaleY(1.14) }
}
@keyframes dw-draw {
  from { stroke-dashoffset: 3200 }
  to   { stroke-dashoffset: 0 }
}
.dw-telemetry__lead { animation: dw-draw 3.4s var(--dw-ease) both; }
.dw-telemetry__scan {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  --dw-sx: 100%;
  background: linear-gradient(180deg, transparent, rgba(var(--dw-bone), .45), transparent);
  animation: dw-scan-x 14s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* ── 18b · FIELD · the About page ───────────────────────────────────────────
   § 01 of the sheet, the Field specimen: two dot densities breathing on
   unrelated periods (11s / 17s, offset −5s), one drifting bloom beneath them.
   About is the page about five months of observation — field notes — so this
   is its one specimen, page-wide and far below the sheet's alpha so the copy
   keeps its full contrast.

   The pseudos are fixed, so the field holds still while the page scrolls
   past it — depth by rate difference, same argument as the parallax. Behind
   everything via z-index -1 inside main's own stacking context.
   ─────────────────────────────────────────────────────────────────────────── */

[data-page="about"] main {
  position: relative;
  isolation: isolate;
}
[data-page="about"] main::before,
[data-page="about"] main::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(var(--dw-bone), .5) 1px, transparent 1px);
  background-size: 26px 26px;
  animation: dw-field-page 11s ease-in-out infinite;
  mask-image: radial-gradient(110% 90% at 62% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(110% 90% at 62% 30%, #000 20%, transparent 78%);
}
[data-page="about"] main::after {
  background-position: 13px 13px;
  animation: dw-field-page 17s ease-in-out -5s infinite;
  mask-image: radial-gradient(100% 80% at 30% 70%, #000 12%, transparent 74%);
  -webkit-mask-image: radial-gradient(100% 80% at 30% 70%, #000 12%, transparent 74%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   19 · THE HERO IS SEALED.

   § 00 is excluded from this entire file by explicit reset. The grain is
   already handled by stacking order at § 04; this block covers everything
   that could otherwise inherit through a descendant selector. If a new effect
   is added above, it must be neutralised here too.
   ═══════════════════════════════════════════════════════════════════════════ */

.field,
.field * {
  isolation: auto;
}
.field::before,
.field::after,
.field *::before,
.field *::after {
  animation: none;
}
.field .btn {
  overflow: visible;
  box-shadow: none;
  transform: none;
  transition:
    background var(--dur-sm) var(--ease),
    border-color var(--dur-sm) var(--ease),
    color var(--dur-sm) var(--ease);
}
.field .btn::after { content: none; }
.field .btn:hover { transform: none; box-shadow: none; }
/* The § 00 entrance and the pulsing field stamp are site.css's, not this file's. */
.dw-js .field > *,
.dw-js .field__in > * { opacity: 1; transform: none; }
.field .pulse { animation: dwpulse 1.7s infinite; }

/* ── 20 · Still mode ────────────────────────────────────────────────────────
   The sheet ships a stillMode switch that pauses every loop. Reduced-motion
   is wired to the same thing: ambient light stops, the substrate and the deck
   hold their position, nothing is removed, and no reveal ever hides content.
   ─────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body::after,
  .nav::after,
  .sec::before, .entry::before, .contact::before, .stub::before,
  .tree::before, .tree::after,
  .pagehead::before,
  .machine__box::after, .queue::after,
  .foot::before,
  .dw-deck__plane,
  .dw-telemetry__wave,
  .dw-telemetry__lead,
  .pagehead__h1, .mega--sec, .mega--partners {
    animation: none !important;
  }
  [data-page="about"] main::before,
  [data-page="about"] main::after {
    animation: none !important;
    opacity: .08;
  }
  .machine__box::after, .queue::after { opacity: 0; }
  .dw-telemetry__scan { display: none; }
  .sec::before, .entry::before { translate: none; }
  .btn:hover { transform: none; }
  .dw-js .sec > *,
  .dw-js .entry > *,
  .dw-js .pagehead__in > *,
  .dw-js .contact > *,
  .dw-js .stub > * {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* ── 21 · Responsive ────────────────────────────────────────────────────────
   Below the two-column breakpoint the section rail sits above its section
   rather than beside it, so there is no gutter left to thread and the deck
   has no margin to stand in. Both come out rather than crowd the copy.
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .dw-deck { display: none; }
}
@media (max-width: 900px) {
  .dw-telemetry { left: -2%; right: -2%; opacity: .4; }
}