/* v5 — THE FLARE. Same detonation, but it explodes into daylight and
   the bold rays stay, printed over the paper. */
body.night{background:#0E0A16}

#s1{background:#0E0A16; overflow:hidden; transition:background 1.5s ease}
#s1.blown{background:var(--paper)}
#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, color 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:var(--ink);
  text-shadow:0 1px 10px rgba(250,247,240,.95), 0 0 26px rgba(250,247,240,.9);
}
#s1 .sub{
  font-size:clamp(19px,5.2vw,25px); text-align:center; margin-top:.75em;
  transform:translateY(10px); color:var(--ink);
  text-shadow:0 1px 10px rgba(250,247,240,.95), 0 0 22px rgba(250,247,240,.85);
}
#s1 .hint{
  font-family:var(--hand); font-weight:600; font-size:15px; color:var(--ink);
  letter-spacing:.09em; text-transform:uppercase; margin-top:2.2em;
  text-shadow:0 1px 10px rgba(250,247,240,.95);
}
#s1.blown .head{opacity:.94; transform:none}
#s1.blown .sub{opacity:.66; transform:none}
#s1.blown .hint{animation:f-pulse 2.8s 1.4s ease-in-out infinite}
@keyframes f-pulse{0%,100%{opacity:.45} 50%{opacity:.14}}

#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)); transition:filter 1.4s ease;
}
#s1.blown .sunstack .rays{filter:none; animation:f-spin 190s linear infinite}
#s1.blown .sunstack .face{filter:none}
#s1.blown .sunstack .sparks{animation:f-spin 84s linear infinite reverse}
@keyframes f-spin{to{transform:rotate(360deg)}}

/* on paper the rays behave like overlapping marker ink */
#s1 .corona{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; overflow:visible;
  transition:filter 1.4s ease;
}
#s1.blown .corona{animation:f-spin 240s linear infinite}
#s1.blown .corona .solid{animation:f-breathe 9s ease-in-out infinite}
#s1.blown .corona .bloom{animation:f-breathe 9s .4s ease-in-out infinite}
@keyframes f-breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}}

#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:f-seed .9s .2s forwards, f-beat 1.5s 1s ease-in-out infinite;
}
#s1.lit .seed{opacity:0; animation:none; transition:opacity .7s}
@keyframes f-seed{to{opacity:1}}
@keyframes f-beat{0%,100%{transform:scale(1)} 50%{transform:scale(1.6)}}

/* the bloom that turns night into day */
#s1 .flash{position:absolute; inset:0; background:#FFFDF4; opacity:0; pointer-events:none; z-index:4}
#s1 .flash.fire{animation:f-flash 1300ms cubic-bezier(.1,.8,.3,1) forwards}
@keyframes f-flash{0%{opacity:0} 12%{opacity:.95} 46%{opacity:.5} 100%{opacity:0}}

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

#s2{background:var(--paper)}
#s2 .phrase{opacity:0}
#s2 .phrase.show{animation:f-phrase 2.15s both}
@keyframes f-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)}
}