/* =============================================================
   MPI WATER — Apple-style interaction polish
   Loaded LAST in <head>, after each page's own <style> block, so
   it refines the existing design (adds response/feel) instead of
   fighting it. Only adds pseudo-states and properties pages don't
   already define — never overrides layout, color or brand values.
   Based on Apple's "Designing Fluid Interfaces" (WWDC18) + HIG.
   ============================================================= */

:root {
  /* Critically-damped settle — the default for anything that isn't
     carrying momentum from a drag/flick (menus, hovers, fades). */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  /* Slight overshoot — reserved for sheet/modal presentation, the
     one interaction here that behaves like a physical drawer. */
  --ease-spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------------
   1. Response — feedback starts the instant you press, not on
   release. iOS Safari only arms `:active` when *some* touchstart
   listener exists on the page; this line is what turns it on.
   --------------------------------------------------------------- */

button,
.btn-primary,
.btn-secondary,
.btn,
.btn-sm,
.nav-phone,
.site-link-btn,
.login-btn,
.product-card-btn,
.hamburger-btn,
.logout-btn,
.img-remove-btn,
.order-expand-btn,
.modal-close {
  transition-property: transform, box-shadow, background, color, border-color, opacity;
  transition-timing-function: var(--ease-spring);
}

button:active,
.btn-primary:active,
.btn-secondary:active,
.btn:active,
.btn-sm:active,
.nav-phone:active,
.site-link-btn:active,
.login-btn:active,
.product-card-btn:active,
.hamburger-btn:active,
.logout-btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
}

/* Links, nav items and cards get the springier ease too, without
   the press-scale (they're not "buttons" — no need to squash them). */
a,
.nav-links a,
.nav-item,
[class*="-card"],
.card,
.stat-card {
  transition-timing-function: var(--ease-spring);
}

/* ---------------------------------------------------------------
   2. Focus — a visible, non-jarring ring for keyboard users.
   Neither site design defines :focus-visible, so this is purely
   additive.
   --------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue, #00aaff);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------
   3. Materials — nav/topbar read as glass with real depth, not a
   flat blur. Vibrancy (saturate) is what makes translucency read
   as "material" instead of just "faded".
   --------------------------------------------------------------- */

nav,
.topbar {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* ---------------------------------------------------------------
   4. Sheets & modals — the one element here that genuinely behaves
   like a physical drawer, so it earns the bounce (Apple ships
   drawer/sheet presentation with damping ~0.8).
   --------------------------------------------------------------- */

.modal,
.confirm-box {
  transition-timing-function: var(--ease-spring-bounce);
}

.toast {
  animation-timing-function: var(--ease-spring-bounce);
}

/* ---------------------------------------------------------------
   5. Typography — tracking scales with size instead of being a
   fixed px value, so it stays correct across the responsive
   clamp()'d display sizes.
   --------------------------------------------------------------- */

.hero-title,
.page-hero-title,
.banner-title {
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------
   6. Reduced motion — cross-fade instead of spring/slide/parallax,
   and stop decorative infinite animations (bubbles, streams) dead
   rather than let them keep looping at speed.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------
   7. Reduced transparency — frostier / solid materials instead of
   blur, for users who've asked for it at the OS level.
   --------------------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {

  nav,
  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
