/* Short, interruptible motion; controls remain available throughout transitions. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
@keyframes kx-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes kx-dialog{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes kx-fade{from{opacity:0}to{opacity:1}}
@keyframes kx-toast{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes kx-float{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-9px) rotate(-4deg)}}
@keyframes kx-glow{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes kx-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes kx-spin{to{transform:rotate(360deg)}}

#login-section:not([hidden]) .login-layout{animation:kx-enter .5s var(--motion-ease) backwards}
#login-form:not([hidden]),#register-form:not([hidden]){animation:kx-enter .32s var(--motion-ease) backwards}
.brand-art>img{animation:kx-float 4.8s ease-in-out 3}
.art-glow{animation:kx-glow 4.8s ease-in-out 3}
.portal-page:not([hidden]),[role=tabpanel]:not([hidden]){animation:kx-enter .32s var(--motion-ease) backwards}
.stats:not([hidden])>.stat,.quick-grid>button,.cards>.product,.course-list>.course-option,#course-order-list>.course-order{animation:kx-enter .4s var(--motion-ease) backwards}
.stats>.stat:nth-child(2),.quick-grid>button:nth-child(2),.cards>.product:nth-child(2),.course-list>.course-option:nth-child(2),#course-order-list>.course-order:nth-child(2){animation-delay:45ms}
.stats>.stat:nth-child(3),.quick-grid>button:nth-child(3),.cards>.product:nth-child(3),.course-list>.course-option:nth-child(3),#course-order-list>.course-order:nth-child(3){animation-delay:90ms}
.course-list>.course-option:nth-child(n+4),#course-order-list>.course-order:nth-child(n+4){animation-delay:120ms}
.progress-bar>span{transform-origin:left;animation:kx-progress .6s var(--motion-ease) backwards}

.sidebar{transition:width .24s var(--motion-ease),transform .28s var(--motion-ease)}
.portal-content,.authenticated footer{transition:margin-left .24s var(--motion-ease)}
.sidebar-shade:not([hidden]){animation:kx-fade .2s ease-out backwards}
.nav-item{transition:background .18s,color .18s,box-shadow .18s}
.nav-item.active{box-shadow:inset 3px 0 0 #6b9ff7}
.nav-group[open]>.nav-item{animation:kx-enter .22s var(--motion-ease) backwards}
.btn,.quick-grid>button,.amounts>button,.course-option,.product{transition:transform .18s var(--motion-ease),box-shadow .2s,border-color .2s,background .2s,color .2s}
.btn:active:not(:disabled),.quick-grid>button:active,.amounts>button:active{transform:scale(.98)}
input,select{transition:border-color .18s,box-shadow .18s,background .18s}
.auth-tab.active:after{transform-origin:left;animation:kx-progress .25s var(--motion-ease) backwards}
dialog[open]{animation:kx-dialog .24s var(--motion-ease) backwards}
dialog[open]::backdrop{animation:kx-fade .2s ease-out backwards}
.notice:not([hidden]){animation:kx-toast .24s var(--motion-ease) backwards}
#login-button:disabled:before,#register-button:disabled:before,#confirm-purchase:disabled:before,#portal-confirm:disabled:before{content:'';display:inline-block;width:13px;height:13px;flex-shrink:0;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:7px;vertical-align:-2px;animation:kx-spin .75s linear infinite}

@media(hover:hover) and (pointer:fine){
 .btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 18px #3479f624}
 .quick-grid>button:hover,.product:hover{transform:translateY(-3px);box-shadow:0 10px 24px #426ba612}
 .amounts>button:hover,.course-option:hover{transform:translateY(-2px);box-shadow:0 5px 16px #426ba610}
 .btn:active:not(:disabled),.quick-grid>button:active,.amounts>button:active{transform:scale(.98)}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .btn:hover:not(:disabled),.quick-grid>button:hover,.product:hover,.amounts>button:hover,.course-option:hover,.btn:active:not(:disabled),.quick-grid>button:active,.amounts>button:active{transform:none}
}