/* selfLove.Yoga — 06 Organic Zen — Taste & Motion System
   Implements TASTE-AND-MOTION-SYSTEM.md v2 literally: two named easing
   curves, three durations, transform-only hover, a site-wide photo
   color-grade, and a purposeful staggered-reveal system.
   Loaded after the Tailwind CDN script / before page-specific <style>
   blocks so page styles can still layer on top where truly needed. */

:root {
  --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: drag, swipe, day-select (overshoot signature) */
  --duration-fast: 150ms;   /* hover, button press */
  --duration-base: 250ms;   /* card reveals, dropdowns */
  --duration-slow: 400ms;   /* modals, page-level transitions */
}

/* ==========================================================================
   1. Transform-only hover — the ONLY hover pattern for cards/buttons/links
   that act as clickable surfaces. Never color-only, never opacity-only.
   ========================================================================== */
.hover-lift {
  /* Bundles transform/shadow together with any color/background/border change
     the element also carries (e.g. Tailwind's hover:bg-*) into ONE
     transition-property list so nothing fights .transition-colors etc. for
     the cascade — everything moves on the same token-driven timing. */
  transition-property: transform, box-shadow, background-color, color, border-color, opacity;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out-expo);
  will-change: transform;
}
.hover-lift:hover,
.hover-lift:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(59, 58, 51, 0.22), 0 4px 10px -6px rgba(59, 58, 51, 0.14);
}
.hover-lift:active {
  transform: translateY(-1px);
  transition-duration: 100ms;
}

/* Slightly stronger lift for large feature cards / CTAs */
.hover-lift-lg {
  transition-property: transform, box-shadow;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out-expo);
}
.hover-lift-lg:hover,
.hover-lift-lg:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -14px rgba(59, 58, 51, 0.28), 0 8px 16px -8px rgba(59, 58, 51, 0.16);
}

/* For elements that must not translate (e.g. already-rotated blob photos) —
   scale instead of translate, still transform-only. */
.hover-tilt {
  transition-property: transform, box-shadow;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out-expo);
}
.hover-tilt:hover,
.hover-tilt:focus-visible {
  transform: scale(1.03) rotate(var(--tilt-hover-rotate, 0deg));
}

/* ==========================================================================
   2. Photo treatment — a single, consistent brand color-grade applied to
   every <img>/<video> on the site, plus a 1px inset border so photography
   never sits at a bare native crop. Filter-based so it works on any image
   regardless of markup/wrapper structure.
   ========================================================================== */
.photo-grade {
  filter: saturate(0.9) sepia(0.1) hue-rotate(-8deg) contrast(1.02) brightness(1.01);
  box-shadow: inset 0 0 0 1px rgba(59, 58, 51, 0.08);
}

/* ==========================================================================
   3. Staggered reveal — entrances only, --ease-out-expo, momentum-then-
   settle. Replaces the old generic ".8s ease" fade. Stagger delay itself is
   applied per-element via the --reveal-delay custom property (set inline by
   script.js, capped at 6 items / 40-60ms apart).
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition-property: opacity, transform;
  transition-duration: var(--duration-slow);
  transition-timing-function: var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variant: reveal with a slight scale settle, for feature/hero art */
.reveal-pop {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition-property: opacity, transform;
  transition-duration: var(--duration-slow);
  transition-timing-function: var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-pop.reveal-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Variant: reveal from the side, for asymmetric split compositions */
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition-property: opacity, transform;
  transition-duration: var(--duration-slow);
  transition-timing-function: var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-left.reveal-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition-property: opacity, transform;
  transition-duration: var(--duration-slow);
  transition-timing-function: var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-right.reveal-visible { opacity: 1; transform: translateX(0); }

/* ==========================================================================
   4. State-change utilities — toggles/modals/drawers use --ease-in-out-quart
   ========================================================================== */
.state-transition {
  transition-property: opacity, transform;
  transition-duration: var(--duration-base);
  transition-timing-function: var(--ease-in-out-quart);
}
.state-transition-slow {
  transition-property: opacity, transform;
  transition-duration: var(--duration-slow);
  transition-timing-function: var(--ease-in-out-quart);
}

/* Gesture/overshoot — mocked spring for anything drag- or swipe-adjacent */
.spring-settle {
  transition-property: transform;
  transition-duration: 350ms;
  transition-timing-function: var(--ease-spring);
}

/* ==========================================================================
   5. Small purposeful-motion moments named in the spec
   ========================================================================== */
@keyframes pulse-once {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.pulse-once { animation: pulse-once var(--duration-slow) var(--ease-out-expo); }

@keyframes collapse-slide {
  0% { opacity: 1; transform: translateX(0); max-height: 200px; }
  60% { opacity: 0; transform: translateX(16px); }
  100% { opacity: 0; transform: translateX(16px); max-height: 0; }
}
.collapse-slide-out { animation: collapse-slide var(--duration-base) var(--ease-in-out-quart) forwards; }

/* ==========================================================================
   6. Token compliance for the Tailwind CDN's own transition utilities.
   Every page still uses Tailwind's transition-colors/transition-all/duration-*
   shorthands for simple things (link color hovers, etc.) — rather than hand-
   editing hundreds of individual class lists, retarget those utilities here
   so the *entire* site's transitions resolve to the spec's tokens with zero
   ad hoc values, regardless of markup. Entrances/hover default to
   --ease-out-expo; toggles get --ease-in-out-quart below.
   ========================================================================== */
.transition-colors,
.transition-all,
.transition-transform,
.transition-opacity,
.transition-shadow,
.transition {
  transition-timing-function: var(--ease-out-expo) !important;
  transition-duration: var(--duration-fast) !important;
}
.duration-200,
.duration-300 { transition-duration: var(--duration-fast) !important; }
.duration-500,
.duration-700 { transition-duration: var(--duration-slow) !important; }

/* Toggles (accordions, mobile menu, modals) are state changes, not entrances */
[data-accordion-trigger],
[data-accordion-icon],
[data-accordion-trigger] *,
#hamburger-btn,
#hamburger-btn * {
  transition-timing-function: var(--ease-in-out-quart) !important;
  transition-duration: var(--duration-base) !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-pop, .reveal-left, .reveal-right {
    transition-duration: 1ms !important;
    transform: none !important;
  }
  .hover-lift, .hover-lift-lg, .hover-tilt, .spring-settle, .pulse-once, .collapse-slide-out {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}