:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
.animated-character{overflow:visible;animation:character-breathe 5.6s ease-in-out infinite;transform-origin:65% 70%;will-change:transform}
.hero-head{transform-box:view-box;transform-origin:55% 29%;animation:character-nod 6.4s ease-in-out infinite}
.hero-hand{transform-box:view-box;transform-origin:35% 49%;animation:character-wave 7.5s var(--ease-in-out) infinite}
.hero-static{display:none}
.intro-art img{animation:character-wink 5.2s ease-in-out infinite;transform-origin:50% 65%}
.visit-art img{animation:character-ready 5.6s ease-in-out infinite;transform-origin:50% 75%}
.col-art{animation:collectible-float 4.8s ease-in-out infinite;transform-origin:50% 65%}
.col-cover:nth-child(2n) .col-art{animation-delay:-1.4s;animation-direction:reverse}
.col-cover:nth-child(3n) .col-art{animation-delay:-2.6s}
.col-panel-art{animation:collectible-float 5.6s ease-in-out infinite;transform-origin:50% 65%}
.col-panel:nth-child(2) .col-panel-art{animation-delay:-1.6s}.col-panel:nth-child(3) .col-panel-art{animation-delay:-3.2s}
.sfx-star{animation:star-orbit 22s linear infinite;transform-origin:center}
.hero-sfx{animation:comic-emphasis 6.4s var(--ease-in-out) infinite}
.motion-toggle{position:fixed;left:17px;bottom:17px;z-index:45;display:flex;align-items:center;gap:9px;padding:10px 14px;border:2px solid var(--ink);border-radius:30px;background:var(--paper);box-shadow:3px 3px var(--pink);font-size:11px;font-weight:700;cursor:pointer}
.motion-toggle[hidden]{display:none}.motion-toggle:disabled{cursor:default}.motion-toggle>span:first-child{font-size:14px;line-height:1}
.motion-scene:not(.motion-visible) *,html.motion-background *,html[data-motion=paused] *{animation-play-state:paused!important}
html[data-motion=paused]{scroll-behavior:auto}
html[data-reduced-motion=true] .hero-body,html[data-reduced-motion=true] .hero-head,html[data-reduced-motion=true] .hero-hand{display:none}
html[data-reduced-motion=true] .hero-static{display:block}
html[data-reduced-motion=true] .animated-character,html[data-reduced-motion=true] .intro-art img,html[data-reduced-motion=true] .visit-art img,html[data-reduced-motion=true] .col-art,html[data-reduced-motion=true] .col-panel-art,html[data-reduced-motion=true] .hero-sfx{animation:none;transform:none}
@keyframes character-breathe{0%,100%{transform:translateY(0) rotate(-.35deg) scale(1)}50%{transform:translateY(-9px) rotate(.35deg) scale(1.006)}}
@keyframes character-nod{0%,100%{transform:rotate(-.65deg)}50%{transform:rotate(.8deg)}}
@keyframes character-wave{0%,12%,38%,100%{transform:rotate(0)}20%{transform:rotate(-2.1deg)}27%{transform:rotate(1.1deg)}33%{transform:rotate(-1.4deg)}}
@keyframes character-wink{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1.2deg)}}
@keyframes character-ready{0%,100%{transform:translateY(0) rotate(1deg) scale(1)}50%{transform:translateY(-7px) rotate(-1deg) scale(1.012)}}
@keyframes collectible-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes star-orbit{to{transform:rotate(360deg)}}
@keyframes comic-emphasis{0%,30%,52%,100%{transform:rotate(12deg) scale(1)}38%,45%{transform:rotate(8deg) scale(1.055)}}
@media(hover:hover) and (pointer:fine){.motion-toggle:not(:disabled):hover{transform:translateY(-2px);transition:transform 160ms ease}.col-cover:hover .col-art{animation-play-state:paused}}
@media(max-width:760px){.motion-toggle{left:12px;bottom:12px;padding:9px 12px;font-size:10px}.animated-character{animation-duration:6.4s}.hero-hand{animation-duration:8.5s}}
@media(prefers-reduced-motion:reduce){.animated-character,.intro-art img,.visit-art img,.col-art,.col-panel-art,.hero-sfx{animation:none;transform:none}.hero-body,.hero-head,.hero-hand{display:none}.hero-static{display:block}.motion-toggle:not(:disabled):hover{transform:none}}