/* =====================================================================
   Gottify story-scroll journey — SHARED styling for the sitewide rollout.
   Self-contained (no page CSS-var dependencies): the fixed dimension stack,
   the standard nav brand lockup, and the wordmark-only footer brand.
   Loaded AFTER each page's inline <style> so it wins on equal specificity.
   The three approved backgrounds (constellation / moving blue grid + beams /
   soft aurora) and the choreography live in journey-core.js.
   ===================================================================== */

/* ---------- DIMENSION STACK (ported verbatim from index.html) ---------- */
#dimensions{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#dimensions .dim{position:absolute;inset:0;will-change:transform,opacity;transform:translateZ(0);backface-visibility:hidden}
#dimensions .dim canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Act — constellation (mini-Borr mesh). */
.dim-constellation{opacity:1}
.dim-constellation #bgfx{opacity:.44}
/* Act — moving blue grid + rising signal beams (flagship family). */
.dim-grid{opacity:0}
.dim-grid #dimGrid,.dim-grid #dimBeams{opacity:.9}
.dim-grid .dim-fade{position:absolute;inset:0;background:radial-gradient(135% 105% at 50% 0%,transparent 46%,rgba(13,21,34,.45) 88%,rgba(13,21,34,.7) 100%)}
/* Act — soft aurora mesh (catalogue family). */
.dim-aurora{opacity:0}
.dim-aurora #dimAurora{position:absolute;inset:-8%;width:116%;height:116%;opacity:.5}
.dim-aurora .dim-veil{position:absolute;inset:0;background:radial-gradient(150% 110% at 50% 0%,transparent 44%,rgba(6,11,20,.42) 86%,rgba(6,11,20,.68) 100%)}

/* Content sits above the fixed stack. Only top-level layout containers get a
   relative stacking context so the background shows through their gaps. */
body>nav,body>header,body>section,body>footer,body>main,body>article{position:relative;z-index:1}
/* reduced-motion / no-GSAP: journey-core.js shows only the first act; nothing pins. */
@media(prefers-reduced-motion:reduce){#dimensions .dim{transition:none}}

/* ---------- STANDARD NAV BRAND LOCKUP (ported from index.html) ---------- */
.brand{display:flex;align-items:center;gap:13px;min-height:44px;text-decoration:none}
.brand .flame,.brand img.flame{width:42px;height:42px;display:block;border-radius:0;
  filter:drop-shadow(0 2px 10px rgba(69,216,192,.34));animation:navGlow 3.8s ease-in-out infinite}
@keyframes navGlow{0%,100%{filter:drop-shadow(0 1px 7px rgba(69,216,192,.26))}50%{filter:drop-shadow(0 2px 15px rgba(69,216,192,.62))}}
.brand .wordmark{font-size:25px;font-weight:700;letter-spacing:-.015em;line-height:1}
.wordmark .g{color:var(--ink,#eef1f5)}
.wordmark .ify{background:linear-gradient(100deg,#1848c0 0%,#0090c0 48%,#45d8c0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- FOOTER BRAND — wordmark only, no flame image ---------- */
.foot-brand .flame,footer .brand .flame,footer .brand img{display:none}
.foot-brand .wordmark{font-size:19px}

/* Compact the standardized lockup on phones so the (deliberately larger) brand
   never pushes a nav past the viewport edge. */
@media(max-width:560px){
  .brand .flame,.brand img.flame{width:34px;height:34px}
  .brand .wordmark{font-size:21px}
}