/* ============================================================
   selfLove.Yoga — Taste & Motion System (v2, "impeccable" pass)
   Implements TASTE-AND-MOTION-SYSTEM.md literally. Loaded after the
   Tailwind CDN script and before style.css so its rules can override
   ad-hoc Tailwind utility defaults (color-only hovers, generic
   fades, off-scale spacing) with the site's actual design language.
   ============================================================ */

:root {
  /* Motion tokens — two curves, three durations. Nothing ad hoc. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);      /* entrances: fast start, gentle settle */
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); /* state changes: toggles, modals */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);    /* gesture-driven / physically-interactive approximation */
  --duration-fast: 150ms;  /* hover, button press */
  --duration-base: 250ms;  /* card reveals, dropdowns */
  --duration-slow: 400ms;  /* modals, page-level transitions */
}

/* ------------------------------------------------------------
   1. Transform-only hover states
   Hover/focus on every clickable element: 150ms, transform-only
   (translateY(-2px) + shadow change). Never color-only on cards/buttons.
   ------------------------------------------------------------ */
.hover-lift,
.bento-card,
a.rounded-xl2,
button.rounded-xl2,
a.rounded-full,
button.rounded-full {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo),
              background-color var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) var(--ease-out-expo);
}
.hover-lift:hover,
.hover-lift:focus-visible,
a.rounded-xl2:hover,
button.rounded-xl2:hover,
a.rounded-xl2:focus-visible,
button.rounded-xl2:focus-visible,
a.rounded-full:hover,
button.rounded-full:hover,
a.rounded-full:focus-visible,
button.rounded-full:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(17, 24, 39, 0.22), 0 3px 8px rgba(17, 24, 39, 0.06);
}
/* Icon-only circular buttons get a lighter lift (no heavy shadow needed at that scale) */
a.rounded-full:hover, button.rounded-full:hover,
a.rounded-full:focus-visible, button.rounded-full:focus-visible {
  box-shadow: 0 6px 14px -6px rgba(17, 24, 39, 0.28);
}
/* Respect elements that intentionally opt out (e.g. disabled state) */
[disabled].hover-lift:hover, [disabled].rounded-xl2:hover {
  transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------
   2. Photo color-grade overlay
   Single, consistent brand-tinted wash over every photo (~8-15%
   opacity) plus a 1px inset border, so stock photography reads as
   shot-for-this-brand. Uses inset box-shadow layers so it works
   directly on <img>/<video> (replaced elements) and automatically
   respects each element's own border-radius.
   ------------------------------------------------------------ */
.photo-grade {
  box-shadow:
    inset 0 0 0 1px rgba(17, 24, 39, 0.08),
    inset 60px -80px 120px -50px rgba(99, 102, 241, 0.18),
    inset -60px 80px 120px -50px rgba(34, 197, 94, 0.12);
}

/* ------------------------------------------------------------
   3. Staggered reveal animations
   Entrances use --ease-out-expo. Children stagger 40-60ms apart,
   capped at 6 items (a 12-item stagger just feels slow).
   Toggle `.in-view` on the `.stagger-reveal` parent (IntersectionObserver
   in script.js) to fire the sequence.
   ------------------------------------------------------------ */
.stagger-reveal > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}
.stagger-reveal.in-view > * { opacity: 1; transform: translateY(0); }
.stagger-reveal > *:nth-child(1) { transition-delay: 0ms; }
.stagger-reveal > *:nth-child(2) { transition-delay: 50ms; }
.stagger-reveal > *:nth-child(3) { transition-delay: 100ms; }
.stagger-reveal > *:nth-child(4) { transition-delay: 150ms; }
.stagger-reveal > *:nth-child(5) { transition-delay: 200ms; }
.stagger-reveal > *:nth-child(n+6) { transition-delay: 250ms; } /* cap — never past 6 */

/* Single-element entrance (hero copy, section headers) */
.reveal-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}
.reveal-in.in-view { opacity: 1; transform: translateY(0); }

/* Interactive state-change transitions (modals, accordions, toggles)
   always use --ease-in-out-quart at --duration-base. */
.state-transition {
  transition: transform var(--duration-base) var(--ease-in-out-quart),
              opacity var(--duration-base) var(--ease-in-out-quart);
}

/* Gesture/physically-interactive approximation (drag-to-dismiss, day-select) */
.spring-transition {
  transition: transform 350ms var(--ease-spring);
}

/* Modals — open/close is a state change, --ease-in-out-quart at --duration-base.
   Overrides the Tailwind `transition-all duration-200` utility still present in
   markup for browsers without custom-property support. */
.modal-panel {
  transition: transform var(--duration-base) var(--ease-in-out-quart),
              opacity var(--duration-base) var(--ease-in-out-quart) !important;
}

@media (prefers-reduced-motion: reduce) {
  .stagger-reveal > *, .reveal-in, .hover-lift, .bento-card,
  a.rounded-xl2, button.rounded-xl2, a.rounded-full, button.rounded-full {
    transition-duration: 1ms !important;
    transform: none !important;
  }
}