/* ThreadSync — ambient background SYSTEM (enterprise visual campaign)
   External + fingerprinted by necessity: this site's CSP sets style-src 'self'
   with a single hash, so any page-level inline <style> is silently dropped.

   Codex P2 (consult 20260801T195907Z): the first implementation hardcoded one
   image URL, which would have meant a separate fingerprinted stylesheet per
   background — four files to maintain and four cache entries to bust. Instead
   ONE file carries the whole system; a theme class on .sov-hero swaps a custom
   property. Adding a fifth theme is four lines, not a new deploy artifact.

   ACCESSIBILITY CONTRACT — read before changing:
   contrast here is a property of the CSS, never of the artwork. The dimming
   wash lives in the background stack (NOT element opacity, which would also
   dim the ::after scrim and make text protection dependent on the image), and
   ::after lays a deterministic scrim over the copy column at full strength. */

.sov-hero-ambient{
  /* per-theme overrides supply --sov-ambient-src; nothing renders without it */
  --sov-ambient-wash:.26;
  --sov-ambient-pos:68% 50%;

  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  /* The artwork ADDS light; it must never replace the hero's own background.
     A cover-sized opaque image hid the hero's radial + linear gradients
     entirely, so the section rendered as a flat slab against the darker page
     behind it — reported as "a black background on top of the page
     background". `screen` makes near-black areas of the artwork contribute
     nothing, so the left copy column resolves to the hero's real background
     and only the luminous gesture on the right actually paints. */
  mix-blend-mode:screen;
  background-image:
    linear-gradient(0deg,
      rgba(10,11,15,var(--sov-ambient-wash)),
      rgba(10,11,15,var(--sov-ambient-wash))),
    var(--sov-ambient-src,none);
  background-size:cover,100% 100%;
  background-position:center,var(--sov-ambient-pos);
  background-repeat:no-repeat,no-repeat;
}

/* Deterministic text protection. Two scrim shapes, because this site has two
   hero layouts: index's .sov-hero puts copy in a LEFT column, while all 32
   legacy pages centre their copy. A left-to-right scrim on a centred hero
   protects the wrong half of the frame.

   DEFAULT = centred heroes: a radial that keeps the middle solid, plus a
   vertical wash so headline and sub both sit on near-solid ground. */
.sov-hero-ambient::after{
  content:"";
  position:absolute;
  inset:0;
  /* Kept for the centred legacy heroes, where the artwork sits behind copy.
     Under mix-blend-mode:screen these dark stops largely no-op, which is the
     point: they can only ever subtract light that was added, never punch a
     hole in the page background. */
  background:
    radial-gradient(78% 68% at 50% 46%,
      rgba(10,11,15,.90) 0%,
      rgba(10,11,15,.66) 46%,
      rgba(10,11,15,.16) 80%,
      rgba(10,11,15,0) 100%),
    linear-gradient(180deg,
      rgba(10,11,15,.34) 0%,
      rgba(10,11,15,0) 40%,
      rgba(10,11,15,.42) 100%);
}

/* SPLIT = index's two-column hero: copy left, diagram right. */
.sov-hero--split .sov-hero-ambient::after{
  background:linear-gradient(90deg,
    #0A0B0F 0%,
    rgba(10,11,15,.93) 26%,
    rgba(10,11,15,.58) 50%,
    rgba(10,11,15,.18) 72%,
    rgba(10,11,15,0) 100%);
}

/* Any themed hero becomes a positioning + clipping context. Written against
   the theme class, not against .sov-hero, because index.html is the ONLY page
   on this site using the .sov design system — the other 32 are legacy and
   spell their hero four different ways (hero section / hero-section / hero /
   hero hero--doc). Keying on the modifier makes the system portable across
   both. */
[class*="sov-hero--"]{position:relative;overflow:hidden}

/* Everything in the hero except the art rides above it. Generic child rule for
   the same reason: .sov-wrap exists only on index. */
[class*="sov-hero--"] > *:not(.sov-hero-ambient){position:relative;z-index:1}

/* ── THEMES ──────────────────────────────────────────────────────────────
   Assigned by what the page is actually arguing, not by decoration. */

/* the original index hero — the island/bridge crossing */
.sov-hero--crossing  { --sov-ambient-src:url("/assets/img/hero-wide-channels.8770e479149e.webp") }

/* containment / perimeter — security, trust */
.sov-hero--boundary  { --sov-ambient-src:url("/assets/img/bg-boundary.fb194a4c8fa1.webp") }

/* many requests through one governed gate — platform, architecture */
.sov-hero--routing   { --sov-ambient-src:url("/assets/img/bg-routing.ed2b3f189e57.webp") }

/* layered records — how it works, resources, evidence surfaces */
.sov-hero--evidence  { --sov-ambient-src:url("/assets/img/bg-evidence.524311d1bbac.webp");
                       --sov-ambient-pos:72% 50% }

/* a controlled door opening — conversion and onboarding pages */
.sov-hero--threshold { --sov-ambient-src:url("/assets/img/bg-threshold.27f0cadbbdaf.webp") }

/* ── THE MAGIC SET ───────────────────────────────────────────────────────
   Magic Runtime's name is a metaphor, and the tension that makes it
   enterprise is that it LOOKS like magic while every trick is contract-bound
   and audited. Each class below is named for its metaphor so the intent stays
   readable here rather than living in someone's head. */

/* the trick leaves a receipt — a fast gesture trailing a permanent record */
.sov-hero--receipt       { --sov-ambient-src:url("/assets/img/magic-receipt.fb00abb4616f.webp");
                           --sov-ambient-pos:70% 45% }

/* conjuring, audited — motes coalescing into an ordered lattice */
.sov-hero--conjuring     { --sov-ambient-src:url("/assets/img/magic-conjuring.200b463a5d89.webp") }

/* the sealed circle — work performed entirely inside a ring it never crosses */
.sov-hero--sealed-circle { --sov-ambient-src:url("/assets/img/magic-sealed-circle.336b67e7d058.webp") }

/* instantiation — filaments assembling along visible guide-rails: directed,
   not spontaneous */
.sov-hero--instantiation { --sov-ambient-src:url("/assets/img/magic-instantiation.df3bd647362c.webp") }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────
   Below 900px the hero collapses to one column and copy spans full width:
   deepen the wash and move the art up out from behind the headline. */
@media (max-width:900px){
  .sov-hero-ambient{
    --sov-ambient-wash:.46;
    --sov-ambient-pos:78% 18%;
  }
  .sov-hero-ambient::after{
    background:linear-gradient(180deg,
      rgba(10,11,15,.92) 0%,
      rgba(10,11,15,.72) 55%,
      rgba(10,11,15,.55) 100%);
  }
}

/* ── USER PREFERENCES ────────────────────────────────────────────────────
   Decoration never costs text contrast and never overrides a stated
   preference. Both drop the artwork outright rather than thinning it; the
   hero's own gradient stack still renders underneath. */
@media (prefers-contrast:more){
  .sov-hero-ambient{background-image:none}
  .sov-hero-ambient::after{background:none}
}
@media (prefers-reduced-transparency:reduce){
  .sov-hero-ambient{background-image:none}
  .sov-hero-ambient::after{background:none}
}

/* ── TAILWIND PALETTE OVERRIDES ──────────────────────────────────────────
   board-mode, monte-carlo and roi-calculator style their figures with
   Tailwind utility CLASSES (text-purple-400 and friends), so the hex/rgba
   sweeps could never reach them — the colour lives in the bundle, not the
   page. Renaming the classes was the wrong fix: this bundle ships no
   cyan/emerald text utilities, so the elements would have gone unstyled.

   Redefining the utilities instead. This file is the last stylesheet in the
   head on every page that uses them, so equal specificity wins on order and
   no !important is needed. Opacity var is preserved so any
   /75 style modifier keeps working. */
.text-purple-400{color:rgb(34 211 238/var(--tw-text-opacity,1))}   /* -> cyan   */
.text-purple-300{color:rgb(110 231 183/var(--tw-text-opacity,1))}  /* -> mint   */
.bg-purple-500{background-color:rgb(16 185 129/var(--tw-bg-opacity,1))} /* emerald */
.text-pink-400{color:rgb(52 211 153/var(--tw-text-opacity,1))}     /* -> emerald */