/* v2 — THE DOODLE STORM. A sketchbook page that won't hold still. */
#s1{overflow:hidden}
#s1 .field{position:absolute; inset:0; pointer-events:none; z-index:1}
#s1 .field .m{position:absolute; will-change:transform}
#s1 .field .frag{
  position:absolute; font-family:var(--hand); font-weight:600;
  white-space:nowrap; color:var(--ink); opacity:.15; font-size:clamp(13px,3.6vw,17px);
}

#s1 .stage{position:relative; z-index:2; display:grid; justify-items:center; align-content:center}
#s1 .head{
  font-size:clamp(17px,4.4vw,23px); text-align:center; max-width:19ch;
  position:relative; margin-bottom:1.1em; animation:d-in 1s .1s both;
}
#s1 .head .squig{position:absolute; left:8%; right:8%; bottom:-.42em; width:84%; height:.5em; overflow:visible}
#s1 .head .squig path{
  fill:none; stroke:var(--cyan); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:320; stroke-dashoffset:320; animation:d-draw .9s .8s forwards ease-out;
}
#s1 .sunstack{
  width:min(74vw,48vh); aspect-ratio:1;
  animation:d-pop 1.1s cubic-bezier(.2,1.3,.35,1) both, bob 6s 1.1s ease-in-out infinite;
}
#s1 .sunstack .rays  {animation:spin2 120s linear infinite}
#s1 .sunstack .sparks{animation:spin2 42s linear infinite reverse}
#s1 .sub{font-size:clamp(18px,4.9vw,23px); text-align:center; margin-top:.9em; animation:d-in 1s .55s both}
#s1 .hint{
  font-family:var(--hand); font-weight:600; font-size:15px; letter-spacing:.09em;
  text-transform:uppercase; opacity:0; margin-top:1.6em;
  animation:d-hint .8s 2.6s forwards, d-pulse 2.6s 3.4s ease-in-out infinite;
}

@keyframes d-in{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes d-pop{from{opacity:0; transform:scale(.7) rotate(-14deg)} to{opacity:1; transform:none}}
@keyframes d-draw{to{stroke-dashoffset:0}}
@keyframes spin2{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.7deg)} 50%{transform:translateY(-9px) rotate(.7deg)}}
@keyframes d-hint{to{opacity:.42}}
@keyframes d-pulse{0%,100%{opacity:.42} 50%{opacity:.15}}
@keyframes drift{
  0%,100%{transform:translate(0,0) rotate(var(--r,0deg))}
  50%{transform:translate(var(--dx,6px),var(--dy,-9px)) rotate(calc(var(--r,0deg) + 14deg))}
}

/* the suck: everything rushes into the sloth, then the sloth eats itself */
#s1.tapped .field .m, #s1.tapped .field .frag{
  animation:none; transition:transform 1.05s cubic-bezier(.6,0,.8,.4), opacity 1.05s ease-in;
  transform:translate(var(--tox),var(--toy)) scale(.15) rotate(200deg); opacity:0;
}
#s1.tapped .head, #s1.tapped .sub, #s1.tapped .hint{animation:none; opacity:0; transition:opacity .4s}
#s1.tapped .sunstack{animation:swallow 1.5s .55s cubic-bezier(.5,0,.85,.4) forwards}
@keyframes swallow{
  0%{transform:scale(1) rotate(0)}
  25%{transform:scale(.78) rotate(-90deg)}
  100%{transform:scale(13) rotate(700deg); opacity:0}
}

/* transition: phrases over a slow doodle vortex */
#s2{background:var(--paper); overflow:hidden}
#s2 .swirl{position:absolute; inset:0; pointer-events:none}
#s2 .swirl .m{position:absolute; left:50%; top:50%; will-change:transform}
#s2 .phrase{position:relative; z-index:2; opacity:0}
#s2 .phrase.show{animation:d-phrase 2.15s both}
@keyframes d-phrase{
  0%{opacity:0; transform:rotate(-3deg) scale(.9)}
  20%{opacity:1; transform:rotate(-1.2deg) scale(1)}
  76%{opacity:1; transform:rotate(.8deg) scale(1.04)}
  100%{opacity:0; transform:rotate(1.4deg) scale(1.1)}
}