/* design-interaction-dna · motion + interaction tokens
   Use as-is in a project that has no token system. If the project already has one, map these values onto its
   names instead of adding a second set (one source of truth per project).
   Every motion in the product picks from these scales; a raw "300ms ease" in a component is a smell. */

:root {
  /* Durations. One scale for the whole product. Exits run ~0.65x their entrance. */
  --dur-instant: 90ms;     /* press feedback, checkbox tick, ripple start */
  --dur-fast: 160ms;       /* hover, focus ring, small toggles, tooltip exit */
  --dur-base: 240ms;       /* dropdowns, popovers, tab indicator, accordion */
  --dur-medium: 360ms;     /* dialogs, sheets, toasts in, view content in */
  --dur-slow: 560ms;       /* large surfaces, shared-element travel, page transitions */
  --dur-cinematic: 900ms;  /* hero and story beats only; never on a control the user is waiting on */
  --stagger: 40ms;         /* per item; cap the whole cascade at --stagger-max */
  --stagger-max: 280ms;

  /* Easing. Four curves, each with one job. Never linear on something that moves (only on progress bars, spinners, scrubs). */
  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* ARRIVE: entrances, reveals, expansions (Daniel's approved site curve) */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* TRAVEL: on-screen A to B, reorders, shared element, carousel */
  --ease-in: cubic-bezier(.55, 0, 1, .45);       /* LEAVE: exits that leave the screen entirely; keep them short */
  --ease-pop: cubic-bezier(.34, 1.36, .64, 1);   /* CONFIRM: ~4% overshoot, small elements only (badge, toggle knob) */

  /* Distances. Small UI moves a little; only big surfaces travel far. */
  --rise-xs: 4px;    /* tooltips */
  --rise-sm: 8px;    /* menus, popovers, list items */
  --rise: 14px;      /* toasts, cards, dialogs */
  --rise-lg: 32px;   /* sections, story beats */
  --scale-in: .97;   /* dialogs and popovers grow from here, never from 0 */
  --press: .97;      /* pressed buttons */
  --dir: 1;          /* horizontal sign: multiply every X offset by it so RTL mirrors for free */

  /* Focus */
  --focus-ring: 0 0 0 2px var(--focus-gap, #fff), 0 0 0 4px var(--focus-color, #2a66e0);
}
[dir="rtl"], :root:lang(he) { --dir: -1; }

/* The browser's own [hidden] loses to any author display rule (.panel { display:flex }). Make it win. */
[hidden] { display: none !important; }

/* Visible keyboard focus on everything interactive; mouse clicks do not show it. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [role="menuitem"]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: max(4px, var(--radius, 0px));
}

/* Pressed feedback that never shifts layout (transform only). */
.dna-press { transition: transform var(--dur-fast) var(--ease-out); }
.dna-press:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(var(--press)); transition-duration: var(--dur-instant); }

/* Height-auto expand/collapse without measuring: wrap the content in one child. */
.dna-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.dna-collapse > * { overflow: hidden; min-height: 0; }
.dna-collapse.is-open { grid-template-rows: 1fr; }

/* Reduced motion: remove MOVEMENT, keep meaning. Opacity changes still happen (shortened), so state changes stay visible.
   html.reduce-motion mirrors an in-site "less motion" toggle when the project has one. */
@media (prefers-reduced-motion: reduce) {
  :root { --rise-xs: 0px; --rise-sm: 0px; --rise: 0px; --rise-lg: 0px; --scale-in: 1; --press: 1;
          --dur-medium: 160ms; --dur-slow: 160ms; --dur-cinematic: 160ms; --stagger: 0ms; --stagger-max: 0ms; }
}
html.reduce-motion { --rise-xs: 0px; --rise-sm: 0px; --rise: 0px; --rise-lg: 0px; --scale-in: 1; --press: 1;
                     --dur-medium: 160ms; --dur-slow: 160ms; --dur-cinematic: 160ms; --stagger: 0ms; --stagger-max: 0ms; }
@media (prefers-reduced-motion: no-preference) { html:not(.reduce-motion) { scroll-behavior: smooth; } }