/* v1 — THE QUIET SUN. One perfect object, almost nothing else. */
#s1 .stage{display:grid; justify-items:center; align-content:center; gap:0}

#s1 .head{
  font-size:clamp(17px,4.5vw,24px); text-align:center;
  max-width:28ch; opacity:.92; margin-bottom:.9em;
  animation:q-in 1.2s .15s both;
}
#s1 .sunstack{
  width:min(92vw,64vh); aspect-ratio:1;
  animation:q-in 1.6s .05s both, breathe 7.5s 1.6s ease-in-out infinite;
}
#s1 .sunstack .rays  {animation:spin 150s linear infinite}
#s1 .sunstack .sparks{animation:spin 96s linear infinite reverse, shimmer 5s ease-in-out infinite}

#s1 .sub{
  font-size:clamp(19px,5.2vw,25px); text-align:center; margin-top:.7em;
  animation:q-in 1.2s .7s both;
}
#s1 .hint{
  font-family:var(--hand); font-weight:600; font-size:15px;
  letter-spacing:.09em; text-transform:uppercase; opacity:0; margin-top:2.4em;
  animation:hint-in .9s 3.2s forwards, hint-pulse 2.8s 4.1s ease-in-out infinite;
}
#s1.tapped .hint{animation:none; opacity:0; transition:opacity .2s}

@keyframes q-in{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.028)}}
@keyframes shimmer{0%,100%{opacity:1} 50%{opacity:.72}}
@keyframes hint-in{to{opacity:.4}}
@keyframes hint-pulse{0%,100%{opacity:.4} 50%{opacity:.14}}

/* the fall: sun spins up, rushes the viewer, whiteout */
#s1.tapped .sunstack{animation:vortex 1.5s cubic-bezier(.55,0,.85,.35) forwards}
#s1.tapped .head, #s1.tapped .sub{animation:vanish .5s forwards}
@keyframes vortex{
  0%  {transform:scale(1) rotate(0)}
  38% {transform:scale(.86) rotate(150deg)}
  100%{transform:scale(11) rotate(760deg); opacity:0}
}
@keyframes vanish{to{opacity:0; transform:translateY(-10px)}}

#s2{background:var(--paper)}
#s2 .phrase{opacity:0}
#s2 .phrase.show{animation:q-phrase 2.15s both}
@keyframes q-phrase{
  0%{opacity:0; transform:scale(.93)}
  22%{opacity:1; transform:scale(1)}
  74%{opacity:1; transform:scale(1.045)}
  100%{opacity:0; transform:scale(1.09)}
}