/* Atmosphere — the full-bleed background layers behind the reader:
   ember glow, vignette, film grain, the hell landscape, the ocean waves, the
   canvas effects (#embers / #waves / #burst), plus the reduced-motion opt-out
   that quiets them.

   Per-part theming (see js/atmosphere.js) drives the registered custom
   properties below; they interpolate — even inside gradients — so moving
   between parts cross-fades the glow, vignette, and landscape over ~1.4s. */

/* ---- registered properties so colours/numbers transition inside gradients --- */
@property --glow {
  syntax: "<color>"; inherits: true; initial-value: rgba(226, 86, 43, 0.16);
}
@property --glow-top {
  syntax: "<color>"; inherits: true; initial-value: rgba(226, 86, 43, 0.05);
}
@property --vignette {
  syntax: "<number>"; inherits: true; initial-value: 0.55;
}

/* ---- ember glow + grain + vignette ---- */
.bg-glow {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 118%, var(--glow) 0%, transparent 55%),
    radial-gradient(90% 60% at 50% -20%, var(--glow-top) 0%, transparent 60%);
  animation: breathe 11s ease-in-out infinite;
  transition: --glow 1.4s ease, --glow-top 1.4s ease;
}
@keyframes breathe { 0%,100%{opacity:.85} 50%{opacity:1} }

.bg-vignette {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,var(--vignette)) 100%);
  transition: --vignette 1.4s ease;
}
.bg-grain {
  position: fixed; inset: -50%; z-index: -1; pointer-events: none;
  opacity: 0.04; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- hell landscape (red desert / ocean horizon / garden) ---- */
/* z-index -5: sits behind the ocean, so waves lap over the shore. Two stacked
   layers (<i>) hold the per-part landscape SVG; js/atmosphere.js fades between
   them so swapping image (ocean ↔ ground ↔ garden) cross-fades instead of
   popping. Per-part tint + how much the land shows live on each layer. */
.bg-scape {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: -5;
  height: min(58vh, 620px); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
}
.bg-scape > i {
  position: absolute; inset: 0; opacity: 0;
  background-position: center bottom; background-size: cover;
  background-repeat: no-repeat;
  transition: opacity 1.4s ease, filter 1.4s ease;
}

/* ---- ocean of torment (canvas painted by js/waves.js) ---- */
.bg-waves {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: -4;
  display: block; width: 100%; height: min(46vh, 420px);
  pointer-events: none;
}

/* ---- rising embers (canvas painted by js/embers.js) ---- */
.bg-embers {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: -1;
  display: block; width: 100%; height: min(62vh, 560px);
  pointer-events: none;
}

/* ---- ember burst on click (canvas painted by js/ember-burst.js) ---- */
.fx-burst {
  position: fixed; inset: 0; z-index: 70;
  width: 100%; height: 100%; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bg-glow { animation: none; }
  .bg-embers { display: none; }
  .bg-waves { display: none; }
  .fx-burst { display: none; }
  .reveal > * { animation: none !important; opacity: 1 !important; }
}