/* One motion language: an overlay arrives from its control and settles quickly. */
@keyframes stp-window-enter{
 from{opacity:.15;translate:0 10px;scale:.98}
 to{opacity:1;translate:0 0;scale:1}
}
@keyframes stp-popover-enter{
 from{opacity:.15;translate:0 -8px;scale:.98}
 to{opacity:1;translate:0 0;scale:1}
}
@keyframes stp-backdrop-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
 html body #modal[open]{animation:stp-window-enter 220ms cubic-bezier(.16,1,.3,1);transform-origin:50% 50%}
 html body #modal[open]::backdrop{animation:stp-backdrop-enter 180ms ease-out}
 html body .header-search-panel:not([hidden]),html body .account-menu:not([hidden]){animation:stp-popover-enter 200ms cubic-bezier(.16,1,.3,1);transform-origin:90% 0}
 html body #cart-btn,html body #header-search-button,html body .account-link{transition:scale 120ms ease-out}
 html body #cart-btn:active,html body #header-search-button:active,html body .account-link:active{scale:.97}
}
@media(prefers-reduced-motion:reduce){
 html body #modal[open],html body #modal[open]::backdrop,html body .header-search-panel,html body .account-menu{animation:none;transition:none}
 html body #cart-btn,html body #header-search-button,html body .account-link{transition:none;scale:1}
}
/* Local closing keeps attention on the catalog and the originating control. */
@keyframes stp-backdrop-exit{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:no-preference){
 html body #modal.is-closing::backdrop{animation:stp-backdrop-exit 160ms ease-in forwards}
 html body .is-closing{pointer-events:none}
}

/* Mobile centering belongs to layout; small screens use opacity and vertical motion only. */
@keyframes stp-mobile-window-enter{from{opacity:.15;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:767px) and (prefers-reduced-motion:no-preference){html body #modal[open]{animation-name:stp-mobile-window-enter}}