/* ═══════════════════════════════════════════════════════════════════════════
   The depth layers: the atmosphere behind the mark and the air in front of it.

   The landing screen is one composition seen through a lens, and the journey
   into the process section is that lens moving forward. Two layers make the
   distance visible, and both ride the same number, `--dolly`, the camera's
   travel, written by scripts/process/journey.js from the scroll, so the fog
   the camera moves past and the dust it moves through are one move with the
   mark, not three layers scrolling at one rate.

   Back to front, and all of it decided by paint order:

     .hero-atmos     z-index 0, first positioned element   the fog, THIS FILE
     .hero-mark      z-index 0                             the mark (swarm.css)
     .wave-canvas    z-index 0                             the water (wave.css)
     .swarm-vignette z-index 1                             the frame's falloff

   Nothing here is hit-tested, nothing here carries type, and every value the
   scroll writes is painted on the frame it changes: no transition on a
   transform that moves every frame, the way every scrolled layer here keeps.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── the atmosphere ─────────────────────────────────────────────────────
   Two plates of fog on one fixed element. They carry no light: the cold blue
   of the far plate is the page's own blue seen through air, and the band is
   the air over the water's horizon. Opacity is written on the element so the
   plates rise with the landing screen's layers and fall with the water under
   the build stage (`--field-fade`), and the transforms are the camera's. */
.hero-atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1400ms var(--ease-soft) 120ms;
}
.has-swarm .hero-atmos { opacity: var(--field-fade, 1); }
/* `!important` for the reason styles/wave.css gives: the universal reduced-
   motion damping in styles/experience.css sets a duration on `*`, and a value
   rewritten on every scrolled frame must be painted on that frame. */
.has-swarm.field-live .hero-atmos { transition: none !important; }

.hero-atmos::before,
.hero-atmos::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* The far plate: a deep haze around the pocket the mark stands in, wide and
   low, its falloff long so it ends in the page rather than in a disc. It is
   the far wall of the room, so it moves LEAST with the camera, a few pixels
   in the mark's direction and a slow swell, and it thickens a little as the
   mark embeds itself in it, which is atmospheric perspective: what is further
   off is seen through more air. */
.hero-atmos::before {
  background:
    radial-gradient(52% 46% at 64% 46%,
      rgba(34, 96, 168, 0.13) 0%, rgba(24, 74, 140, 0.075) 28%,
      rgba(14, 44, 96, 0.032) 56%, transparent 80%),
    radial-gradient(70% 60% at 78% 32%,
      rgba(20, 60, 120, 0.06) 0%, transparent 70%);
  opacity: calc(0.66 + 0.34 * var(--dolly, 0));
  transform: translate3d(calc(var(--dolly, 0) * 34px), calc(var(--dolly, 0) * -16px), 0)
             scale(calc(1 + 0.09 * var(--dolly, 0)));
}

/* The near band: the air over the horizon, between the lens and the water.
   Anchored to the foot of the frame like the wave, it lifts and broadens
   with the terrain (styles/wave.css) but by MORE, because it is nearer than
   the water it stands over: the difference of rates is the depth. */
.hero-atmos::after {
  background:
    linear-gradient(180deg,
      transparent 46%, rgba(30, 92, 150, 0.024) 60%,
      rgba(26, 78, 132, 0.052) 72%, rgba(18, 54, 100, 0.04) 84%, rgba(10, 30, 60, 0.018) 94%, transparent 100%);
  transform-origin: 50% 100%;
  transform: translate3d(0, calc(var(--dolly, 0) * -48px), 0)
             scale(calc(1 + 0.16 * var(--dolly, 0)), calc(1 + 0.42 * var(--dolly, 0)));
}

/* The dust that used to draw here: a few thousand points of air in three
   strata, on a canvas in front of the mark, is gone: it read as a cheap
   sparkle over the composition rather than as air. The fog plates above are
   what carry the depth now. */

/* Under reduced motion the plates hold still. */
@media (prefers-reduced-motion: reduce) {
  .hero-atmos::before,
  .hero-atmos::after { will-change: auto; }
}

/* One column gets no fog. The mark is not drawn there (styles/swarm.css) and
   the wave is not mounted (scripts/main.js gates it at this same width), so
   there is nothing for the air to stand between. */
@media (max-width: 720px) {
  .hero-atmos { display: none; }
}

/* Forced colours: the page's rule everywhere is that decorative layers do not
   survive it, because there is no palette left to be decorative in. */
@media (forced-colors: active) {
  .hero-atmos { display: none; }
}

@media print {
  .hero-atmos { display: none !important; }
}