/* v3 — THE WAKE-UP. You come out of the darkness the way Yanik did. */
body.night{background:var(--dark)}

#s1{background:var(--dark); transition:background 1.1s ease}
#s1.dawn{background:var(--paper)}

#s1 .stage{display:grid; justify-items:center; align-content:center}

#s1 .head, #s1 .sub, #s1 .hint{opacity:0; transition:opacity 1.1s ease, transform 1.1s ease}
#s1 .head{
  font-size:clamp(17px,4.5vw,24px); text-align:center; max-width:28ch;
  margin-bottom:.9em; transform:translateY(10px);
}
#s1 .sub{font-size:clamp(19px,5.2vw,25px); text-align:center; margin-top:.75em; transform:translateY(10px)}
#s1 .hint{
  font-family:var(--hand); font-weight:600; font-size:15px;
  letter-spacing:.09em; text-transform:uppercase; margin-top:2.2em;
}
#s1.dawn .head, #s1.dawn .sub{opacity:.9; transform:none}
#s1.dawn .hint{animation:w-pulse 2.8s 1.2s ease-in-out infinite}
@keyframes w-pulse{0%,100%{opacity:.42} 50%{opacity:.14}}

/* the sun arrives as light spreading from its third eye */
#s1 .sunstack{width:min(92vw,64vh); aspect-ratio:1; --r:0}
#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%));
}
#s1 .sunstack .rays, #s1 .sunstack .face{
  filter:drop-shadow(0 0 26px rgba(255,247,220,.5));
  transition:filter 1.3s ease;
}
#s1.dawn .sunstack .face{filter:none}
#s1.dawn .sunstack .rays{filter:none; animation:spin3 150s linear infinite}
#s1 .sunstack .sparks{
  opacity:0; transform:scale(.4);
  transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,1.4,.4,1);
}
#s1.dawn .sunstack .sparks{opacity:1; transform:none; animation:spin3 96s linear infinite reverse}
@keyframes spin3{to{transform:rotate(360deg)}}
#s1.dawn .sunstack{animation:breathe3 7.5s 1.4s ease-in-out infinite}
@keyframes breathe3{0%,100%{transform:scale(1)} 50%{transform:scale(1.028)}}

/* the single point of light before anything else */
#s1 .seed{
  position:absolute; left:50%; top:35%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background:#fff8e0; z-index:3;
  box-shadow:0 0 12px 4px rgba(255,244,205,.85), 0 0 44px 14px rgba(255,236,170,.4);
  opacity:0; animation:seed-in 1s .25s forwards, seed-beat 1.7s 1.2s ease-in-out infinite;
}
#s1.lit .seed{opacity:0; animation:none; transition:opacity .8s}
@keyframes seed-in{to{opacity:1}}
@keyframes seed-beat{0%,100%{transform:scale(1)} 50%{transform:scale(1.5)}}

/* tap: the light goes out again */
#s1 .flash{
  position:absolute; inset:0; background:#fffdf5; opacity:0;
  pointer-events:none; z-index:20;
}
#s1.tapped .flash{animation:blowout 1.35s forwards}
@keyframes blowout{
  0%{opacity:0} 18%{opacity:1} 42%{opacity:1} 100%{opacity:0}
}
#s1.tapped{background:var(--dark); transition:background .5s .45s ease}
#s1.tapped .sunstack{animation:collapse 1.3s cubic-bezier(.5,0,.8,.4) forwards}
#s1.tapped .head, #s1.tapped .sub, #s1.tapped .hint{opacity:0}
@keyframes collapse{
  0%{transform:scale(1) rotate(0)}
  30%{transform:scale(1.14) rotate(90deg)}
  100%{transform:scale(.02) rotate(540deg); opacity:0}
}

/* transition happens in the dark, then dawns into the oracle */
#s2{background:var(--dark); transition:background 1s ease}
#s2.dawn{background:var(--paper)}
#s2 .phrase{color:#F6F1E4; opacity:0; text-shadow:0 0 30px rgba(255,240,200,.3)}
#s2.dawn .phrase{color:var(--ink); text-shadow:none}
#s2 .phrase.show{animation:w-phrase 2.15s both}
@keyframes w-phrase{
  0%{opacity:0; letter-spacing:.22em; filter:blur(6px)}
  26%{opacity:1; letter-spacing:.03em; filter:blur(0)}
  76%{opacity:1}
  100%{opacity:0; filter:blur(3px)}
}