/* =====================================================================
   selfLove.Yoga — Taste & Motion System
   Style 07: Bold Editorial Brutalist
   Implements /TASTE-AND-MOTION-SYSTEM.md (v2, "impeccable" pass) verbatim.
   Loaded AFTER the Tailwind CDN script, BEFORE each page's inline
   <style> block, so page-level overrides remain possible but the
   canonical tokens/utilities below are the single source of truth.
   ===================================================================== */

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

/* ---------------------------------------------------------------------
   1. HOVER — transform-only, 150ms, never color/opacity-only on
      cards or buttons (checklist item: "Hover/focus states exist on
      every clickable element, transform-based").
   --------------------------------------------------------------------- */
.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(-2px);
  box-shadow: 4px 4px 0 0 #000;
}
.hover-lift-invert:hover,
.hover-lift-invert:focus-visible {
  box-shadow: 4px 4px 0 0 #E5FF00;
}

/* Retokenize the site's existing hard-shadow card/button system so its
   transitions use the tokens above instead of ad hoc ".15s ease". */
.card-hard,
.btn-hard {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo) !important;
}

/* ---------------------------------------------------------------------
   2. IMAGERY — brand color-grade overlay + treated frame.
      Apply `photo-frame` to the element wrapping every <img>/<video>.
      ~10% opacity acid/pink duotone gradient, consistent site-wide, so
      stock photography reads as shot-for-this-brand. Never show a photo
      at native crop without: rounded corner OR hard border + the grade.
   --------------------------------------------------------------------- */
.photo-frame {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}
.photo-frame > img,
.photo-frame > video {
  display: block;
  width: 100%;
  height: 100%;
}
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(155deg,
    rgba(255, 62, 165, 0.14) 0%,
    rgba(0, 0, 0, 0) 42%,
    rgba(229, 255, 0, 0.12) 100%);
  mix-blend-mode: multiply;
}
/* Optional inset border variant for photos shown without a hard black
   border elsewhere in their markup. */
.photo-frame-inset::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------------
   3. STAGGERED REVEAL — real entrance choreography, not a generic
      fade-in. `.reveal` elements sitting as direct children of a
      `.stagger-grid` container pick up an incremental transition-delay
      (40-60ms per item, capped after the 6th) so a row of cards arrives
      as a considered sequence instead of a single simultaneous flash.
   --------------------------------------------------------------------- */
.stagger-grid > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger-grid > .reveal:nth-child(2) { transition-delay: 50ms; }
.stagger-grid > .reveal:nth-child(3) { transition-delay: 100ms; }
.stagger-grid > .reveal:nth-child(4) { transition-delay: 150ms; }
.stagger-grid > .reveal:nth-child(5) { transition-delay: 200ms; }
.stagger-grid > .reveal:nth-child(6),
.stagger-grid > .reveal:nth-child(n+7) { transition-delay: 240ms; }

/* Standalone entrance (also used as the base for staggered items above).
   Retokenized: --duration-slow / --ease-out-expo, 24px travel (8pt scale)
   instead of the old ad hoc 28px / .6s ease. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  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);
}

/* A faster, smaller-throw variant for tightly packed staggered grids
   (icon tiles, curriculum chips) where a 24px throw reads as too slow. */
.reveal-sm {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-base) var(--ease-out-expo),
              transform var(--duration-base) var(--ease-out-expo);
}
.reveal-sm.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Interactive state-change helper (accordions, modals, toggles) per the
   spec's "state changes use --ease-in-out-quart" rule. */
.state-transition {
  transition-timing-function: var(--ease-in-out-quart);
  transition-duration: var(--duration-base);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-sm,
  .stagger-grid > .reveal,
  .hover-lift,
  .card-hard,
  .btn-hard,
  .photo-frame,
  .marquee-track {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
  }
  .reveal,
  .reveal-sm,
  .stagger-grid > .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}