/* ============================================================
   selfLove.Yoga — 09 Tech-Forward SaaS Dashboard
   Taste & Motion System (v2) — concrete tokens, applied literally.
   Loaded after Tailwind CDN + styles.css so it can override defaults.
   See /TASTE-AND-MOTION-SYSTEM.md for the spec these tokens implement.
   ============================================================ */

:root{
  /* -- Motion tokens (spec section 4) -- */
  --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: slight overshoot then settle */
  --duration-fast: 150ms;   /* hover, button press */
  --duration-base: 250ms;   /* card reveals, dropdowns */
  --duration-slow: 400ms;   /* modals, page-level transitions */
}

/* ============================================================
   1. HOVER — transform-only, never color/opacity-only
   translateY(-2px) + shadow change, 150ms, ease-out-expo.
   Apply to every clickable card/button.
   ============================================================ */
.hover-rise{
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) var(--ease-out-expo);
  will-change: transform;
}
.hover-rise:hover,
.hover-rise:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(34,211,238,0.35);
}
.hover-rise:active{
  transform: translateY(0);
  transition-duration: 80ms;
}

/* Card variant: slightly larger shadow spread for bigger surfaces, same 2px lift */
.hover-rise-card{
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) var(--ease-out-expo);
  will-change: transform;
}
.hover-rise-card:hover,
.hover-rise-card:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 20px 32px -16px rgba(34,211,238,0.28);
  border-color: rgba(34,211,238,0.4);
}

/* Note: the legacy .hover-lift card-hover class lives in styles.css and has
   been rewritten there to the spec-exact values (transform-only, 150ms,
   ease-out-expo, translateY(-2px)) using these same tokens — not duplicated
   here to avoid two competing sources of truth for one selector. */

@media (prefers-reduced-motion: reduce){
  .hover-rise, .hover-rise-card{ transition: none; }
  .hover-rise:hover, .hover-rise:focus-visible,
  .hover-rise-card:hover, .hover-rise-card:focus-within{ transform: none; }
}

/* ============================================================
   2. IMAGERY — brand color-grade overlay (spec section 6)
   Single consistent cyan/violet-tinted gradient over every photo/video,
   ~8-15% opacity. Wrap the <img>/<video> in .photo-frame.
   ============================================================ */
.photo-frame{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.photo-frame > img,
.photo-frame > video{
  display: block;
  width: 100%;
  height: 100%;
}
.photo-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    rgba(34,211,238,0.14) 0%,
    rgba(167,139,250,0.10) 55%,
    rgba(15,23,42,0.12) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
/* Photos not already using rounded corners get a subtle 1px inset border for depth */
.photo-frame::before{
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(226,232,240,0.12);
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   3. STAGGERED REVEAL — entrances use ease-out-expo, staggered
   40-60ms per child, capped at 6 items (spec sections 4 & 5).
   Base .reveal / .in-view (toggled by the IntersectionObserver in script.js)
   is defined in styles.css using these same tokens; .stagger below adds
   the per-child delay on top of it.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* Stagger group: direct children get incremental delay (50ms step, capped at 6). */
.stagger > *{
  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(6),
.stagger > *:nth-child(n+6){ transition-delay: 250ms; }

/* ============================================================
   4. STATE-CHANGE MOTION — toggles/modals use ease-in-out-quart.
   .accordion-chevron / .accordion-panel / #mobile-menu are defined in
   styles.css using these tokens; .state-transition is a general-purpose
   utility for any other open/close moment (e.g. checkout success swap).
   ============================================================ */
.state-transition{
  transition: max-height var(--duration-slow) var(--ease-in-out-quart),
              opacity var(--duration-slow) var(--ease-in-out-quart),
              transform var(--duration-slow) var(--ease-in-out-quart);
}

/* ============================================================
   5. SPRING / GESTURE MOTION — badge pop, toast, drag-like moments.
   #toast's transition itself lives in styles.css (same tokens); this
   utility is for any other element that needs a spring-signature entrance.
   ============================================================ */
.spring-pop{
  animation: spring-pop var(--duration-slow) var(--ease-spring);
}
@keyframes spring-pop{
  0%{ transform: scale(0.85); opacity: 0.6; }
  100%{ transform: scale(1); opacity: 1; }
}

/* ============================================================
   6. COMPOSITION — hero panel break-out utility (index.html / ytt.html)
   Lets the floating dashboard card overlap the hero video's bounding
   box instead of sitting neatly centered inside the grid column.
   ============================================================ */
.hero-panel-breakout{
  position: relative;
  z-index: 20;
}
@media (min-width: 1024px){
  .hero-panel-breakout{
    /* Anchored to the hero content container's own bottom edge (its nearest
       positioned ancestor) rather than nudged with a guessed transform —
       robust regardless of how tall the hero's text column is. A negative
       bottom pushes the card past that edge so it visibly overlaps the
       section below: real depth/layering instead of a neatly-contained
       grid column. -64px is on the 8pt scale. */
    position: absolute;
    right: 0;
    bottom: -64px;
  }
}