/* Shared motion language. Transform/opacity keep transitions inexpensive on phones. */
:root{--motion-fast:160ms;--motion-enter:260ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
button,a.button,input,select,textarea{transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,opacity var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease)}
button:active:not(:disabled),a.button:active{transform:scale(.97)}
button:disabled{opacity:.55;cursor:wait}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #d99df3;outline-offset:3px}
.age-card,.stock-log[open]>.panel{animation:surface-enter var(--motion-enter) var(--motion-ease)}
dialog[open]{animation:dialog-enter var(--motion-enter) var(--motion-ease) both}
dialog[open]::backdrop{animation:backdrop-enter var(--motion-enter) ease both;background:rgb(9 5 15 / .72)}
.stock-card,.log-event{transition:border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
.stock-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.stock-shortcuts button{padding:9px 13px;font-size:13px}
.stock-shortcuts button.active{background:#542564;border-color:#ce88e7;color:#fff}
.stock-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.stock-card-actions button{flex:1 1 auto;padding:10px;font-size:13px}
.stock-card-actions .stock-action{margin:0;width:auto}
#stock-dialog{width:min(620px,calc(100% - 24px));max-height:90vh;max-height:90dvh;padding:0;border:1px solid #654271;border-radius:22px;background:#1b1323;color:#fff;overflow:auto}
#stock-dialog .panel{margin:0;border:0;padding:24px;box-shadow:none}
#stock-dialog h2{font-size:21px;overflow-wrap:anywhere}
#stock-dialog .section-head{align-items:start}
.stock-preview{background:#2b1e36;border-radius:12px;padding:14px;line-height:1.6;min-height:70px}
.log-event{margin-bottom:10px}
.log-event p,.log-event code{overflow-wrap:anywhere;font-size:13px;line-height:1.7}
#boot-recovery{position:relative;z-index:2;max-width:520px;margin:16px auto;padding:20px;overflow-wrap:anywhere}
#boot-recovery button{display:block;margin-top:16px}
#boot-code{font-size:12px;overflow-wrap:anywhere}
#age-gate.boot-error{overflow:auto;display:flex;flex-direction:column;justify-content:center}
.filter-bar.is-open{animation:surface-enter var(--motion-enter) var(--motion-ease)}
@keyframes surface-enter{from{transform:translate3d(0,8px,0)}to{transform:none}}
@keyframes dialog-enter{from{opacity:0;transform:translate3d(0,16px,0) scale(.98)}to{opacity:1;transform:none}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@supports (transition-behavior:allow-discrete){
 dialog{opacity:0;transform:translate3d(0,16px,0) scale(.98);transition:opacity var(--motion-enter) ease,transform var(--motion-enter) var(--motion-ease),display var(--motion-enter) allow-discrete,overlay var(--motion-enter) allow-discrete}
 dialog[open]{opacity:1;transform:none;animation:none}
 dialog::backdrop{background:rgb(9 5 15 / 0);transition:background var(--motion-enter) ease,display var(--motion-enter) allow-discrete,overlay var(--motion-enter) allow-discrete}
 dialog[open]::backdrop{background:rgb(9 5 15 / .72);animation:none}
 @starting-style{dialog[open]{opacity:0;transform:translate3d(0,16px,0) scale(.98)}dialog[open]::backdrop{background:rgb(9 5 15 / 0)}}
}
/* Small feedback layers stay separate from moving cards and page containers. */
.card,.stock-card,.recent-card,.variant-tile .variant-image-frame{transition:border-color 180ms ease,box-shadow 180ms ease}
.card .art img,.recent-card .art img,.variant-image-frame img{transition:transform 320ms var(--motion-ease)}
.categories button,.attribute-choice,.gallery-thumbs button{transition:background-color 180ms ease,border-color 180ms ease,box-shadow 220ms ease,transform 160ms var(--motion-ease)}
.categories button.active{box-shadow:0 4px 18px #ef38662b}
.variant-check{animation:check-enter 240ms var(--motion-ease)}
@keyframes check-enter{from{transform:scale(.65)}70%{transform:scale(1.08)}to{transform:scale(1)}}
#nav .slide-pill.ready,.segmented .slide-pill.ready{transition:transform 320ms var(--motion-ease),width 260ms var(--motion-ease)}
#nav button:active{transform:scale(.96)}
#toast{pointer-events:none}
.primary,.cart-checkout-button,.card-label{position:relative;isolation:isolate;overflow:hidden}
.primary::after,.cart-checkout-button::after,.card-label::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#fff2 48%,transparent 76%);transform:translateX(-120%)}
@media(hover:hover) and (pointer:fine){
 .primary:hover::after,.cart-checkout-button:hover::after,.card-label:hover::after{transform:translateX(120%);transition:transform 600ms var(--motion-ease)}
 .card:hover .art img,.recent-card:hover .art img{transform:scale(1.035)}
 .variant-tile:hover .variant-image-frame img{transform:scale(1.06)}
 button.primary:not(:disabled):hover,.card-label:hover,.cart-checkout-button:hover{box-shadow:0 6px 22px #eb398833}
 .stock-card:hover{border-color:#775482;box-shadow:0 8px 24px #0003}
}
@supports (transition-behavior:allow-discrete){
 #toast{transition:opacity 180ms ease,translate 180ms var(--motion-ease),display 180ms allow-discrete;opacity:1;translate:0 0}
 #toast[hidden]{opacity:0;translate:0 6px}
 @starting-style{#toast:not([hidden]){opacity:0;translate:0 6px}}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 button:active:not(:disabled),a.button:active{transform:none}
}