/* ==========================================================================
   selfLove.Yoga — Taste & Motion System implementation (v2 "impeccable" pass)
   Style 08: Personal Brand Warm
   Implements: TASTE-AND-MOTION-SYSTEM.md sections 4 (Motion), 6 (Imagery)
   plus reusable utilities for sections 1 (Spacing) and 5 (Composition).
   Loaded after the Tailwind CDN script and before each page's inline
   <style> block so page-specific rules layer on top deliberately.
   ========================================================================== */

:root {
  /* -- Kowalski-style motion tokens (verbatim from spec, do not improvise) -- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);      /* entrances */
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); /* toggles / state changes */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);    /* gesture / physical approximation */
  --duration-fast: 150ms;  /* hover, button press */
  --duration-base: 250ms;  /* card reveals, dropdowns */
  --duration-slow: 400ms;  /* modals, page-level transitions */
}

/* ==========================================================================
   1. HOVER / FOCUS — transform-only (translateY(-2px) + shadow), never color-only
   ========================================================================== */
.tc-hover {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo);
}
.tc-hover:hover,
.tc-hover:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(43, 43, 43, 0.32);
}
.tc-hover:active {
  transform: translateY(-1px);
  transition-duration: calc(var(--duration-fast) / 2);
}

/* Small/tight variant for compact chips, icon buttons, table rows */
.tc-hover-sm {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo);
}
.tc-hover-sm:hover,
.tc-hover-sm:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -10px rgba(43, 43, 43, 0.28);
}

/* Text links: animated underline via transform (scaleX), not a color swap.
   Use on nav items / footer links that currently only do color transitions. */
.tc-link {
  position: relative;
  transition: color var(--duration-fast) var(--ease-out-expo);
}
.tc-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.tc-link:hover::after,
.tc-link:focus-visible::after {
  transform: scaleX(1);
}
.tc-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* State-change toggle (accordions, mobile menu, module-card check) */
.tc-toggle {
  transition: transform var(--duration-base) var(--ease-in-out-quart),
              background-color var(--duration-base) var(--ease-in-out-quart),
              box-shadow var(--duration-base) var(--ease-in-out-quart);
}
.tc-toggle-pulse {
  animation: tc-pulse var(--duration-slow) var(--ease-spring);
}
@keyframes tc-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   2. IMAGERY — brand color-grade treatment applied directly to <img>/<video>.
   A true overlay pseudo-element can't paint above replaced-element content,
   so the "gradient overlay" is implemented as two offset inset box-shadows
   (rose from one corner, ink from the opposite corner — a directional,
   brand-tinted blend at ~10-14% strength) plus a light tonal filter, giving
   every photo the same shot-for-this-brand grade without any markup change.
   A 1px inset line stands in for the spec's "1px inset border" requirement.
   ========================================================================== */
.tc-grade {
  filter: saturate(1.06) sepia(0.04) contrast(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(43, 43, 43, 0.07),
    inset 70px -70px 120px -40px rgba(217, 136, 128, 0.16),
    inset -70px 70px 120px -40px rgba(43, 43, 43, 0.12);
}
/* Smaller radius overlay for compact thumbnails so the tint doesn't wash out */
.tc-grade-sm {
  filter: saturate(1.06) sepia(0.04) contrast(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(43, 43, 43, 0.07),
    inset 24px -24px 48px -14px rgba(217, 136, 128, 0.16),
    inset -24px 24px 48px -14px rgba(43, 43, 43, 0.12);
}

/* ==========================================================================
   3. REVEAL / STAGGER — entrances use --ease-out-expo, never a generic fade.
   Works with the existing IntersectionObserver in script.js, which adds
   "reveal-in" to any ".reveal" or ".stagger" element that enters the
   viewport. Children of .stagger step in 50ms apart, capped at 6 items
   per the spec (past that, all remaining items share the 6th item's delay).
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}
.reveal.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

.stagger > * {
  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 > * {
  opacity: 1;
  transform: translateY(0);
}
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 50ms; }
.stagger > *:nth-child(3) { transition-delay: 100ms; }
.stagger > *:nth-child(4) { transition-delay: 150ms; }
.stagger > *:nth-child(5) { transition-delay: 200ms; }
.stagger > *:nth-child(n+6) { transition-delay: 250ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger > * {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tc-hover,
  .tc-hover-sm,
  .tc-link::after,
  .tc-toggle,
  .tc-toggle-pulse {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   4. COMPOSITION helpers — oversized handwritten watermark word used as a
   background layer, and a "break the container" utility for photos that
   bleed past the max-w content column into the margin.
   ========================================================================== */
.tc-watermark {
  position: absolute;
  font-family: "Caveat", cursive;
  font-weight: 600;
  line-height: 1;
  color: #2B2B2B;
  opacity: 0.05;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.tc-bleed-right {
  width: 100vw;
  margin-right: calc(50% - 50vw);
}
.tc-bleed-left {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ==========================================================================
   5. Token-ized replacements for a couple of recurring ad hoc Tailwind
   transition utilities (bare `duration-300 ease-in-out` / bare
   `transition-transform`), so every transition on the site — including
   the mobile-menu accordion and FAQ/toggle icons — resolves to the
   spec's tokens instead of Tailwind's unrelated defaults.
   ========================================================================== */
.tc-menu-transition {
  transition: max-height var(--duration-base) var(--ease-in-out-quart),
              opacity var(--duration-base) var(--ease-in-out-quart);
}
.tc-faq-icon {
  transition: transform var(--duration-fast) var(--ease-in-out-quart);
}