/* =====================================================================
   GottRev — Ambient atmosphere layer.

   Fills the "black space" between content moments (chambers, process,
   FAQ, connector strips) with quiet depth/texture: a faint blueprint
   grid, a two-layer micro-starfield, soft aurora beams, and edge
   vignettes — without competing with real content or costing GPU.

   Additive only. Nothing here restyles existing layout; where a target
   section didn't already have the positioning it needs to safely host a
   generated layer (.process, .connector, .faqsec), this file adds just
   the one or two properties required (position/z-index/overflow) and
   nothing else. All generated layers are pointer-events:none and sit
   behind real content:
     - .chamber content (.ch-head/.deck/.ch-cta/.featured/.minor-works)
       and .process content (.psteps/.pnote/.duo) are already
       position:relative;z-index:2 in the page's own CSS, so our
       ::before/::after (z-index:0) simply stay behind them.
     - .connector and .faqsec have plain, unpositioned children (the
       svg / the intro heading + accordion), so their generated layer
       uses z-index:-1 with the section promoted to its own stacking
       context (position:relative;z-index:0) — this keeps the ambient
       layer strictly behind that content without touching the page's
       broader stacking order.

   Loaded after the page's inline <style> (see uikit.css for the same
   convention), so equal-specificity property additions here win.

   Motion (background-position drift, opacity breathe) is gated behind
   prefers-reduced-motion; every layer's static resting state is a
   complete, intentional-looking image on its own.

   Light theme: overridden under html.theme-light for the warm-paper
   chambers/process/faq built in parallel elsewhere. Hero, marquee,
   apply, and footer are left untouched by this file.
===================================================================== */

:root {
  --amb-cell: 60px; /* blueprint grid cell size */
}

/* ---------------------------------------------------------------------
   Shared plumbing for every generated ambient layer.
--------------------------------------------------------------------- */
.chamber::before, .chamber::after,
.process::before,
.connector::before,
.faqsec::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* .chamber and .process already clip (overflow:hidden). .connector and
   .faqsec need it added so nothing we hang here can create horizontal
   scroll. .connector already has its own stacking context
   (position:relative;z-index:2 in the page CSS) — only overflow is
   missing. .faqsec has neither; add the minimum needed. */
.connector { overflow: hidden; }
.faqsec { position: relative; z-index: 0; overflow: hidden; }

/* .process has position:relative + overflow:hidden already, but no
   z-index, so it doesn't yet form its own stacking context — give it
   one so ::before (below) can safely use z-index:-1. */
.process { z-index: 0; }

/* .faqsec's and .process's intro heading / accordion are plain
   in-flow content (no z-index of their own), so their generated layer
   must sit at a negative z-index to stay behind it. .connector's svg
   is likewise unpositioned. .chamber/.process real content blocks
   *are* individually z-index:2, so their ::before/::after can stay at
   the shared z-index:0 above. */
.process::before,
.connector::before,
.faqsec::before {
  z-index: -1;
}

/* =====================================================================
   1) BLUEPRINT GRID  +  4) SECTION VIGNETTE  —  ::before
   A very faint engineering-grid, masked so it reads strongest in the
   empty margins and fades out under the central content column, paired
   with a soft radial darkening toward the very edges of the section.
===================================================================== */
.chamber::before,
.process::before,
.faqsec::before {
  background-image:
    linear-gradient(rgba(232, 188, 94, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 188, 94, .05) 1px, transparent 1px),
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 55%, rgba(0, 0, 0, .3) 100%);
  background-size: var(--amb-cell) var(--amb-cell), var(--amb-cell) var(--amb-cell), 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
  background-position: center, center, center;
  /* Horizontal-only fade keyed to the real content column (--maxw,
     1140px): opaque (grid/vignette visible) in the true side margins,
     transparent (hidden) across the whole centered content width —
     independent of each section's height, unlike a 2D radial mask. */
  -webkit-mask-image: linear-gradient(to right,
    #000 0%,
    #000 calc(50% - (var(--maxw) / 2) - 60px),
    transparent calc(50% - (var(--maxw) / 2)),
    transparent calc(50% + (var(--maxw) / 2)),
    #000 calc(50% + (var(--maxw) / 2) + 60px),
    #000 100%);
  mask-image: linear-gradient(to right,
    #000 0%,
    #000 calc(50% - (var(--maxw) / 2) - 60px),
    transparent calc(50% - (var(--maxw) / 2)),
    transparent calc(50% + (var(--maxw) / 2)),
    #000 calc(50% + (var(--maxw) / 2) + 60px),
    #000 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Bespoke chamber runs on amber, not teal. */
.ch-bs::before {
  background-image:
    linear-gradient(rgba(224, 152, 58, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 152, 58, .05) 1px, transparent 1px),
    radial-gradient(ellipse 60% 85% at 50% 50%, transparent 45%, rgba(0, 0, 0, .3) 100%);
}

/* =====================================================================
   2) MICRO-STARFIELD  +  3) AURORA BEAMS  —  ::after (chambers only)
   Two drifting dot layers (different tile sizes = different "depths")
   plus one soft diagonal beam gradient, all in one generated layer per
   chamber so a single opacity animation lets the whole thing "breathe"
   while the dots drift independently via background-position.
   Beam placement mirrors each chamber's existing .orb/.depthnum side:
   left for .ch-os, right for .ch-bs.
===================================================================== */
.ch-os::after, .ch-bs::after {
  opacity: .85;
  background-repeat: repeat, repeat, no-repeat;
}

.ch-os::after {
  background-size: 150px 170px, 230px 210px, 460px 840px;
  background-position: 0 0, 0 0, 0% 4%;
  background-image:
    radial-gradient(1.7px 1.7px at 40px 50px, rgba(232, 188, 94, .12), transparent 100%),
    radial-gradient(1.3px 1.3px at 120px 96px, rgba(232, 188, 94, .08), transparent 100%),
    linear-gradient(20deg, transparent 28%, rgba(212, 169, 60, .09) 52%, transparent 76%);
}

.ch-bs::after {
  background-size: 150px 170px, 230px 210px, 480px 860px;
  background-position: 0 0, 0 0, 100% 96%;
  background-image:
    radial-gradient(1.7px 1.7px at 30px 40px, rgba(224, 152, 58, .13), transparent 100%),
    radial-gradient(1.3px 1.3px at 112px 88px, rgba(224, 152, 58, .09), transparent 100%),
    linear-gradient(200deg, transparent 26%, rgba(224, 152, 58, .1) 52%, transparent 78%);
}

@media (prefers-reduced-motion: no-preference) {
  .ch-os::after  { animation: amb-breathe 19s ease-in-out infinite alternate; will-change: opacity; }
  .ch-bs::after  { animation: amb-breathe 21s ease-in-out infinite alternate; will-change: opacity; }

  @keyframes amb-breathe { from { opacity: .6; } to { opacity: 1; } }
  @keyframes amb-drift-os  { to { background-position: 50px -46px, -62px 60px, 0% 4%; } }
  @keyframes amb-drift-bs  { to { background-position: -50px 44px, 60px -58px, 100% 96%; } }
}

/* =====================================================================
   5) CONNECTOR ZONES — faint vertical glow corridor behind the
   traveling dashed line, so the strip reads as a lit energy channel
   instead of bare black between chambers.
===================================================================== */
.connector::before {
  /* Fixed-px radii (not %) so the corridor reads as a tall, narrow lit
     channel regardless of this strip's own (small) box height. */
  background-image: radial-gradient(ellipse 70px 420px at 50% 50%, rgba(232, 188, 94, .1), rgba(232, 188, 94, .04) 55%, transparent 78%);
  background-repeat: no-repeat;
}

/* =====================================================================
   LIGHT THEME — html.theme-light
   Chambers/process/faq go warm-paper in the light build; these
   overrides retint the same layers rather than removing them so the
   space still reads as designed, not blank.
===================================================================== */
html.theme-light .chamber::before,
html.theme-light .process::before,
html.theme-light .faqsec::before {
  background-image:
    linear-gradient(rgba(138, 100, 32, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 100, 32, .05) 1px, transparent 1px),
    radial-gradient(ellipse 60% 85% at 50% 50%, transparent 45%, rgba(120, 95, 60, .1) 100%);
}

html.theme-light .ch-os::after {
  background-image:
    radial-gradient(1.7px 1.7px at 40px 50px, rgba(138, 100, 32, .3), transparent 100%),
    radial-gradient(1.3px 1.3px at 120px 96px, rgba(138, 100, 32, .2), transparent 100%),
    linear-gradient(20deg, transparent 28%, rgba(201, 150, 46, .08) 52%, transparent 76%);
}

html.theme-light .ch-bs::after {
  background-image:
    radial-gradient(1.7px 1.7px at 30px 40px, rgba(160, 96, 22, .32), transparent 100%),
    radial-gradient(1.3px 1.3px at 112px 88px, rgba(160, 96, 22, .2), transparent 100%),
    linear-gradient(200deg, transparent 26%, rgba(201, 150, 46, .08) 52%, transparent 78%);
}

html.theme-light .connector::before {
  background-image: radial-gradient(ellipse 70px 420px at 50% 50%, rgba(201, 150, 46, .09), rgba(201, 150, 46, .03) 55%, transparent 78%);
}