/* ═══════════════════════════════════════════════════════════════════
   TOONSHEAD — opening sequence.
   The page's own hook, performed: five plates sit over one figure and
   get stripped off in order, the last one revealing the passenger.
   Runtime only. No storage of any kind, so it plays on every load.
   ═══════════════════════════════════════════════════════════════════ */

#intro{
  position:fixed;inset:0;z-index:200;background:#c7f464;
  display:grid;place-items:center;overflow:hidden;
}
#intro[data-done]{animation:introOut .58s cubic-bezier(.7,0,.3,1) forwards}
@keyframes introOut{
  0%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(50% 0 50% 0)}
}
html.intro-lock{overflow:hidden}

.io-stage{position:relative;width:min(340px,66vw);aspect-ratio:1}

/* the figure underneath — starts hidden behind the plates */
.io-art{position:absolute;inset:0;border:5px solid #181a12;background:#a9d945;
  box-shadow:12px 12px 0 #181a12;overflow:hidden}
.io-art img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;animation:ioArt .5s ease-out .95s forwards}
@keyframes ioArt{to{opacity:1}}

/* five plates, stacked, each slides off on its own beat */
.io-plate{position:absolute;inset:0;border:5px solid #181a12;
  display:grid;place-items:center;font-family:'Super Bouncer','Comic Sans MS',sans-serif;
  font-size:clamp(30px,7vw,54px);color:#181a12;
  box-shadow:12px 12px 0 #181a12;
  animation:ioPlate .42s cubic-bezier(.55,0,.4,1) forwards}
.io-plate span{font-family:'Manrope VF','Manrope',sans-serif;font-weight:800;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  position:absolute;left:0;right:0;bottom:14px;text-align:center;opacity:.72}
.io-plate:nth-child(1){background:#8bb832;animation-delay:.22s}
.io-plate:nth-child(2){background:#a9d945;animation-delay:.38s}
.io-plate:nth-child(3){background:#12c4d6;animation-delay:.54s}
.io-plate:nth-child(4){background:#d9a520;animation-delay:.70s}
.io-plate:nth-child(5){background:#f0464b;color:#fff;animation-delay:.86s}
@keyframes ioPlate{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(112%,-26%) rotate(13deg);opacity:0}
}

/* the count, ticking under the stage */
.io-count{position:absolute;left:0;right:0;bottom:-72px;text-align:center;
  font-family:'Super Bouncer','Comic Sans MS',sans-serif;font-size:clamp(26px,5vw,40px);
  color:#181a12;opacity:0;animation:ioCount .4s ease-out .30s forwards}
@keyframes ioCount{to{opacity:1}}

.io-line{position:absolute;left:0;right:0;bottom:-116px;text-align:center;
  font-family:'Manrope VF','Manrope',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:#3f4530;
  opacity:0;animation:ioCount .4s ease-out 1.05s forwards}

.io-skip{position:absolute;right:18px;bottom:18px;background:transparent;
  border:3px solid #181a12;color:#181a12;cursor:pointer;
  font-family:'Manrope VF','Manrope',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:9px 15px}
.io-skip:hover{background:#181a12;color:#c7f464}

@media(prefers-reduced-motion:reduce){
  #intro{display:none}
  html.intro-lock{overflow:auto}
}