/* =============================================================
   ZARAS — /platform — Atmosphere v7
   -------------------------------------------------------------
   v7: Orphan sweep alongside the §04 mobile rework — removed
   the platform-scoped .workflow-chip scene-tint and the
   .modules-index "systems register" card (block + responsive
   override). Both had zero HTML consumers after the §04
   redesign. (v4–v6: see git log.)

   Restraint pass over v2.

   Background:
     v2 swung big — added a hero proof panel, page-level grid
     overlay, per-section radial+grid tints, panel-around-each-
     surface "stages", strengthened handoffs, modules-index card,
     and a closing grid overlay. Result was visually busy, with
     three layers of atmospheric grids competing across the page.

     v3 keeps the strongest moves and cuts the redundant ones:

   KEEP from v2:
     - Hero proof panel (the page needed a right-side product
       anchor; the existing route mesh alone was thin)
     - Per-workflow scene tones (Win warm-teal, Run cool-blue,
       Paid amber, See violet)
     - Strengthened handoff strips (transitional moment)
     - Strengthened closing atmosphere

   CUT from v2:
     - main::before page-level grid overlay (too much wallpaper,
       and the existing per-section workflow-bg patterns from
       operating-layer.v1.css already provide texture)
     - workflow::after 88px grid behind each section (same problem,
       just scoped per-section — three grids stacking)
     - workflow-stage padded mount around each surface (panel-in-
       panel; surfaces already have their own borders/shadows)
     - closing::before grid overlay (decorative, doesn't signify)
     - body-level radial gradients (already handled by per-section
       tints + page-glow.v4)

   TUNE from v2:
     - Hero proof panel: simplified — kept title/pipeline/AI alert,
       cut redundant header+footer status rows. 6 zones → 3 zones.
     - Workflow h2 tinted underline: shortened from 74px to 48px,
       kept scene-tinted, reads as a tick rather than a designerly
       flourish.
     - Scene tone alphas: nudged down ~10–15% so the existing
       workflow-bg patterns from operating-layer.v1 read through
       cleanly underneath.

   Loaded AFTER operating-layer.v1.css so this file's tones can
   layer over (not under) the existing scene patterns. All rules
   scoped under body[data-page="platform"] — cannot leak.
   ============================================================= */


/* -------- Defensive: prevent 100vw / inset overlays from forcing
   a horizontal scrollbar on this page. clip > hidden (better
   behavior with position:fixed descendants). ------------------ */
html { overflow-x: clip; }
body[data-page="platform"] { overflow-x: clip; }


/* =============================================================
   2. WORKFLOW SCENE TONES — Win/Run/Paid/See
   -------------------------------------------------------------
   Each section gets a single radial tint at the scene tone.
   That's it. No grid overlay, no "stage" mount around the
   surface. The existing workflow-bg patterns from
   operating-layer.v1.css already supply per-scene texture
   underneath; this file just adds tonal warmth.
   ============================================================= */

body[data-page="platform"] .workflow {
  --scene-rgb: 118 199 178;
  --scene-alpha: 0.075;
  --scene-x: 50%;
  --scene-y: 26%;
  position: relative;
  isolation: isolate;
}

body[data-page="platform"] .workflow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 65% 52% at var(--scene-x) var(--scene-y),
    rgb(var(--scene-rgb) / var(--scene-alpha)) 0%,
    rgb(var(--scene-rgb) / 0.030) 38%,
    transparent 72%
  );
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Per-section overrides */
body[data-page="platform"] #win {
  --scene-rgb: 118 199 178;       /* warm teal — intake/sales */
  --scene-alpha: 0.075;
  --scene-x: 28%;
  --scene-y: 32%;
}
body[data-page="platform"] #run {
  --scene-rgb: 72 140 170;        /* cool blue — active dispatch */
  --scene-alpha: 0.090;
  --scene-x: 72%;
  --scene-y: 36%;
}
body[data-page="platform"] #paid {
  --scene-rgb: 175 144 82;        /* amber — financial */
  --scene-alpha: 0.072;
  --scene-x: 38%;
  --scene-y: 42%;
}
body[data-page="platform"] #see {
  --scene-rgb: 132 112 190;       /* violet — analytical */
  --scene-alpha: 0.078;
  --scene-x: 60%;
  --scene-y: 34%;
}

/* Headline tick — short scene-tinted underline beneath each H2.
   Was 74px in v2; reduced to 48px — reads as a left-aligned
   accent rather than a typographic flourish. */
body[data-page="platform"] .workflow-head h2 {
  position: relative;
}
body[data-page="platform"] .workflow-head h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-top: 16px;
  background: linear-gradient(90deg,
    rgb(var(--scene-rgb) / 0.55),
    transparent);
}

body[data-page="platform"] .workflow-intro {
  max-width: 62ch;
}

/* CRITICAL CUT: SD's v2 added a "stage" panel around every
   surface (workflow-stage), which produced a panel-in-panel
   effect (the surface already has a card frame). v3 neutralizes
   the stage so surfaces sit on the scene atmosphere directly. */
body[data-page="platform"] .workflow-stage {
  margin-top: 18px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
body[data-page="platform"] .workflow-stage > .surface {
  max-width: none;
}

/* =============================================================
   3. HANDOFF STRIPS — checkpoint crossings
   -------------------------------------------------------------
   The existing handoffs are plain text on a hairline. v3 adds
   a faint horizontal gradient behind them so each crossing
   reads as a small transitional moment.
   ============================================================= */

body[data-page="platform"] .handoff {
  position: relative;
  background:
    radial-gradient(ellipse 42% 110% at 50% 50%,
      rgba(118, 199, 178, 0.030),
      transparent 70%),
    linear-gradient(90deg,
      transparent,
      rgba(255, 250, 240, 0.022),
      transparent);
}

body[data-page="platform"] .handoff-events {
  position: relative;
}
body[data-page="platform"] .handoff-events::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    transparent,
    rgba(118, 199, 178, 0.10),
    transparent);
  z-index: -1;
}

body[data-page="platform"] .handoff-checkpoint .name {
  color: var(--signal-ink);
}


/* =============================================================
   5. CLOSING — terminal moment
   -------------------------------------------------------------
   Strongest controlled glow on the page. Single radial bloom
   from below center — mirrors page-glow's body-bottom pattern.
   v2's grid-overlay ::before is removed.
   ============================================================= */

body[data-page="platform"] .closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 46% at 50% 76%,
      rgba(118, 199, 178, 0.115),
      transparent 68%),
    linear-gradient(180deg,
      rgba(11, 10, 9, 0.18),
      rgba(8, 13, 12, 0.62));
}


/* =============================================================
   6. RESPONSIVE
   ============================================================= */

@media (max-width: 720px) {
  body[data-page="platform"] .workflow-head h2::after {
    width: 36px;
    margin-top: 12px;
  }
}


/* =============================================================
   7. REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  /* All atmospheric layers in this file are static — nothing
     to suspend. Existing animations on the live-dot pulse and
     hero mesh are gated by their own modules. The nav-handoff
     haze (section 8) is static too. */
}


/* =============================================================
   8. NAVBAR → HERO HANDOFF (v6)
   -------------------------------------------------------------
   The shared dark-glass navbar read as a hard black slab above
   the blue hero, because Platform's cool-blue atmosphere lives
   inside .cbx/.cb-hero and starts BELOW the sticky nav, while the
   hero paints an opaque --cb-bg top edge — so nothing lit the nav
   band. Fix (mirrors Careers' "light behind glass", but quieter/
   technical — no horizon hairline, rays, or sweep):
     (a) a restrained cool-blue page-level haze anchored at document
         top (top:0), so it sits behind the nav glass; and
     (b) a translucent hero top edge so the same haze reads
         continuously from the nav band into the hero.
   Reuses the .page-glow-top base from page-glow.v7.css; all rules
   scoped to body[data-page="platform"] so nothing leaks.
   ============================================================= */

body[data-page="platform"] .page-glow-top--platform-haze {
  top: 0;
  height: clamp(360px, 56vh, 680px);
  z-index: 0;
  overflow: hidden;
  overflow: clip;
}

body[data-page="platform"] .page-glow-top--platform-haze > * {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

body[data-page="platform"] .page-glow-top--platform-haze .php-core {
  top: -180px;
  left: 18%;
  width: min(980px, 86vw);
  height: 520px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgb(var(--plat-hot) / 0.13) 0%,
      rgb(var(--plat-rgb) / 0.16) 24%,
      rgb(var(--plat-rgb) / 0.070) 52%,
      transparent 78%);
  filter: blur(clamp(34px, 4vw, 72px));
  opacity: 0.95;
}

body[data-page="platform"] .page-glow-top--platform-haze .php-wash {
  inset: 0;
  background:
    radial-gradient(ellipse 100% 72% at 28% 0%,
      rgb(var(--plat-rgb) / 0.105) 0%,
      rgb(var(--plat-rgb) / 0.055) 38%,
      transparent 78%);
  filter: blur(clamp(20px, 2.4vw, 42px));
  opacity: 0.9;
}

/* Hero top fades transparent → opaque --cb-bg over the first ~120px so the
   page-level haze reads continuously from the nav band INTO the hero, instead
   of being clipped by the hero's opaque fill (the load-bearing half of the
   fix). Specificity body[data-page="platform"] .cbx (0,2,1) beats
   command-board.v5.css's `.cbx { background: var(--cb-bg) }` (0,1,0), so this
   wins even though command-board loads later. --cb-bg is a :root global token
   (command-board.v5.css), so var() resolves here. Explicit rgb(10 13 20 / 0)
   (not the `transparent` keyword) avoids a grey premultiplied-alpha edge.
   Mirrors the existing hero→body BOTTOM seam fade (.cbx::before), on the top. */
body[data-page="platform"] .cbx {
  background: linear-gradient(to bottom,
    rgb(10 13 20 / 0) 0px,
    var(--cb-bg) 120px);
}

/* Keep page content above the decorative haze (z:0). */
body[data-page="platform"] main,
body[data-page="platform"] .op-spine {
  position: relative;
  z-index: 1;
}

/* Tablet + mobile: center the glow, reduce hard top contrast. Breakpoint is
   960px to TRACK THE NAV'S OWN hamburger switch (site-nav.v7.css @960) — not
   720 — otherwise 721–959px renders the left-biased desktop haze under a
   hard-right hamburger, leaving that corner dark. Centering here lights the
   full nav band (logo + hamburger + CTA) symmetrically; the recentred wash
   (at 50% 0%, 120% wide) reaches the right edge where the desktop wash (28% 0%)
   couldn't. The hero-top fade above applies here too and does not conflict with
   the mobile bottom-seam fade (.cbx::before, command-board.v5.css) — a
   different edge. */
@media (max-width: 960px) {
  body[data-page="platform"] .page-glow-top--platform-haze { height: 430px; }
  body[data-page="platform"] .page-glow-top--platform-haze .php-core {
    left: 50%; top: -150px; transform: translateX(-50%);
    width: 720px; height: 460px; opacity: 0.86;
  }
  body[data-page="platform"] .page-glow-top--platform-haze .php-wash {
    background:
      radial-gradient(ellipse 120% 78% at 50% 0%,
        rgb(var(--plat-rgb) / 0.115) 0%,
        rgb(var(--plat-rgb) / 0.055) 42%,
        transparent 82%);
  }
}