/* v4 — SUPERNOVA. It detonates and stays burning in deep space. */
body.night{background:#0A0812}

#s1{background:#0A0812; overflow:hidden; transition:background 1.4s ease}
#s1.blown{background:#171029}
#s1 .stage{display:flex; flex-direction:column; align-items:center; margin-block:auto; position:relative; z-index:2}

#s1 .head, #s1 .sub, #s1 .hint{opacity:0; transition:opacity 1.2s ease, transform 1.2s ease}
#s1 .head{
  font-size:clamp(17px,4.5vw,24px); text-align:center; max-width:28ch;
  margin-bottom:.9em; transform:translateY(10px); color:#FFFDF6;
  text-shadow:0 2px 16px rgba(6,4,12,.95), 0 0 42px rgba(6,4,12,.9);
}
#s1 .sub{
  font-size:clamp(19px,5.2vw,25px); text-align:center; margin-top:.75em;
  transform:translateY(10px); color:#FFFDF6; opacity:0;
  text-shadow:0 2px 14px rgba(6,4,12,.95), 0 0 34px rgba(6,4,12,.85);
}
#s1 .hint{
  font-family:var(--hand); font-weight:600; font-size:15px; color:#FFFDF6;
  letter-spacing:.09em; text-transform:uppercase; margin-top:2.2em;
  text-shadow:0 2px 14px rgba(6,4,12,.95);
}
#s1.blown .head{opacity:.95; transform:none}
#s1.blown .sub{opacity:.7; transform:none}
#s1.blown .hint{animation:n-pulse 2.8s 1.4s ease-in-out infinite}
@keyframes n-pulse{0%,100%{opacity:.5} 50%{opacity:.16}}

/* the sloth: light spreads from the third eye, same as v3 */
#s1 .sunstack{width:min(80vw,54vh); aspect-ratio:1; --r:0; position:relative}
#s1 .sunstack img{
  -webkit-mask-image:radial-gradient(circle at 50% 35%, #000 0 calc(var(--r) * 1%), transparent calc(var(--r) * 1% + 16%));
          mask-image:radial-gradient(circle at 50% 35%, #000 0 calc(var(--r) * 1%), transparent calc(var(--r) * 1% + 16%));
  z-index:2;
}
#s1 .sunstack .rays, #s1 .sunstack .face{filter:drop-shadow(0 0 30px rgba(255,244,205,.55))}
#s1.blown .sunstack .rays{animation:n-spin 190s linear infinite}
#s1.blown .sunstack .sparks{animation:n-spin 84s linear infinite reverse}
@keyframes n-spin{to{transform:rotate(360deg)}}

/* the corona lives behind everything and never stops turning */
/* the corona shares the sloth's coordinate space exactly — its viewBox
   ±1000 must equal the image's half-width, or every ray renders oversized */
#s1 .corona{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; overflow:visible;
}
#s1.blown .corona{animation:n-spin 240s linear infinite}
#s1.blown .corona .solid{animation:n-breathe 9s ease-in-out infinite}
#s1.blown .corona .bloom{animation:n-breathe 9s .4s ease-in-out infinite}
@keyframes n-breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.07)}}

/* the point of light before the detonation */
#s1 .seed{
  position:absolute; left:50%; top:35%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:#fff9e4; z-index:5;
  box-shadow:0 0 14px 5px rgba(255,246,210,.9), 0 0 52px 18px rgba(255,232,160,.45);
  opacity:0; animation:n-seed .9s .2s forwards, n-beat 1.5s 1s ease-in-out infinite;
}
#s1.lit .seed{opacity:0; animation:none; transition:opacity .7s}
@keyframes n-seed{to{opacity:1}}
@keyframes n-beat{0%,100%{transform:scale(1)} 50%{transform:scale(1.6)}}

/* detonation flash */
#s1 .flash{position:absolute; inset:0; background:#FFF8E6; opacity:0; pointer-events:none; z-index:4}
#s1 .flash.fire{animation:n-flash 900ms cubic-bezier(.1,.8,.3,1) forwards}
@keyframes n-flash{0%{opacity:0} 9%{opacity:.88} 100%{opacity:0}}

/* tap: the whole thing goes off */
#s1.tapped .flash{animation:n-blowout 1.5s forwards}
@keyframes n-blowout{0%{opacity:0} 30%{opacity:1} 55%{opacity:1} 100%{opacity:0}}
#s1.tapped .sunstack img{animation:n-collapse 1.3s cubic-bezier(.5,0,.8,.4) forwards}
#s1.tapped .head, #s1.tapped .sub, #s1.tapped .hint{opacity:0}
@keyframes n-collapse{
  0%{transform:scale(1) rotate(0)}
  28%{transform:scale(1.2) rotate(80deg)}
  100%{transform:scale(.02) rotate(520deg); opacity:0}
}

#s2{background:#0A0812; transition:background 1s ease}
#s2.dawn{background:var(--paper)}
#s2 .phrase{color:#FBF6E8; opacity:0; text-shadow:0 0 34px rgba(255,236,180,.4)}
#s2.dawn .phrase{color:var(--ink); text-shadow:none}
#s2 .phrase.show{animation:n-phrase 2.15s both}
@keyframes n-phrase{
  0%{opacity:0; letter-spacing:.24em; filter:blur(7px)}
  26%{opacity:1; letter-spacing:.03em; filter:blur(0)}
  76%{opacity:1}
  100%{opacity:0; filter:blur(4px)}
}