/**
 * GT Container Reveal Styles
 *
 * FOUC prevention, editor indicators, and initial states
 *
 * @package GT_Animations_Pro
 * @since 1.5.0
 */

/* ==========================================================================
   FOUC Prevention - Hide until JS initializes
   ========================================================================== */

/**
 * Initial hidden state
 * Applied via PHP, removed by JS when animation is ready
 */
.gt-reveal-hidden {
	visibility: hidden !important;
}

/**
 * Ready state - animation initialized
 * JS adds this class after setting up GSAP
 */
.gt-reveal-ready {
	visibility: visible !important;
}

/**
 * Mobile hidden state
 * When mobile behavior is set to "hidden"
 */
.gt-reveal-mobile-hidden {
	display: none !important;
}

/* ==========================================================================
   Editor Styles
   ========================================================================== */

/**
 * Ensure editor content is visible (override hidden state)
 */
.elementor-editor-active .gt-reveal-hidden {
	visibility: visible !important;
	opacity: 1 !important;
}

/* ==========================================================================
   Initial Animation States (CSS fallback)
   Applied before JS takes over
   ========================================================================== */

/**
 * These are overridden by GSAP's gsap.set() calls
 * They serve as a CSS-only fallback
 */

/* Fade */
[data-gt-container-reveal*='"style":"fade"'].gt-reveal-hidden {
	opacity: 0;
}

/* Slide Up */
[data-gt-container-reveal*='"style":"slide-up"'].gt-reveal-hidden {
	opacity: 0;
	transform: translateY(60px);
}

/* Slide Down */
[data-gt-container-reveal*='"style":"slide-down"'].gt-reveal-hidden {
	opacity: 0;
	transform: translateY(-60px);
}

/* Slide Left */
[data-gt-container-reveal*='"style":"slide-left"'].gt-reveal-hidden {
	opacity: 0;
	transform: translateX(60px);
}

/* Slide Right */
[data-gt-container-reveal*='"style":"slide-right"'].gt-reveal-hidden {
	opacity: 0;
	transform: translateX(-60px);
}

/* Scale Up */
[data-gt-container-reveal*='"style":"scale-up"'].gt-reveal-hidden {
	opacity: 0;
	transform: scale(0.85);
}

/* Scale Down */
[data-gt-container-reveal*='"style":"scale-down"'].gt-reveal-hidden {
	opacity: 0;
	transform: scale(1.15);
}

/* Blur */
[data-gt-container-reveal*='"style":"blur"'].gt-reveal-hidden {
	opacity: 0;
	filter: blur(10px);
}

/* Clip Reveal - Bottom to Top (default) */
[data-gt-container-reveal*='"style":"clip-reveal"'].gt-reveal-hidden {
	clip-path: inset(100% 0 0 0);
}

/* Flip Horizontal */
[data-gt-container-reveal*='"style":"flip-h"'].gt-reveal-hidden {
	opacity: 0;
	transform: perspective(1000px) rotateY(90deg);
}

/* Flip Vertical */
[data-gt-container-reveal*='"style":"flip-v"'].gt-reveal-hidden {
	opacity: 0;
	transform: perspective(1000px) rotateX(90deg);
}

/* Rotate */
[data-gt-container-reveal*='"style":"rotate"'].gt-reveal-hidden {
	opacity: 0;
	transform: rotate(90deg);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/**
 * Reduced motion preference
 * When user prefers reduced motion, simplify to fade only
 */
@media (prefers-reduced-motion: reduce) {
	[data-gt-container-reveal].gt-reveal-hidden {
		opacity: 0;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
	}
}

/**
 * Focus indicator for keyboard navigation
 */
.gt-reveal-focusable:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #5d38d8);
	outline-offset: 2px;
}

/**
 * Screen reader only text
 */
.gt-reveal-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Container Overflow Handling
   ========================================================================== */

/**
 * CRITICAL: Child container with reveal must clip its content
 * This prevents content from being visible through parent's padding
 * during slide/scale animations
 */
[data-gt-container-reveal] {
	overflow: hidden;
}

/**
 * When animation is complete, allow overflow if needed
 * Only for non-stagger animations (stagger keeps overflow hidden)
 */
[data-gt-container-reveal].gt-reveal-complete:not([data-gt-stagger="yes"]) {
	overflow: visible;
}

/* ==========================================================================
   Parent Container Styles
   ========================================================================== */

/**
 * Ensure parent container can receive hover events
 * and has proper overflow handling
 */
.gt-reveal-parent {
	position: relative;
}

/**
 * Parent hover state indicator (optional debug)
 */
.gt-reveal-parent.gt-reveal-active {
	/* Can be used for debugging */
}

/* ==========================================================================
   Animation States (JS-controlled)
   ========================================================================== */

/**
 * Active/revealed state
 */
.gt-reveal-visible {
	visibility: visible !important;
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: none;
}

/**
 * Animating state
 * Prevents pointer events during animation
 */
.gt-reveal-animating {
	pointer-events: none;
}

/* ==========================================================================
   Mobile Touch Feedback
   ========================================================================== */

/**
 * Tap feedback on mobile
 */
@media (hover: none) and (pointer: coarse) {
	.gt-reveal-parent:active {
		opacity: 0.9;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.gt-reveal-hidden,
	[data-gt-container-reveal] {
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
	}
}