/**
 * ====================================================================
 * CIRVION TECHNOLOGIES - MOTION & LENIS STYLING ENGINE
 * Inspired by Framer Motion Spring Physics & Studio Freight Lenis
 * ====================================================================
 */

/* --- 1. LENIS SMOOTH SCROLL INTEGRATION --- */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* --- 2. TOP SCROLL PROGRESS INDICATOR (Framer Motion scaleX) --- */
#scrollProgressBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #FF6B00 0%, #FF8533 50%, #00F0FF 100%);
    transform-origin: 0% 50%;
    transform: scaleX(0);
    z-index: 999999;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.4);
    transition: transform 0.05s linear;
}

/* --- 3. FRAMER MOTION SPRING VIEWPORT REVEALS --- */
/* Spring easing curve matching Framer Motion's default bounce damping */
:root {
    --framer-spring-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --framer-spring-duration: 0.85s;
    --spotlight-color: rgba(255, 107, 0, 0.12);
    --spotlight-border: rgba(255, 107, 0, 0.35);
}

/* Fade Up (Default) */
[data-motion="fade-up"] {
    opacity: 0;
    transform: translateY(36px) translateZ(0);
    transition: opacity var(--framer-spring-duration) var(--framer-spring-ease),
                transform var(--framer-spring-duration) var(--framer-spring-ease);
    will-change: opacity, transform;
}

[data-motion="fade-up"].motion-revealed {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* Fade Down */
[data-motion="fade-down"] {
    opacity: 0;
    transform: translateY(-36px) translateZ(0);
    transition: opacity var(--framer-spring-duration) var(--framer-spring-ease),
                transform var(--framer-spring-duration) var(--framer-spring-ease);
    will-change: opacity, transform;
}

[data-motion="fade-down"].motion-revealed {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* Fade Left */
[data-motion="fade-left"] {
    opacity: 0;
    transform: translateX(40px) translateZ(0);
    transition: opacity var(--framer-spring-duration) var(--framer-spring-ease),
                transform var(--framer-spring-duration) var(--framer-spring-ease);
    will-change: opacity, transform;
}

[data-motion="fade-left"].motion-revealed {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}

/* Fade Right */
[data-motion="fade-right"] {
    opacity: 0;
    transform: translateX(-40px) translateZ(0);
    transition: opacity var(--framer-spring-duration) var(--framer-spring-ease),
                transform var(--framer-spring-duration) var(--framer-spring-ease);
    will-change: opacity, transform;
}

[data-motion="fade-right"].motion-revealed {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}

/* Scale Up */
[data-motion="scale-up"] {
    opacity: 0;
    transform: scale(0.92) translateY(20px) translateZ(0);
    transition: opacity var(--framer-spring-duration) var(--framer-spring-ease),
                transform var(--framer-spring-duration) var(--framer-spring-ease);
    will-change: opacity, transform;
}

[data-motion="scale-up"].motion-revealed {
    opacity: 1;
    transform: scale(1) translateY(0) translateZ(0);
}

/* Stagger Container & Children */
[data-motion-stagger] > * {
    opacity: 0;
    transform: translateY(32px) translateZ(0);
    transition: opacity var(--framer-spring-duration) var(--framer-spring-ease),
                transform var(--framer-spring-duration) var(--framer-spring-ease);
    will-change: opacity, transform;
}

[data-motion-stagger].motion-revealed > * {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* --- 4. DYNAMIC SPOTLIGHT & RADIAL CURSOR GLOW --- */
[data-spotlight] {
    position: relative;
    overflow: hidden;
    --mouse-x: 50%;
    --mouse-y: 50%;
    --mouse-opacity: 0;
}

[data-spotlight]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        500px circle at var(--mouse-x) var(--mouse-y),
        var(--spotlight-color),
        transparent 65%
    );
    opacity: var(--mouse-opacity);
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

[data-spotlight]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
        350px circle at var(--mouse-x) var(--mouse-y),
        var(--spotlight-border),
        transparent 70%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: var(--mouse-opacity);
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

/* Ensure inner content of spotlight cards stays above glow */
[data-spotlight] > * {
    position: relative;
    z-index: 3;
}

/* --- 5. 3D CARD PERSPECTIVE TILT (whileHover Physics) --- */
[data-tilt] {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.4, 1), box-shadow 0.25s ease;
    will-change: transform;
}

/* --- 6. MAGNETIC BUTTONS (Framer Spring Attraction) --- */
[data-magnetic] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    will-change: transform;
}

/* --- 7. PARALLAX FLOATING ELEMENTS --- */
[data-parallax] {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* --- 8. ACCESSIBILITY OVERRIDES --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

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

    #scrollProgressBar {
        display: none !important;
    }

    [data-tilt],
    [data-magnetic] {
        transform: none !important;
    }
}