/* v6 — THE SLOTH WAKES.
   You have to hold it. It charges under your thumb, opens its eyes,
   looks at you, and only then does it go off. */
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;
  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:700; font-size:16px; color:#FFFDF6;
  letter-spacing:.1em; text-transform:uppercase; margin-top:2.1em;
  text-shadow:0 2px 14px rgba(6,4,12,.95); transition:opacity .35s ease;
}
#s1.awake .head{opacity:.95; transform:none}
#s1.awake .sub{opacity:.62; transform:none}
#s1.awake .hint{animation:w6-pulse 2.4s 1s ease-in-out infinite}
#s1.holding .hint, #s1.looking .hint, #s1.blown .hint{animation:none; opacity:0}
@keyframes w6-pulse{0%,100%{opacity:.62} 50%{opacity:.2}}

#s1 .sunstack{
  width:min(80vw,54vh); aspect-ratio:1; --r:0; position:relative;
  touch-action:none; transition:transform .28s cubic-bezier(.3,1.3,.4,1);
}
#s1.holding .sunstack{transform:scale(1.045)}
#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:w6-spin 190s linear infinite}
#s1.blown .sunstack .sparks{animation:w6-spin 84s linear infinite reverse}
@keyframes w6-spin{to{transform:rotate(360deg)}}

/* the eyes sit above the face layer */
#s1 .slotheyes{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none; overflow:visible;
}

#s1 .corona{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; overflow:visible; opacity:.35;
}
#s1.blown .corona{animation:w6-spin 240s linear infinite}
#s1.blown .corona .solid{animation:w6-breathe 9s ease-in-out infinite}
#s1.blown .corona .bloom{animation:w6-breathe 9s .4s ease-in-out infinite}
@keyframes w6-breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.07)}}

/* everything holds its breath while it looks at you */
#s1.looking .corona{animation:none !important; filter:saturate(.35) brightness(.7); transition:filter .5s}
#s1.looking .sunstack{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:w6-seed .9s .2s forwards, w6-beat 1.5s 1s ease-in-out infinite;
}
#s1.lit .seed{opacity:0; animation:none; transition:opacity .7s}
@keyframes w6-seed{to{opacity:1}}
@keyframes w6-beat{0%,100%{transform:scale(1)} 50%{transform:scale(1.6)}}

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

#s1.tapped .flash{animation:w6-blowout 1.5s forwards}
@keyframes w6-blowout{0%{opacity:0} 30%{opacity:1} 55%{opacity:1} 100%{opacity:0}}
#s1.tapped .sunstack img, #s1.tapped .slotheyes{animation:w6-collapse 1.3s cubic-bezier(.5,0,.8,.4) forwards}
#s1.tapped .head, #s1.tapped .sub{opacity:0}
@keyframes w6-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:w6-phrase 2.15s both}
#s2 .phrase.moment{font-size:clamp(24px,7vw,38px)}
#s2 .phrase.moment small{
  display:block; font-size:.52em; opacity:.6; margin-top:.9em; letter-spacing:.06em;
}
@keyframes w6-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)}
}