/* Focal motion: Xiaopin welcomes the student to their next school year.
   Supporting motion: sky drift, a single grade-entry sequence, and selection feedback.
   Budget: native CSS/WAAPI only, no new runtime dependencies. */
.white-coast .grade-picker-heading{align-items:center;gap:24px}.mascot-greeting{margin:-16px 0 -8px;display:flex;flex-direction:column;align-items:center;flex-shrink:0}.mascot-greeting img{display:block;width:120px;height:180px;object-fit:contain;transform-origin:50% 90%}.mascot-greeting figcaption{font-size:12px;color:#82554b;margin-top:4px;white-space:nowrap}.white-coast .grade-picker{overflow:visible}.review-mascot-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.review-mascot-heading>div{min-width:0}.review-mascot-heading>div>p{font-size:12px;color:#617180;line-height:1.7;margin-top:12px}.review-mascot-heading img{width:72px;height:108px;object-fit:contain;flex-shrink:0}.white-coast .selected-item[data-subject]{display:flex;align-items:center;gap:12px}.subject-mascot{width:56px;height:72px;flex-shrink:0;overflow:hidden;border-radius:8px}.white-coast .selected-item>div{min-width:0;flex:1}.white-coast .selected-item strong small{white-space:normal}.white-coast .selected-item>button{flex-shrink:0}.white-coast .grade-options{margin-top:20px}.white-coast .grade-picker h2{max-width:28ch}.white-coast .night-hero h1{animation:none}.hero-line{display:block;overflow:hidden;padding:.06em 0;margin:-.06em 0}.hero-line>span{display:block}.motion-ready .hero-line>span{animation:xp-line-reveal .85s cubic-bezier(.16,1,.3,1) both}.motion-ready .hero-line:nth-child(2)>span{animation-delay:.12s}.motion-ready .night-term{animation:xp-quiet-reveal .7s cubic-bezier(.16,1,.3,1) both}.motion-ready .night-intro{animation:xp-quiet-reveal .8s cubic-bezier(.16,1,.3,1) both .18s}.motion-ready .night-cta{animation:xp-quiet-reveal .8s cubic-bezier(.16,1,.3,1) both .28s}.motion-ready .sky-art{animation:xp-cloud-drift 28s cubic-bezier(.45,0,.55,1) infinite alternate;animation-play-state:paused;transform-origin:center}.motion-ready .sky-scene.motion-visible .sky-art{animation-play-state:running}.motion-ready .mascot-greeting.motion-visible img{animation:xp-welcome-breathe 6s cubic-bezier(.45,0,.55,1) infinite;animation-delay:.5s}.motion-paused .sky-art,.motion-paused .mascot-greeting img{animation-play-state:paused!important}.white-coast .grade-options button{transition:transform .4s cubic-bezier(.16,1,.3,1),background .25s cubic-bezier(.16,1,.3,1),border-color .25s cubic-bezier(.16,1,.3,1)}.white-coast .grade-options button:hover{transform:translateY(-3px)}.white-coast .grade-options button:active{transform:scale(.97)}.white-coast .night-cta svg{transition:transform .4s cubic-bezier(.16,1,.3,1)}.white-coast .night-cta:hover svg{transform:translateX(4px)}.white-coast .course:active{transform:scale(.97)}
@keyframes xp-line-reveal{from{transform:translateY(24px);opacity:.35;clip-path:inset(0 0 50% 0)}to{transform:translateY(0);opacity:1;clip-path:inset(0)}}@keyframes xp-quiet-reveal{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes xp-cloud-drift{from{transform:scale(1.015) translateX(-3px)}to{transform:scale(1.045) translateX(3px)}}@keyframes xp-welcome-breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(.8deg)}}
@media(max-width:760px){.white-coast .grade-picker-heading{gap:12px;align-items:center}.mascot-greeting{margin:-8px -4px -4px 0}.mascot-greeting img{width:86px;height:129px}.mascot-greeting figcaption{font-size:9px;letter-spacing:0}.white-coast .grade-picker-heading>div{min-width:0;flex:1}.white-coast .grade-picker h2{font-size:20px;line-height:1.5;max-width:11ch}.white-coast .grade-picker-heading p{font-size:11px;line-height:1.8}.white-coast .grade-options{margin-top:24px}.subject-mascot{width:48px;height:62px}.white-coast .selected-item[data-subject]{gap:10px}.review-mascot-heading{gap:12px}.review-mascot-heading img{width:62px;height:93px}.review-mascot-heading>div>p{font-size:11px}.white-coast .review-mascot-heading h2{font-size:24px}}
@media(max-width:360px){.mascot-greeting img{width:72px;height:108px}.mascot-greeting figcaption{font-size:8px}.white-coast .grade-picker h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.motion-ready .hero-line>span,.motion-ready .night-term,.motion-ready .night-intro,.motion-ready .night-cta,.motion-ready .sky-art,.motion-ready .mascot-greeting img{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}.white-coast .grade-options button,.white-coast .night-cta svg{transition:none!important}}