/**
 * VBedits — transitions library.
 *
 * Centralised home for every `transition:` property the site uses. Loaded
 * non-blocking from site_header.php so it doesn't delay first paint. Add
 * new transitions here so future devs (and future you) have ONE place to
 * adjust hover speeds, easing curves, etc.
 *
 * Naming convention: utility classes prefixed `.tr-` so they don't clash.
 * Component-specific transitions stay in store.css next to their rules.
 *
 * Honour `prefers-reduced-motion` at the bottom — if the user opts out of
 * motion, every transition collapses to 0s automatically.
 */

:root {
  /* Shared timing tokens — reused across the site for consistency. */
  --tr-fast:    .15s;
  --tr-base:    .22s;
  --tr-slow:    .35s;
  --tr-glacial: .55s;

  /* Easing curves */
  --ease-standard: cubic-bezier(.22, 1, .36, 1);     /* iOS-style decel */
  --ease-elastic:  cubic-bezier(.34, 1.56, .64, 1);  /* light bounce */
  --ease-emphasis: cubic-bezier(.4, 0, .2, 1);       /* Material design */
}

/* ── Utility classes (use sparingly — prefer scoped transitions) ───────── */
.tr-fast { transition: all var(--tr-fast)    var(--ease-standard); }
.tr-base { transition: all var(--tr-base)    var(--ease-standard); }
.tr-slow { transition: all var(--tr-slow)    var(--ease-standard); }

.tr-elastic    { transition: transform var(--tr-base) var(--ease-elastic); }
.tr-emphasis   { transition: all var(--tr-base) var(--ease-emphasis); }
.tr-fade       { transition: opacity var(--tr-base) ease; }
.tr-slide      { transition: transform var(--tr-base) var(--ease-standard); }
.tr-color      { transition: color var(--tr-fast), background-color var(--tr-fast), border-color var(--tr-fast); }
.tr-lift:hover { transform: translateY(-2px); }

/* ── Accessibility: respect user's motion preference ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .001ms !important;
    animation-duration:  .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}