/**
 * Magical Addons GSAP Animations - Styles
 * 
 * @package Magical_Addons_For_Elementor
 * @since 1.3.15
 */

/* Hide animated elements initially to prevent FOUC - only on frontend */
body:not(.elementor-editor-active) .mg-gsap-animated:not(.mg-gsap-ready) {
    opacity: 0;
    visibility: hidden;
}

/* Show elements once GSAP has initialized them */
.mg-gsap-animated.mg-gsap-ready {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Editor mode - always show elements */
.elementor-editor-active .mg-gsap-animated,
.elementor-editor-preview .mg-gsap-animated {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Text animation helpers */
.mg-gsap-animated .mg-gsap-char,
.mg-gsap-animated .mg-gsap-word,
.mg-gsap-animated .mg-gsap-line {
    display: inline-block;
}

.mg-gsap-animated .mg-gsap-word {
    white-space: nowrap;
}

/* Ensure proper stacking for 3D transforms */
.mg-gsap-animated {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Clip path animations setup */
.mg-gsap-clip-animation {
    overflow: hidden;
}

/* Ken Burns effect container */
.mg-gsap-ken-burns img,
.mg-gsap-ken-burns .elementor-background-overlay {
    will-change: transform;
}

/* Parallax container setup */
.mg-gsap-parallax {
    will-change: transform;
}

/* Background animation setup */
.mg-gsap-bg-animation {
    position: relative;
    overflow: hidden;
}

.mg-gsap-bg-animation > .elementor-background-overlay {
    will-change: transform, opacity;
}

/* Morphing shape placeholder */
.mg-gsap-morph-path {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Liquid effect setup */
.mg-gsap-liquid {
    filter: url('#mg-liquid-filter');
}

/* Stagger children setup */
.mg-gsap-stagger > * {
    will-change: transform, opacity;
}

/* Text reveal clip animation */
.mg-gsap-text-reveal {
    overflow: hidden;
}

.mg-gsap-text-reveal-inner {
    display: inline-block;
}

/* Smooth animations during scroll */
@media (prefers-reduced-motion: no-preference) {
    .mg-gsap-animated {
        will-change: transform, opacity;
    }
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .mg-gsap-animated {
        visibility: visible !important;
        animation: none !important;
        transition: none !important;
    }
}

/* Editor-specific styles */
.elementor-editor-active .mg-gsap-animated {
    visibility: visible;
}

/* Preview button animation indicator */
.mg-gsap-preview-active {
    outline: 2px dashed #9b59b6;
    outline-offset: 2px;
}