/* Shared interaction rhythm across workspace, store and studio.
   Entrances use opacity so positioned overlays and crop handles keep their geometry. */
:root{--bg-motion-fast:150ms;--bg-motion-enter:240ms;--bg-motion-ease:cubic-bezier(.22,.75,.25,1)}
@media(prefers-reduced-motion:no-preference){
  :where(button,.button,.btn,summary,a,input,select,textarea){
    transition-property:background-color,border-color,color,box-shadow,opacity;
    transition-duration:var(--bg-motion-fast);
    transition-timing-function:var(--bg-motion-ease);
  }
  :where(button,.button,.btn,summary):not(:disabled):not([aria-disabled="true"]){
    transition:background-color 150ms,border-color 150ms,color 150ms,box-shadow 150ms,opacity 150ms,scale 150ms var(--bg-motion-ease);
  }
  :where(button,.button,.btn,summary):active:not(:disabled):not([aria-disabled="true"]){scale:.98}
  :where(.authform,.messenger,.page-title,.welcome,.studio-library-section,dialog[open],[role="dialog"],.sheet:not([hidden])){
    animation:bg-surface-enter var(--bg-motion-enter) var(--bg-motion-ease);
  }
  :where(.product,.stat,.stock-status,.studio-library-card,.card){
    transition:box-shadow 180ms var(--bg-motion-ease),border-color 180ms,background-color 180ms;
  }
  :where(.toast,.studio-toast,[role="alert"]){animation:bg-surface-enter 180ms ease-out}
  :where(input,textarea,select):focus-visible{transition:border-color 150ms,box-shadow 150ms,outline-color 150ms}
  :where(dialog)::backdrop{animation:bg-surface-enter 180ms ease-out}
  :where(details[open])> :not(summary){animation:bg-surface-enter 180ms ease-out}
  .workspace-motion{--motion-fast:150ms;--motion-enter:240ms;--motion-ease:var(--bg-motion-ease)}
  /* Bound the store's card stagger even with a large inventory. */
  .grid li:not(.sk){animation-delay:min(calc(var(--i,0) * 35ms),210ms);animation-duration:320ms}
  .studio-section-toggle .studio-section-chevron{transition:transform 220ms var(--bg-motion-ease)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  :where(.product,.workspace-motion .stat,.stock-status,.studio-library-card):hover{box-shadow:0 7px 22px #39215e12}
  :where(button,.button,.btn,summary):hover:not(:disabled):not([aria-disabled="true"]){filter:brightness(1.025)}
}
@keyframes bg-surface-enter{from{opacity:.35}to{opacity:1}}
/* Finish existing animated scenes immediately; do not leave their content transparent. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:0ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
}