/* Responsive interaction motion shared by the site, quiz and learning space. */
:root{--motion-ease:cubic-bezier(.22,.75,.22,1)}
html{scroll-behavior:smooth}
button,a,.choice,.experience-ladder label,.lesson-option,.project-card,.rank-list li,.ladder-dot,.field input,select,textarea{transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease,opacity .18s ease,transform .22s var(--motion-ease)}
button:active:not(:disabled),a.btn:active,a.button:active{transform:scale(.975)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{transition:box-shadow .2s,border-color .2s}
.choice:has(input:checked),.experience-ladder label:has(input:checked){box-shadow:0 0 0 3px #8a60cc16,inset 0 0 0 .5px #7c57be}
.choice input:checked:after,.experience-ladder input:checked+.ladder-dot{animation:selection-check .26s var(--motion-ease)}
.progress>span>i{transition:width .48s var(--motion-ease)}
.project-card{will-change:transform,opacity}.project-deck{overflow:hidden;border-radius:22px}.project-card.chosen{animation:chosen-glow .5s ease}
.pace-dial output{font-variant-numeric:tabular-nums}.rank-list li{will-change:transform}.rank-list li.dragging{transform:scale(.98)}
input[type=range]::-webkit-slider-thumb{transition:box-shadow .2s,transform .2s}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 7px #8056c426}
input[type=range]::-moz-range-thumb{transition:box-shadow .2s,transform .2s}input[type=range]:active::-moz-range-thumb{transform:scale(1.15);box-shadow:0 0 0 7px #8056c426}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px #8056c416}
summary:after{transition:transform .25s var(--motion-ease)}details[open]>summary:after{transform:rotate(180deg)}
dialog::backdrop{animation:backdrop-in .2s ease}dialog{transform-origin:50% 65%}
.assembly-checklist .done span{animation:selection-check .3s var(--motion-ease)}
.button[disabled],button[disabled]{transition:opacity .2s ease,background-color .2s ease}
button[disabled]:not(:empty){background-size:180% 100%}
@media(hover:hover){.choice:hover,.experience-ladder label:hover,.lesson-option:hover{transform:translateY(-2px)}.btn:hover,.button:hover:not(:disabled){box-shadow:0 7px 20px -10px #7048ba80}}
@keyframes selection-check{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes chosen-glow{0%{box-shadow:0 0 0 0 #8860c955}100%{box-shadow:0 0 0 8px #8860c900}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@media(max-width:780px){.nav-links.open{animation:menu-reveal .25s var(--motion-ease)}}
@keyframes menu-reveal{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.project-card,.rank-list li{will-change:auto}}
body,h1,.choice-title,.field-label{transition:font-size .24s var(--motion-ease),line-height .24s var(--motion-ease)}
@media(prefers-reduced-motion:reduce){body,h1,.choice-title,.field-label{transition:none}}