/* ============================================================================= */
/* JWT PICKLEBALL OS — CMS MOTION ENGINE: CORE STYLES & ANIMATIONS               */
/*                                                                               */
/* FILE LOCATION:  /public/assets/cms/css/motion/motion.css                          */
/*                                                                               */
/* FILE PURPOSE:                                                                 */
/*   Defines all CSS keyframe animations and initial states for the CMS          */
/*   on-scroll animation system. Works in conjunction with motion.js (IntersectionObserver). */
/*                                                                               */
/* ARCHITECTURE:                                                                 */
/*   [data-motion="<type>"]  — Initial hidden state + animation type             */
/*   .is-visible             — Trigger class added by motion.js on viewport enter */
/*   data-motion-delay       — Per-element delay override (ms: 100–2000)         */
/*   data-motion-duration    — Per-element duration override (fast/normal/slow/epic) */
/*   data-motion-easing      — Per-element easing override (ease/spring/expo/...)*/
/*   data-motion-stagger     — Container: stagger-children-N (N = 50..400ms)     */
/*   data-motion-once        — Set to "false" to re-animate on each scroll pass  */
/*                                                                               */
/* ANIMATION CATALOGUE:                                                         */
/*   Fade  : fade, fade-up, fade-down, fade-left, fade-right                    */
/*   Fade+ : fade-up-sm, fade-down-sm, fade-left-sm, fade-right-sm              */
/*   Slide : slide-up, slide-down, slide-left, slide-right                      */
/*   Zoom  : zoom-in, zoom-in-sm, zoom-out, zoom-out-sm                         */
/*   Flip  : flip-up, flip-down, flip-left, flip-right                          */
/*   Blur  : blur-in, blur-in-up, blur-in-down, blur-in-left, blur-in-right     */
/*   Rotate: rotate-in-cw, rotate-in-ccw, rotate-in-up, rotate-in-down          */
/*   Skew  : skew-left, skew-right, skew-up                                     */
/*   Clip  : clip-reveal-up, clip-reveal-down, clip-reveal-left,                */
/*           clip-reveal-right, clip-reveal-center-h, clip-reveal-center-v      */
/*   Scale : scale-x-in, scale-y-in                                             */
/*   Bounce: bounce-in, bounce-up, bounce-in-left, bounce-in-right              */
/*   Spring: spring-up, spring-scale, spring-left, spring-right                 */
/*   Swing : swing-in-top, swing-in-bottom                                      */
/*   Roll  : roll-in-left, roll-in-right                                        */
/*   Rise  : rise-up, rise-up-blurred                                           */
/*   Glow  : glow-in, glow-pulse (continuous)                                   */
/*   Misc  : float (continuous), pulse (continuous), shimmer-sweep (continuous) */
/*                                                                               */
/* STAGGER UTILITIES:                                                            */
/*   data-motion-stagger="stagger-children-50"  — 50ms per child                */
/*   data-motion-stagger="stagger-children-100" — 100ms per child               */
/*   data-motion-stagger="stagger-children-150" — 150ms per child               */
/*   data-motion-stagger="stagger-children-200" — 200ms per child               */
/*   data-motion-stagger="stagger-children-300" — 300ms per child               */
/*   data-motion-stagger="stagger-children-400" — 400ms per child               */
/*                                                                             */
/* CHANGE LOG:                                                                 */
/*   - 02-03-2026 | Initial creation | Courtious.com                   */
/*                                                                             */
/* OWNERSHIP:                                                                  */
/*   - Team: Courtious.com                                                   */
/*   - Contact: contact@courtious.com                           */
/*                                                                             */
/* ============================================================================= */


/* ============================================================
 * §0. CSS CUSTOM PROPERTIES — MOTION DEFAULTS
 * All overridable via data attributes or inline --motion-* vars
 * ============================================================ */

:root {
  /* Duration tokens */
  --motion-duration-instant:  80ms;
  --motion-duration-fast:     150ms;
  --motion-duration-normal:   480ms;
  --motion-duration-slow:     700ms;
  --motion-duration-epic:     1100ms;

  /* Easing tokens */
  --motion-ease-out:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-ease-in:           cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --motion-ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-expo-out:     cubic-bezier(0.19, 1, 0.22, 1);
  --motion-ease-expo-in-out:  cubic-bezier(0.87, 0, 0.13, 1);
  --motion-ease-circ-out:     cubic-bezier(0, 0.55, 0.45, 1);
  --motion-ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-ease-bounce:       cubic-bezier(0.34, 1.72, 0.64, 1);
  --motion-ease-back-in-out:  cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --motion-ease-linear:       linear;

  /* Base motion config */
  --motion-distance-sm:   20px;
  --motion-distance-md:   40px;
  --motion-distance-lg:   80px;
  --motion-distance-xl:   120px;
  --motion-distance-full: 100%;

  /* Stagger base unit */
  --motion-stagger-unit: 60ms;
}


/* ============================================================
 * §1. BASE STATE — ALL [data-motion] ELEMENTS
 * ============================================================ */

[data-motion] {
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
  /* Default transition — overridden per-type below */
  transition:
    opacity     var(--motion-duration-normal) var(--motion-ease-expo-out),
    transform   var(--motion-duration-normal) var(--motion-ease-expo-out),
    filter      var(--motion-duration-normal) var(--motion-ease-expo-out),
    clip-path   var(--motion-duration-normal) var(--motion-ease-expo-out);
}

/* Visible state — always restores to natural values */
[data-motion].is-visible {
  opacity:    1 !important;
  visibility: visible !important;
  transform:  none !important;
  filter:     none !important;
  clip-path:  none !important;
}


/* ============================================================
 * §2. DURATION OVERRIDES  [data-motion-duration]
 * ============================================================ */

[data-motion-duration="fast"]   { transition-duration: var(--motion-duration-fast)   !important; }
[data-motion-duration="normal"] { transition-duration: var(--motion-duration-normal) !important; }
[data-motion-duration="slow"]   { transition-duration: var(--motion-duration-slow)   !important; }
[data-motion-duration="epic"]   { transition-duration: var(--motion-duration-epic)   !important; }


/* ============================================================
 * §3. EASING OVERRIDES  [data-motion-easing]
 * ============================================================ */

[data-motion-easing="ease-out"]       { transition-timing-function: var(--motion-ease-out)       !important; }
[data-motion-easing="expo-out"]       { transition-timing-function: var(--motion-ease-expo-out)  !important; }
[data-motion-easing="expo-in-out"]    { transition-timing-function: var(--motion-ease-expo-in-out) !important; }
[data-motion-easing="circ-out"]       { transition-timing-function: var(--motion-ease-circ-out)  !important; }
[data-motion-easing="spring"]         { transition-timing-function: var(--motion-ease-spring)    !important; }
[data-motion-easing="bounce"]         { transition-timing-function: var(--motion-ease-bounce)    !important; }
[data-motion-easing="back-in-out"]    { transition-timing-function: var(--motion-ease-back-in-out) !important; }
[data-motion-easing="linear"]         { transition-timing-function: var(--motion-ease-linear)    !important; }


/* ============================================================
 * §4. DELAY OVERRIDES  [data-motion-delay]
 * ============================================================ */

[data-motion-delay="0"]    { transition-delay: 0ms !important; }
[data-motion-delay="50"]   { transition-delay: 50ms; }
[data-motion-delay="100"]  { transition-delay: 100ms; }
[data-motion-delay="150"]  { transition-delay: 150ms; }
[data-motion-delay="200"]  { transition-delay: 200ms; }
[data-motion-delay="250"]  { transition-delay: 250ms; }
[data-motion-delay="300"]  { transition-delay: 300ms; }
[data-motion-delay="400"]  { transition-delay: 400ms; }
[data-motion-delay="500"]  { transition-delay: 500ms; }
[data-motion-delay="600"]  { transition-delay: 600ms; }
[data-motion-delay="700"]  { transition-delay: 700ms; }
[data-motion-delay="800"]  { transition-delay: 800ms; }
[data-motion-delay="900"]  { transition-delay: 900ms; }
[data-motion-delay="1000"] { transition-delay: 1000ms; }
[data-motion-delay="1200"] { transition-delay: 1200ms; }
[data-motion-delay="1500"] { transition-delay: 1500ms; }
[data-motion-delay="2000"] { transition-delay: 2000ms; }


/* ============================================================
 * §5. STAGGER UTILITIES  [data-motion-stagger]
 * Applied to a container — auto-delays direct [data-motion] children
 * ============================================================ */

/* 50ms stagger */
[data-motion-stagger="stagger-children-50"] > [data-motion]:nth-child(1)  { transition-delay: calc(50ms  * 1); }
[data-motion-stagger="stagger-children-50"] > [data-motion]:nth-child(2)  { transition-delay: calc(50ms  * 2); }
[data-motion-stagger="stagger-children-50"] > [data-motion]:nth-child(3)  { transition-delay: calc(50ms  * 3); }
[data-motion-stagger="stagger-children-50"] > [data-motion]:nth-child(4)  { transition-delay: calc(50ms  * 4); }
[data-motion-stagger="stagger-children-50"] > [data-motion]:nth-child(5)  { transition-delay: calc(50ms  * 5); }
[data-motion-stagger="stagger-children-50"] > [data-motion]:nth-child(6)  { transition-delay: calc(50ms  * 6); }
[data-motion-stagger="stagger-children-50"] > [data-motion]:nth-child(7)  { transition-delay: calc(50ms  * 7); }
[data-motion-stagger="stagger-children-50"] > [data-motion]:nth-child(8)  { transition-delay: calc(50ms  * 8); }
[data-motion-stagger="stagger-children-50"] > [data-motion]:nth-child(9)  { transition-delay: calc(50ms  * 9); }
[data-motion-stagger="stagger-children-50"] > [data-motion]:nth-child(10) { transition-delay: calc(50ms  * 10); }
[data-motion-stagger="stagger-children-50"] > [data-motion]:nth-child(n+11) { transition-delay: calc(50ms * 10); }

/* 100ms stagger */
[data-motion-stagger="stagger-children-100"] > [data-motion]:nth-child(1)  { transition-delay: calc(100ms * 1); }
[data-motion-stagger="stagger-children-100"] > [data-motion]:nth-child(2)  { transition-delay: calc(100ms * 2); }
[data-motion-stagger="stagger-children-100"] > [data-motion]:nth-child(3)  { transition-delay: calc(100ms * 3); }
[data-motion-stagger="stagger-children-100"] > [data-motion]:nth-child(4)  { transition-delay: calc(100ms * 4); }
[data-motion-stagger="stagger-children-100"] > [data-motion]:nth-child(5)  { transition-delay: calc(100ms * 5); }
[data-motion-stagger="stagger-children-100"] > [data-motion]:nth-child(6)  { transition-delay: calc(100ms * 6); }
[data-motion-stagger="stagger-children-100"] > [data-motion]:nth-child(7)  { transition-delay: calc(100ms * 7); }
[data-motion-stagger="stagger-children-100"] > [data-motion]:nth-child(8)  { transition-delay: calc(100ms * 8); }
[data-motion-stagger="stagger-children-100"] > [data-motion]:nth-child(9)  { transition-delay: calc(100ms * 9); }
[data-motion-stagger="stagger-children-100"] > [data-motion]:nth-child(10) { transition-delay: calc(100ms * 10); }
[data-motion-stagger="stagger-children-100"] > [data-motion]:nth-child(n+11) { transition-delay: calc(100ms * 10); }

/* 150ms stagger */
[data-motion-stagger="stagger-children-150"] > [data-motion]:nth-child(1)  { transition-delay: calc(150ms * 1); }
[data-motion-stagger="stagger-children-150"] > [data-motion]:nth-child(2)  { transition-delay: calc(150ms * 2); }
[data-motion-stagger="stagger-children-150"] > [data-motion]:nth-child(3)  { transition-delay: calc(150ms * 3); }
[data-motion-stagger="stagger-children-150"] > [data-motion]:nth-child(4)  { transition-delay: calc(150ms * 4); }
[data-motion-stagger="stagger-children-150"] > [data-motion]:nth-child(5)  { transition-delay: calc(150ms * 5); }
[data-motion-stagger="stagger-children-150"] > [data-motion]:nth-child(6)  { transition-delay: calc(150ms * 6); }
[data-motion-stagger="stagger-children-150"] > [data-motion]:nth-child(7)  { transition-delay: calc(150ms * 7); }
[data-motion-stagger="stagger-children-150"] > [data-motion]:nth-child(8)  { transition-delay: calc(150ms * 8); }
[data-motion-stagger="stagger-children-150"] > [data-motion]:nth-child(n+9) { transition-delay: calc(150ms * 8); }

/* 200ms stagger */
[data-motion-stagger="stagger-children-200"] > [data-motion]:nth-child(1)  { transition-delay: calc(200ms * 1); }
[data-motion-stagger="stagger-children-200"] > [data-motion]:nth-child(2)  { transition-delay: calc(200ms * 2); }
[data-motion-stagger="stagger-children-200"] > [data-motion]:nth-child(3)  { transition-delay: calc(200ms * 3); }
[data-motion-stagger="stagger-children-200"] > [data-motion]:nth-child(4)  { transition-delay: calc(200ms * 4); }
[data-motion-stagger="stagger-children-200"] > [data-motion]:nth-child(5)  { transition-delay: calc(200ms * 5); }
[data-motion-stagger="stagger-children-200"] > [data-motion]:nth-child(6)  { transition-delay: calc(200ms * 6); }
[data-motion-stagger="stagger-children-200"] > [data-motion]:nth-child(n+7) { transition-delay: calc(200ms * 6); }

/* 300ms stagger */
[data-motion-stagger="stagger-children-300"] > [data-motion]:nth-child(1)  { transition-delay: calc(300ms * 1); }
[data-motion-stagger="stagger-children-300"] > [data-motion]:nth-child(2)  { transition-delay: calc(300ms * 2); }
[data-motion-stagger="stagger-children-300"] > [data-motion]:nth-child(3)  { transition-delay: calc(300ms * 3); }
[data-motion-stagger="stagger-children-300"] > [data-motion]:nth-child(4)  { transition-delay: calc(300ms * 4); }
[data-motion-stagger="stagger-children-300"] > [data-motion]:nth-child(5)  { transition-delay: calc(300ms * 5); }
[data-motion-stagger="stagger-children-300"] > [data-motion]:nth-child(n+6) { transition-delay: calc(300ms * 5); }

/* 400ms stagger */
[data-motion-stagger="stagger-children-400"] > [data-motion]:nth-child(1)  { transition-delay: calc(400ms * 1); }
[data-motion-stagger="stagger-children-400"] > [data-motion]:nth-child(2)  { transition-delay: calc(400ms * 2); }
[data-motion-stagger="stagger-children-400"] > [data-motion]:nth-child(3)  { transition-delay: calc(400ms * 3); }
[data-motion-stagger="stagger-children-400"] > [data-motion]:nth-child(4)  { transition-delay: calc(400ms * 4); }
[data-motion-stagger="stagger-children-400"] > [data-motion]:nth-child(n+5) { transition-delay: calc(400ms * 4); }


/* ============================================================
 * §6. FADE ANIMATIONS
 * ============================================================ */

/* Pure fade — no transform, just opacity */
[data-motion="fade"] {
  transform: none;
}

/* Fade + directional drift (standard distances) */
[data-motion="fade-up"] {
  transform: translateY(var(--motion-distance-md));
}

[data-motion="fade-down"] {
  transform: translateY(calc(var(--motion-distance-md) * -1));
}

[data-motion="fade-left"] {
  transform: translateX(var(--motion-distance-md));
}

[data-motion="fade-right"] {
  transform: translateX(calc(var(--motion-distance-md) * -1));
}

/* Fade + directional drift (subtle / small distances — great for cards) */
[data-motion="fade-up-sm"] {
  transform: translateY(var(--motion-distance-sm));
}

[data-motion="fade-down-sm"] {
  transform: translateY(calc(var(--motion-distance-sm) * -1));
}

[data-motion="fade-left-sm"] {
  transform: translateX(var(--motion-distance-sm));
}

[data-motion="fade-right-sm"] {
  transform: translateX(calc(var(--motion-distance-sm) * -1));
}

/* Fade + directional drift (large, dramatic) */
[data-motion="fade-up-lg"] {
  transform: translateY(var(--motion-distance-xl));
}

[data-motion="fade-down-lg"] {
  transform: translateY(calc(var(--motion-distance-xl) * -1));
}

[data-motion="fade-left-lg"] {
  transform: translateX(var(--motion-distance-xl));
}

[data-motion="fade-right-lg"] {
  transform: translateX(calc(var(--motion-distance-xl) * -1));
}


/* ============================================================
 * §7. SLIDE ANIMATIONS (full viewport travel)
 * ============================================================ */

[data-motion="slide-up"] {
  transform: translateY(var(--motion-distance-full));
  transition-timing-function: var(--motion-ease-expo-out);
}

[data-motion="slide-down"] {
  transform: translateY(calc(var(--motion-distance-full) * -1));
  transition-timing-function: var(--motion-ease-expo-out);
}

[data-motion="slide-left"] {
  transform: translateX(var(--motion-distance-full));
  transition-timing-function: var(--motion-ease-expo-out);
}

[data-motion="slide-right"] {
  transform: translateX(calc(var(--motion-distance-full) * -1));
  transition-timing-function: var(--motion-ease-expo-out);
}


/* ============================================================
 * §8. ZOOM ANIMATIONS
 * ============================================================ */

[data-motion="zoom-in"] {
  transform: scale(0.80);
  transition-timing-function: var(--motion-ease-spring);
}

[data-motion="zoom-in-sm"] {
  transform: scale(0.92);
  transition-timing-function: var(--motion-ease-spring);
}

[data-motion="zoom-in-lg"] {
  transform: scale(0.65);
  transition-timing-function: var(--motion-ease-expo-out);
}

[data-motion="zoom-out"] {
  transform: scale(1.20);
  transition-timing-function: var(--motion-ease-expo-out);
}

[data-motion="zoom-out-sm"] {
  transform: scale(1.08);
  transition-timing-function: var(--motion-ease-expo-out);
}

/* Zoom + fade-up combo */
[data-motion="zoom-up"] {
  transform: scale(0.88) translateY(var(--motion-distance-md));
  transition-timing-function: var(--motion-ease-spring);
}


/* ============================================================
 * §9. FLIP ANIMATIONS (3D perspective)
 * ============================================================ */

[data-motion="flip-up"] {
  transform: perspective(800px) rotateX(-90deg);
  transform-origin: center bottom;
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="flip-down"] {
  transform: perspective(800px) rotateX(90deg);
  transform-origin: center top;
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="flip-left"] {
  transform: perspective(800px) rotateY(-90deg);
  transform-origin: right center;
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="flip-right"] {
  transform: perspective(800px) rotateY(90deg);
  transform-origin: left center;
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}

/* Flip diagonal */
[data-motion="flip-diagonal"] {
  transform: perspective(1000px) rotateX(-45deg) rotateY(-45deg) scale(0.85);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}


/* ============================================================
 * §10. BLUR ANIMATIONS
 * ============================================================ */

[data-motion="blur-in"] {
  transform: none;
  filter: blur(12px);
  transition-timing-function: var(--motion-ease-expo-out);
}

[data-motion="blur-in-up"] {
  transform: translateY(var(--motion-distance-sm));
  filter: blur(10px);
  transition-timing-function: var(--motion-ease-expo-out);
}

[data-motion="blur-in-down"] {
  transform: translateY(calc(var(--motion-distance-sm) * -1));
  filter: blur(10px);
  transition-timing-function: var(--motion-ease-expo-out);
}

[data-motion="blur-in-left"] {
  transform: translateX(var(--motion-distance-sm));
  filter: blur(10px);
  transition-timing-function: var(--motion-ease-expo-out);
}

[data-motion="blur-in-right"] {
  transform: translateX(calc(var(--motion-distance-sm) * -1));
  filter: blur(10px);
  transition-timing-function: var(--motion-ease-expo-out);
}

/* Heavy blur — cinematic/hero usage */
[data-motion="blur-in-heavy"] {
  transform: scale(1.04);
  filter: blur(24px);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-epic);
}


/* ============================================================
 * §11. ROTATE ANIMATIONS
 * ============================================================ */

[data-motion="rotate-in-cw"] {
  transform: rotate(-12deg) scale(0.92);
  transform-origin: center center;
  transition-timing-function: var(--motion-ease-spring);
}

[data-motion="rotate-in-ccw"] {
  transform: rotate(12deg) scale(0.92);
  transform-origin: center center;
  transition-timing-function: var(--motion-ease-spring);
}

/* Rotate from bottom-left / bottom-right corners (card flip feel) */
[data-motion="rotate-in-up"] {
  transform: perspective(800px) rotate(-6deg) translateY(var(--motion-distance-md));
  transform-origin: bottom left;
  transition-timing-function: var(--motion-ease-expo-out);
}

[data-motion="rotate-in-down"] {
  transform: perspective(800px) rotate(6deg) translateY(calc(var(--motion-distance-md) * -1));
  transform-origin: top right;
  transition-timing-function: var(--motion-ease-expo-out);
}

/* Spin-in (full 360° entry — use sparingly for icons/badges) */
[data-motion="spin-in"] {
  transform: rotate(-360deg) scale(0.5);
  transition-timing-function: var(--motion-ease-spring);
  transition-duration: var(--motion-duration-slow);
}


/* ============================================================
 * §12. SKEW ANIMATIONS
 * ============================================================ */

[data-motion="skew-left"] {
  transform: skewX(-12deg) translateX(var(--motion-distance-sm));
  transition-timing-function: var(--motion-ease-expo-out);
}

[data-motion="skew-right"] {
  transform: skewX(12deg) translateX(calc(var(--motion-distance-sm) * -1));
  transition-timing-function: var(--motion-ease-expo-out);
}

[data-motion="skew-up"] {
  transform: skewY(-8deg) translateY(var(--motion-distance-sm));
  transition-timing-function: var(--motion-ease-expo-out);
}

/* Strong skew for headlines and section dividers */
[data-motion="skew-strong"] {
  transform: skewX(-20deg) translateX(var(--motion-distance-md));
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}


/* ============================================================
 * §13. CLIP-PATH REVEAL ANIMATIONS
 * Clip-path is one of the most elegant reveal techniques.
 * Elements clip from a direction and expand to full visibility.
 * ============================================================ */

/* Reveal upward — content slides up into its clip boundary */
[data-motion="clip-reveal-up"] {
  clip-path: inset(100% 0 0 0);
  transform: translateY(var(--motion-distance-sm));
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}

/* Reveal downward */
[data-motion="clip-reveal-down"] {
  clip-path: inset(0 0 100% 0);
  transform: translateY(calc(var(--motion-distance-sm) * -1));
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}

/* Reveal from left */
[data-motion="clip-reveal-left"] {
  clip-path: inset(0 100% 0 0);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}

/* Reveal from right */
[data-motion="clip-reveal-right"] {
  clip-path: inset(0 0 0 100%);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}

/* Reveal from center horizontally — expands outward */
[data-motion="clip-reveal-center-h"] {
  clip-path: inset(0 50% 0 50%);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}

/* Reveal from center vertically — expands outward */
[data-motion="clip-reveal-center-v"] {
  clip-path: inset(50% 0 50% 0);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}

/* Circular reveal — from center point */
[data-motion="clip-reveal-circle"] {
  clip-path: circle(0% at 50% 50%);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}
[data-motion="clip-reveal-circle"].is-visible {
  clip-path: circle(150% at 50% 50%) !important;
}

/* Diagonal wipe */
[data-motion="clip-wipe-diagonal"] {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}
[data-motion="clip-wipe-diagonal"].is-visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}


/* ============================================================
 * §14. SCALE AXIS ANIMATIONS
 * ============================================================ */

/* Scale from left along X axis */
[data-motion="scale-x-in"] {
  transform: scaleX(0);
  transform-origin: left center;
  transition-timing-function: var(--motion-ease-expo-out);
}

/* Scale from right along X axis */
[data-motion="scale-x-in-right"] {
  transform: scaleX(0);
  transform-origin: right center;
  transition-timing-function: var(--motion-ease-expo-out);
}

/* Scale from bottom along Y axis */
[data-motion="scale-y-in"] {
  transform: scaleY(0);
  transform-origin: center bottom;
  transition-timing-function: var(--motion-ease-expo-out);
}

/* Scale from top along Y axis */
[data-motion="scale-y-in-top"] {
  transform: scaleY(0);
  transform-origin: center top;
  transition-timing-function: var(--motion-ease-expo-out);
}

/* Scale from center on both axes */
[data-motion="scale-center"] {
  transform: scale(0);
  transform-origin: center center;
  transition-timing-function: var(--motion-ease-spring);
}


/* ============================================================
 * §15. BOUNCE ANIMATIONS
 * ============================================================ */

[data-motion="bounce-in"] {
  transform: scale(0.3);
  transition-timing-function: var(--motion-ease-bounce);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="bounce-up"] {
  transform: translateY(var(--motion-distance-lg));
  transition-timing-function: var(--motion-ease-bounce);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="bounce-in-left"] {
  transform: translateX(var(--motion-distance-lg));
  transition-timing-function: var(--motion-ease-bounce);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="bounce-in-right"] {
  transform: translateX(calc(var(--motion-distance-lg) * -1));
  transition-timing-function: var(--motion-ease-bounce);
  transition-duration: var(--motion-duration-slow);
}


/* ============================================================
 * §16. SPRING ANIMATIONS (overshoot & settle)
 * ============================================================ */

[data-motion="spring-up"] {
  transform: translateY(var(--motion-distance-md));
  transition-timing-function: var(--motion-ease-spring);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="spring-scale"] {
  transform: scale(0.7);
  transition-timing-function: var(--motion-ease-spring);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="spring-left"] {
  transform: translateX(var(--motion-distance-md));
  transition-timing-function: var(--motion-ease-spring);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="spring-right"] {
  transform: translateX(calc(var(--motion-distance-md) * -1));
  transition-timing-function: var(--motion-ease-spring);
  transition-duration: var(--motion-duration-slow);
}


/* ============================================================
 * §17. SWING ANIMATIONS (pendulum / hinge feel)
 * ============================================================ */

[data-motion="swing-in-top"] {
  transform: perspective(800px) rotateX(-90deg);
  transform-origin: top center;
  transition-timing-function: var(--motion-ease-back-in-out);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="swing-in-bottom"] {
  transform: perspective(800px) rotateX(90deg);
  transform-origin: bottom center;
  transition-timing-function: var(--motion-ease-back-in-out);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="swing-in-left"] {
  transform: perspective(800px) rotateY(90deg);
  transform-origin: left center;
  transition-timing-function: var(--motion-ease-back-in-out);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="swing-in-right"] {
  transform: perspective(800px) rotateY(-90deg);
  transform-origin: right center;
  transition-timing-function: var(--motion-ease-back-in-out);
  transition-duration: var(--motion-duration-slow);
}


/* ============================================================
 * §18. ROLL ANIMATIONS
 * ============================================================ */

[data-motion="roll-in-left"] {
  transform: translateX(calc(var(--motion-distance-lg) * -1)) rotate(-120deg);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}

[data-motion="roll-in-right"] {
  transform: translateX(var(--motion-distance-lg)) rotate(120deg);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}


/* ============================================================
 * §19. RISE ANIMATIONS
 * Elegant, slow ascents — ideal for hero text, section headings
 * ============================================================ */

[data-motion="rise-up"] {
  transform: translateY(var(--motion-distance-xl));
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-epic);
}

[data-motion="rise-up-blurred"] {
  transform: translateY(var(--motion-distance-xl));
  filter: blur(8px);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-epic);
}

[data-motion="rise-down"] {
  transform: translateY(calc(var(--motion-distance-xl) * -1));
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-epic);
}


/* ============================================================
 * §20. GLOW ANIMATIONS (entry-state glow, then normalises)
 * ============================================================ */

[data-motion="glow-in"] {
  transform: scale(0.95);
  filter: brightness(0.4) blur(6px);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-epic);
}

/* Glow-in-up: rises and brightens */
[data-motion="glow-in-up"] {
  transform: translateY(var(--motion-distance-md)) scale(0.95);
  filter: brightness(0.3) blur(8px);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-epic);
}


/* ============================================================
 * §21. TEXT-SPECIFIC HELPERS
 * Pair with JS that wraps each word/char in a span[data-motion]
 * ============================================================ */

/* Word-by-word reveal — words clip up out of a hidden overflow parent */
[data-motion="word-reveal"] {
  display: inline-block;
  clip-path: inset(0 0 100% 0);
  transform: translateY(60%);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-slow);
}

/* Character-by-character fade up */
[data-motion="char-fade-up"] {
  display: inline-block;
  transform: translateY(var(--motion-distance-sm));
  transition-timing-function: var(--motion-ease-spring);
  transition-duration: var(--motion-duration-normal);
}

/* Character-by-character blur in */
[data-motion="char-blur-in"] {
  display: inline-block;
  filter: blur(8px);
  transform: translateY(var(--motion-distance-sm)) scale(0.9);
  transition-timing-function: var(--motion-ease-expo-out);
  transition-duration: var(--motion-duration-normal);
}


/* ============================================================
 * §22. CONTINUOUS / LOOPING ANIMATIONS
 * These play indefinitely — do NOT require .is-visible
 * Apply directly: class="motion-float", "motion-pulse", etc.
 * ============================================================ */

/* --- Float: gentle up-down levitation --- */
.motion-float {
  animation: motionFloat 4s var(--motion-ease-in-out) infinite alternate;
}

@keyframes motionFloat {
  0%   { transform: translateY(0);    }
  100% { transform: translateY(-12px); }
}

/* --- Float Horizontal --- */
.motion-float-h {
  animation: motionFloatH 5s var(--motion-ease-in-out) infinite alternate;
}

@keyframes motionFloatH {
  0%   { transform: translateX(0);   }
  100% { transform: translateX(10px); }
}

/* --- Pulse: subtle scale heartbeat --- */
.motion-pulse {
  animation: motionPulse 2.4s var(--motion-ease-in-out) infinite;
}

@keyframes motionPulse {
  0%,  100% { transform: scale(1);    opacity: 1;    }
  50%        { transform: scale(1.06); opacity: 0.85; }
}

/* --- Glow Pulse: luminous brand glow ring --- */
.motion-glow-pulse {
  animation: motionGlowPulse 2.5s var(--motion-ease-in-out) infinite;
}

@keyframes motionGlowPulse {
  0%,  100% { box-shadow: 0 0 0   0 rgba(20, 184, 166, 0.4); }
  50%        { box-shadow: 0 0 30px 8px rgba(20, 184, 166, 0.25); }
}

/* --- Shimmer Sweep: loading / highlight shimmer on an element --- */
.motion-shimmer {
  position: relative;
  overflow: hidden;
}
.motion-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: motionShimmer 2.2s var(--motion-ease-in-out) infinite;
}

@keyframes motionShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* --- Spin: continuous rotation (icons, loaders) --- */
.motion-spin {
  animation: motionSpin 1.4s linear infinite;
}
.motion-spin-slow {
  animation: motionSpin 4s linear infinite;
}

@keyframes motionSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* --- Bounce Loop: perpetual attention bounce --- */
.motion-bounce-loop {
  animation: motionBounceLoop 1.6s var(--motion-ease-in-out) infinite;
}

@keyframes motionBounceLoop {
  0%,  100% { transform: translateY(0);    }
  40%        { transform: translateY(-14px); }
  60%        { transform: translateY(-7px);  }
}

/* --- Ping: expand-and-fade ring (like TailwindCSS ping) --- */
.motion-ping {
  position: relative;
}
.motion-ping::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.35;
  animation: motionPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes motionPing {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

/* --- Typewriter: blinking cursor for text elements (add ::after) --- */
.motion-cursor-blink::after {
  content: '|';
  margin-left: 2px;
  animation: motionBlink 1s step-end infinite;
  font-weight: 300;
  opacity: 0.8;
}

@keyframes motionBlink {
  0%,  100% { opacity: 1; }
  50%        { opacity: 0; }
}

/* --- Gradient Shift: animated gradient background --- */
.motion-gradient-shift {
  background-size: 300% 300%;
  animation: motionGradientShift 8s var(--motion-ease-in-out) infinite;
}

@keyframes motionGradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* --- Tilt Rock: gentle rocking sway --- */
.motion-tilt-rock {
  animation: motionTiltRock 5s var(--motion-ease-in-out) infinite;
  transform-origin: center bottom;
}

@keyframes motionTiltRock {
  0%,  100% { transform: rotate(0deg);  }
  25%        { transform: rotate(1.5deg); }
  75%        { transform: rotate(-1.5deg); }
}


/* ============================================================
 * §23. SCROLL PROGRESS INDICATOR
 * Apply to a fixed element at top of page
 * ============================================================ */

.motion-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #14b8a6, #6366f1);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  transition: transform 0.1s linear;
  /* JS: el.style.transform = `scaleX(${scrollFraction})` */
}


/* ============================================================
 * §24. INTERSECTION THRESHOLD HELPERS
 * data-motion-threshold — Hints to motion.js (consumed by JS, not CSS)
 * These classes can be applied by JS to indicate threshold met
 * ============================================================ */

/* In-viewport flag (toggle by JS, not an animation trigger) */
.in-view  { --in-view: 1; }
.out-view { --in-view: 0; }


/* ============================================================
 * §25. PARALLAX HELPERS
 * Parallax depth layers — driven by JS scroll listener
 * data-parallax-speed="-0.2" → translateY updated by JS
 * ============================================================ */

[data-parallax] {
  will-change: transform;
  transition: transform 0.05s linear;
}


/* ============================================================
 * §26. MOTION COUNTER ANIMATION HOOK
 * Apply to stat numbers — JS uses this class to trigger count-up
 * ============================================================ */

[data-motion-counter] {
  display: inline-block;
  transition: opacity var(--motion-duration-normal) var(--motion-ease-expo-out);
}
[data-motion-counter]:not(.is-visible) {
  opacity: 0;
}


/* ============================================================
 * §27. SEQUENCE ANIMATION GROUPS
 * Wrap children in .motion-sequence — JS adds .is-visible
 * to each child with a cumulative delay
 * ============================================================ */

.motion-sequence > [data-motion] {
  /* Base; JS will override transition-delay per child */
}

/* Preset: fast sequence (50ms between each) */
.motion-sequence.sequence-fast > [data-motion]:nth-child(1)  { transition-delay: 0ms;   }
.motion-sequence.sequence-fast > [data-motion]:nth-child(2)  { transition-delay: 50ms;  }
.motion-sequence.sequence-fast > [data-motion]:nth-child(3)  { transition-delay: 100ms; }
.motion-sequence.sequence-fast > [data-motion]:nth-child(4)  { transition-delay: 150ms; }
.motion-sequence.sequence-fast > [data-motion]:nth-child(5)  { transition-delay: 200ms; }
.motion-sequence.sequence-fast > [data-motion]:nth-child(6)  { transition-delay: 250ms; }
.motion-sequence.sequence-fast > [data-motion]:nth-child(7)  { transition-delay: 300ms; }
.motion-sequence.sequence-fast > [data-motion]:nth-child(8)  { transition-delay: 350ms; }
.motion-sequence.sequence-fast > [data-motion]:nth-child(n+9) { transition-delay: 400ms; }

/* Preset: standard sequence (100ms between each) */
.motion-sequence.sequence-normal > [data-motion]:nth-child(1)  { transition-delay: 0ms;   }
.motion-sequence.sequence-normal > [data-motion]:nth-child(2)  { transition-delay: 100ms; }
.motion-sequence.sequence-normal > [data-motion]:nth-child(3)  { transition-delay: 200ms; }
.motion-sequence.sequence-normal > [data-motion]:nth-child(4)  { transition-delay: 300ms; }
.motion-sequence.sequence-normal > [data-motion]:nth-child(5)  { transition-delay: 400ms; }
.motion-sequence.sequence-normal > [data-motion]:nth-child(6)  { transition-delay: 500ms; }
.motion-sequence.sequence-normal > [data-motion]:nth-child(7)  { transition-delay: 600ms; }
.motion-sequence.sequence-normal > [data-motion]:nth-child(n+8) { transition-delay: 700ms; }

/* Preset: cinematic sequence (200ms between each) */
.motion-sequence.sequence-cinematic > [data-motion]:nth-child(1)  { transition-delay: 0ms;    }
.motion-sequence.sequence-cinematic > [data-motion]:nth-child(2)  { transition-delay: 200ms;  }
.motion-sequence.sequence-cinematic > [data-motion]:nth-child(3)  { transition-delay: 400ms;  }
.motion-sequence.sequence-cinematic > [data-motion]:nth-child(4)  { transition-delay: 600ms;  }
.motion-sequence.sequence-cinematic > [data-motion]:nth-child(5)  { transition-delay: 800ms;  }
.motion-sequence.sequence-cinematic > [data-motion]:nth-child(6)  { transition-delay: 1000ms; }
.motion-sequence.sequence-cinematic > [data-motion]:nth-child(n+7) { transition-delay: 1200ms; }


/* ============================================================
 * §28. REDUCED MOTION — ACCESSIBILITY
 * All animations honour prefers-reduced-motion: reduce
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {

  /* Disable ALL scroll-triggered transitions */
  [data-motion] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Disable all continuous / looping animations */
  .motion-float,
  .motion-float-h,
  .motion-pulse,
  .motion-glow-pulse,
  .motion-shimmer::after,
  .motion-spin,
  .motion-spin-slow,
  .motion-bounce-loop,
  .motion-ping::before,
  .motion-cursor-blink::after,
  .motion-gradient-shift,
  .motion-tilt-rock {
    animation: none !important;
  }

  .motion-shimmer::after { display: none; }
  .motion-ping::before   { display: none; }

  /* Stagger delays unnecessary when no transition */
  [data-motion-stagger] > [data-motion],
  [data-motion-delay],
  .motion-sequence > [data-motion] {
    transition-delay: 0ms !important;
  }
}


/* ============================================================
 * §29. PRINT OVERRIDES
 * ============================================================ */

@media print {
  [data-motion],
  [data-motion].is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
 * §30. FAILSAFE: content must never stay invisible
 * If motion.js has not started within ~2.5s (blocked, errored, slow),
 * reveal animated content anyway. motion.js adds .cms-motion-on to <html>.
 * ============================================================ */
html:not(.cms-motion-on) [data-motion] {
  animation: motionFailsafe 0.01s linear 2.5s forwards;
}
@keyframes motionFailsafe {
  to { opacity: 1; visibility: visible; transform: none; filter: none; clip-path: none; }
}
@media (scripting: none) {
  [data-motion] { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* ============================================================================= */
/* END CMS MOTION ENGINE — /public/assets/cms/css/motion/motion.css                  */
/* ============================================================================= */