/* Motion follows the learning/play theme; effects never intercept a control. */
.play-effects{position:fixed;inset:0;pointer-events:none;z-index:110;overflow:clip;contain:strict}
.play-particle{position:absolute;width:7px;height:10px;opacity:0;animation:idea-burst var(--life,800ms) cubic-bezier(.15,.55,.4,1) both;will-change:transform,opacity}
.particle-0{border-radius:50%;width:7px;height:7px}.particle-1{border-radius:2px}.particle-2{clip-path:polygon(50% 0,100% 100%,0 100%);width:10px;height:9px}
.idea-trail{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--brand);animation:idea-trail 650ms ease-out both}
.play-cursor{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:105;opacity:0;transition:opacity .18s;will-change:transform}
.play-cursor>span{position:absolute;width:23px;height:23px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:50%;transform:translate(-50%,-50%);transition:width .22s,height .22s,background .22s,border-color .22s;box-shadow:0 0 0 3px #fffdf830}
.play-cursor.is-visible{opacity:1}.play-cursor.is-hovering>span{width:42px;height:42px;border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--brand) 13%,transparent)}
.play-cursor.is-playing>span{border-color:#b38b0e;border-style:dashed;width:33px;height:33px}.play-cursor.is-playing.is-hovering>span{width:48px;height:48px;background:color-mix(in srgb,var(--brand) 17%,transparent)}
.motion-control{position:relative;isolation:isolate;overflow:hidden}.tap-wave{position:absolute;pointer-events:none;width:12px;height:12px;margin:-6px;border-radius:50%;background:currentColor;opacity:.15;animation:tap-wave 650ms ease-out forwards;z-index:0}
.motion-enabled .btn:hover>svg:last-child,.motion-enabled .text-link:hover>svg:last-child{transform:translateX(3px)}
.btn>svg,.text-link>svg{transition:transform .22s}.motion-enabled .btn:active{transform:translateY(1px) scale(.97)}
.motion-enabled .icon-btn:active{transform:scale(.91)}.save-btn[aria-pressed=true] svg{fill:#cf743a;stroke:#9c4d24}.saved-pop svg{animation:save-heart .48s cubic-bezier(.2,.8,.3,1)}
.motion-toggle{display:inline-flex;align-items:center;gap:7px;border:0;padding:0;background:none;font-size:inherit;color:var(--muted);min-height:28px;font-weight:400;text-align:left}
.motion-toggle:hover{color:var(--ink)}.motion-toggle-icon{display:inline-flex;gap:2px;align-items:center;height:13px}.motion-toggle-icon i{width:2px;height:6px;background:currentColor;border-radius:2px}.motion-toggle-icon i:nth-child(2){height:11px}.motion-enabled .motion-toggle:hover i{animation:motion-bars .7s ease-in-out infinite alternate}.motion-toggle-icon i:nth-child(2){animation-delay:.15s}.motion-toggle-icon i:nth-child(3){animation-delay:.3s}
.motion-enabled .motion-reveal{opacity:0;transform:translateY(17px);transition:opacity .6s var(--reveal-delay,0ms),transform .6s cubic-bezier(.2,.7,.25,1) var(--reveal-delay,0ms)}
.motion-enabled .motion-reveal.in-view{opacity:1;transform:translateY(0)}.motion-enabled .game-card.reveal{animation:none}.motion-enabled .game-card.in-view:hover{transform:translateY(-6px)}
.motion-enabled .lesson-card:hover>img{transform:rotate(-2deg) scale(1.035)}.lesson-card>img{transition:transform .32s cubic-bezier(.2,.8,.3,1)}
.motion-enabled .lesson-card h3{transition:color .2s}.motion-enabled .lesson-card:hover h3{color:var(--accent)}
.motion-enabled .tabs button{transition:background .22s,color .22s,transform .22s}.motion-enabled .tabs button:active{transform:scale(.96)}.motion-enabled .tabs button.active>svg{animation:tab-pop .3s ease}
.motion-enabled .field:focus-within>label{color:var(--accent);transform:translateX(2px)}.field>label{transition:transform .2s,color .2s}
.motion-enabled .form-panel:focus-within{border-color:#b1b9a7}.form-panel{transition:border-color .3s}.form-completion{padding:0 0 23px;margin:0 0 23px;border-bottom:1px solid var(--line)}
.form-completion>div{display:flex;justify-content:space-between;gap:12px;font-size:.72rem;color:var(--muted)}.form-completion progress{margin-top:11px;height:5px}.form-completion.is-complete>div{color:var(--accent)}.form-completion.is-complete progress{accent-color:var(--accent)}.form-completion.is-complete progress::-webkit-progress-value{background:var(--accent)}
.dialog-entrance{animation:dialog-arrive .3s cubic-bezier(.2,.8,.3,1) both}.motion-enabled dialog[open]::backdrop{animation:backdrop-arrive .22s ease both}.round-enter .question-panel{animation:round-arrive .38s cubic-bezier(.2,.7,.25,1) both}
.motion-enabled .fraction.correct{animation:answer-correct .45s ease}.motion-enabled .leader-row{transition:background .3s}.motion-enabled .progress{transition:width .5s}
.hero-art{--px:0;--py:0;perspective:900px}
.pijar-play{position:absolute;z-index:5;left:65px;bottom:5px;width:285px;aspect-ratio:243/173;padding:0;background:none;border:0;border-radius:42%;touch-action:manipulation;transform:translate3d(calc(var(--px)*12px),calc(var(--py)*7px),0) rotate(calc(var(--px)*4deg));transform-origin:50% 95%}
.pijar-play .hero-mascot{position:relative;left:auto;bottom:auto;width:100%;height:100%;object-fit:contain;filter:none;animation:none;transform-origin:50% 95%}
.pijar-play:focus-visible{outline:3px dashed var(--accent);outline-offset:4px}
.pijar-shadow{position:absolute;bottom:4%;left:18%;right:13%;height:8%;border-radius:50%;background:#9e7e1320;transform:scaleX(.85);filter:blur(2px);z-index:-1}
.motion-enabled .hero-visible .pijar-play .hero-mascot{animation:pijar-breathe 4.8s ease-in-out infinite}
.motion-enabled .hero-visible .pijar-shadow{animation:pijar-shadow 4.8s ease-in-out infinite}
.motion-enabled .pijar-play:hover .hero-mascot{animation:pijar-wiggle 1.1s ease-in-out infinite}
.motion-enabled .pijar-play.pijar-happy .hero-mascot{animation:pijar-jump .65s cubic-bezier(.2,.7,.3,1) both}
.pijar-speech{position:absolute;z-index:8;left:42%;bottom:54%;max-width:200px;padding:11px 15px;border:1px solid #dcc879;border-radius:13px 13px 13px 2px;background:white;color:var(--ink);font-size:.76rem;font-weight:500;line-height:1.6;box-shadow:0 5px 15px #24221f08;opacity:0;transform:translateY(8px) scale(.95);transform-origin:10% 100%;transition:opacity .22s,transform .3s;pointer-events:none}
.pijar-speech.is-speaking{opacity:1;transform:translateY(0) scale(1)}
.motion-enabled .hero-tile.t1{transform:translate3d(calc(var(--px)*-12px),calc(var(--py)*-8px),0) rotate(calc(-9deg + var(--px)*-3deg))}
.motion-enabled .hero-tile.t2{transform:translate3d(calc(var(--px)*9px),calc(var(--py)*-12px),0) rotate(calc(9deg + var(--px)*3deg))}
.motion-enabled .hero-tile.t3{transform:translate3d(calc(var(--px)*14px),calc(var(--py)*9px),0) rotate(calc(5deg + var(--px)*-2deg))}
.motion-enabled .hero-visible .hero-tile{animation:tile-bob 6s ease-in-out infinite;will-change:translate}.motion-enabled .hero-visible .hero-tile.t2{animation-delay:-2.5s;animation-duration:7.5s}.motion-enabled .hero-visible .hero-tile.t3{animation-delay:-4s;animation-duration:6.8s}
.motion-enabled .hero-tile:hover{scale:1.055;z-index:7}.hero-tile{transition:scale .28s,box-shadow .28s}.hero-tile:hover{box-shadow:0 12px 25px #24221f16}
.hero-orbit{position:absolute;border:1px dashed #b99c4440;border-radius:50%;inset:35px 14px 10px 16px;transform:rotate(-12deg);z-index:-1;pointer-events:none}
.hero-orbit.orbit-two{inset:75px -2px 53px 6px;transform:rotate(22deg);border-style:solid;border-color:#d0b55524}
.motion-enabled .hero-blob{transform:translate3d(calc(var(--px)*-5px),calc(var(--py)*-5px),0) rotate(calc(-5deg + var(--px)*2deg));transition:border-radius 1s}
.idea-seed{position:absolute;z-index:8;width:44px;height:44px;border:1px solid #b69628;border-radius:13px;background:#ffe38a;color:#624c0e;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 #b6962826;transition:opacity .3s,scale .22s,background .22s;cursor:pointer}
.idea-seed.seed-one{left:1%;top:49%;rotate:-12deg}.idea-seed.seed-two{left:44%;top:-4px;rotate:9deg;background:#edf2e9;border-color:#8ba388;color:#315d48}.idea-seed.seed-three{right:3px;bottom:-5px;rotate:13deg}
.seed-shape{position:relative;display:block;width:16px;height:20px;background:currentColor;clip-path:path('M 8 0 C 17 9 19 19 8 20 C -3 19 -1 9 8 0 Z');rotate:30deg;pointer-events:none}
.seed-two .seed-shape{clip-path:none;width:17px;height:17px;border-radius:4px;rotate:13deg}.seed-three .seed-shape{clip-path:polygon(50% 0,100% 100%,0 100%);width:20px;height:18px;rotate:0deg}
.motion-enabled .hero-visible .idea-seed{animation:seed-bob 3.8s ease-in-out infinite}.motion-enabled .hero-visible .seed-two{animation-delay:-1.7s}.motion-enabled .hero-visible .seed-three{animation-delay:-2.5s}
.idea-seed:hover{scale:1.15;background:var(--brand)}.idea-seed:active{scale:.85}.idea-seed.is-captured{opacity:0;scale:.3;pointer-events:none}.idea-seed:disabled{cursor:default}
.hero-playbar{position:absolute;left:7px;right:0;bottom:-50px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:35px;z-index:8}
.idea-progress{display:flex;align-items:center;gap:9px;font-size:.73rem;color:var(--muted)}.idea-progress>svg{width:17px;height:17px;color:#99791c}.idea-progress strong{display:inline-flex;min-width:42px;justify-content:center;padding:3px 6px;background:var(--brand-soft);border-radius:6px;font-size:.69rem;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.idea-progress.is-complete>svg{color:var(--accent)}.idea-progress.is-complete strong{background:#e5f0e6;color:var(--accent)}
.reset-ideas{border:0;background:transparent;border-bottom:1px solid #b9b6a9;font-size:.72rem;padding:7px 0;font-weight:500;min-height:36px;white-space:nowrap}.reset-ideas:hover{color:var(--accent);border-color:var(--accent)}
.hero{padding-bottom:84px}.motion-enabled .hero h1 .underline:after{transform-origin:left;animation:underline-grow .7s .25s cubic-bezier(.2,.7,.3,1) both}
.motion-enabled .community-feature:hover>img,.motion-enabled .community-aside:hover>img,.motion-enabled .host-banner:hover>img,.motion-enabled .guide-tip:hover>img,.motion-enabled .contribute-banner:hover>img{animation:illustration-hello .75s ease both;transform-origin:50% 95%}
.motion-disabled .hero-tile,.motion-disabled .pijar-play,.motion-disabled .hero-blob{--px:0;--py:0}.motion-disabled .play-cursor,.motion-disabled .play-effects{display:none}.motion-disabled .pijar-speech{transition:none}.motion-disabled .motion-reveal{opacity:1;transform:none}
.motion-disabled{scroll-behavior:auto}.motion-disabled *,.motion-disabled *:before,.motion-disabled *:after{animation:none!important;transition-duration:0ms!important}
@keyframes idea-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--spin)) scale(.4)}}
@keyframes idea-trail{0%{opacity:.65;transform:translate(-50%,-50%) scale(.9)}100%{opacity:0;transform:translate(-50%,12px) scale(.1)}}
@keyframes tap-wave{0%{transform:scale(0);opacity:.16}100%{transform:scale(24);opacity:0}}
@keyframes save-heart{0%,100%{transform:scale(1)}35%{transform:scale(1.35) rotate(-12deg)}65%{transform:scale(.9) rotate(8deg)}}
@keyframes motion-bars{to{transform:scaleY(.45)}}@keyframes tab-pop{50%{transform:scale(1.2) rotate(-8deg)}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@keyframes round-arrive{from{opacity:0;transform:translateY(13px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes answer-correct{40%{transform:scale(1.1) rotate(-2deg)}70%{transform:scale(1.02) rotate(1deg)}}
@keyframes pijar-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(2deg)}}@keyframes pijar-shadow{50%{transform:scaleX(.72);opacity:.6}}
@keyframes pijar-wiggle{0%,100%{transform:translateY(-4px) rotate(-3deg)}50%{transform:translateY(-8px) rotate(4deg)}}@keyframes pijar-jump{0%,100%{transform:translateY(0) scale(1)}20%{transform:translateY(3px) scale(1.04,.95)}55%{transform:translateY(-23px) rotate(5deg) scale(.98,1.03)}80%{transform:translateY(1px) scale(1.02,.97)}}
@keyframes tile-bob{0%,100%{translate:0 0}50%{translate:0 -9px}}@keyframes seed-bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes underline-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes illustration-hello{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg) translateY(-3px)}65%{transform:rotate(4deg) translateY(-2px)}}
@media(max-width:1120px){.pijar-play{width:220px;left:70px}.hero-playbar{left:0;right:0}.idea-seed.seed-two{left:43%;top:-12px}.idea-seed.seed-three{right:-2px;bottom:-8px}}
@media(max-width:880px){.pijar-play{width:190px;left:35px}.hero-playbar{bottom:-55px}.idea-progress{font-size:.68rem;gap:6px}.idea-progress strong{min-width:34px}.idea-seed{width:40px;height:40px}.idea-seed.seed-two{left:42%}}
@media(max-width:640px){.pijar-play{width:205px;left:65px;bottom:5px}.hero{padding-bottom:84px}.hero-art{height:315px}.hero-playbar{bottom:-52px;left:0;right:0}.idea-progress{font-size:.72rem}.idea-seed{width:44px;height:44px}.idea-seed.seed-one{left:0;top:51%}.idea-seed.seed-two{left:43%;top:-8px}.idea-seed.seed-three{right:0;bottom:-11px}.pijar-speech{left:37%;bottom:54%;max-width:180px;font-size:.72rem}.play-cursor{display:none}.motion-toggle{min-height:40px}.motion-enabled .hero-visible .hero-tile{animation-duration:8s}.motion-enabled .hero-visible .idea-seed{animation-duration:4.7s}}
@media(max-width:380px){.pijar-play{left:40px;width:190px}.hero-playbar{gap:8px}.idea-progress{gap:5px;font-size:.65rem}.idea-progress strong{font-size:.64rem;min-width:34px}.idea-progress>svg{width:14px}.reset-ideas{font-size:.67rem}.idea-seed.seed-two{left:43%;top:0}.hero-tile.t1{width:125px}.hero-tile.t2{width:125px}.pijar-speech{left:28%;max-width:170px}}
@media(max-width:640px){.motion-enabled .hero-tile.t2{transform:translate3d(calc(var(--px)*4px),calc(var(--py)*-5px),0) rotate(calc(9deg + var(--px)*2deg))}.motion-enabled .hero-tile.t3{transform:translate3d(calc(var(--px)*5px),calc(var(--py)*5px),0) rotate(calc(5deg + var(--px)*-1deg))}}
@media(hover:none),(pointer:coarse){.play-cursor{display:none}.motion-enabled .hero-tile:hover{scale:1}}
@media(prefers-reduced-motion:reduce){.play-cursor,.play-effects{display:none}.motion-reveal{opacity:1!important;transform:none!important}.hero-tile,.pijar-play,.hero-blob{--px:0;--py:0}.pijar-speech{transition:none}}