/* ==========================================================================
   PCP — how one chapter becomes the next
   --------------------------------------------------------------------------
   This file owns section BOUNDARIES only. It never changes a section's
   layout, type or content — only how its surface begins and ends, so the page
   stops reading as a stack of opaque rectangles.

   The problem it fixes: every major section painted an opaque background that
   simply stopped at its own edge, so each boundary was a hard horizontal rule
   across the full width. Here each of those surfaces fades out into the shared
   page base instead, and adjacent chapters cross-dissolve through it.

   Layer 1 (this file, pure CSS) is the structural fix and needs no script.
   Layer 2 (assets/js/transitions.js) adds the per-boundary cinematic move —
   gold light, darkness, particles, depth — into the shared fixed atmosphere
   layer that shows through these newly transparent seams.
   ========================================================================== */

/* --- Hero: dissolve the base into the page rather than stopping on it ----- */
.page-home .hero-bg {
  background:
    radial-gradient(58% 42% at 50% 106%, rgba(232, 106, 36, 0.10), transparent 72%),
    radial-gradient(52% 46% at 50% 96%, rgba(212, 175, 55, 0.09), transparent 72%),
    radial-gradient(72% 62% at 50% 0%, rgba(11, 31, 58, 0.85), transparent 70%),
    linear-gradient(180deg, #050505 0%, #060f1d 74%, rgba(7, 20, 38, 0) 100%);
}
/* The bottom vignette grounds the hero and now closes it.

   It used to end on rgba(5,5,5,0) — fully transparent at the very last
   pixel — which let the film run bright right up to the hero's edge and meet
   the next section's black on a hard horizontal cut. It now darkens to solid
   black over the final quarter, so the footage dissolves into exactly the
   colour the section below is painted in. The gold bloom that straddles that
   line lives on the lower section (see assets/css/home.css).

   This layer is under the hero's content, so it darkens the footage behind
   the statistics, never the figures themselves. */
/* THE HERO'S BOTTOM EDGE — AND NOTHING ELSE.

   One gradient, on one edge. The left, right and top bands that used to be
   here are gone, not faded down: the film now runs to the top and both sides
   with nothing over it, which is why the corners show footage rather than
   burgundy.

   Sixteen stops on an ease curve, reaching fully transparent at 45% of the
   hero's height. Long on purpose. What gives a short ramp away is not the
   part where it is strong, it is the moment it stops, so the last of it is
   spent on a very flat tail — 0.035, 0.01, 0 across the final three percent —
   where each step is a fraction of a level and there is no point to catch.

   Three stops would put two sharp changes of slope into the ramp, and a slope
   change reads as a band even when every individual step is small: the eye
   finds the second derivative, not the first. Hence the stop count.

   45% from the bottom is 55% down the hero and the centre of the frame is 48%
   down, so the ramp begins BELOW the centre and the middle of the film is
   never touched. Verified by rendering the hero on flat white: the centre
   samples pure 255,255,255.

   The first stop is opaque #260000 — the exact colour of the body and of the
   bar directly beneath — so the hero's last row and the page's first row hold
   the same value and the join has nothing in it to see. */
.page-home .hero-vignette {
  background:
    linear-gradient(0deg,
      #260000 0%,
      rgba(38, 0, 0, 0.99) 2%,
      rgba(38, 0, 0, 0.96) 5%,
      rgba(38, 0, 0, 0.91) 8%,
      rgba(38, 0, 0, 0.84) 11%,
      rgba(38, 0, 0, 0.75) 14%,
      rgba(38, 0, 0, 0.65) 18%,
      rgba(38, 0, 0, 0.54) 22%,
      rgba(38, 0, 0, 0.43) 26%,
      rgba(38, 0, 0, 0.32) 30%,
      rgba(38, 0, 0, 0.22) 34%,
      rgba(38, 0, 0, 0.14) 37%,
      rgba(38, 0, 0, 0.08) 40%,
      rgba(38, 0, 0, 0.035) 42%,
      rgba(38, 0, 0, 0.01) 43.5%,
      rgba(38, 0, 0, 0) 45%);
}

/* --- The ecosystem slab -------------------------------------------------
   Was a hard #071426→#0B1F3A block with a 1px gold rule top and bottom. The
   rules were the most literal "rectangle" on the page, and they contradicted
   the project's own rule that gold reads as light and never as an outline.
   They are replaced by the seam glow that transitions.js puts behind them. */
.page-home .surface-navy-solid {
  background: linear-gradient(180deg,
    rgba(7, 20, 38, 0) 0%,
    rgba(7, 20, 38, 0.97) 9%,
    rgba(11, 31, 58, 0.97) 91%,
    rgba(11, 31, 58, 0) 100%);
  border-top: 0;
  border-bottom: 0;
}

/* --- The community stage -------------------------------------------------
   The two #050505 stops were opaque, so this section painted its own ground
   and cut the page's fixed room off at its edges — a separate background
   block with a seam at each end. They are translucent now: the room shows
   through and stays continuous as the section scrolls over it.

   0.34 is deliberately light. The fixed layer already carries the 0.82-0.96
   veil, so this only adds the extra depth the headline and the three cards
   need; anything heavier and the room goes black again. The transparent stops
   at 0% and 100% are kept exactly as they were, so the boundaries above and
   below still cross-dissolve rather than stepping.

   This rule is where the background resolves — it loads after home.css and
   its shorthand also clears that file's `background: #050505` base. */
.page-home .community-section {
  /* Fully transparent. Even at 0.34 this was still a panel with its own two
     edges; the fixed room's own 0.82-0.96 veil already carries the darkness
     the headline and the three cards need, so nothing is painted here. */
  background: none;
}

/* --- The globe stage -----------------------------------------------------
   The stage clips its canvas, so the Earth was being sliced off by a razor
   edge at the end of the pin. Masking the canvas lets the planet fall away
   into darkness instead — which is the transition this boundary wanted
   anyway. --globe-fade is driven by transitions.js as the section leaves. */
/* The stage no longer paints its own ground. The opaque #050505 that used to
   sit under the tint was a separate background block: it stopped at the
   section's own edges and hid the page's fixed room behind it. Removing it
   lets that one continuous ground show through here as it does everywhere
   else, with only the navy tint left to keep the planet readable. */
.page-home .globe-stage {
  /* Fully transparent. The navy radial that used to sit here read as a soft
     panel behind the planet, with its own edge — exactly the separate block
     this section should not have. The page's fixed room is the only ground
     now, and the globe sits directly on it. */
  background: none;
}
.page-home .globe-canvas {
  /* --globe-fade is where the planet starts falling away. transitions.js
     drives it from the stage's VISIBLE bottom as the pin ends, so the Earth
     is already dark before the stage's own edge arrives. */
  --globe-fade: 88%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--globe-fade), rgba(0, 0, 0, 0.35) calc(var(--globe-fade) + 12%), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 var(--globe-fade), rgba(0, 0, 0, 0.35) calc(var(--globe-fade) + 12%), transparent 100%);
}
.page-home .globe-fallback {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
}

/* ==========================================================================
   Seam atmosphere — the moving half
   --------------------------------------------------------------------------
   These live inside .pcp-cinematic-bg, the one fixed full-viewport layer that
   already sits behind all content, so they cost no new stacking context and
   are visible exactly where the surfaces above have gone transparent.

   Every layer animates transform and opacity only, and all of it is driven by
   two custom properties per seam that transitions.js scrubs. Nothing is
   pinned and nothing blocks scrolling.
   ========================================================================== */
.pcp-seam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* --seam: -1 → 1 across the boundary, 0 exactly on the seam line.
     --seam-near: 1 at the seam, falling to 0 at the edges of its range. */
  --seam: 0;
  --seam-near: 0;
  --seam-y: 50%;
  /* layout+paint only: `strict` would add size containment, and these
     layers take their size from the insets above. */
  contain: layout paint;
}

/* Gold light gathering at the boundary. */
.pcp-seam-glow {
  position: absolute;
  left: 50%;
  top: var(--seam-y);
  width: 92vw;
  max-width: 1500px;
  aspect-ratio: 2 / 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(241, 210, 122, 0.16), rgba(212, 175, 55, 0.05) 44%, transparent 72%);
  opacity: calc(var(--seam-near) * var(--seam-glow, 0));
  transform: scale(calc(0.7 + 0.45 * var(--seam-near))) translate3d(0, calc(var(--seam) * -3vh), 0);
  will-change: transform, opacity;
}

/* A narrow vertical shaft — the light travelling through the seam.
   The falloff has to be radial, not a linear gradient: a linear one leaves
   hard left and right edges and reads as exactly the rectangle this whole
   file exists to remove. */
.pcp-seam-beam {
  position: absolute;
  left: 50%;
  top: var(--seam-y);
  width: 42vw;
  max-width: 680px;
  height: 66vh;
  translate: -50% -50%;
  background: radial-gradient(closest-side ellipse at 50% 50%,
    rgba(241, 210, 122, 0.13), rgba(212, 175, 55, 0.05) 42%, transparent 74%);
  opacity: calc(var(--seam-near) * var(--seam-beam, 0));
  transform: scaleY(calc(0.55 + 0.75 * var(--seam-near))) translate3d(0, calc(var(--seam) * 6vh), 0);
  will-change: transform, opacity;
}

/* Darkness closing in before a chapter turn. */
.pcp-seam-veil {
  position: absolute;
  left: -10%;
  right: -10%;
  top: var(--seam-y);
  height: 150vh;
  translate: 0 -50%;
  background: radial-gradient(60% 50% at 50% 50%, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.55) 55%, transparent 78%);
  opacity: calc(var(--seam-near) * var(--seam-veil, 0));
  will-change: opacity;
}

/* Deep navy washing in — used where black should become navy. */
.pcp-seam-wash {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--seam-y);
  height: 130vh;
  translate: 0 -50%;
  background: linear-gradient(180deg, transparent, rgba(11, 31, 58, 0.85) 42%, rgba(11, 31, 58, 0.85) 58%, transparent);
  opacity: calc(var(--seam-near) * var(--seam-wash, 0));
  will-change: opacity;
}

/* Particle canvas, mounted only for the seam that dissolves the pillar cards. */
.pcp-seam-dust {
  position: absolute;
  inset: 0;
  opacity: calc(var(--seam-near) * var(--seam-dust, 0));
  will-change: opacity;
}
.pcp-seam-dust canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  /* The soft surfaces above are kept — they are structure, not motion. The
     moving half is stilled: no travel, no scaling, no particles. */
  .pcp-seam-glow,
  .pcp-seam-beam { transform: none; }
  .pcp-seam-beam,
  .pcp-seam-dust { display: none; }
  .pcp-seam-glow { opacity: calc(var(--seam-near) * var(--seam-glow, 0) * 0.5); }
}