/* =========================================================================
   selfLove.Yoga — Editorial Luxury — Taste & Motion System (v2, "impeccable")
   Implements /TASTE-AND-MOTION-SYSTEM.md literally. Load after the Tailwind
   CDN script and before each page's inline <style> block so it establishes
   the shared motion/imagery baseline that page-specific rules layer on top of.
   ========================================================================= */

:root {
  /* Kowalski-style motion tokens — the only easing curves/durations used site-wide */
  --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 */
}

/* ---------- Base / shared chrome (identical across every page) ---------- */
body { font-family: 'Inter', sans-serif; background: #FFFFFF; color: #0A0A0A; }
.font-display { font-family: 'Fraunces', serif; }
::selection { background: #C9A87C; color: #0A0A0A; }

/* ---------- Staggered reveal system ----------
   Purposeful arrival, not a generic fade-in: elements settle in on both
   opacity and transform (translateY + a hair of scale) using --ease-out-expo
   at --duration-slow, so they read as arriving with momentum, not sliding
   linearly. Stagger children in 50ms steps, capped at 6 tiers. */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0) scale(1); }
.reveal-d1.in-view { transition-delay: 50ms; }
.reveal-d2.in-view { transition-delay: 100ms; }
.reveal-d3.in-view { transition-delay: 150ms; }
.reveal-d4.in-view { transition-delay: 200ms; }
.reveal-d5.in-view { transition-delay: 250ms; }

/* ---------- Hover / interactive states ----------
   Transform-only, never color-only. .hover-rise is the canonical utility for
   buttons and cards (exact spec value: translateY(-2px) + shadow, 150ms).
   .hover-lift is the same treatment sized for larger media (photo tiles). */
.hover-rise {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo);
}
.hover-rise:hover, .hover-rise:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(10, 10, 10, 0.28);
}
.hover-lift {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo);
}
.hover-lift:hover, .hover-lift:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -14px rgba(10, 10, 10, 0.3);
}
/* Focus parity for keyboard users on any element already using the browser outline */
a:focus-visible, button:focus-visible {
  outline: 2px solid #C9A87C;
  outline-offset: 2px;
}

/* ---------- Imagery treatment ----------
   Spec: "a subtle brand-tinted gradient overlay over every photo... never
   show a photo at its native crop without at least a subtle treatment."
   .photo-grade is applied directly to every <img>/<video> site-wide — a
   consistent warm, gold-leaning color grade (duotone-adjacent) so stock
   photography reads as shot-for-this-brand. Pseudo-elements don't render on
   replaced elements (img/video), so the "gradient overlay" is implemented as
   a filter grade here; .photo-frame + .photo-grade-overlay-layer (below)
   deliver a literal layered gradient overlay for the flagship hero moments
   where a wrapping element already exists. */
.photo-grade {
  filter: saturate(1.08) sepia(0.14) hue-rotate(-8deg) brightness(1.02) contrast(1.02);
}
.photo-frame {
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.08);
}
/* Literal gradient-overlay layer: an absolutely-positioned sibling placed
   inside a `position:relative; overflow:hidden` wrapper, directly over the
   photo/video. ~10% opacity brand-accent gradient per spec. */
.photo-grade-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(201, 168, 124, 0.22) 0%, rgba(10, 10, 10, 0.06) 55%, rgba(201, 168, 124, 0.1) 100%);
  mix-blend-mode: overlay;
  opacity: 0.85;
}

/* ---------- Nav / overlay chrome (shared across every page) ---------- */
#mobile-nav {
  position: fixed; inset: 0; top: 80px; background: #FFFFFF;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-in-out-quart),
              transform var(--duration-base) var(--ease-in-out-quart);
  z-index: 40; overflow-y: auto;
}
#mobile-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 10, 10, .6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-in-out-quart);
  z-index: 100; padding: 1.5rem;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal-overlay .modal-box {
  transform: translateY(16px);
  transition: transform var(--duration-base) var(--ease-in-out-quart);
}
.modal-overlay.is-open .modal-box { transform: translateY(0); }

#cart-toast {
  position: fixed; bottom: 24px; right: 24px;
  transform: translateY(160%);
  transition: transform var(--duration-slow) var(--ease-in-out-quart);
  z-index: 100;
}
#cart-toast.is-visible { transform: translateY(0); }

.hero-parallax { transform: scale(1.08); will-change: transform; transform-origin: center; }

/* Sticky enroll / promo bars that slide up from the viewport edge (toggle-like) */
#sticky-enroll {
  position: fixed; left: 0; right: 0; bottom: 0;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-in-out-quart);
  z-index: 90;
}
#sticky-enroll.is-visible { transform: translateY(0); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4, .reveal-d5,
  .hover-rise, .hover-lift, #mobile-nav, .modal-overlay, .modal-overlay .modal-box,
  #cart-toast, #sticky-enroll, .hero-parallax {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}