/**
 * GSAP Beaver Builder Animations
 * Main CSS for animations
 */

/* Hide elements before animation */
.gsap-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Animated elements */
.gsap-animated {
    will-change: transform, opacity;
}

/* Prevent flash of unstyled content */
[data-gsap-animation="true"] {
    opacity: 0;
}

[data-gsap-animation="true"].gsap-initialized {
    opacity: 1;
}

/* Smooth transitions for hover animations */
.gsap-trigger-hover {
    transition: none !important;
}

/* 3D transforms support */
.gsap-flip-x,
.gsap-flip-y {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Prevent layout shift during animations */
.gsap-slide-up,
.gsap-slide-down,
.gsap-slide-left,
.gsap-slide-right {
    position: relative;
}

/* Loading state */
.gsap-loading {
    position: relative;
    overflow: hidden;
}

.gsap-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: gsap-loading 1.5s infinite;
}

@keyframes gsap-loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Parallax container */
.gsap-parallax {
    overflow: hidden;
    position: relative;
}

.gsap-parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Text animations */
.gsap-text-split span {
    display: inline-block;
}

/* Stagger animations */
.gsap-stagger-item {
    opacity: 0;
    transform: translateY(30px);
}

/* Custom cursor for interactive elements */
.gsap-interactive {
    cursor: pointer;
}

/* Smooth scroll behavior */
.gsap-smooth-scroll {
    scroll-behavior: smooth;
}

/* Performance optimization */
.gsap-will-change {
    will-change: transform, opacity, filter;
}

/* Accessibility - reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gsap-animated,
    [data-gsap-animation="true"] {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

/* Beaver Builder specific styles */
.fl-builder-content .gsap-animated {
    /* Ensure animations work within BB containers */
    z-index: 1;
    position: relative;
}

/* Fix for BB row animations */
.fl-row-content-wrap[data-gsap-animation="true"] {
    overflow: visible;
}

/* Fix for BB column animations */
.fl-col-content[data-gsap-animation="true"] {
    overflow: visible;
}

/* Fix for BB module animations */
.fl-module-content[data-gsap-animation="true"] {
    overflow: visible;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Reduce animation distances on mobile */
    .gsap-slide-left,
    .gsap-slide-right {
        --gsap-slide-distance: 50px;
    }
    
    .gsap-slide-up,
    .gsap-slide-down {
        --gsap-slide-distance: 30px;
    }
}

/* Debug mode styles */
.gsap-debug [data-gsap-animation="true"] {
    outline: 2px dashed #00ff00;
    outline-offset: 5px;
}

.gsap-debug [data-gsap-animation="true"]::before {
    content: attr(data-gsap-type);
    position: absolute;
    top: -25px;
    left: 0;
    background: #00ff00;
    color: #000;
    padding: 2px 8px;
    font-size: 11px;
    font-family: monospace;
    z-index: 9999;
}