/*
 * UI polish layer: easing, press feedback, enter animations.
 * Loaded after Tailwind (CDN v2 + Vite build). Plain CSS, no build step.
 * Principles: animate only transform/opacity, ease-out for entering,
 * UI motion under 250ms, instant exit, respect prefers-reduced-motion.
 */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 160ms;
  --dur-pop: 150ms;
  --dur-dialog: 200ms;
}

[x-cloak] { display: none !important; }

/* Tailwind's built-in ease-out is too weak; give it a stronger curve. */
.ease-out { transition-timing-function: var(--ease-out); }

/* ---------- Press feedback ---------- */
/* :where() keeps specificity at zero so existing transition-* classes win. */
:where(button, [type="submit"], [type="button"], a[class^="bg-"], a[class*=" bg-"]) {
  transition: transform var(--dur-press) var(--ease-out),
              background-color 150ms ease, color 150ms ease,
              border-color 150ms ease, box-shadow 150ms ease;
}
:where(button, [type="submit"], [type="button"], a[class^="bg-"], a[class*=" bg-"]):not(:disabled):not(.transform):not([class*="translate"]):active {
  transform: scale(0.97);
}

/* Keyboard focus that is visible, but only for keyboard users. */
:where(a, button, [type="submit"], [type="button"], summary):focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Popovers / dropdowns ---------- */
/* Scale from the trigger (top-left), fast; close is instant. */
.ui-pop {
  transform-origin: top left;
  transition: opacity var(--dur-pop) var(--ease-out),
              transform var(--dur-pop) var(--ease-out);
}
.ui-pop-right { transform-origin: top right; }
@starting-style {
  .ui-pop { opacity: 0; transform: scale(0.97) translateY(-4px); }
}

/* ---------- Modals ---------- */
/* Works with x-show, x-if and v-if: @starting-style fires on insert
   and when display:none is removed. Modals stay centred (origin: center). */
.ui-backdrop {
  transition: opacity var(--dur-dialog) ease;
}
.ui-dialog {
  transition: opacity var(--dur-dialog) var(--ease-out),
              transform var(--dur-dialog) var(--ease-out);
}
@starting-style {
  .ui-backdrop { opacity: 0; }
  .ui-dialog { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* ---------- Reduced motion ---------- */
/* Keep opacity (aids comprehension), drop movement. */
@media (prefers-reduced-motion: reduce) {
  :where(button, [type="submit"], [type="button"], a[class^="bg-"], a[class*=" bg-"]):active { transform: none !important; }
  .ui-pop, .ui-dialog { transform: none !important; }
  @starting-style {
    .ui-pop, .ui-dialog { transform: none; }
  }
}

/* ---------- Panel resize (dashboard columns) ---------- */
/* Was transition-all 300ms. Only the properties that change, faster,
   ease-in-out because the element morphs in place. */
.ui-panel-resize {
  transition: flex-basis 200ms var(--ease-in-out), max-width 200ms var(--ease-in-out);
}
@media (prefers-reduced-motion: reduce) {
  .ui-panel-resize { transition: none; }
}