/**
 * SOULÉPUREVANA — Motion System CSS Primitives (Phase 15)
 * =========================================================
 * Declarative animation classes triggered by IntersectionObserver.
 * Apply `data-motion="fadeIn"` (or any primitive) to any element.
 * The JS controller adds `.is-visible` when the element enters viewport.
 *
 * Phase 15 optimizations:
 *   - All transitions target ONLY composited props (transform, opacity)
 *   - will-change applied transiently (added before, removed after animation)
 *   - CSS containment on card components limits repaint scope
 *   - All motion gated behind @media (prefers-reduced-motion: no-preference)
 *
 * Principles: smooth · fast · premium · purposeful · subtle
 *
 * USAGE:
 *   <div data-motion="fadeIn">              — Fade in
 *   <div data-motion="slideUp">             — Slide up from below
 *   <div data-motion="scaleIn">             — Scale from 0.85 → 1
 *   <div data-motion="reveal">              — Clip-path wipe reveal
 *   <div data-motion="imageReveal">         — Image with overlay curtain
 *   <div data-motion="textReveal">          — Per-line staggered text
 *   <div data-motion="fadeIn" data-delay="200"> — With delay (ms)
 *   <div data-motion="slideUp" data-stagger="100"> — Stagger children
 */

/* ── CSS Containment for card-like elements ──────────────────────── */
.product-card,
.mineral-card,
.fd-card,
.bs-item,
.bp-pillar,
.ritual-step {
  contain: layout style;
}

/* ═══════════════════════════════════════════════════════════════
   BASE: Hidden state for all motion elements before trigger
   ═══════════════════════════════════════════════════════════════ */
[data-motion] {
  --motion-duration: 0.7s;
  --motion-delay: 0s;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */
}

/* ═══════════════════════════════════════════════════════════════
   1. FADE IN
   ═══════════════════════════════════════════════════════════════ */
[data-motion="fadeIn"] {
  opacity: 0;
  transition:
    opacity var(--motion-duration) var(--motion-ease) var(--motion-delay);
}

[data-motion="fadeIn"].is-visible {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   2. SLIDE UP
   ═══════════════════════════════════════════════════════════════ */
[data-motion="slideUp"] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   var(--motion-duration) var(--motion-ease) var(--motion-delay),
    transform var(--motion-duration) var(--motion-ease) var(--motion-delay);
}

[data-motion="slideUp"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   3. SLIDE LEFT / RIGHT
   ═══════════════════════════════════════════════════════════════ */
[data-motion="slideLeft"] {
  opacity: 0;
  transform: translateX(60px);
  transition:
    opacity   var(--motion-duration) var(--motion-ease) var(--motion-delay),
    transform var(--motion-duration) var(--motion-ease) var(--motion-delay);
}

[data-motion="slideLeft"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-motion="slideRight"] {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity   var(--motion-duration) var(--motion-ease) var(--motion-delay),
    transform var(--motion-duration) var(--motion-ease) var(--motion-delay);
}

[data-motion="slideRight"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ═══════════════════════════════════════════════════════════════
   4. SCALE IN
   ═══════════════════════════════════════════════════════════════ */
[data-motion="scaleIn"] {
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity   var(--motion-duration) var(--motion-ease) var(--motion-delay),
    transform var(--motion-duration) var(--motion-ease) var(--motion-delay);
}

[data-motion="scaleIn"].is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ═══════════════════════════════════════════════════════════════
   5. REVEAL (clip-path wipe)
   ═══════════════════════════════════════════════════════════════ */
[data-motion="reveal"] {
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path calc(var(--motion-duration) * 1.2) var(--motion-ease) var(--motion-delay);
}

[data-motion="reveal"].is-visible {
  clip-path: inset(0 0 0% 0);
}

/* Horizontal reveal variant */
[data-motion="revealX"] {
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path calc(var(--motion-duration) * 1.2) var(--motion-ease) var(--motion-delay);
}

[data-motion="revealX"].is-visible {
  clip-path: inset(0 0% 0 0);
}

/* ═══════════════════════════════════════════════════════════════
   6. IMAGE REVEAL (overlay curtain that wipes away)
   ═══════════════════════════════════════════════════════════════ */
[data-motion="imageReveal"] {
  position: relative;
  overflow: hidden;
}

[data-motion="imageReveal"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-forest-deep, #072515);
  transform-origin: right;
  transform: scaleX(1);
  transition:
    transform calc(var(--motion-duration) * 1.3) var(--motion-ease) var(--motion-delay);
  z-index: 2;
}

[data-motion="imageReveal"] > img,
[data-motion="imageReveal"] > picture,
[data-motion="imageReveal"] > video {
  transform: scale(1.15);
  transition:
    transform calc(var(--motion-duration) * 1.8) var(--motion-ease) var(--motion-delay);
}

[data-motion="imageReveal"].is-visible::after {
  transform: scaleX(0);
}

[data-motion="imageReveal"].is-visible > img,
[data-motion="imageReveal"].is-visible > picture,
[data-motion="imageReveal"].is-visible > video {
  transform: scale(1);
}

/* ═══════════════════════════════════════════════════════════════
   7. TEXT REVEAL (line-by-line stagger via children)
   ═══════════════════════════════════════════════════════════════ */
[data-motion="textReveal"] {
  overflow: hidden;
}

[data-motion="textReveal"] > *,
[data-motion="textReveal"] .motion-word {
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity   0.55s var(--motion-ease),
    transform 0.55s var(--motion-ease);
}

[data-motion="textReveal"].is-visible > *,
[data-motion="textReveal"].is-visible .motion-word {
  opacity: 1;
  transform: translateY(0);
}

/* Auto-stagger children (1st, 2nd, 3rd…) */
[data-motion="textReveal"].is-visible > *:nth-child(1) { transition-delay: calc(var(--motion-delay, 0s) + 0.00s); }
[data-motion="textReveal"].is-visible > *:nth-child(2) { transition-delay: calc(var(--motion-delay, 0s) + 0.08s); }
[data-motion="textReveal"].is-visible > *:nth-child(3) { transition-delay: calc(var(--motion-delay, 0s) + 0.16s); }
[data-motion="textReveal"].is-visible > *:nth-child(4) { transition-delay: calc(var(--motion-delay, 0s) + 0.24s); }
[data-motion="textReveal"].is-visible > *:nth-child(5) { transition-delay: calc(var(--motion-delay, 0s) + 0.32s); }
[data-motion="textReveal"].is-visible > *:nth-child(6) { transition-delay: calc(var(--motion-delay, 0s) + 0.40s); }
[data-motion="textReveal"].is-visible > *:nth-child(7) { transition-delay: calc(var(--motion-delay, 0s) + 0.48s); }
[data-motion="textReveal"].is-visible > *:nth-child(8) { transition-delay: calc(var(--motion-delay, 0s) + 0.56s); }

/* ═══════════════════════════════════════════════════════════════
   8. PARALLAX (controlled via JS inline style --parallax-y)
   ═══════════════════════════════════════════════════════════════ */
[data-motion="parallax"] {
  will-change: transform;
  transform: translateY(var(--parallax-y, 0px));
  transition: none; /* Parallax is frame-synced, not CSS-transitioned */
}

/* ═══════════════════════════════════════════════════════════════
   9. MAGNETIC BUTTON (hover displacement via JS inline styles)
   ═══════════════════════════════════════════════════════════════ */
[data-motion="magnetic"] {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  cursor: pointer;
}

[data-motion="magnetic"]:active {
  transition-duration: 0.1s;
}

/* ═══════════════════════════════════════════════════════════════
   STAGGER UTILITY: Apply to a parent to auto-stagger children
   <div data-motion="stagger" data-stagger="80">
     <div data-motion="slideUp">…</div>
     <div data-motion="slideUp">…</div>
   </div>
   ═══════════════════════════════════════════════════════════════ */
/* Stagger delays are applied dynamically by the JS controller */

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION: Full accessibility compliance
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-motion] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  [data-motion]::after {
    transform: scaleX(0) !important;
    transition: none !important;
  }

  [data-motion] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-motion="parallax"] {
    --parallax-y: 0px !important;
  }
}