/* ===========================================================================
 * Dijiwa Design System — Motion Library
 * ---------------------------------------------------------------------------
 * Three Emil curves + project durations + press-feedback rule + the
 * prefers-reduced-motion gate that zeros durations and disables transforms.
 *
 * Imported once on every dashboard HTML page.
 * Out of scope: frontend/login.html (cinematic dark login, separate surface).
 * =========================================================================== */

:root {
  /* ---- 4.x Easing -------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);   /* entry/exit — DEFAULT */
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen morph */
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);   /* drawer/sheet only */

  /* ---- 4.x Duration ----------------------------------------------------- */
  --dur-press:    160ms;
  --dur-tooltip:  150ms;
  --dur-popover:  200ms;
  --dur-modal:    240ms;
  --dur-drawer:   300ms;

  /* ---- 4.x Scale -------------------------------------------------------- */
  --scale-press:  0.97;   /* :active on every clickable — never below 0.95 */
  --scale-entry:  0.95;   /* entry starting state — NEVER 0 */
}

/* ---- 4.x Reduced-motion gate ---------------------------------------------
 * Zero durations and disable transforms for users who request reduced motion.
 * Opacity transitions remain allowed (they don't trigger vestibular symptoms).
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press:   0ms;
    --dur-tooltip: 0ms;
    --dur-popover: 80ms;
    --dur-modal:   100ms;
    --dur-drawer:  100ms;
    --scale-press: 1;
    --scale-entry: 1;
  }
}

/* ===========================================================================
 * 4.2 Press feedback — every clickable must respond to press.
 *
 * The transition is intentionally scoped to the transform property only —
 * never the shorthand "all" keyword (anti-pattern #1 in design_system.md §7).
 * Specifying the exact property is what makes press feedback cheap.
 * =========================================================================== */
button,
[role="button"],
.hotel-card,
.tab,
.clickable {
  transition: transform var(--dur-press) var(--ease-out);
}

button:active,
[role="button"]:active,
.hotel-card:active,
.tab:active,
.clickable:active {
  transform: scale(var(--scale-press));
}

/* ---- 4.x Reduced-motion disables the press transform ---------------------
 * Override the :active scale rule for users who request reduced motion.
 * Scale + opacity are still allowed for entry, but press must not move.
 * Wrapped in the fine-pointer gate too — touch devices don't need this.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  button:active,
  [role="button"]:active,
  .hotel-card:active,
  .tab:active,
  .clickable:active {
    transform: none;
  }
}

/* ===========================================================================
 * 4.3 Popover transform-origin (Radix/Base vars only — modal exception)
 *
 * Popovers scale from the trigger location; modal scales from center because
 * the trigger is unknown when opened programmatically.
 * =========================================================================== */
[data-radix-popper-content-wrapper] {
  transform-origin: var(--radix-popover-content-transform-origin);
}

.modal {
  transform-origin: center;   /* modal exception — keep centered */
}