/* ==========================================================================
   Nocturne — atmosphere layer (shared across all pages).
   Faithful recreation of the redesign package's CSS atmosphere: dark layered
   ground, drifting aurora "floating lights", a faint star field, pulsing
   care-cross marks, film grain, the breathing/sheen glow on the paid CTA,
   scroll-lit type, section light-sweeps, and a desktop light-ring cursor.

   ISOLATION CONTRACT (per spec):
   - The atmosphere lives in a single fixed layer, z-index:0, pointer-events:none.
   - html carries the opaque base colour; body is transparent so the layer shows.
   - Page content sits at z-index:1 (relative), always above the atmosphere.
   - Everything here is decorative and aria-hidden; nothing is required to read
     or operate the page. Reduced-motion freezes motion; coarse pointers/small
     screens receive a simplified, cheaper version.
   ========================================================================== */

/* Core Nocturne tokens so atmosphere.css is self-sufficient on pages that do
   not load nocturne.css (the deep pages). On the homepage nocturne.css defines
   the same values; duplicates are identical, so order does not matter. */
:root{
  --color-bg:#161826; --color-surface:#232532; --color-surface-2:#2b2e3d; --color-text:#e9e9ed;
  --color-accent:#9184d9; --color-accent-2:#a7a1db; --color-divider:color-mix(in srgb, #e9e9ed 16%, transparent);
  --color-neutral-100:#f3f5fe; --color-neutral-500:#9397ab; --color-neutral-600:#75798c; --color-neutral-700:#595d6c;
  --color-accent-100:#f5f4ff; --color-accent-200:#e7e5fe; --color-accent-300:#d2cefd; --color-accent-800:#423a6a; --color-accent-900:#2b2741;
  --color-section:#262a60; --color-section-glow:#353b80;
  --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --z-mobilebar:46; --bar-h:64px; --ring:0 0 0 3px color-mix(in srgb, #9184d9 55%, transparent);
}

html { background: var(--color-bg) !important; }
body { background: transparent !important; }
/* keep ALL content above the atmosphere, whatever the page's structure.
   position:relative with no offset is layout-safe; z-index:1 lifts every
   top-level container above the fixed z-0 atmosphere. */
body > *:not(.atmos):not(.grain):not(.topline):not(.cursor):not(.mobilebar):not(.buy-chip) { position: relative; z-index: 1; }

/* ── the fixed atmosphere shell ───────────────────────────────────────── */
.atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.atmos * { position: absolute; }

/* drifting aurora "floating lights" — soft violet blooms that never settle */
.atmos .aur { border-radius: 50%; filter: blur(60px); opacity: .5; will-change: transform; }
.atmos .aur-1 { width: 46vw; height: 46vw; left: -8vw; top: -6vw;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 42%, transparent), transparent 70%);
  animation: atmos-drift-a 26s ease-in-out infinite alternate; }
.atmos .aur-2 { width: 40vw; height: 40vw; right: -10vw; top: 28vh;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent-2) 34%, transparent), transparent 70%);
  animation: atmos-drift-b 32s ease-in-out infinite alternate; }
.atmos .aur-3 { width: 52vw; height: 52vw; left: 18vw; bottom: -22vw;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 72%);
  animation: atmos-drift-c 38s ease-in-out infinite alternate; }
@keyframes atmos-drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw,4vh,0) scale(1.12); } }
@keyframes atmos-drift-b { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-5vw,-3vh,0) scale(.92); } }
@keyframes atmos-drift-c { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-4vw,-5vh,0) scale(1.1); } }

/* a faint star / particle field — a single tiled radial layer, one paint */
.atmos .stars { inset: 0; opacity: .5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, color-mix(in srgb, var(--color-neutral-100) 70%, transparent), transparent),
    radial-gradient(1.2px 1.2px at 74% 12%, color-mix(in srgb, var(--color-accent-200) 60%, transparent), transparent),
    radial-gradient(1px 1px at 44% 62%, color-mix(in srgb, var(--color-neutral-100) 55%, transparent), transparent),
    radial-gradient(1.6px 1.6px at 88% 74%, color-mix(in srgb, var(--color-accent-300) 55%, transparent), transparent),
    radial-gradient(1px 1px at 28% 88%, color-mix(in srgb, var(--color-neutral-100) 45%, transparent), transparent),
    radial-gradient(1.3px 1.3px at 62% 34%, color-mix(in srgb, var(--color-neutral-100) 50%, transparent), transparent);
  background-repeat: repeat; background-size: 620px 620px;
  animation: atmos-twinkle 7s ease-in-out infinite alternate; }
@keyframes atmos-twinkle { from { opacity: .34; } to { opacity: .6; } }

/* pulsing care-cross marks — a subtle nursing motif, slow and quiet */
.atmos .cross { width: 16px; height: 16px; opacity: 0; color: var(--color-accent);
  animation: atmos-cross 9s ease-in-out infinite; }
.atmos .cross::before, .atmos .cross::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.atmos .cross::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.atmos .cross::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
.atmos .cross-1 { left: 16%; top: 30%; animation-delay: 0s; }
.atmos .cross-2 { left: 82%; top: 22%; animation-delay: 2.4s; }
.atmos .cross-3 { left: 68%; top: 68%; animation-delay: 4.1s; }
.atmos .cross-4 { left: 30%; top: 78%; animation-delay: 6s; }
@keyframes atmos-cross { 0%,100% { opacity: 0; transform: scale(.7); } 45%,60% { opacity: .5; transform: scale(1); } }

/* a gentle vignette so content edges sink into the night */
.atmos .vignette { inset: 0; background: radial-gradient(120% 90% at 50% 0%, transparent 55%, color-mix(in srgb, var(--color-bg) 80%, transparent) 100%); }

/* ── film grain — the finish (one static paint) ───────────────────────── */
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .045; contain: strict;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── scroll progress hairline across the very top ─────────────────────── */
.topline { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 50; transform-origin: left center;
  background: linear-gradient(to right, var(--color-accent), color-mix(in srgb, var(--color-accent) 30%, transparent));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-accent) 55%, transparent)); transition: width .1s linear; }

/* ── the paid CTA breathes, and light runs across it ──────────────────── */
.btn.glow { position: relative; overflow: hidden; isolation: isolate; animation: atmos-breathe 3.6s ease-in-out infinite; }
@keyframes atmos-breathe {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 40%, transparent), 0 0 14px -2px color-mix(in srgb, var(--color-accent) 30%, transparent); }
  50%     { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 0%, transparent), 0 0 30px 2px color-mix(in srgb, var(--color-accent) 45%, transparent); }
}
.btn.glow::after { content: ""; position: absolute; inset: -40% -12%; pointer-events: none; z-index: -1;
  background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, #fff 55%, transparent) 50%, transparent 60%);
  animation: atmos-sheen 3.6s ease-in-out infinite; }
@keyframes atmos-sheen { 0% { transform: translateX(-150%); } 55%,100% { transform: translateX(150%); } }
.btn.glow:hover { animation-play-state: paused; }

/* the price sits in a bloom of its own light */
.price.bloom { position: relative; isolation: isolate; z-index: 0; }
.price.bloom::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; height: 150%;
  transform: translate(-50%,-50%); border-radius: 999px; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 70%);
  filter: blur(16px); animation: atmos-bloom 3.6s ease-in-out infinite; }
@keyframes atmos-bloom { 0%,100% { opacity: .5; transform: translate(-50%,-50%) scale(.9); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }

/* ── section light-sweep + aurora bloom behind commercial sections ────── */
.sweep { position: relative; }
.sweep::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-accent) 80%, transparent) 42%, transparent); }
.section-glow { position: relative; isolation: isolate; }
.section-glow::before { content: ""; position: absolute; inset: -8% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 46% at 18% 26%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%),
              radial-gradient(38% 42% at 86% 72%, color-mix(in srgb, var(--color-accent-2) 12%, transparent), transparent 70%);
  filter: blur(44px); animation: atmos-section-drift 24s ease-in-out infinite alternate; }
@keyframes atmos-section-drift { from { transform: translate3d(-2%,1%,0); } to { transform: translate3d(3%,-2%,0) scale(1.06); } }

/* ── scroll-lit statement type ────────────────────────────────────────── */
.lit { color: color-mix(in srgb, var(--color-text) 26%, transparent); transition: color .5s ease; }
.lit.on { color: var(--color-text); }

/* ── premium translucent cards (opt-in) ───────────────────────────────── */
.card.glassy, .soon.glassy, .pack.glassy, .calc.glassy {
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 46%),
              color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 9%, transparent);
}

/* ── card pointer-follow light (set --mx/--my in JS) ──────────────────── */
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 65%);
  opacity: 0; transition: opacity .4s ease; }
.spot:hover::before { opacity: 1; }

/* ── desktop light-ring cursor (JS toggles .on/.hot) ──────────────────── */
.cursor { position: fixed; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 80%, transparent); border-radius: 999px;
  z-index: 70; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  transition: opacity .3s ease, width .3s cubic-bezier(.16,.84,.3,1), height .3s cubic-bezier(.16,.84,.3,1), margin .3s cubic-bezier(.16,.84,.3,1), background .3s ease; }
.cursor.on { opacity: 1; }
.cursor.hot { width: 60px; height: 60px; margin: -30px 0 0 -30px; background: color-mix(in srgb, var(--color-accent) 15%, transparent); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ── reduced motion: freeze all nonessential movement (keep visuals) ───── */
@media (prefers-reduced-motion: reduce) {
  .atmos .aur, .atmos .stars, .atmos .cross,
  .btn.glow, .btn.glow::after, .price.bloom::before, .section-glow::before { animation: none !important; }
  .atmos .cross { opacity: .32; }           /* show statically rather than hide */
  .lit { color: var(--color-text); }        /* never leave text dim without scroll */
  .topline { transition: none; }
}

/* ── small screens / coarse pointers: simplified, cheaper atmosphere ───── */
@media (max-width: 640px) {
  .atmos .aur-3 { display: none; }           /* fewer big blur layers */
  .atmos .aur { filter: blur(48px); opacity: .42; }
  .atmos .cross-2, .atmos .cross-4 { display: none; }
  .grain { display: none; }                  /* skip the grain paint on mobile */
  .card.glassy, .soon.glassy, .pack.glassy, .calc.glassy { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-surface); }
}