:root {--motion-out:cubic-bezier(.165,.84,.44,1);--motion-soft:cubic-bezier(.455,.03,.515,.955);}
.magic-atmosphere {position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2;opacity:.55;contain:strict;}
.ambient-sparkle {position:absolute;left:var(--star-x);top:var(--star-y);width:var(--star-size);height:var(--star-size);background:#c7a1fa;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:ambient-twinkle var(--star-duration) var(--motion-soft) var(--star-delay) infinite;}
.ambient-sparkle:nth-child(3n) {background:#ffca86;}
.magic-focus .magic-atmosphere {opacity:.12;}
.magic-reveal {animation:magic-enter 500ms var(--motion-out) var(--reveal-delay,0ms) backwards;}
.hero-scene.magic-reveal {animation-duration:800ms;}
.hero-panda,.dashboard-intro > img {animation:panda-drift 7s var(--motion-soft) infinite;transform-origin:50% 80%;}
.scene-orbit {animation:orbit-breathe 9s var(--motion-soft) infinite;}
.note-top {animation:note-drift-top 8s var(--motion-soft) infinite;}
.note-bottom {animation:note-drift-bottom 9s var(--motion-soft) -2s infinite;}
.modal-overlay > :first-child,.auth-modal-overlay > :first-child {animation:magic-dialog 240ms var(--motion-out);}
.app-toast {animation:toast-arrive 180ms var(--motion-out);}
.quiz-answer-card.correct .quiz-answer-icon {animation:answer-stamp 240ms var(--motion-out);}
.demo-correct {animation:answer-stamp 240ms var(--motion-out);}
.magic-burst {position:fixed;z-index:10001;width:0;height:0;pointer-events:none;}
.magic-burst i {position:absolute;width:8px;height:8px;background:var(--particle-color);clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);animation:magic-scatter 800ms var(--motion-out) var(--particle-delay) both;}
.pointer-sparkle {position:fixed;width:7px;height:7px;background:#d7b3ff;pointer-events:none;z-index:10000;clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);animation:cursor-twinkle 600ms var(--motion-out) forwards;}
@media(hover:hover) and (pointer:fine) {
 .step-card,.subject-showcase,.hub-mode-card,.widget-card {transition:border-color 150ms ease,background 150ms ease;}
 .step-card:hover,.subject-showcase:hover,.widget-card:hover {border-color:#8f6bb0;}
 .step-card img,.subject-showcase img,.hub-mode-mascot,.subject-tile-img {transition:transform 240ms var(--motion-out);}
 .step-card:hover img,.subject-showcase:hover img,.hub-mode-card:hover .hub-mode-mascot,.subject-tile-card:hover .subject-tile-img {transform:translateY(-4px) rotate(-3deg);}
 .landing-page .button-primary > span,.section-action-btn > svg:last-child {transition:transform 180ms var(--motion-out);}
 .landing-page .button-primary:hover > span {transform:translate(2px,-2px);}
 .section-action-btn:hover > svg:last-child {transform:translateX(3px);}
}
@keyframes magic-enter {from {opacity:0;translate:0 14px;}to {opacity:1;translate:0 0;}}
@keyframes magic-dialog {from {opacity:0;scale:.96;translate:0 8px;}to {opacity:1;scale:1;translate:0 0;}}
@keyframes toast-arrive {from {opacity:0;translate:0 8px;}to {opacity:1;translate:0 0;}}
@keyframes ambient-twinkle {0%,55%,100% {opacity:0;transform:scale(.4) rotate(0deg);}65%,80% {opacity:.65;transform:scale(1) rotate(45deg);}90% {opacity:0;transform:scale(.6) rotate(75deg);}}
@keyframes panda-drift {0%,100% {transform:translateY(0) rotate(-.4deg);}50% {transform:translateY(-7px) rotate(.5deg);}}
@keyframes orbit-breathe {0%,100% {transform:scale(.97);opacity:.65;}50% {transform:scale(1.02);opacity:1;}}
@keyframes note-drift-top {0%,100% {transform:translateY(0) rotate(-5deg);}50% {transform:translateY(-5px) rotate(-3deg);}}
@keyframes note-drift-bottom {0%,100% {transform:translateY(0) rotate(3deg);}50% {transform:translateY(5px) rotate(1deg);}}
@keyframes answer-stamp {from {scale:.9;opacity:.5;}to {scale:1;opacity:1;}}
@keyframes magic-scatter {0% {opacity:0;transform:translate(0,0) scale(.6);}15% {opacity:1;}100% {opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rotation)) scale(.2);}}
@keyframes cursor-twinkle {from {opacity:.8;transform:translate(-50%,-50%) scale(1);}to {opacity:0;transform:translate(-50%,-120%) scale(.2) rotate(70deg);}}
html.magic-reduced :is(.magic-atmosphere,.magic-burst,.pointer-sparkle),html[data-reduce-motion="1"] :is(.magic-atmosphere,.magic-burst,.pointer-sparkle) {display:none;}
html.magic-reduced *,html.magic-reduced *::before,html.magic-reduced *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}.magic-atmosphere,.magic-burst,.pointer-sparkle {display:none;}}

.magic-paused :is(.ambient-sparkle,.hero-panda,.scene-orbit,.note-top,.note-bottom) {animation-play-state:paused;}
/* Motion inside the signed-in app, including asynchronously rendered views. */
#app .magic-reveal {animation-duration:280ms;--reveal-delay:0ms;}
#app :is(.quiz-answer-card,.quiz-speech-bubble,.quiz-feedback,.flashcard-surface,.study-article-pane).magic-reveal {animation-name:app-content-enter;animation-duration:180ms;animation-delay:0ms;}
.app-constellation {position:absolute;right:18px;top:18px;width:55px;height:60px;pointer-events:none;z-index:2;}
.app-constellation i {position:absolute;display:block;background:#ffca86;width:13px;height:13px;clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);animation:app-star-glow 4.5s ease-in-out calc(var(--twinkle-index)*-.9s) infinite;}
.app-constellation i:nth-child(2) {right:2px;top:22px;width:9px;height:9px;background:#cba5ff;}
.app-constellation i:nth-child(3) {left:9px;bottom:3px;width:6px;height:6px;background:#cba5ff;}
.hub-hero-banner {position:relative;}
.hub-hero-banner .app-constellation {right:190px;top:26px;}
.dashboard-intro .app-constellation {right:205px;top:22px;}
#app :is(.hub-hero-mascot,.subject-header-avatar) {animation:app-mascot-drift 6s var(--motion-soft) infinite;}
#app .finish-mascot {animation:finish-celebration 650ms var(--motion-out);}
#app .book-card-bookmark-btn.active svg {animation:bookmark-saved 240ms var(--motion-out);}
#app .btn-rate-yes:active,#app .btn-rate-no:active {scale:.98;}
.magic-paused :is(.app-constellation i,.hub-hero-mascot,.subject-header-avatar) {animation-play-state:paused!important;}
@media(hover:hover) and (pointer:fine) {
 #app :is(.book-card-avatar,.practice-book-avatar,.practice-subject-img,.profile-avatar) {transition:transform 180ms var(--motion-out);}
 #app :is(.book-card-2col,.practice-book-card):hover :is(.book-card-avatar,.practice-book-avatar) {transform:translateY(-3px) rotate(-4deg);}
 #app .practice-subject-card:hover .practice-subject-img {transform:translateY(-4px) rotate(3deg);}
 #app .book-card-2col:hover .book-card-arrow,#app .practice-book-card:hover .practice-book-arrow {transform:translateX(3px);}
}
@keyframes app-content-enter {from {opacity:.6;}to {opacity:1;}}
@keyframes app-star-glow {0%,100% {opacity:.35;transform:scale(.75) rotate(0);}50% {opacity:.95;transform:scale(1.12) rotate(40deg);}}
@keyframes app-mascot-drift {0%,100% {translate:0 0;rotate:-.5deg;}50% {translate:0 -4px;rotate:1deg;}}
@keyframes finish-celebration {from {scale:.94;rotate:-5deg;}to {scale:1;rotate:0;}}
@keyframes bookmark-saved {from {scale:.8;}to {scale:1;}}
html.magic-reduced .app-constellation,html[data-reduce-motion="1"] .app-constellation {display:none;}
@media(prefers-reduced-motion:reduce) {.app-constellation {display:none;}}
@media(max-width:768px) {
 .app-constellation {right:8px;top:10px;width:32px;height:38px;opacity:.65;}
 .app-constellation i {width:9px;height:9px;}
 .hub-hero-banner .app-constellation {right:100px;top:12px;}
 .dashboard-intro .app-constellation {right:110px;top:15px;}
}