/* v4.15.0 motion is layered over the approved geometry; classic.html never loads it. */
.motion-layer{position:fixed;inset:0;z-index:180;pointer-events:none;overflow:hidden;contain:strict}
.motion-particle{position:absolute;font:700 22px sans-serif;font-style:normal;text-shadow:0 1px 2px #fff8;will-change:transform,opacity}
.motion-particle.confetti{font-size:25px}.motion-cheer{position:absolute;right:8px;bottom:calc(78px + env(safe-area-inset-bottom));width:clamp(85px,24vw,145px);height:auto;object-fit:contain;filter:drop-shadow(0 5px 8px #76485825)}
.motion-letter{position:absolute;font:900 32px Nunito,sans-serif;color:var(--accent);background:var(--card);padding:5px 10px;border:2px solid var(--accent-line);border-radius:12px}
.motion-settings{display:flex;align-items:center;gap:12px;margin:16px 0;flex-wrap:wrap}.motion-toggle{font:inherit;font-weight:750;border:2px solid var(--accent-line);border-radius:24px;background:var(--hero-a);color:var(--text);padding:8px 14px;cursor:pointer}.motion-hint{font-size:12px;color:var(--muted);flex:1;min-width:140px}
.welcome img[role=button]{pointer-events:auto;cursor:pointer;outline-offset:3px;border-radius:20px;touch-action:manipulation}.welcome img[role=button]:focus-visible{outline:3px solid var(--focus)}
:root[data-motion=on] body[data-screen=home] .welcome img:not([data-motion-pose]){animation:mb-breathe 4s ease-in-out infinite;transform-origin:55% 90%}
:root[data-motion=on] body[data-screen=home] .brand-decoration .story-decor{animation:mb-dangle 5s ease-in-out infinite}
:root[data-motion=on] body[data-screen=home] .appearance-open .story-decor{animation:mb-cookie 7s ease-in-out infinite}
:root[data-motion=on] body[data-screen=home] .practice-decoration .story-decor{animation:mb-stir 3s ease-in-out infinite}
:root[data-character=melody][data-motion=on] body[data-screen=home] .practice-decoration .story-decor{animation:mb-dangle 3s ease-in-out infinite}
:root[data-motion=on] body[data-screen=home] .sunshine{animation:mb-rays 2.7s ease-in-out infinite}
:root[data-motion=on] body[data-screen=home] .brand-logo{animation:mb-heart 4.1s ease-in-out infinite}
:root[data-motion=on] body[data-screen=home] .art-0{animation:mb-flip 5.8s ease-in-out infinite}
:root[data-motion=on] body[data-screen=home] .art-1{animation:mb-write 4.6s ease-in-out .3s infinite}
:root[data-motion=on] body[data-screen=home] .art-2{animation:mb-puzzle 6s ease-in-out .7s infinite}
:root[data-motion=on] body[data-screen=home] .art-3{animation:mb-beat 3.2s ease-in-out .9s infinite}
:root[data-motion=on] body[data-screen=home] .art-4{animation:mb-jump 4.1s ease-in-out .6s infinite}
:root[data-motion=on] body[data-screen=home] .art-5{animation:mb-search 5.2s ease-in-out .2s infinite}
:root[data-motion=on] body[data-screen=home] .art-6{animation:mb-fan 5.1s ease-in-out 1.1s infinite}
:root[data-motion=on] body[data-screen=home] .art-7{animation:mb-turn 6.3s ease-in-out 1.7s infinite}
:root[data-motion=on] .progress-fill,:root[data-motion=on] .category-meter>i{transition:width .8s cubic-bezier(.2,.8,.3,1)}
:root[data-motion=on] .motion-speaking .art-icon{animation:mb-beat .65s ease-in-out infinite}
:root[data-motion=on] .motion-speaking{box-shadow:0 0 0 5px #ef83b333}
:root[data-motion=on] .finish-mascot{animation:mb-cheer 1.8s ease-in-out 3}
:root[data-motion=on] .finish-score{animation:mb-heart 1.6s ease-in-out 2}
@keyframes mb-breathe{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(1deg) translateY(-4px)}}
@keyframes mb-dangle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@keyframes mb-cookie{0%,65%,100%{transform:rotate(0)}78%{transform:rotate(22deg) scale(1.08)}90%{transform:rotate(-14deg)}}
@keyframes mb-stir{0%,100%{transform:translate(0,0) rotate(-5deg)}35%{transform:translate(3px,-3px) rotate(7deg)}70%{transform:translate(-2px,1px) rotate(-3deg)}}
@keyframes mb-rays{0%,65%,100%{opacity:1;scale:1}78%{opacity:.55;scale:.85}88%{opacity:1;scale:1.1}}
@keyframes mb-heart{0%,65%,100%{scale:1}76%{scale:1.09}85%{scale:1}93%{scale:1.04}}
@keyframes mb-flip{0%,60%,100%{transform:perspective(250px) rotateY(0) scale(1.09)}75%{transform:perspective(250px) rotateY(-23deg) rotate(-7deg) scale(1.09)}88%{transform:perspective(250px) rotateY(12deg) scale(1.09)}}
@keyframes mb-write{0%,60%,100%{transform:scale(1.09) rotate(0)}70%{transform:scale(1.09) translate(3px,-3px) rotate(8deg)}80%{transform:scale(1.09) translate(-2px,2px) rotate(-6deg)}90%{transform:scale(1.09) rotate(4deg)}}
@keyframes mb-puzzle{0%,55%,100%{transform:scale(1.09) translateX(0)}70%{transform:scale(1.09) translateX(5px)}85%{transform:scale(1.09) translateX(-4px)}}
@keyframes mb-beat{0%,100%{transform:scale(1.09) rotate(-3deg)}50%{transform:scale(1.17) rotate(3deg)}}
@keyframes mb-jump{0%,55%,100%{transform:scale(1.09) translateY(0)}68%{transform:scale(1.06,1.13) translateY(-7px)}80%{transform:scale(1.13,1.03) translateY(0)}90%{transform:scale(1.09) translateY(-3px)}}
@keyframes mb-search{0%,50%,100%{transform:scale(1.09) translate(0,0)}65%{transform:scale(1.12) translate(-4px,-3px) rotate(-9deg)}82%{transform:scale(1.12) translate(4px,2px) rotate(8deg)}}
@keyframes mb-fan{0%,60%,100%{transform:scale(1.09) rotate(0)}75%{transform:scale(1.12) rotate(-8deg)}88%{transform:scale(1.09) rotate(7deg)}}
@keyframes mb-turn{0%,65%{transform:scale(1.09) rotate(0)}90%,100%{transform:scale(1.09) rotate(360deg)}}
@keyframes mb-cheer{0%,100%{transform:translateY(0) rotate(-3deg)}40%{transform:translateY(-9px) rotate(4deg)}65%{transform:translateY(0) rotate(0)}}
:root[data-motion=off] .motion-layer{display:none}:root[data-motion=off] body *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.motion-layer{display:none}*,*::before,*::after{animation:none!important;transition:none!important}}