/* Shared, restrained motion; keep reduced-motion preferences authoritative. */
:root{--motion-ease:cubic-bezier(.22,.61,.36,1)}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
button,a,input+span,summary{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s var(--motion-ease)}
button:active,.btn:active{transform:translateY(1px)}
@keyframes surface-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.project-page,#variantsScreen:not([hidden]),#seriesScreen:not([hidden]){animation:surface-enter .32s var(--motion-ease) both}
.lightbox{display:flex!important;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .24s ease,visibility 0s linear .24s}
.lightbox.open{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}
.lightbox .dialog{transform:translateY(14px) scale(.985);transition:transform .28s var(--motion-ease)}
.lightbox.open .dialog{transform:translateY(0) scale(1)}
.lightbox .stage img{transition:opacity .16s ease}
.lightbox .stage img.is-changing{opacity:0}
.grid.is-filtering{opacity:0;transform:translateY(5px)}
.grid{transition:opacity .16s ease,transform .2s var(--motion-ease)}
.modal:not([hidden]){display:flex;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .24s ease,visibility 0s linear .24s}
.modal.open:not([hidden]){visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}