/* =========================================================
   HEARTHFIRE SKY — a smoke-heavy, ember-lit horizon.
   Pure CSS, subtly animated and safe for reduced-motion users.
   ========================================================= */

.storm-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 72% 22%, rgba(164, 88, 30, 0.24), transparent 26%),
    linear-gradient(180deg, #302317 0%, #19130d 62%, var(--bg-void) 100%);
  z-index: 0;
}

.storm-layer {
  position: absolute;
  inset: -10% -10%;
  background-repeat: repeat-x;
  background-position: 0 0;
  will-change: background-position;
}

/* Layer 3: furthest, slowest, faintest haze */
.storm-layer-3 {
  background-image:
    radial-gradient(ellipse 420px 160px at 10% 40%, rgba(104,77,52,0.36), transparent 70%),
    radial-gradient(ellipse 500px 200px at 55% 60%, rgba(75,53,36,0.32), transparent 70%),
    radial-gradient(ellipse 380px 150px at 85% 30%, rgba(115,78,48,0.28), transparent 70%);
  background-size: 2000px 100%;
  animation: storm-drift-3 150s linear infinite;
  opacity: 0.8;
}
@keyframes storm-drift-3 { from { background-position: 0 0; } to { background-position: -2000px 0; } }

/* Layer 2: midground, medium speed */
.storm-layer-2 {
  background-image:
    radial-gradient(ellipse 480px 190px at 20% 55%, rgba(60,43,30,0.55), transparent 65%),
    radial-gradient(ellipse 400px 170px at 60% 35%, rgba(46,33,24,0.53), transparent 65%),
    radial-gradient(ellipse 460px 200px at 92% 65%, rgba(66,45,30,0.52), transparent 65%);
  background-size: 1400px 100%;
  animation: storm-drift-2 80s linear infinite;
  opacity: 0.9;
}
@keyframes storm-drift-2 { from { background-position: 0 0; } to { background-position: -1400px 0; } }

/* Layer 1: foreground, fastest, most defined cloud masses */
.storm-layer-1 {
  background-image:
    radial-gradient(ellipse 340px 150px at 8% 45%, rgba(33,24,17,0.8), transparent 60%),
    radial-gradient(ellipse 300px 130px at 34% 25%, rgba(25,18,13,0.76), transparent 60%),
    radial-gradient(ellipse 360px 160px at 64% 55%, rgba(36,25,17,0.78), transparent 60%),
    radial-gradient(ellipse 280px 120px at 88% 30%, rgba(25,18,13,0.75), transparent 60%);
  background-size: 900px 100%;
  animation: storm-drift-1 42s linear infinite;
  opacity: 0.95;
}
@keyframes storm-drift-1 { from { background-position: 0 0; } to { background-position: -900px 0; } }

/* Vignette to keep hero text readable against moving clouds */
.storm-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, transparent 0%, rgba(17,14,10,0.52) 100%),
    linear-gradient(180deg, rgba(17,14,10,0.12), rgba(17,14,10,0.68) 85%);
  z-index: 1;
}

/* Lightning flash overlay — triggered by adding/removing .flash via JS */
.lightning-flash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,213,138,0.56), rgba(186,78,31,0.2));
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.lightning-flash.flash {
  animation: lightning-strike 0.65s ease-out;
}
@keyframes lightning-strike {
  0%   { opacity: 0; }
  4%   { opacity: 0.9; }
  9%   { opacity: 0.15; }
  15%  { opacity: 0.75; }
  24%  { opacity: 0; }
  50%  { opacity: 0; }
  55%  { opacity: 0.35; }
  65%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .storm-layer-1, .storm-layer-2, .storm-layer-3 { animation: none; }
  .lightning-flash.flash { animation: none; }
}

/* Dying Age storm: colder, heavier, and less theatrical. */
.storm-sky{background:radial-gradient(ellipse at 72% 22%,rgba(103,72,39,.17),transparent 27%),linear-gradient(180deg,#171b1e 0%,#0b0e10 63%,#07090b 100%)}
.storm-layer-3{filter:saturate(.45);opacity:.62}.storm-layer-2{filter:saturate(.35);opacity:.72}.storm-layer-1{filter:saturate(.25);opacity:.82}
.storm-vignette{background:radial-gradient(ellipse 70% 60% at 50% 40%,transparent,rgba(5,7,8,.66)),linear-gradient(180deg,rgba(6,8,10,.1),rgba(5,7,8,.82) 88%)}
.lightning-flash{background:linear-gradient(180deg,rgba(185,204,214,.42),rgba(121,93,60,.12))}