/* Section seams — the dissolve between one section and the next.

   Generalized from the .buy → .chain boundary, which was the only one that
   ever got this treatment: .buy__scrim (css/buy-scene.css) runs the walk
   scene's last pixels to fully opaque var(--bg-deep), and .chain::before
   fades its skyline photo up from the same black, so the beach photo
   dissolves into the section below instead of stopping at a ruled line.
   Every other boundary on the landing page was a hard cut — the hero video
   ending mid-frame into flat black, the leak terminal's teal cutting into
   the wall video, and so on.

   The mechanism is one pseudo-element per section rather than a divider
   element between them: a divider in normal flow would occupy space and
   push the sections apart, and these sections are supposed to touch. ::after
   was free on every section root (only .blood and .chain use a pseudo-
   element at all, and both use ::before), so nothing here displaces existing
   art — it layers over it.

   Two gradients in one layer, each pinned to an edge as a fixed-height band
   via background-size, NOT as a percentage of the section: .buy is 220vh
   tall and .proof is a few hundred pixels, and the dissolve has to read the
   same length on both. */
:root {
  /* 9rem = 144px, matching the reference seam: .buy__scrim's bottom fade
     runs out by 16% of a 100vh stage. The stops below are that same curve
     converted to this box — opaque at the edge, 90% by 4vh (25% of 144px),
     nearly gone by 10vh (62%) — so a boundary built here and the original
     .buy → .chain one resolve at the same rate. */
  --seam-depth: 9rem;
  --seam-fade:
    var(--bg-deep) 0%,
    rgba(5, 5, 6, 0.9) 25%,
    rgba(5, 5, 6, 0.1) 62%,
    rgba(5, 5, 6, 0) 100%;
}

.hero::after,
.leak::after,
.wall::after,
.blood::after,
.chain::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Above the background media, below the copy. Every one of these sections
     paints its photo/video/texture at z-index: 0 and its text at 1 or more,
     and among siblings sharing a z-index the later one in tree order wins —
     ::after is the last child there is. So this sits on the art and under
     everything meant to be read. .hero is the exception; see below. */
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--seam-fade)),
    linear-gradient(0deg, var(--seam-fade));
  background-position: top, bottom;
  background-size: 100% var(--seam-depth);
}

/* .hero stacks differently: its video is .hero__media at z-index 1, so a
   seam at 0 would be painted underneath the very thing it needs to fade.
   2 puts it over the video and still under .hero__content and .scroll-cue
   (both 3). Only the bottom edge — the top of the hero is the top of the
   page, where there is no seam to dissolve, just a nav to not darken. */
.hero::after {
  z-index: 2;
  background-image: linear-gradient(0deg, var(--seam-fade));
  background-position: bottom;
}

/* .proof and .site-footer are deliberately absent: both are flat
   var(--bg-deep) edge to edge, so a fade to var(--bg-deep) over them would
   be invisible work. Their boundaries are already covered from the other
   side — the hero's bottom fade above .proof, .leak's top fade below it.

   .buy takes only half the rule, below. Its BOTTOM is the seam this whole
   effect was copied from and .buy__scrim already runs it. */

/* .blood → .buy was the one boundary the generic rule could not reach: the
   fade has to happen on the buy side (blood's own bottom edge is already
   flat black, so darkening it is invisible), and the buy side's existing
   .buy__scrim only takes its top to 55% opacity — enough to shade the sky,
   not enough to dissolve into the section above.
   It cannot simply be strengthened there either: .buy__scrim lives inside
   .buy__stage, which is STICKY, so anything painted on it stays on screen
   for the whole pinned walk — a fully opaque band at its top would be a
   permanent black bar across the sky rather than a seam. Putting it on the
   section box instead means it sits at the top of the 220vh track and
   scrolls up out of view the moment the stage pins, which is exactly when
   the seam stops being visible. z-index 1 clears .buy__stage, which is its
   own stacking context by virtue of being sticky. */
.buy::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(180deg, var(--seam-fade));
  background-position: top;
  background-size: 100% var(--seam-depth);
}