/* ============================================================
   selfLove.Yoga — Taste & Motion System
   Implements /TASTE-AND-MOTION-SYSTEM.md for the
   "02 Dark Cinematic Streaming" style. Load after the Tailwind
   CDN script and before any page-level inline <style> block so
   these tokens/utilities are available everywhere, and so this
   file can override raw Tailwind defaults where noted.
   ============================================================ */

:root {
  /* -- Motion tokens (spec §4, verbatim) -- */
  --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 approximation, 350ms */
  --duration-fast: 150ms;   /* hover, button press */
  --duration-base: 250ms;   /* card reveals, dropdowns */
  --duration-slow: 400ms;   /* modals, page-level transitions */

  /* -- Brand accents reused for the photo color-grade overlay -- */
  --grade-accent-1: 139, 92, 246;  /* #8B5CF6 violet */
  --grade-accent-2: 79, 209, 197;  /* #4FD1C5 teal */
}

/* ============================================================
   1. Transform-only hover states (spec §4: 150ms, translateY(-2px)
      + shadow, never color-only on cards/buttons)
   ============================================================ */
.u-hover-lift,
.card-hover,
.glow-btn,
.slot-btn,
.reserve-trigger,
a.rounded-lg,
button.rounded-lg:not(:disabled),
a.rounded-full,
button.rounded-full:not(:disabled) {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo);
}
.u-hover-lift:hover,
a.rounded-lg:hover,
button.rounded-lg:hover:not(:disabled),
a.rounded-full:hover,
button.rounded-full:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}
/* keyboard-focus parity — every clickable element gets a visible,
   transform-based state, not just mouse hover */
.u-hover-lift:focus-visible,
.card-hover:focus-visible,
.glow-btn:focus-visible,
a.rounded-lg:focus-visible,
button.rounded-lg:focus-visible,
a.rounded-full:focus-visible,
button.rounded-full:focus-visible {
  outline: 2px solid #4FD1C5;
  outline-offset: 2px;
  transform: translateY(-2px);
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #4FD1C5;
  outline-offset: 2px;
}

/* ============================================================
   2. Photo / video color-grade overlay (spec §6: a single,
      consistent brand-tinted gradient over every photo, ~8-15%
      opacity). Apply `u-photo-frame` to the element that hugs
      the <img>/<video> (the overflow-hidden / absolute-inset-0
      wrapper) — it renders via ::after so it never blocks clicks
      or fights the image's own object-fit/rounding.
   ============================================================ */
.u-photo-frame { position: relative; }
.u-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(var(--grade-accent-1), .16) 0%,
    rgba(6, 7, 10, .06) 45%,
    rgba(var(--grade-accent-2), .12) 100%);
  mix-blend-mode: overlay;
}

/* ============================================================
   3. Staggered reveal (spec §4: entrances use --ease-out-expo,
      40-60ms stagger, capped at 6 items — not a generic fade-in).
      Two ways to use it:
        a) `.u-stagger` on a container — pure CSS, nth-child based,
           toggle `.in` on the container (e.g. via IntersectionObserver)
           and its children cascade in.
        b) the site's existing `.reveal`/`.in` + script.js JS-driven
           stagger (see below) now runs on these same tokens.
   ============================================================ */
.u-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}
.u-reveal.in { opacity: 1; transform: translateY(0); }

.u-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}
.u-stagger.in > * { opacity: 1; transform: translateY(0); }
.u-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.u-stagger.in > *:nth-child(2) { transition-delay: 50ms; }
.u-stagger.in > *:nth-child(3) { transition-delay: 100ms; }
.u-stagger.in > *:nth-child(4) { transition-delay: 150ms; }
.u-stagger.in > *:nth-child(5) { transition-delay: 200ms; }
.u-stagger.in > *:nth-child(n+6) { transition-delay: 250ms; } /* cap: never past 6 steps */

/* ============================================================
   4. Interactive state changes (spec §4: open/close, toggle ->
      --ease-in-out-quart) and gesture/spring approximation.
   ============================================================ */
.u-toggle {
  transition: transform var(--duration-base) var(--ease-in-out-quart),
              opacity var(--duration-base) var(--ease-in-out-quart),
              max-height var(--duration-base) var(--ease-in-out-quart);
}
.u-spring { transition: transform 350ms var(--ease-spring); }

/* ============================================================
   Reduced motion — disable non-essential motion site-wide.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}