/* ==========================================================================
   The Fogus Forum — atmospherics: the heavens, lightning, proclamations.
   Other modules may key off body[data-intensity='mild'|'dramatic'|'biblical']
   and the --fx-* custom properties below.
   ========================================================================== */

body {
  --fx-level: 1;            /* 0 mild · 1 dramatic · 2 biblical */
  --fx-heat: .75;           /* general glow strength, 0–1 */
  --fx-speed: 1;            /* general animation speed multiplier */
  --sun-x: 50%;
  --sun-y: 18%;
  --ray-dur-a: 150s;
  --ray-dur-b: 210s;
  --ray-op: .8;
  --cloud-dur-far: 300s;
  --cloud-dur-near: 170s;
  --godray-op: .62;
  --sun-dur: 9s;
}
body[data-intensity='mild'] {
  --fx-level: 0;
  --fx-heat: .5;
  --fx-speed: .6;
  --ray-dur-a: 260s;
  --ray-dur-b: 360s;
  --ray-op: .55;
  --cloud-dur-far: 420s;
  --cloud-dur-near: 260s;
  --godray-op: .38;
  --sun-dur: 12s;
}
body[data-intensity='biblical'] {
  --fx-level: 2;
  --fx-heat: 1;
  --fx-speed: 1.8;
  --ray-dur-a: 34s;
  --ray-dur-b: 48s;
  --ray-op: 1;
  --cloud-dur-far: 120s;
  --cloud-dur-near: 64s;
  --godray-op: .95;
  --sun-dur: 3.2s;
}

/* --------------------------------------------------------------------------
   The heavens (fixed, behind everything)
   -------------------------------------------------------------------------- */
.heavens {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
  background: #070402;
  contain: strict;
}
.heavens > * {
  position: absolute;
  pointer-events: none;
}

.sky {
  inset: 0;
  background:
    radial-gradient(ellipse 70% 48% at var(--sun-x) var(--sun-y), rgba(255, 196, 92, .55) 0, rgba(214, 120, 30, .32) 30%, rgba(120, 58, 12, .12) 60%, transparent 85%),
    radial-gradient(ellipse 130% 80% at var(--sun-x) var(--sun-y), #3d1f07 0, #1f0f04 38%, #0c0602 70%, #050302 100%);
}
/* Biblical: the sky itself throbs toward molten crimson. */
.sky-hot {
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 80% 60% at var(--sun-x) var(--sun-y), rgba(255, 120, 30, .55), rgba(170, 30, 8, .4) 45%, rgba(60, 6, 2, .5) 100%);
  mix-blend-mode: screen;
}
body[data-intensity='biblical'] .sky-hot { animation: fx-throb 7s ease-in-out infinite alternate; }
body[data-intensity='biblical'] .sun { animation-name: fx-breathe-hot; }

/* Storm clouds: tiled SVG turbulence (set by fx.js), drifting by transform. */
.clouds {
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2.4s ease-out;
}
.clouds.is-gathered { opacity: var(--cloud-op, 1); }
.clouds-drift {
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: calc(100% + var(--tile-w, 1200px));
  background-repeat: repeat;
  will-change: transform;
}
.clouds-far {
  --cloud-op: .95;
  -webkit-mask-image: radial-gradient(ellipse 55% 40% at var(--sun-x) var(--sun-y), rgba(0, 0, 0, .3), #000 75%);
  mask-image: radial-gradient(ellipse 55% 40% at var(--sun-x) var(--sun-y), rgba(0, 0, 0, .3), #000 75%);
}
.clouds-far .clouds-drift { animation: fx-drift-left var(--cloud-dur-far) linear infinite; }
.clouds-near {
  -webkit-mask-image: radial-gradient(ellipse 60% 42% at var(--sun-x) var(--sun-y), rgba(0, 0, 0, .12) 10%, rgba(0, 0, 0, .75) 55%, #000 85%);
  mask-image: radial-gradient(ellipse 60% 42% at var(--sun-x) var(--sun-y), rgba(0, 0, 0, .12) 10%, rgba(0, 0, 0, .75) 55%, #000 85%);
}
.clouds-near .clouds-drift { animation: fx-drift-right var(--cloud-dur-near) linear infinite; }

.sky-bolts,
#embers {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Two counter-rotating sunbursts centred on the sun. */
.sunburst {
  left: var(--sun-x);
  top: var(--sun-y);
  width: var(--burst, 150vmax);
  height: var(--burst, 150vmax);
  margin: calc(var(--burst, 150vmax) / -2) 0 0 calc(var(--burst, 150vmax) / -2);
  border-radius: 50%;
  opacity: var(--ray-op);
  will-change: transform;
  transition: opacity 1.5s;
}
.sunburst-a {
  --burst: 150vmax;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 216, 128, 0) 0deg, rgba(255, 220, 140, .36) 1.1deg, rgba(255, 216, 128, 0) 2.4deg,
    transparent 2.4deg 7.5deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 2%, #000 9%, rgba(0, 0, 0, .55) 34%, rgba(0, 0, 0, .14) 62%, transparent 92%);
  mask-image: radial-gradient(circle closest-side, transparent 2%, #000 9%, rgba(0, 0, 0, .55) 34%, rgba(0, 0, 0, .14) 62%, transparent 92%);
  animation: fx-spin var(--ray-dur-a) linear infinite;
}
.sunburst-b {
  --burst: 120vmax;
  background: repeating-conic-gradient(from 3deg,
    rgba(255, 190, 90, 0) 0deg, rgba(255, 196, 96, .24) 2.6deg, rgba(255, 190, 90, 0) 5.2deg,
    transparent 5.2deg 11.25deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 4%, #000 12%, rgba(0, 0, 0, .4) 40%, transparent 80%);
  mask-image: radial-gradient(circle closest-side, transparent 4%, #000 12%, rgba(0, 0, 0, .4) 40%, transparent 80%);
  animation: fx-spin var(--ray-dur-b) linear infinite reverse;
}
/* Biblical only: a third, fiery burst spinning hard. */
.sunburst-c {
  --burst: 110vmax;
  display: none;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 140, 40, 0) 0deg, rgba(255, 170, 60, .34) 3deg, rgba(255, 236, 170, .5) 4deg, rgba(255, 140, 40, 0) 7deg,
    transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 3%, #000 10%, rgba(0, 0, 0, .35) 38%, transparent 70%);
  mask-image: radial-gradient(circle closest-side, transparent 3%, #000 10%, rgba(0, 0, 0, .35) 38%, transparent 70%);
  animation: fx-spin 14s linear infinite;
}
body[data-intensity='biblical'] .sunburst-c { display: block; }
/* Biblical only: shockwave halos rolling out of the sun. */
.sun-ring {
  display: none;
  left: var(--sun-x);
  top: var(--sun-y);
  width: 70vmin;
  height: 70vmin;
  margin: -35vmin 0 0 -35vmin;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, transparent 80%, rgba(255, 214, 120, .5) 90%, rgba(255, 244, 200, .8) 94%, rgba(255, 190, 90, .3) 97%, transparent 100%);
  opacity: 0;
  animation: fx-ring 2.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
.sun-ring-2 { animation-delay: -1.4s; }
body[data-intensity='biblical'] .sun-ring { display: block; }

/* The blazing sun. */
.sun {
  left: var(--sun-x);
  top: var(--sun-y);
  width: 110vmin;
  height: 110vmin;
  margin: -55vmin 0 0 -55vmin;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    #fffef6 0, #fff3c4 3.5%, #ffd978 8%, rgba(255, 178, 64, .78) 15%, rgba(240, 130, 34, .4) 30%,
    rgba(180, 80, 16, .16) 52%, transparent 100%);
  mix-blend-mode: screen;
  opacity: calc(.62 + var(--fx-heat) * .38);
  animation: fx-breathe var(--sun-dur) ease-in-out infinite alternate;
  will-change: transform;
}
/* Anamorphic flare streak through the sun. */
.sun-flare {
  left: 0;
  right: 0;
  top: var(--sun-y);
  height: 26px;
  margin-top: -13px;
  background: radial-gradient(ellipse 50% 50% at var(--sun-x) 50%, rgba(255, 246, 214, .9), rgba(255, 200, 110, .35) 35%, transparent 75%);
  opacity: calc(.35 + var(--fx-heat) * .5);
}
/* Sunlight dodging the clouds near the sun: makes their gold edges blaze. */
.sun-lit {
  inset: 0;
  background: radial-gradient(ellipse 62% 52% at var(--sun-x) var(--sun-y), rgba(255, 206, 120, .55) 0, rgba(255, 180, 80, .26) 40%, rgba(220, 130, 40, .07) 70%, transparent 90%);
  mix-blend-mode: color-dodge;
  opacity: calc(.25 + var(--fx-heat) * .6);
  transition: opacity 1.5s;
}

/* God rays: long blurred beams fanning down from the sun. */
.godrays {
  inset: 0;
  mix-blend-mode: screen;
  opacity: var(--godray-op);
  transition: opacity 1.5s;
}
.godray {
  position: absolute;
  left: var(--sun-x);
  top: var(--sun-y);
  width: var(--w, 120px);
  height: 150vh;
  margin-left: calc(var(--w, 120px) / -2);
  transform-origin: 50% 0;
  transform: rotate(var(--a, 0deg)) skewX(var(--k, 0deg));
  filter: blur(var(--b, 12px));
  opacity: .7;
  animation: fx-beam var(--t, 7s) ease-in-out var(--d, 0s) infinite alternate;
}
.godray::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 240, 190, .95) 0, rgba(255, 206, 110, .55) 14%, rgba(255, 170, 60, .2) 45%, rgba(255, 150, 40, .06) 70%, transparent 88%);
}
body[data-intensity='biblical'] .godray { animation-duration: calc(var(--t, 7s) / 3); }

.sky-flash {
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 30%), rgba(255, 238, 196, .95) 0, rgba(255, 196, 96, .55) 16%, rgba(255, 150, 50, .2) 42%, transparent 72%);
  mix-blend-mode: screen;
}

/* The vignette sits above the heavens and below all content. */
.vignette {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 80% at 50% 38%, transparent 42%, rgba(4, 2, 1, .5) 72%, rgba(2, 1, 0, .92) 100%),
    linear-gradient(180deg, rgba(3, 2, 1, .35) 0, transparent 14%, transparent 62%, rgba(3, 2, 1, .7) 100%);
}
body[data-intensity='biblical'] .vignette { animation: fx-vignette 3.4s ease-in-out infinite alternate; }

/* --------------------------------------------------------------------------
   Foreground: lightning canvas, flash, proclamation (re-parented into open dialogs)
   -------------------------------------------------------------------------- */
.fx-fore {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fx);
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  mix-blend-mode: screen;
}
.fx-flash {
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 50%), rgba(255, 242, 206, .95) 0, rgba(255, 206, 112, .6) 14%, rgba(255, 160, 56, .26) 40%, rgba(255, 140, 40, 0) 72%);
  mix-blend-mode: screen;
}

.proclamation {
  position: fixed;
  inset: 0;
  z-index: var(--z-proclaim);
  display: grid;
  place-items: center;
  padding: 0 16px;
  overflow: hidden;
  pointer-events: none;
  text-align: center;
}
.proclamation[hidden] { display: none; }
.proc-band,
.proc-rays,
.proc-flare {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
}
.proc-band {
  --w: 140vw;
  --h: min(80vh, 660px);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(7, 4, 1, .9) 0, rgba(7, 4, 1, .74) 42%, rgba(7, 4, 1, .32) 68%, transparent 100%);
}
.proc-rays {
  --w: 150vmax;
  --h: 150vmax;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 222, 140, 0) 0deg, rgba(255, 222, 140, .55) 1.4deg, rgba(255, 222, 140, 0) 2.8deg, transparent 2.8deg 6deg),
    repeating-conic-gradient(from 2deg, rgba(255, 170, 60, 0) 0deg, rgba(255, 170, 60, .3) 3deg, rgba(255, 170, 60, 0) 6deg, transparent 6deg 15deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 3%, rgba(0, 0, 0, .5) 8%, #000 15%, rgba(0, 0, 0, .4) 30%, transparent 50%);
  mask-image: radial-gradient(circle closest-side, transparent 3%, rgba(0, 0, 0, .5) 8%, #000 15%, rgba(0, 0, 0, .4) 30%, transparent 50%);
  mix-blend-mode: screen;
}
.proc-flare {
  --w: min(120vw, 1100px);
  --h: min(46vh, 380px);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 186, 72, .34), rgba(255, 140, 40, .12) 50%, transparent 72%);
  mix-blend-mode: screen;
}
.proc-stack {
  position: relative;
  width: 100%;
  max-width: 1200px;
}
.proc-title {
  margin: 0;
  font: 900 clamp(2.3rem, 10vw, 7.4rem)/1.04 var(--font-display);
  letter-spacing: .01em;
  overflow-wrap: break-word;
  text-wrap: balance;
  filter: drop-shadow(0 3px 0 #241302) drop-shadow(0 0 14px rgba(0, 0, 0, .9)) drop-shadow(0 0 30px rgba(255, 170, 50, .55));
}
.proc-title span {
  background: linear-gradient(180deg, #fffdf0 0%, #fbe09a 24%, #e3aa40 46%, #8a5612 54%, #eabb58 74%, #fff3c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: transparent;
}
.proc-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  margin: .55em auto .5em;
  color: var(--gold-1);
  font-size: clamp(.9rem, 2.4vw, 1.3rem);
  text-shadow: 0 0 12px rgba(255, 190, 80, .8);
}
.proc-rule::before,
.proc-rule::after {
  content: '';
  width: min(22vw, 180px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2));
}
.proc-rule::after { background: linear-gradient(270deg, transparent, var(--gold-2)); }
.proc-sub {
  max-width: 34em;
  margin: 0 auto;
  color: var(--gold-hi);
  font: 700 clamp(.78rem, 2.5vw, 1.35rem)/1.45 var(--font-head);
  letter-spacing: .3em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 0 #1a0d01, 0 0 10px rgba(0, 0, 0, .95), 0 0 24px rgba(255, 170, 50, .6);
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-drift-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(var(--tile-w, 1200px) * -1), 0, 0); }
}
@keyframes fx-drift-right {
  from { transform: translate3d(calc(var(--tile-w, 1200px) * -1), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes fx-breathe {
  from { transform: scale(.94); }
  to { transform: scale(1.06); }
}
@keyframes fx-breathe-hot {
  from { transform: scale(.9); }
  to { transform: scale(1.22); }
}
@keyframes fx-beam {
  0% { opacity: .35; }
  60% { opacity: .9; }
  100% { opacity: .55; }
}
@keyframes fx-throb {
  from { opacity: 0; }
  to { opacity: .75; }
}
@keyframes fx-ring {
  0% { opacity: 0; transform: scale(.25); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.6); }
}
@keyframes fx-vignette {
  from { opacity: 1; }
  to { opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
  .heavens *,
  .vignette,
  .godray {
    animation: none !important;
  }
  body[data-intensity='biblical'] .sky-hot { opacity: .35; }
}