/*
  taste-skill motion.css - the micro-interactions a company site has (figma.com, x.ai): one small
  opt-in layer over system.css and ui/cards.css. Link it after them (data-motion on <html> is optional);
  load motion.js once (it adds the tab indicator, the number tick and the card loops).
  The layer is ON as soon as this file is linked: no attribute is needed (a hover shot of a linked card or photo
  shows the 2px lift and the 1.03 zoom). <html data-motion="off"> switches the whole layer off; data-motion="live"
  is the number tick in a headless shot (motion.js).
  references/motion.md says what moves and how fast. Everything here answers the pointer, the
  keyboard or a number coming into view once; nothing moves because the page scrolled.

  Hover rules sit under (hover: hover) and (pointer: fine): a phone never keeps a stuck hover.
  Under prefers-reduced-motion colours still change; nothing moves or scales.
*/

:root {
  --m-in: 140ms;                              /* hover in: buttons, links, nav, tabs */
  --m-out: 200ms;                             /* hover out, panel close */
  --m-press: 90ms;                            /* a press */
  --m-panel: 200ms;                           /* a menu or sheet opening */
  --m-slide: 240ms;                           /* an indicator travelling between two tabs or links */
  --m-image: 600ms;                           /* a photograph scaling inside its mask */
  --m-ease: cubic-bezier(.2, .8, .2, 1);      /* ease-out: fast start, soft landing */
  --m-ease-io: cubic-bezier(.65, 0, .35, 1);  /* the indicator: leaves and lands softly */
  --m-cycle: 3.2s;                            /* one cycle of a card's loop (2.5-4 s) */
  --m-lift: -2px;
}

/* ---------------------------------------------------------------- buttons */
html:not([data-motion="off"]) .btn {
  position: relative;
  transition: background-color var(--m-out) var(--m-ease), color var(--m-out) var(--m-ease),
              border-color var(--m-out) var(--m-ease), box-shadow var(--m-out) var(--m-ease),
              transform var(--m-press) var(--m-ease);
}
/* the tone moves toward the ground: a black button greys a little on white, a white one on black */
html:not([data-motion="off"]) .btn--primary:hover { background: color-mix(in oklab, var(--action) 84%, var(--bg)); }
html:not([data-motion="off"]) .btn--secondary:hover {
  background: color-mix(in oklab, var(--bg) 92%, var(--ink));
  border-color: color-mix(in oklab, var(--ink) 32%, transparent);
}
html:not([data-motion="off"]) .btn:hover { transition-duration: var(--m-in), var(--m-in), var(--m-in), var(--m-in), var(--m-press); }
html:not([data-motion="off"]) .btn:active { transform: translateY(1px) scale(.985); }
/* the step: a button rises 1px on hover (2px on the large size) and presses 1px down with a 1.5% shrink on
   click; pointer only. The text-link secondary (arrow and block looks) keeps its underline and does not step.
   Reduced motion keeps the colour change only (see the end of this file). */
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .btn:hover { transform: translateY(-1px); }
  html:not([data-motion="off"]) .btn--xl:hover { transform: translateY(-2px); }
  html:not([data-motion="off"]):is([data-buttons="arrow"], [data-buttons="block"]) .btn--secondary:hover { transform: none; }
  html:not([data-motion="off"]) .btn:active { transform: translateY(1px) scale(.985); }
  html:not([data-motion="off"]):is([data-buttons="arrow"], [data-buttons="block"]) .btn--secondary:active { transform: scale(.985); }
}


@media(prefers-reduced-motion:reduce){html:not([data-motion="off"]) .btn{transform:none;transition:none}}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}