/* ============================================================
   cosmos.css — the shared layer stack, prominence variables, lockup
   typography, and section atmosphere.

   The DOM this file styles is built by js/hag-layers.js (see the layer
   contract there) and mounted in two places: inside .hero-cosmos-mount
   for the always-on ambient hero (concept D), and as a full-viewport
   overlay appended to <body> for the production gate (concepts A/B/C —
   see gate.css for the overlay chrome itself, which builds on this file).
   ============================================================ */

.cosmos{
  position:absolute;inset:0;overflow:hidden;isolation:isolate;
  --cx-atlas:.55; --cx-atlas-scale:1.06; --cx-atlas-blur:2px;
  --cx-grade:.82; --cx-vignette:.90; --cx-scrim:.94;
  --cx-orb:1; --cx-orb-scale:1; --cx-neb:.55;
}

/* Belt-and-braces banding mitigation: a tiled noise PNG at low opacity,
   overlay-blended, fixes gradient contouring in the MP4, the WebM, the
   poster, AND any code-mode CSS gradient simultaneously — a near-black
   navy (#0a1828) gradient is exactly the case that 8-bit YUV420 video
   contours hardest. See the plan's encoding section for the full
   rationale; this is the free, always-on half of that mitigation. */
.cosmos::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:10;
  background-image:url("/assets/cosmos/noise-tile.png");
  background-repeat:repeat;opacity:.028;mix-blend-mode:overlay;
}
@media(prefers-reduced-motion:reduce){
  .cosmos::after{opacity:.02}
}

/* z0 sky */
.cx-sky{position:absolute;inset:0;display:block}

/* z1/z2 nebula parallax layers */
.cx-plate{position:absolute;inset:0;will-change:transform,opacity}
.cx-plate > picture,.cx-plate > video,.cx-plate img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.cx-neb-far{opacity:calc(var(--cx-neb) * .55)}
.cx-neb-near{opacity:calc(var(--cx-neb) * .35)}

/* z3 Atlas plate — opacity/scale/blur all driven by the prominence table */
.cx-atlas{
  opacity:var(--cx-atlas);
  transform:scale(var(--cx-atlas-scale));
  /* v6: no blur — a 2px blur on a full-viewport element that GSAP is
     scaling/parallaxing forced a filter re-run every frame (main jank
     source). Saturation alone is cheap and preserves the grade. */
  filter:saturate(.94);
}
/* Blur is only paid for when non-zero — 'hero'/'orb' set 0, no filter pass. */
.cosmos[data-resolved="hero"] .cx-atlas,
.cosmos[data-resolved="orb"] .cx-atlas{filter:none}
.cosmos.cx--no-figure .cx-atlas{display:none}

/* Art direction per plate, tuned to the actual compositions (not generic
   centering): hag_00002 (desktop) puts Atlas centre-right, hag_00001
   (mobile) puts the glowing orb in the upper third with Atlas lower-right. */
@media(min-width:900px){ .cx-atlas img,.cx-atlas video{object-position:62% 50%} }
@media(max-width:899px){ .cx-atlas img,.cx-atlas video{object-position:58% 38%} }

/* z4 orb — WebGL canvas or the SVG fallback */
.cx-orb{position:absolute;inset:0;opacity:var(--cx-orb);transform:scale(var(--cx-orb-scale));display:block}
.cx-orb-svg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:var(--cx-orb);transform:scale(var(--cx-orb-scale));
}
.cx-orb-svg svg{width:min(38vw,320px);height:min(38vw,320px)}
.cx-orb-svg .am-el{fill:none;stroke:var(--gold);stroke-linecap:round;stroke-width:1.4}

/* z5 fx — one-off accent elements each concept's beat sheet drives directly */
.cx-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cx-bloom{
  position:absolute;inset:-20%;opacity:0;
  background:radial-gradient(circle at 46% 40%,rgba(217,187,112,.9),rgba(217,187,112,.15) 40%,transparent 70%);
  mix-blend-mode:screen;
}
.cx-shaft{
  position:absolute;left:38%;top:-10%;width:26%;height:120%;opacity:0;
  background:linear-gradient(180deg,rgba(241,236,224,.55),transparent 75%);
  transform-origin:top center;filter:blur(6px);mix-blend-mode:screen;
}
.cx-rim{
  position:absolute;inset:0;opacity:0;
  box-shadow:inset 0 0 140px rgba(217,187,112,.5);
}
.cx-shoot{
  position:absolute;top:18%;left:60%;width:3px;height:3px;border-radius:50%;opacity:0;
  background:#f1ece0;box-shadow:0 0 8px 2px rgba(241,236,224,.8);
}

/* z6 grade — vignette + a DIRECTIONAL scrim behind the copy column. Sits
   ABOVE the plates/orb but BELOW the lockup, so it darkens the photograph
   without ever dimming type — the mechanism that makes "atmospheric"
   (partly behind type) possible with one scrim element. */
.cx-grade{
  position:absolute;inset:0;pointer-events:none;opacity:var(--cx-grade);
  background:
    radial-gradient(120% 90% at 50% 45%,transparent 34%,rgba(var(--navy-rgb),calc(var(--cx-vignette)*.78)) 100%),
    linear-gradient(105deg,
      rgba(var(--navy-rgb),var(--cx-scrim)) 0%,
      rgba(var(--navy-rgb),calc(var(--cx-scrim)*.76)) 42%,
      transparent 70%);
}
/* Phones: copy sits UNDER the figure (hag_00001's orb is upper-third), so
   the scrim runs bottom-up instead of left-loaded. */
@media(max-width:899px){
  .cx-grade{
    background:
      radial-gradient(120% 80% at 50% 34%,transparent 30%,rgba(var(--navy-rgb),calc(var(--cx-vignette)*.8)) 100%),
      linear-gradient(to top,
        rgba(var(--navy-rgb),var(--cx-scrim)) 0%,
        rgba(var(--navy-rgb),calc(var(--cx-scrim)*.8)) 44%,
        transparent 78%);
  }
}

.cosmos.cx--type-over .cx-lockup{text-shadow:0 2px 26px rgba(10,24,40,.75)}

/* z7 lockup — the wordmark reveal, shared by the gate and any concept
   that wants it inside the ambient hero. */
.cx-lockup{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:0 24px;pointer-events:none;
}
.cx-glyph{width:56px;height:56px;opacity:0}
.cx-glyph svg{width:100%;height:100%}
.cx-glyph .am-el,.cx-glyph use{fill:none}
.cx-rule{width:0;height:2px;background:var(--gold);border-radius:1px}
.cx-lockup-inner{display:flex;align-items:center;gap:14px}
.cx-divider{width:3px;height:34px;background:var(--gold);border-radius:1.5px;transform:scaleY(0);flex:none}
.cx-word{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(22px,4vw,40px);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ivory);
}
.cx-word .cx-llc{color:var(--gold)}
.cx-tagline{
  font-family:'Newsreader',serif;font-style:italic;
  font-size:clamp(14px,1.6vw,18px);color:var(--slate);max-width:520px;
  opacity:0;transform:translateY(10px);
}
@media(max-width:899px){
  .cx-lockup-inner{flex-direction:column;gap:10px}
  .cx-divider{width:26px;height:2px}
  .cx-word{font-size:clamp(18px,6vw,26px);letter-spacing:0.03em}
  .cx-tagline{padding:0 12px}
}
@media(max-height:520px) and (orientation:landscape){
  .cx-lockup-inner{flex-direction:row;gap:12px}
  .cx-word{font-size:22px}
  .cx-tagline{display:none}
}

/* ============================================================
   Section atmosphere — nebula plates as subtle depth behind Services /
   About / Contact, injected by js/hag-atmosphere.js. Same copy, same
   structure as v1; this only adds a background layer.
   ============================================================ */
.hag-atmo{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.hag-atmo img,.hag-atmo picture{
  position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;
  opacity:var(--hag-atmo-opacity,.10);filter:saturate(.85);
}
#services,#contact{position:relative;overflow:hidden}
#services > *,#contact > .wrap{position:relative;z-index:1}

.foot-atmosphere{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 140% at 15% 0%,rgba(200,162,83,.08),transparent 60%);
}
footer{position:relative;overflow:hidden}
footer > .wrap{position:relative;z-index:1}

/* A very sparse, very low-opacity body-wide starfield, fixed behind
   everything — ties the rest of the page back to the hero's sky without
   competing with content. Only created when motion isn't reduced. */
.hag-body-sky{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
}

@media(prefers-reduced-motion:reduce){
  .cx-fx *{transition:none !important}
}

/* ============================================================
   Pleiades gate concept (v5) — scoped under .plx, a class
   js/concepts/pleiades.js adds to the gate's cosmos stack (and removes
   at postRelease, when the stack becomes the hero).
   ============================================================ */
.plx-constellation{position:absolute;inset:0;width:100%;height:100%}
.plx-constellation .pl-lines line{stroke:var(--gold);stroke-width:1;opacity:.65}
.plx-constellation .pl-stars circle{fill:var(--ivory);opacity:0}
/* The reveal mark is the hero of the frame — much larger than the 56px
   lockup glyph the other concepts use. Its flight measures the live rect,
   so the size here never needs to match the nav mark. */
.plx .cx-glyph{width:clamp(96px,22vmin,170px);height:clamp(96px,22vmin,170px)}
/* Pleiades doesn't use the horizontal rule beat. */
.plx .cx-rule{display:none}
@media(max-height:520px) and (orientation:landscape){
  .plx .cx-glyph{width:clamp(64px,16vmin,96px);height:clamp(64px,16vmin,96px)}
}