/* ==========================================================================
   picoblu-env.css — the continuous background ENVIRONMENT
   Loaded AFTER picoblu.css. Overrides the old .site-bg treatment.

   WHY THIS EXISTS (verified findings, 07/20/2026):
   1. The previous plate was position:FIXED + mix-blend-mode:SCREEN on a
      mostly-black image. Screen-blending black contributes ~nothing, and a
      fixed layer shows the SAME pixels at every scroll depth — so the
      backdrop never changed down 5,814px and the page measured a flat
      luminance range of 10.8 -> 17.7 out of 255.
   2. Tiling a rendered plate with repeat-y was tested and REJECTED: the
      motif visibly repeated every 2048px and read as wallpaper, not a space.
   3. Live recon of Comcast / NBCUniversal / Disney / Paramount / WBD found
      NONE of them use a fixed full-page backdrop. Richness there comes from
      alternating full-bleed bands + gradient scrims (handled in picoblu.css).
      This file supplies the continuous field those bands sit inside.

   THE APPROACH: the environment is ABSOLUTE and spans the full document
   height, so scrolling actually TRAVELS THROUGH it — light pools sit at
   percentage depths and are passed one after another. Nothing repeats,
   because the gradients are positioned as a fraction of total page height
   and stretch with it. One rendered plate anchors the top; everything below
   is resolution-independent CSS, so it costs no extra bytes and never bands.
   ========================================================================== */

body { position: relative; background-color: var(--ink-950); }

/* ---- The environment layer ------------------------------------------------
   absolute + full document height = you move through it as you scroll.
   Do NOT change to position:fixed — that is the bug this file fixes.        */
.site-bg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--ink-950);

  /* Continuous light field. Stops are % of TOTAL PAGE HEIGHT, so they scale
     with any page length and never tile. Ordered top -> bottom:
       ~6%   cool skylight pool behind the hero reveal
       ~28%  navy shoulder, left — carries the platform belt / first divisions
       ~52%  faint brand pool, right — mid-page lift
       ~76%  deep navy well, left — under the feature band
       ~96%  final settle toward black at the footer                          */
  background-image:
    radial-gradient(120% 22% at 50%  4%, rgba(47,127,208,0.20), transparent 70%),
    radial-gradient( 90% 16% at 12% 28%, rgba(28,79,143,0.16), transparent 72%),
    radial-gradient( 85% 14% at 88% 52%, rgba(47,127,208,0.10), transparent 72%),
    radial-gradient(100% 18% at  8% 76%, rgba(18,41,74,0.24),  transparent 74%),
    linear-gradient(180deg,
      #0d1219 0%,
      #0a0e15 14%,
      #0a0a0c 34%,
      #090b11 54%,
      #0a0d14 74%,
      #08090c 90%,
      #070708 100%);
  background-repeat: no-repeat;
}

/* ---- The rendered plate — used ONCE at the top, never tiled -------------- */
.site-bg-plate {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: clamp(900px, 135vh, 1700px);
  object-fit: cover;
  object-position: 50% 12%;
  opacity: 0.5;
  mix-blend-mode: normal;          /* was: screen — that made it invisible   */
  /* Soften the room's hard architectural edges into atmospheric light so no
     column/wall line reads as a vertical "slice" behind the content.        */
  filter: blur(14px) saturate(1.05);
  transform: scale(1.06);          /* hide blur-feathered edges from the blur */
  /* feather ALL edges so the plate dissolves into the CSS field with no
     horizon line at the bottom and no hard cut on the sides                 */
  -webkit-mask-image:
    linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 42%, rgba(0,0,0,0.55) 68%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
          mask-image:
    linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 42%, rgba(0,0,0,0.55) 68%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
}

/* ---- Grain: kills gradient banding on wide dark fields ------------------- */
.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/assets/img/bg-noise.png);
  background-size: 220px;
  opacity: 0.05;
  pointer-events: none;
}

/* ---- Edge vignette: contains the field so it reads as a VOLUME ----------- */
.site-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(140% 60% at 50% 40%, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* ==========================================================================
   Interactive division — the games video-wall band
   The wall art is a ~2.6:1 strip. Forced into the standard 1.6 side-by-side
   feature slot it left ~60% of the panel as dead space (measured: content
   occupied only 40% of the source image height). A 3.47:1 content strip
   cannot fill a 1.6 frame without losing half its width, so this band stacks
   instead: wall spans the full width at its native proportion, copy sits
   beneath it.
   ========================================================================== */
.division-card.feature.wall-feature,
.division-card.feature.reverse.wall-feature { flex-direction: column; }

.division-card.feature.wall-feature .division-visual {
  flex: none;
  width: 100%;
  min-height: 0;
  aspect-ratio: 2.6 / 1;
  border: none;
  border-bottom: 1px solid var(--border-soft);
}
.division-card.feature.wall-feature .division-visual img { object-fit: cover; }

/* stacked layout: the side scrim no longer applies — fade the bottom edge only
   so the wall dissolves into the band instead of ending on a hard rule */
.division-card.feature.wall-feature .division-visual::after {
  background: linear-gradient(180deg, rgba(20,23,30,0) 62%, var(--surface-1) 100%);
}

.division-card.feature.wall-feature .division-body {
  flex: none;
  padding: var(--space-7) var(--space-8) var(--space-8);
  max-width: var(--container-narrow);
}

@media (max-width: 700px) {
  .division-card.feature.wall-feature .division-visual { aspect-ratio: 2 / 1; }
  .division-card.feature.wall-feature .division-body { padding: var(--card-padding); }
}

/* ---- Reduced motion / low-power: plate still shows, nothing animates ----- */
@media (prefers-reduced-motion: reduce) {
  .site-bg-plate { opacity: 0.5; }
}

/* ---- Narrow screens: plate shorter, field unchanged ---------------------- */
@media (max-width: 700px) {
  .site-bg-plate {
    height: clamp(620px, 90vh, 1000px);
    opacity: 0.48;
    object-position: 50% 18%;
  }
}