/* Motion.

   The brand's temperament is a precision instrument, so motion here confirms
   rather than performs. Three rules hold everywhere:

   1. MOTION EXPLAINS A CHANGE. If nothing changed, nothing moves. There are no
      decorative loops, no scroll-triggered reveals, no page-load choreography.
   2. LAYOUT DOES NOT MOVE. Animate colour, opacity, transform and a bar's own
      width. Never animate height, margin, padding or a grid — reflow makes a
      dense table feel unstable and costs a frame budget the floor cannot spare.
   3. NOTHING OVERSHOOTS. No spring, no bounce, no elastic. A warehouse system
      that springs reads as a toy; the ledger it renders is not playful.

   DURATION — the scale is short. Anything over 300ms on a control feels broken
   on a scanner in someone's hand, and every number below was chosen against the
   distance the thing actually travels: a colour swap has no distance and takes
   the least, an image scaling across a card has the most. */
:root{
  --dur-state:140ms; /* @kind other */
  --dur-fast:160ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-settle:260ms; /* @kind other */
  --dur-fill:300ms; /* @kind other */
  --dur-media:500ms; /* @kind other */

  /* EASING — two curves, and one of them is just `ease`.
     --ease-standard decelerates hard: it leaves quickly and arrives slowly, so
     an element looks like it is settling into position rather than sliding to a
     stop. Use it for anything that MOVES.
     --ease-plain is for anything that only CHANGES — a colour has no direction,
     so a directional curve on it is a lie the eye can detect. */
  --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-plain:ease; /* @kind other */

  /* RECIPES — the five transitions this system actually uses. Reach for one of
     these before writing a bespoke transition; a sixth kind of motion is a
     design decision, not a convenience. */
  --motion-state:background-color var(--dur-state) var(--ease-plain),border-color var(--dur-state) var(--ease-plain),color var(--dur-state) var(--ease-plain); /* @kind other */
  --motion-fade:opacity var(--dur-fast) var(--ease-plain); /* @kind other */
  --motion-move:transform var(--dur-fast) var(--ease-standard); /* @kind other */
  --motion-fill:width var(--dur-fill) var(--ease-standard); /* @kind other */
  --motion-media:transform var(--dur-media) var(--ease-standard); /* @kind other */
}

/* Two entrances on the desktop, and a third that exists only on the handheld.
   An overlay fades; a panel fades and rises 10px. The rise is small on purpose —
   it signals arrival without the reader having to watch a journey.

   ic-sheet is the mobile bottom sheet, and it is a genuinely different gesture:
   it is anchored to the bottom edge of the screen, so it travels a little
   further (16px) and does NOT fade. A sheet is already attached to the edge it
   comes from; fading one in makes it read as an overlay floating above the
   screen rather than a drawer pulled up out of it. Handheld only — a bottom
   sheet on a desktop screen is a modal wearing the wrong clothes. */
@keyframes ic-fade{from{opacity:0}to{opacity:1}}
@keyframes ic-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ic-sheet{from{transform:translateY(16px)}to{transform:none}}

/* Two continuous loops, and both are bound to a cause: the splash bar, which
   runs only while the app is genuinely still loading, and the skeleton sweep,
   which stops the moment its content lands. A loop that outlives its cause is
   decoration. */
@keyframes ic-splash-bar{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes ic-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* The narrow-viewport drawer travels from the edge it is anchored to, like the
   handheld sheet, and for the same reason does not fade. */
@keyframes ic-drawer{from{transform:translateX(24px)}to{transform:none}}
/* A full-height side panel travels its own edge — further than the small
   narrow-viewport drawer, and mirrored so a left panel never slides right. */
@keyframes ic-drawer-right{from{transform:translateX(40px)}to{transform:none}}
@keyframes ic-drawer-left{from{transform:translateX(-40px)}to{transform:none}}

/* Reduced motion is not a downgrade — it is the same design with the movement
   removed. Everything still lands in its final state instantly. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}