/* ============================================================
   SCROLL FIELD — Pep pitch as page ground
   ------------------------------------------------------------
   The aperture from explorations/design-system/scroll-field.html,
   sitting behind the page rather than as a lab. Construction
   hair only: ink, no Ice, no nodules. Depth is speed, not
   colour.

   Opacity 0.5 is the whole layer, not a second cut of LINE.
   Photography, dark beats and the menu sheet cover it; the
   field reads in the paper between them.

   pointer-events: none — magnets are driven from window
   pointermove, the same as the lab, because this layer sits
   under .k-stage.

   Named separately from css/hero-aperture.css. That file is
   the WebGL lens on the hero photograph. This is the pitch.
   ============================================================ */

.k-scroll-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.5;
}

.k-scroll-field svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

.k-scroll-field canvas.magnet,
.k-scroll-field canvas.cellmag,
.k-scroll-field canvas.pass {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  display: block;
}

/* The page has to sit above the field. .k-stage is otherwise
   an undecorated wrapper until the menu opens; without a
   stacking context the field and the document paint in tree
   order and photographs do not reliably cover the hair. */
.k-stage {
  position: relative;
  z-index: 1;
}

/* The menu has its own atmosphere field (D4b). Hide this one
   for the hinge, the same way .k-stage is hidden once the
   sheet is up. */
html[data-menu] .k-scroll-field {
  visibility: hidden;
}

/* Paper used to paint the same ground as the body, which hid
   the field completely on the home page — hero, record, halves
   and wall are all full-viewport slabs of --kdb-surface-ground.
   Photography, dark beats and the footer still cover it. */
.k-hero--solo,
.k-slide,
.k-slide[data-space] .k-slide__finale,
.k-otot,
.k-wall {
  background: transparent;
}