/* ============================================================================
   interactions.css — shared micro-interaction primitives (Round 3 / R9–R12)
   Design-engineering layer (Emil Kowalski): tactile feedback, honest easing,
   touch-hover hygiene. Opt-in utility classes so existing inline styles are
   left untouched. Loaded once in layout.html after the page CSS.

   NOTE: all motion here is already neutralized for users who request it by the
   global `@media (prefers-reduced-motion: reduce)` reset in layout.html, which
   zeroes animation/transition durations app-wide — no per-rule guard needed.
   ========================================================================== */

:root {
  /* Stronger custom curves than the built-in CSS easings. */
  --ix-ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* entering / responsive UI */
  --ix-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen movement */
  --ix-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);  /* iOS-like drawers */
}

/* ── Press feedback ────────────────────────────────────────────────────────
   Buttons must feel responsive. Subtle scale on :active confirms the press.
   `scale()` scales children too, so icons/text compress proportionally. */
.ix-press { transition: transform 160ms var(--ix-ease-out); }
.ix-press:active { transform: scale(0.97); }

/* Tighter press for small, dense touch targets (e.g. bottom-nav tabs). */
.ix-press-sm { transition: transform 90ms ease; }
.ix-press-sm:active { transform: scale(0.94); }

/* Never give "pressed" feedback to a disabled control. */
.ix-press:disabled:active,
.ix-press[aria-disabled="true"]:active,
.ix-press-sm:disabled:active,
.ix-press-sm[aria-disabled="true"]:active { transform: none; }

/* ── Hover lift (touch-safe) ───────────────────────────────────────────────
   Hover-only motion must be gated behind a hover-capable pointer, or it
   sticks after a tap on touch devices and reads as a stuck/half-active state. */
@media (hover: hover) and (pointer: fine) {
  .ix-hover-lift {
    transition: transform 160ms var(--ix-ease-out), box-shadow 160ms ease;
  }
  .ix-hover-lift:hover { transform: translateY(-1px); }
}

/* ── Entrance ──────────────────────────────────────────────────────────────
   Nothing in the real world appears from nothing — start from a visible scale
   + small offset, decelerate in. Use sparingly (occasional, not 100x/day). */
@keyframes ix-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ix-enter { animation: ix-fade-up 0.22s var(--ix-ease-out) both; }