.donki{position:relative;z-index:8;width:clamp(150px,19vw,290px);aspect-ratio:1;background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none;filter:drop-shadow(8px 12px 8px rgba(19,9,26,.35))}
.donki-lounge{background-image:url("donki-lounge-v2.webp");margin:-145px 0 -78px clamp(20px,8vw,130px);transform:rotate(-4deg)}
.donki-sit{background-image:url("donki-sit-v2.webp");margin:-135px clamp(20px,8vw,140px) -92px auto}
.donki-play{background-image:url("donki-play-v2.webp");margin:-125px 0 -96px clamp(20px,11vw,180px);transform:rotate(4deg)}
.donki-leap{background-image:url("donki-leap-v2.webp");margin:-170px clamp(20px,9vw,150px) -100px auto;animation:donki-float 2.8s ease-in-out infinite}.donki-interactive{pointer-events:auto;cursor:pointer;touch-action:manipulation}.donki-interactive:focus-visible{outline:4px solid #e9ff42;outline-offset:6px}
@keyframes donki-float{50%{transform:translateY(-12px) rotate(2deg)}}
.donki-leap i{position:absolute;inset:0;background:url("donki-leap-v2.webp") center/contain no-repeat;opacity:0}.donki-leap.is-falling{background-image:none;animation:donki-drop 1.05s cubic-bezier(.55,.01,.84,.42) forwards}.donki-leap.is-falling i{opacity:1}.donki-leap.is-shattered i{animation:donki-shard 1.1s cubic-bezier(.12,.7,.28,1) forwards}.donki-leap i:nth-of-type(1){clip-path:polygon(0 0,34% 0,25% 35%,0 42%);--dx:-110px;--dy:-55px;--rot:-64deg}.donki-leap i:nth-of-type(2){clip-path:polygon(34% 0,67% 0,61% 31%,25% 35%);--dx:-32px;--dy:-120px;--rot:45deg}.donki-leap i:nth-of-type(3){clip-path:polygon(67% 0,100% 0,100% 39%,61% 31%);--dx:105px;--dy:-70px;--rot:72deg}.donki-leap i:nth-of-type(4){clip-path:polygon(0 42%,25% 35%,38% 65%,0 69%);--dx:-135px;--dy:20px;--rot:-95deg}.donki-leap i:nth-of-type(5){clip-path:polygon(25% 35%,61% 31%,68% 66%,38% 65%);--dx:5px;--dy:-5px;--rot:135deg}.donki-leap i:nth-of-type(6){clip-path:polygon(61% 31%,100% 39%,100% 71%,68% 66%);--dx:145px;--dy:10px;--rot:88deg}.donki-leap i:nth-of-type(7){clip-path:polygon(0 69%,38% 65%,33% 100%,0 100%);--dx:-115px;--dy:115px;--rot:-120deg}.donki-leap i:nth-of-type(8){clip-path:polygon(38% 65%,68% 66%,70% 100%,33% 100%);--dx:0;--dy:150px;--rot:160deg}.donki-leap i:nth-of-type(9){clip-path:polygon(68% 66%,100% 71%,100% 100%,70% 100%);--dx:125px;--dy:120px;--rot:110deg}@keyframes donki-drop{0%{transform:translateY(0) rotate(0)}82%{transform:translateY(34vh) rotate(145deg)}93%{transform:translateY(31vh) rotate(158deg) scaleY(.86)}100%{transform:translateY(34vh) rotate(162deg) scaleY(.76)}}@keyframes donki-shard{0%{opacity:1;transform:translate(0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.55)}}
@media(max-width:650px){.donki{width:140px;filter:drop-shadow(5px 7px 5px rgba(19,9,26,.3))}.donki-lounge{margin:-68px 0 -38px 10px}.donki-sit{margin:-66px 10px -48px auto}.donki-play{margin:-64px 0 -46px 10px}.donki-leap{margin:-78px 8px -48px auto}}
@media(prefers-reduced-motion:reduce){.donki-leap.is-falling{animation:donki-fade 1s ease forwards}.donki-leap.is-shattered i{animation:none}@keyframes donki-fade{to{opacity:0}}}
.donki-lounge.exit-lounge{animation:lounge-exit 1.35s cubic-bezier(.55,.02,.78,.3) forwards}.donki-sit.exit-sit{animation:sit-exit 1.25s cubic-bezier(.3,.7,.3,1) forwards}.donki-play{will-change:transform}@keyframes lounge-exit{0%{transform:rotate(-4deg)}15%{transform:translateX(18px) rotate(3deg)}100%{transform:translateX(-125vw) rotate(-42deg);opacity:0}}@keyframes sit-exit{0%{transform:translate(0) rotate(0)}18%{transform:translate(-12px,12px) rotate(-8deg)}100%{transform:translate(92vw,-82vh) rotate(760deg);opacity:0}}@media(prefers-reduced-motion:reduce){.donki-lounge.exit-lounge,.donki-sit.exit-sit{animation:donki-fade .6s ease forwards}.donki-play{will-change:auto}}
.donki-moonwalk.exit-moonwalk:before,.donki-moonwalk.exit-moonwalk:after{content:"";position:absolute;z-index:-1;left:45%;top:76%;width:18%;height:62%;transform-origin:50% 0;clip-path:polygon(35% 0,65% 0,100% 100%,50% 78%,0 100%);animation:rocket-sparks .18s steps(2,end) .28s infinite}
.donki-moonwalk.exit-moonwalk:before{background:linear-gradient(#fff 0 8%,#e9ff42 10% 42%,#ff2aa3 44% 78%,transparent 80%)}
.donki-moonwalk.exit-moonwalk:after{left:53%;height:48%;background:linear-gradient(#fff 0 12%,#ff8bd0 14% 48%,#ff006e 50% 82%,transparent 84%);animation-delay:.36s}
@keyframes rocket-sparks{0%{transform:translate(-3px,3px) scaleY(.72);opacity:.7}100%{transform:translate(4px,10px) scaleY(1.18);opacity:1}}
.donki-divider{width:clamp(120px,15vw,220px);margin-block:-92px -70px}
.donki-scoot{background-image:url("donki-play-v2.webp");margin-left:clamp(18px,18vw,280px);transform:rotate(-7deg)}
.donki-twirl{background-image:url("donki-leap-v2.webp");margin-left:auto;margin-right:clamp(18px,20vw,320px);transform:rotate(5deg)}
.donki-moonwalk{background-image:url("donki-lounge-v2.webp");margin-left:clamp(18px,44vw,680px);transform:scaleX(-1) rotate(-3deg)}
.donki-scoot.exit-scoot{animation:divider-scoot 1.2s cubic-bezier(.45,.05,.85,.3) forwards}
.donki-twirl.exit-twirl{animation:divider-twirl 1.35s cubic-bezier(.2,.75,.25,1) forwards}
.donki-moonwalk.exit-moonwalk{animation:divider-rocket 1.55s cubic-bezier(.45,.02,.76,.35) forwards}
@keyframes divider-scoot{20%{transform:translateX(22px) rotate(4deg)}100%{transform:translateX(115vw) rotate(55deg);opacity:0}}
@keyframes divider-twirl{25%{transform:translateY(-28px) rotate(115deg)}100%{transform:translate(-105vw,-18vh) rotate(-1080deg) scale(.45);opacity:0}}
@keyframes divider-rocket{0%,12%,24%{transform:translate(0) scaleX(-1) rotate(-3deg)}6%,18%{transform:translate(-4px,2px) scaleX(-1) rotate(-5deg)}32%{transform:translate(5px,-10px) scaleX(-1) rotate(2deg)}100%{transform:translate(48vw,-125vh) scaleX(-1) rotate(-18deg) scale(.72);opacity:0}}
@media(max-width:650px){.donki-divider{width:118px;margin-block:-58px -42px}.donki-scoot{margin-left:8vw}.donki-twirl{margin-right:10vw}.donki-moonwalk{margin-left:54vw}}
@media(prefers-reduced-motion:reduce){.donki-scoot.exit-scoot,.donki-twirl.exit-twirl,.donki-moonwalk.exit-moonwalk{animation:donki-fade .6s ease forwards}}
@media(prefers-reduced-motion:reduce){.donki-moonwalk.exit-moonwalk:before,.donki-moonwalk.exit-moonwalk:after{display:none}}

/* Plush sprites have individual idle cycles. Exit physics stay on
   the outer element, so idle movement never overrides the tap interaction. */
.donki-lounge{--donki-sprite-sheet:url('/donki-3d/lounge.png');--donki-idle-time:8.6s;--donki-sway-time:5.8s;--donki-tilt:2deg}
.donki-sit{--donki-sprite-sheet:url('/donki-3d/sit.png');--donki-idle-time:7.3s;--donki-sway-time:4.8s;--donki-tilt:-2deg}
.donki-play{--donki-sprite-sheet:url('/donki-3d/play.png');--donki-idle-time:9.4s;--donki-sway-time:5.3s;--donki-tilt:3deg}
.donki-leap{--donki-sprite-sheet:url('/donki-3d/leap.png');--donki-idle-time:8.1s;--donki-sway-time:6.1s;--donki-tilt:-3deg}
.donki-scoot{--donki-sprite-sheet:url('/donki-3d/scoot.png');--donki-idle-time:9.8s;--donki-sway-time:5.6s;--donki-tilt:2deg}
.donki-twirl{--donki-sprite-sheet:url('/donki-3d/twirl.png');--donki-idle-time:10.7s;--donki-sway-time:6.4s;--donki-tilt:3deg}
.donki-moonwalk{--donki-sprite-sheet:url('/donki-3d/moonwalk.png');--donki-idle-time:8.9s;--donki-sway-time:5.4s;--donki-tilt:-2deg}
.donki.has-idle-sprite{background-image:none}
.donki-leap.has-idle-sprite:not(.is-falling){animation:none}
.donki-idle-sprite{position:absolute;inset:0;pointer-events:none;background:var(--donki-sprite-sheet) 0 0/200% 200% no-repeat;transform-origin:50% 82%;animation:donki-idle-frames var(--donki-idle-time) steps(1,end) var(--donki-idle-delay,0s) infinite,donki-plush-breathe var(--donki-sway-time) ease-in-out var(--donki-idle-delay,0s) infinite;animation-play-state:paused}
.donki-in-view>.donki-idle-sprite{animation-play-state:running}
.donki-active>.donki-idle-sprite,.donki-tab-hidden .donki-idle-sprite{animation-play-state:paused}
.donki-active>.donki-idle-sprite{transform:none}
.donki-leap.is-falling>.donki-idle-sprite{visibility:hidden}
.donki-leap.has-idle-sprite i{background:var(--donki-sprite-sheet) 0 0/200% 200% no-repeat}
@keyframes donki-idle-frames{0%,75%,100%{background-position:0 0}80%{background-position:var(--donki-frame1,100% 0)}85%{background-position:var(--donki-frame2,0 100%)}90%{background-position:var(--donki-frame3,100% 100%)}95%{background-position:0 0}}
@keyframes donki-plush-breathe{0%,100%{transform:perspective(600px) translateY(0) rotateY(0) scale(1)}50%{transform:perspective(600px) translateY(-2px) rotateY(var(--donki-tilt)) scale(1.008,1.014)}}
.quiet .donki-idle-sprite,.quiet-motion .donki-idle-sprite{animation:none;background-position:0 0;transform:none}
@media(prefers-reduced-motion:reduce){.donki-idle-sprite{animation:none;background-position:0 0;transform:none}}

/* Register alternating columns to the same body center. */
.donki-sit{--donki-frame1:92.8% 0;--donki-frame2:0 99.4%;--donki-frame3:92.8% 99.4%}
.donki-leap{--donki-frame1:93.5% 0;--donki-frame2:0 99%;--donki-frame3:93.5% 99%}
.donki-moonwalk{--donki-frame1:93.1% 0;--donki-frame2:0 99%;--donki-frame3:93.1% 99.4%}
.donki-scoot{--donki-frame1:100% 0;--donki-frame2:0 98.25%;--donki-frame3:100% 98.25%}
/* Reclining artwork crosses the generated grid gutter. Use its complete first
   pose with a smooth sleepy rock instead of exposing neighboring cells. */
.donki-lounge>.donki-idle-sprite{background-size:194.12% 200%;animation-name:donki-lounge-idle;animation-duration:6.5s;animation-timing-function:ease-in-out}
@keyframes donki-lounge-idle{0%,100%{transform:perspective(600px) rotateZ(0) scaleY(1)}50%{transform:perspective(600px) rotateZ(.8deg) scaleY(1.012) translateY(-1px)}}
.quiet .donki-lounge>.donki-idle-sprite,.quiet-motion .donki-lounge>.donki-idle-sprite{animation:none}
@media(prefers-reduced-motion:reduce){.donki-lounge>.donki-idle-sprite{animation:none}}