/* =============================================================================
   PAGONI — FLOW
   The continuous ground.

   There are no section backgrounds on this site. Not one. Every block is
   transparent and sits on a single fixed field. Its lighter green treatment
   stays identical throughout the page, including the footer.

   Three mechanisms do it:
     1. #field    — one fixed, static frosted-green ground
     2. overlap   — sections pull up into each other with negative margin
     3. feather   — each section's edges are masked, so its content dissolves
                    rather than stopping at a boundary
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. THE FIELD
   Fixed, behind everything, never scrolls or changes brightness with progress.
   ----------------------------------------------------------------------------- */
#field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--raw-void-950);
}

#field > * {
  position: absolute;
  inset: -10%;              /* preserve the original wash's framing */
}

/* Freeze the original paint swatch at its lighter end-of-page position. */
.field__base {
  background:
    linear-gradient(
      to bottom,
      var(--raw-abyss-980)  0%,
      var(--raw-void-950)  20%,
      var(--raw-void-900)  46%,
      var(--raw-void-850)  70%,
      var(--raw-void-800)  88%,
      var(--raw-void-800) 100%
    );
  background-size: 100% 460%;
  background-position: 0% 100%;
  opacity: 0.94;
}

/* Static depth wash keeps the shared lighter ground dimensional. */
.field__depth {
  background:
    radial-gradient(
      130% 84% at 50% 62%,
      transparent 0%,
      var(--raw-void-a38) 42%,
      var(--raw-void-950) 100%
    );
  opacity: 0.62;
}

/* The original invitation's low chartreuse glow, now present throughout. */
.field__warm {
  background:
    radial-gradient(
      90% 60% at 50% 92%,
      var(--raw-chart-a20) 0%,
      transparent 70%
    );
  opacity: 0.85;
  mix-blend-mode: screen;
}

/* The texture sits below the section photographs and their feathered edges. */
#field > .field__grain {
  inset: 0;
  background-image: var(--texture-glass);
  background-repeat: repeat;
  background-size: var(--texture-glass-size);
  opacity: 1;
  will-change: auto;
  mix-blend-mode: overlay;
}

/* -----------------------------------------------------------------------------
   2. OVERLAP
   Sections are pulled up into the one above. By the time a block's headline is
   readable, the previous block's last element is still on screen behind it —
   which is the whole point. --bleed is per-section so the rhythm can be tuned
   block by block without touching any other rule.
   ----------------------------------------------------------------------------- */
.flow {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* Padding is deliberately larger than any --bleed. The overlap has to land in a
   section's EMPTY margin, not in its content — two blocks sharing scroll space
   is the effect we want; two headlines sharing pixels is a collision. Whenever
   you raise a --bleed, raise this first. */
.flow__section {
  /* The split was 8vh of overlap against 20vh of padding, and at that ratio the
     next block's heading was arriving while the previous block was still being
     read — most visibly under the hero, where the Product title sat just below
     the fold on a 900-tall screen. Deeper padding and a shallower bleed keeps
     the blocks CONNECTED without letting them converge. */
  --bleed: 6vh;
  position: relative;
  background: transparent;      /* never, ever give one of these a background */
  margin-top: calc(var(--bleed) * -1);
  padding-block: 30vh;
}
.flow__section:first-child { margin-top: 0; }

/* THE OVERLAP MUST NOT SWALLOW CLICKS.

   A section's box now reaches up to 115px INTO the block above it, and that
   reach is empty space — but an empty box still takes the pointer. The hero's
   'Next slide' button sat 25px inside the Product section's leading padding and
   was completely dead: no error, no visual clue, the click simply landed on a
   transparent section that had nothing to do with it.

   So the section box itself is transparent to the pointer and its children take
   it back. Every block's real content lives in children — the section elements
   in index.html are empty shells their modules fill — so nothing loses its
   clicks, and the bleed stops stealing what is underneath it. */
.flow__section { pointer-events: none; }
.flow__section > * { pointer-events: auto; }

/* Stacking within the overlap. Later sections come forward so their content
   passes in front of the outgoing block rather than under it. Add a row when
   you add a block; an unlisted index gets z-index auto and will be overlapped
   by its own predecessor, which reads as the new section arriving underneath. */
.flow__section[data-flow-index="0"]  { z-index: 1; }
.flow__section[data-flow-index="1"]  { z-index: 2; }
.flow__section[data-flow-index="2"]  { z-index: 3; }
.flow__section[data-flow-index="3"]  { z-index: 4; }
.flow__section[data-flow-index="4"]  { z-index: 5; }
.flow__section[data-flow-index="5"]  { z-index: 6; }
.flow__section[data-flow-index="6"]  { z-index: 7; }
.flow__section[data-flow-index="7"]  { z-index: 8; }
.flow__section[data-flow-index="8"]  { z-index: 9; }
.flow__section[data-flow-index="9"]  { z-index: 10; }
.flow__section[data-flow-index="10"] { z-index: 11; }
.flow__section[data-flow-index="11"] { z-index: 12; }

/* -----------------------------------------------------------------------------
   3. FEATHER
   A section's content fades out at its own edges. Combined with the overlap
   this means there is never a visible line between two blocks — the previous
   one thins out through the next one's arrival.
   ----------------------------------------------------------------------------- */
.flow__feather {
  --feather-top: 14vh;
  --feather-bottom: 14vh;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--feather-top),
    #000 calc(100% - var(--feather-bottom)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--feather-top),
    #000 calc(100% - var(--feather-bottom)),
    transparent 100%
  );
}
.flow__feather--top-only    { --feather-bottom: 0vh; }
.flow__feather--bottom-only { --feather-top: 0vh; }

/* -----------------------------------------------------------------------------
   4. THE SPINE
   One hairline running the full height of the document, brightening where you
   currently are. It is the thing that says "this is all one page" — a reader
   who scrolls past four blocks has watched a single continuous line the whole
   way down.
   ----------------------------------------------------------------------------- */
.spine {
  position: fixed;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--raw-ink-050-a08) 12%,
    var(--raw-ink-050-a08) 88%,
    transparent 100%
  );
  opacity: 0.6;
}

/* The travelling node. Sits at the reading position and carries the signal
   colour — the one moving thing that belongs to no single section. */
.spine__node {
  position: absolute;
  left: 50%;
  top: calc(14% + var(--flow-p) * 66%);
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--foreground-signal);
  box-shadow: 0 0 14px 2px var(--raw-chart-a20);
  opacity: calc(0.35 + var(--flow-depth) * 0.5);
}

@media (max-width: 1024px) {
  .spine { display: none; }
  .flow__section { --bleed: 4vh; padding-block: 18vh; }
  .flow__feather { --feather-top: 8vh; --feather-bottom: 8vh; }
}