/* Motion preserves the fixed nav and respects system reduced-motion preferences. */
html{--route-shift:8px;--motion-ease:cubic-bezier(.22,.61,.36,1)}
#app{view-transition-name:page-surface;animation:none}
.topbar{view-transition-name:topbar}
.motion-shared-portrait{view-transition-name:teacher-portrait}
.bottom-nav{view-transition-name:bottom-navigation;isolation:isolate}
.bottom-nav:before{content:'';position:absolute;z-index:-1;left:6px;top:6px;width:calc((100% - 12px)/6);height:61px;border-radius:25px;background:linear-gradient(#fff,#eff6ff);box-shadow:0 1px 8px #4483cf1a,inset 0 0 0 1px #fff;transform:translateX(calc(var(--nav-index,0)*100%));transition:transform .34s cubic-bezier(.22,.8,.24,1)}
.nav-item[aria-current=page]{background:transparent;box-shadow:none}
.nav-item{transition:color .22s ease,transform .18s ease}
.nav-item[aria-current=page] svg{transform:translateY(-1px);stroke-width:1.7}
.nav-item svg{transition:transform .24s ease,stroke-width .24s ease}
.primary,.secondary,.service,.quick-link,.list-row,.text-link,.map-pin{transition:transform .28s var(--motion-ease),background-color .2s,color .2s,box-shadow .25s}
.primary,.secondary{position:relative;overflow:hidden;isolation:isolate}
.motion-ripple{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;background:currentColor}
.primary .motion-ripple{background:#fff;z-index:0}
.motion-await{opacity:0}.motion-await:focus-within{opacity:1}
.motion-booking-identity{display:flex;align-items:center;gap:12px}
.motion-booking-identity img{width:68px;height:78px;object-fit:cover;border-radius:18px;box-shadow:0 5px 18px #244c6617}
.motion-booking-identity p{margin:0;color:var(--ink);font-weight:600}
.motion-booking-identity small{display:block;color:var(--muted);font-size:11px;font-weight:400}
.rf-trial-offer{position:relative;overflow:hidden}
.rf-trial-offer:after{content:'';position:absolute;pointer-events:none;inset:-60% -30%;background:linear-gradient(110deg,transparent 43%,#ffffff80 50%,transparent 57%);transform:translateX(-100%);animation:offer-light .36s .35s var(--motion-ease) both}
.rf-purpose label span{transition:background-color .25s,border-color .25s,box-shadow .25s}
.rf-purpose input:checked+span,.choice input:checked+span{box-shadow:0 3px 12px #236bda13}
.rf-field input,.rf-field select,.rf-field textarea{transition:border-color .22s,box-shadow .22s,background-color .22s}
.rf-field:focus-within>span{color:var(--river)}
.rf-field :is(input,select,textarea):focus{box-shadow:0 0 0 4px #236bda0d;border-color:#7caaf0}
.rf-radar-area{transform-origin:160px 147px;animation:radar-grow .34s var(--motion-ease) both}
.primary:active,.secondary:active,.quick-link:active{transform:scale(.975)}
.service:active,.list-row:active,.text-link:active{transform:translateY(1px);background-color:#edf5fc66}
.choice span{transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .16s}
.choice:active span{transform:scale(.955)}
.map-pin:active{transform:scale(.92)}
.todo input{transition:transform .18s}.todo input:checked{animation:check-in .24s ease-out}
.route-moving #app{animation:none}
dialog[open]{animation:sheet-in .22s var(--motion-ease)}
dialog[open]::backdrop{animation:backdrop-in .22s ease-out}
::view-transition-group(page-surface){animation-duration:.36s;animation-timing-function:var(--motion-ease)}
::view-transition-old(page-surface){animation:page-away .12s ease-out both}
::view-transition-new(page-surface){animation:page-enter .36s var(--motion-ease) both}
::view-transition-group(teacher-portrait){animation-duration:.28s;animation-timing-function:var(--motion-ease);overflow:clip;border-radius:18px}
::view-transition-old(teacher-portrait),::view-transition-new(teacher-portrait){height:100%;object-fit:cover}
::view-transition-old(topbar){animation:none;opacity:0}::view-transition-new(topbar){animation:none}
::view-transition-group(bottom-navigation){animation-duration:.28s}
::view-transition-old(bottom-navigation){animation:none;opacity:0}
::view-transition-new(bottom-navigation){animation:none}
::view-transition{pointer-events:none}
@keyframes page-enter{from{opacity:.08;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes page-away{from{opacity:1}to{opacity:0}}
@keyframes sheet-in{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes check-in{50%{transform:scale(1.13)}}
.motion-task-layer{position:fixed;z-index:18;inset:74px max(0px,calc((100% - 560px)/2)) 100px;display:grid;place-items:center;padding:22px;pointer-events:none;background:radial-gradient(ellipse,#f5f9fff5 12%,#f4f8ffeb 38%,#f5f9ffad 60%,#f5f9ff00 78%);animation:backdrop-in 1.4s ease-out}
.motion-task-card{width:min(100%,380px);max-height:100%;overflow:auto;text-align:center;background:transparent;border:0;border-radius:0;box-shadow:none;padding:24px 20px 22px;animation:soft-reveal .34s var(--motion-ease)}
.motion-task-eyebrow{font-size:9px;font-weight:600;letter-spacing:2.2px;color:#7c98bb;margin:0}
.motion-task-card h2{font:700 25px/1.4 var(--display);color:var(--river-deep);margin:5px 0 12px}
.motion-task-copy{font-size:12px;line-height:1.9;color:#657e9e;min-height:44px;margin:0 auto 18px;max-width:280px}
.motion-task-card>small{font-size:10px;color:#8a9bb1;display:block;margin-top:19px}
.motion-orbit{position:relative;width:180px;height:180px;margin:10px auto 2px;display:grid;place-items:center}
.motion-orbit:before{content:'';position:absolute;inset:30px;border-radius:50%;background:#8abcff20;animation:core-breathe 2.6s ease-in-out infinite}
.motion-orbit-ring{position:absolute;inset:7px;border:1px solid #afcdf66b;border-radius:50%}
.motion-orbit-ring.secondary-ring{inset:23px;border-style:dashed;border-color:#9abced77;animation:orbit-turn 25s linear infinite reverse}
.motion-orbit-core{width:76px;height:76px;border-radius:24px;color:#fff;display:grid;place-items:center;background:linear-gradient(145deg,#75adfa,#246de2 75%);box-shadow:0 12px 30px #236bda40,inset 0 2px 2px #ffffff75;animation:core-float 3.2s ease-in-out infinite}
.motion-orbit-core svg{width:34px;height:34px;stroke-width:1.35}
.motion-satellite{position:absolute;inset:6px;animation:orbit-turn 4.5s linear infinite}
.motion-satellite:before{content:'';position:absolute;left:calc(50% - 5px);top:-4px;width:10px;height:10px;border-radius:50%;background:#5c97ed;box-shadow:0 0 0 5px #b7d6ff40}
.motion-satellite.second{inset:23px;animation-duration:6.5s;animation-direction:reverse}
.motion-satellite.second:before{width:7px;height:7px;left:calc(50% - 3.5px);background:#dfb87c;box-shadow:0 0 0 4px #f5e3c95c}
.motion-task-steps{display:flex;list-style:none;padding:0;margin:0;gap:8px;justify-content:center}
.motion-task-steps li{font-size:10px;color:#8c9db3;flex:1;position:relative;padding-top:17px}
.motion-task-steps li:before{content:'';position:absolute;left:calc(50% - 4px);top:0;width:8px;height:8px;border-radius:50%;background:#dce6f3;transition:background-color .25s,box-shadow .25s}
.motion-task-steps .is-current{color:var(--river)}.motion-task-steps .is-current:before{background:#4385e6;box-shadow:0 0 0 4px #c9dfff;animation:step-pulse 1.6s ease-in-out infinite}
.motion-task-steps .is-done{color:#4a78a9}.motion-task-steps .is-done:before{background:#71a7e9}
.motion-success-check{display:none;position:absolute;width:62px;height:62px;color:#fff;background:#3479d6;border-radius:23px;padding:10px;box-shadow:0 10px 25px #236bda30}
.is-complete .motion-success-check{display:block;animation:sheet-in .4s var(--motion-ease)}
.is-complete .motion-success-check path{stroke-dasharray:45;stroke-dashoffset:45;animation:check-draw .4s .1s ease-out forwards;stroke-width:2.5}
.is-complete .motion-orbit-core,.is-complete .motion-satellite{opacity:0;animation:none}.is-complete .motion-orbit-ring{animation:none}
.motion-task-layer.is-leaving{animation:task-away 1.1s ease-in forwards}
@media(max-height:650px){.motion-task-card{padding:16px}.motion-orbit{width:130px;height:130px;margin:2px auto}.motion-task-eyebrow,.motion-task-card>small{display:none}.motion-task-copy{margin-bottom:8px}}
@media(hover:hover){.primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px #236bda26}.secondary:hover{transform:translateY(-1px)}.teacher-story .story-image,.space-card>img{transition:transform .7s var(--motion-ease)}.teacher-story:hover .story-image{transform:scale(1.025)}}
@keyframes offer-light{to{transform:translateX(100%)}}@keyframes radar-grow{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes orbit-turn{to{transform:rotate(360deg)}}@keyframes core-float{50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes core-breathe{50%{transform:scale(1.13);opacity:.5}}@keyframes step-pulse{50%{box-shadow:0 0 0 6px #c9dfff55}}
@keyframes check-draw{to{stroke-dashoffset:0}}@keyframes task-away{to{opacity:0}}@keyframes soft-reveal{from{opacity:.12;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.motion-await{opacity:1}.motion-success-check path{stroke-dashoffset:0!important}.motion-task-layer *{animation:none!important}.rf-trial-offer:after{display:none}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.bottom-nav:before{transition:none}}

/* Content settles quickly and remains interruptible. */
.motion-task-card h2{animation:soft-reveal .34s .1s both}.motion-task-copy{animation:soft-reveal .34s .2s both}.motion-task-steps{animation:soft-reveal .34s .3s both}
@media(prefers-reduced-motion:reduce){.motion-task-layer{animation:none!important}}