/**
 * Motion Effects - Frontend Styles
 *
 * Styles for Scrolling Effects, Mouse Effects, and Sticky functionality.
 * Designed to match Elementor Pro's Motion Effects behavior.
 *
 * @package Bith_Core
 * @since 1.2.0
 */

/* ============================================
   BASE MOTION EFFECTS STYLES
   ============================================ */

.bith-motion-effects {
    /* GPU acceleration for smooth animations */
    will-change: transform, opacity, filter;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Prevent layout jumps during scroll animations */
.bith-motion-effects[data-bith-motion*="scrolling"] {
    transform: translateZ(0);
}

/* ============================================
   SCROLLING EFFECTS
   ============================================ */

/* Smooth transitions for scrolling effects */
.bith-motion-effects.bith-scrolling-active {
    transition: none;
    /* Disable transition during scroll for performance */
}

/* ============================================
   MOUSE EFFECTS - TILT
   ============================================ */

.bith-tilt-element {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    position: relative;
}

/* Ensure child content is above glare */
.bith-tilt-element>*:not(.bith-tilt-glare) {
    position: relative;
    z-index: 1;
    transform: translateZ(2px);
}

/* Glare container */
.bith-tilt-glare {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
    border-radius: inherit;
}

/* Glare inner element */
.bith-tilt-glare-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(0deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    transition: opacity 0.2s ease-out;
}

/* ============================================
   MOUSE TRACKING EFFECTS
   ============================================ */

.bith-mouse-track-element {
    transition: transform 0.15s ease-out;
}

/* ============================================
   STICKY EFFECTS
   ============================================ */

/* Sticky placeholder - maintains layout when element becomes fixed */
.bith-sticky-placeholder {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}

/* Base sticky state */
.bith-is-sticky {
    box-sizing: border-box;
    /* Smooth transitions for effects that trigger after offset */
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

/* Effects active state (triggered after effects offset scroll) */
.bith-sticky-effects-active {
    /* State class - styles applied via JavaScript */
    position: relative;
}

/* Shadow effect when sticky */
.bith-sticky-shadow {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.05),
        0 8px 16px rgba(0, 0, 0, 0.05),
        0 16px 32px rgba(0, 0, 0, 0.08);
}

/* Alternative shadow styles */
.bith-sticky-shadow--soft {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.bith-sticky-shadow--strong {
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Shrink animation */
.bith-is-sticky.bith-sticky-shrink-active {
    transform-origin: top center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Force disable effects on specific devices via inline data */
@media (max-width: 767px) {
    .bith-motion-effects[data-bith-motion*='"devices":["desktop","tablet"]'] {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .bith-motion-effects[data-bith-motion*='"devices":["desktop"]'] {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}

/* ============================================
   REDUCED MOTION PREFERENCE
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .bith-motion-effects {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }

    .bith-tilt-element {
        transform: none !important;
        transition: none !important;
    }

    .bith-is-sticky {
        transition: none !important;
    }
}

/* ============================================
   ELEMENTOR EDITOR STYLES
   ============================================ */

/* Show visual indicators in editor */
.elementor-editor-active .bith-motion-effects {
    /* Allow effects to preview in editor */
    position: relative;
}

/* Disable 3D tilt hover in editor to allow easier selection */
.elementor-editor-active .bith-tilt-element:not(.bith-tilt-preview) {
    /* Keep tilt for preview, disable for normal editing */
    transition-duration: 0.3s;
}

/* Visual indicator for sticky elements in editor */
.elementor-editor-active .bith-is-sticky {
    outline: 2px dashed #6366f1;
    outline-offset: 2px;
}

/* Visual indicator for elements with scrolling effects */
.elementor-editor-active .bith-motion-effects[data-bith-motion*="scrolling"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1000;
}

/* ============================================
   Z-INDEX LAYER SYSTEM
   ============================================ */

/* Ensure sticky elements stack properly */
.bith-is-sticky {
    z-index: 100;
}

/* User-defined z-index via style attribute takes priority automatically via specificity */

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .bith-motion-effects {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        position: static !important;
    }

    .bith-sticky-placeholder {
        display: none !important;
    }

    .bith-tilt-glare {
        display: none !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Contain paint for complex motion elements */
.bith-motion-effects {
    contain: layout style;
}

/* Force hardware acceleration for animated elements */
.bith-motion-effects.bith-animating {
    will-change: transform, opacity;
}

/* Remove will-change when not animating to free GPU memory */
.bith-motion-effects:not(.bith-animating) {
    will-change: auto;
}