/* =====================================================================
   ADROAS — css/backgrounds.css
   Hero background system (CSS-only, currently disabled via display:none),
   scroll veil, below-fold canvas, 3-zone background system.

   CRITICAL ORDER: The display:none !important block for .hero-bg and
   .hbg-* MUST appear before the property rules for those same selectors.
   Do not reorder. If the !important block is removed, the old CSS-only
   hero background system becomes visible.
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   6. HERO BACKGROUND SYSTEM
   DISABLED — display:none !important block comes first, then property
   definitions are preserved below for future reference.
   ───────────────────────────────────────────────────────────────────── */
.hero-bg {
  display: none !important;
}

/* Shared positioning for all bg child layers */
.hbg-cloud-a,
.hbg-cloud-b,
.hbg-cloud-c,
.hbg-curtain,
.hbg-veils,
.hbg-mesh,
.hbg-texture-a,
.hbg-texture-b,
.hbg-nodes,
.hbg-veil,
.hbg-grain {
  display: none !important;
}
/* SVGs need explicit dimensions */
.hbg-veils,
.hbg-mesh,
.hbg-nodes {
  width: 100%;
  height: 100%;
}

/* ── 6a. Base ambient light field ───────────────────────────────────
   L1 of the system. Soft ivory base with a cool tint pulled in from the
   far right and a gentle central haze so the headline zone never feels
   hollow. The real blue energy lives in the cloud masses (6c) and the
   ribbon veils (6e); this layer is just ambient light.             */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Cool tint, far right — large & soft, never a hard block */
    radial-gradient(ellipse 82% 110% at 114% 52%,
      rgba(86, 138, 186, 0.50) 0%,
      rgba(116, 164, 206, 0.32) 24%,
      rgba(160, 196, 228, 0.16) 46%,
      rgba(204, 224, 243, 0.07) 64%,
      transparent 78%),
    /* Lower-right cool zone */
    radial-gradient(ellipse 70% 76% at 96% 110%,
      rgba(70, 118, 166, 0.40) 0%,
      rgba(112, 156, 200, 0.22) 36%,
      rgba(178, 210, 234, 0.09) 60%,
      transparent 78%),
    /* Upper-right luminous accent */
    radial-gradient(ellipse 52% 70% at 102% 4%,
      rgba(84, 132, 178, 0.34) 0%,
      rgba(152, 192, 222, 0.15) 48%,
      transparent 68%),
    /* Central haze — soft connective light through the headline band */
    radial-gradient(ellipse 74% 74% at 64% 48%,
      rgba(196, 220, 240, 0.24) 0%,
      rgba(220, 234, 246, 0.10) 52%,
      transparent 74%),
    /* Mid-right bridge so center does not feel empty */
    radial-gradient(ellipse 60% 68% at 74% 56%,
      rgba(124, 172, 214, 0.28) 0%,
      rgba(178, 208, 232, 0.15) 44%,
      transparent 70%),
    /* Ivory floor across the whole field */
    linear-gradient(180deg,
      rgba(249, 247, 242, 0.55) 0%,
      rgba(247, 245, 240, 0.10) 30%,
      transparent 60%);
}

/* ── 6b. Warm cream/champagne bloom, lower-left ─────────────────────
   L2. Stacked warm radials build a diffused champagne bloom in the
   lower-left that balances the cool blue right side. Stronger and with
   more reach than before, but kept soft so it never reads as a shape. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Core champagne bloom — large, diffused, rising from lower-left */
    radial-gradient(ellipse 82% 74% at -8% 112%,
      rgba(245, 211, 156, 0.92) 0%,
      rgba(247, 220, 176, 0.60) 24%,
      rgba(249, 233, 206, 0.30) 46%,
      rgba(250, 240, 222, 0.12) 62%,
      transparent 74%),
    /* Mid accent — carries warmth up toward the text column */
    radial-gradient(ellipse 56% 50% at 16% 88%,
      rgba(244, 212, 164, 0.52) 0%,
      rgba(248, 230, 198, 0.22) 42%,
      transparent 62%),
    /* Faint high reach — keeps the warm-cool transition gradual */
    radial-gradient(ellipse 60% 64% at 2% 60%,
      rgba(246, 224, 188, 0.26) 0%,
      rgba(249, 236, 214, 0.08) 48%,
      transparent 70%);
}

/* ── 6c. Blue atmospheric masses ────────────────────────────────────
   L3. Three large, heavily blurred divs build a real blue energy FIELD
   on the right — strongest upper-right → lower-right — from several
   blended gradients, not a single flat blob. The ribbon veils (6e)
   float on top of this depth.                                      */
.hbg-cloud-a {
  /* Main right-half body — two blended lobes for an uneven, organic field */
  background:
    radial-gradient(ellipse 78% 86% at 96% 46%,
      rgba(78, 140, 198, 0.52) 0%,
      rgba(120, 174, 220, 0.30) 34%,
      rgba(168, 202, 232, 0.10) 58%,
      transparent 72%),
    radial-gradient(ellipse 54% 60% at 78% 30%,
      rgba(96, 156, 208, 0.34) 0%,
      rgba(150, 192, 226, 0.15) 46%,
      transparent 70%);
  filter: blur(62px);
}
.hbg-cloud-b {
  /* Upper-right luminous core — brightest concentration of the field */
  background:
    radial-gradient(ellipse 60% 74% at 108% 6%,
      rgba(70, 132, 192, 0.48) 0%,
      rgba(126, 176, 220, 0.24) 44%,
      transparent 70%),
    radial-gradient(ellipse 40% 46% at 86% 16%,
      rgba(150, 196, 230, 0.28) 0%,
      transparent 66%);
  filter: blur(56px);
}
.hbg-cloud-c {
  /* Lower-right anchor + soft bridge toward center so energy reaches
     behind the text rather than vanishing from the center-left */
  background:
    radial-gradient(ellipse 66% 60% at 92% 104%,
      rgba(86, 148, 202, 0.40) 0%,
      rgba(150, 192, 226, 0.18) 48%,
      transparent 72%),
    radial-gradient(ellipse 64% 48% at 56% 88%,
      rgba(120, 170, 214, 0.24) 0%,
      rgba(178, 208, 234, 0.10) 50%,
      transparent 72%);
  filter: blur(60px);
}

/* ── 6d. Upper-right white curtain ──────────────────────────────────
   L4a. A soft white translucent veil that descends from the top-right
   corner like a curtain of light, adding the atmospheric premium feel.
   Built from a corner radial + a downward linear fade, gently blurred,
   and masked to the upper-right so it never touches the headline.  */
.hbg-curtain {
  background:
    /* Bright corner source */
    radial-gradient(ellipse 64% 78% at 104% -8%,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(248, 252, 255, 0.42) 26%,
      rgba(232, 244, 254, 0.18) 48%,
      transparent 70%),
    /* Curtain falling down-left from the top edge */
    linear-gradient(208deg,
      rgba(255, 255, 255, 0.50) 0%,
      rgba(244, 250, 255, 0.22) 22%,
      rgba(232, 244, 254, 0.06) 44%,
      transparent 62%);
  filter: blur(18px);
  -webkit-mask-image: radial-gradient(ellipse 84% 92% at 108% -6%,
    #000 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.25) 64%, transparent 82%);
  mask-image: radial-gradient(ellipse 84% 92% at 108% -6%,
    #000 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.25) 64%, transparent 82%);
}

/* ── 6c-2. Halftone / pixel texture ─────────────────────────────────
   Two tiled dot grids. Key redesign vs previous version:
     — Much larger grid (22px / 32px vs 7px / 11px) → dots are sparser,
       the repeat period is less visible, no wallpaper feel.
     — Single organic radial mask per field creates a zone cluster
       rather than blanket coverage.
     — texture-a: fine grain, left-side + upper-left zone
     — texture-b: coarser dots, right + lower-right zone              */
.hbg-texture-a {
  background-image:
    radial-gradient(circle at center,
      rgba(58, 104, 154, 0.42) 0.95px, transparent 1.55px);
  background-size: 22px 22px;
  opacity: 0.32;
  /* Single organic cluster: upper-left corner + lower-left,
     with a gentle mid-left fade-through for texture continuity */
  -webkit-mask-image: radial-gradient(
    ellipse 54% 74% at -8% 46%,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.28) 34%,
    rgba(0,0,0,0.08) 54%,
    transparent 68%
  );
  mask-image: radial-gradient(
    ellipse 54% 74% at -8% 46%,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.28) 34%,
    rgba(0,0,0,0.08) 54%,
    transparent 68%
  );
}
.hbg-texture-b {
  background-image:
    radial-gradient(circle at center,
      rgba(46, 90, 138, 0.56) 1.25px, transparent 2.25px);
  background-size: 32px 32px;
  opacity: 0.56;
  /* Single organic cluster: right side + lower-right corner */
  -webkit-mask-image: radial-gradient(
    ellipse 62% 78% at 108% 64%,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.42) 34%,
    rgba(0,0,0,0.14) 54%,
    transparent 68%
  );
  mask-image: radial-gradient(
    ellipse 62% 78% at 108% 64%,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.42) 34%,
    rgba(0,0,0,0.14) 54%,
    transparent 68%
  );
}

/* ── 6d. Translucent wave veils ─────────────────────────────────────
   The SVG paths use feGaussianBlur (stdDev 22 / 12) so strokes become
   soft luminous bands rather than diagonal stripes. No additional CSS
   filter needed — the blur is baked into the SVG filter elements.
   Light CSS mask fades the left edge so the veil transitions gently
   from the warm cream base on the left.                            */
.hbg-veils {
  opacity: 0.88;
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,0.06)  0%,
    rgba(0,0,0,0.24) 16%,
    rgba(0,0,0,0.64) 38%,
    rgba(0,0,0,0.94) 60%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,0.06)  0%,
    rgba(0,0,0,0.24) 16%,
    rgba(0,0,0,0.64) 38%,
    rgba(0,0,0,0.94) 60%
  );
}

/* ── 6e. Fine mesh strands ──────────────────────────────────────────
   Very thin (0.36–0.55px) crisp gossamer paths. No blur — they sit
   as delicate signal filaments above the soft veil layer.
   CSS mask starts transparent at 20% so strands only appear once the
   eye is past the wordmark; full opacity by 60% (right half).     */
.hbg-mesh {
  opacity: 0.84;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent           24%,
    rgba(0,0,0,0.38)      42%,
    rgba(0,0,0,0.78)      60%,
    rgba(0,0,0,0.96)      76%
  );
  mask-image: linear-gradient(
    90deg,
    transparent           24%,
    rgba(0,0,0,0.38)      42%,
    rgba(0,0,0,0.78)      60%,
    rgba(0,0,0,0.96)      76%
  );
}

/* ── 6g. Glow nodes ─────────────────────────────────────────────────
   SVG circles in 4 size tiers with feGaussianBlur halos.
   CSS mask keeps them center-right weighted.                      */
.hbg-nodes {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent           16%,
    rgba(0,0,0,0.38)      36%,
    rgba(0,0,0,0.80)      62%,
    rgba(0,0,0,1.00)     100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent           16%,
    rgba(0,0,0,0.38)      36%,
    rgba(0,0,0,0.80)      62%,
    rgba(0,0,0,1.00)     100%
  );
}

/* ── 6h. Text readability veil ──────────────────────────────────────
   Soft radial behind the headline column. The waves are now softer
   so the veil can be lighter — 0.58 at center lets more wave field
   show through while keeping the navy text crisp.
   No visible box, hard edge, or background card.                  */
.hbg-veil {
  background: radial-gradient(
    ellipse 74% 72% at 30% 42%,
    rgba(250, 248, 244, 0.64) 0%,
    rgba(248, 246, 241, 0.34) 34%,
    rgba(247, 245, 240, 0.13) 58%,
    transparent               76%
  );
}

/* ── 6h. Film grain ──────────────────────────────────────────────────
   SVG fractalNoise (baseFreq 0.65, 4 octaves, grayscale) tiled at
   200×200px. multiply blend adds tactile paper texture without colour
   shift. Opacity 0.065 — barely there, but felt.                  */
.hbg-grain {
  opacity: 0.078;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}


/* ─────────────────────────────────────────────────────────────────────
   14. SCROLL VEIL & BELOW-FOLD BACKGROUND SYSTEM
   ───────────────────────────────────────────────────────────────────── */
.scroll-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90; /* below header (100) but above page content */
}

.scroll-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(247, 245, 240, 0.62) 0%,
      rgba(247, 245, 240, 0.22) 7%,
      rgba(247, 245, 240, 0.00) 18%,
      rgba(247, 245, 240, 0.00) 78%,
      rgba(247, 245, 240, 0.20) 91%,
      rgba(247, 245, 240, 0.48) 100%);
}

.below-fold-canvas {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  margin-top: -160px;
  padding-top: 0;
}

.bg-zone {
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

.bg-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.bg-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(247, 245, 240, 0.05) 0%,
      rgba(247, 245, 240, 0.00) 22%,
      rgba(247, 245, 240, 0.00) 78%,
      rgba(247, 245, 240, 0.05) 100%);
  z-index: 0;
  pointer-events: none;
}

.bg-zone + .bg-zone {
  margin-top: -160px;
  padding-top: 160px;
}

.bg-zone + .bg-zone::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, #000000 160px);
  mask-image: linear-gradient(to bottom, transparent 0px, #000000 160px);
}

.bg-zone > section,
.bg-zone > footer {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.bg-zone-1 {
  padding-top: 160px;
}

.bg-zone-1::before {
  background-image: url("../assets/exports/below-fold-1.webp");
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, #000000 160px);
  mask-image: linear-gradient(to bottom, transparent 0px, #000000 160px);
}

.bg-zone-2::before {
  background-image: url("../assets/exports/below-fold-2.webp");
}

.bg-zone-3::before {
  background-image: url("../assets/exports/below-fold-3.webp");
}