/**
 * 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;
}