/* IWA motion for TheSource: shared tokens and the few recipes the site uses.
   Linked after each page's own <style>, so these rules win on equal
   specificity. Source of truth: the iwa-motion skill (iwa-house-style/assets).
   Rules: transform and opacity only, UI under 300ms, strong ease-out,
   hover movement only with a real mouse, reduced motion gentler not off. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* entering, exiting, responding to the user */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* something already on screen moving or morphing */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* drawers and side panels */

  --dur-press: 160ms;    /* button press feedback */
  --dur-tip: 150ms;      /* tooltips */
  --dur-menu: 200ms;     /* menus and popovers */
  --dur-modal: 250ms;    /* dialogs and popups */
  --dur-toast: 400ms;    /* toasts */
  --dur-reveal: 600ms;   /* first-view entrances */

  --m-move: 1;           /* 0 under reduced motion: movement off, fades and colour changes stay */
}

/* Reduced motion: no movement and no decorative keyframes (page-curl peel,
   home hero sweep, highlight pulses). Fades and colour changes still run,
   and loading spinners keep turning because they mean "still working". */
@media (prefers-reduced-motion: reduce) {
  :root { --m-move: 0; }
  *:not(.spinner):not(.convert-spinner), *::before, *::after { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* Press feedback on the site's main buttons: a quick 0.97 squeeze.
   Uses the separate `scale` property so it stacks with any hover lift
   (transform) instead of replacing it. Each page's rule lists `scale` in
   its transition. */
.search-btn:not(:disabled):active,
.submit-btn:not(:disabled):active,
.save-btn:not(:disabled):active,
.chat-send:not(:disabled):active,
.chat-open-btn:active,
.login-submit:not(:disabled):active,
.carousel-btn:not(:disabled):active,
.account-avatar:active {
  scale: calc(1 - 0.03 * var(--m-move));
}

/* Account menu: grows out of the avatar instead of popping in, and fades
   back out. Each page's script still just flips the [hidden] attribute;
   here a hidden menu stays rendered but invisible and unclickable, so it
   has something to animate from. */
.account-menu {
  transform-origin: top right;
  transition:
    opacity var(--dur-menu) var(--ease-out),
    transform var(--dur-menu) var(--ease-out),
    visibility 0s linear 0s;
}
.account-menu[hidden] {
  display: block;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(calc(1 - 0.05 * var(--m-move)));
  transition:
    opacity var(--dur-menu) var(--ease-out),
    transform var(--dur-menu) var(--ease-out),
    visibility 0s linear var(--dur-menu);
}
@media (max-width: 900px) {
  .account-menu { transform-origin: top left; }
}