/**
 * GT Loop Grid Widget Styles
 *
 * @package GT_Animations_Pro
 * @since 1.3.0
 */

/* ===========================
   FOUC Prevention
   =========================== */

/* Items hidden by default - GSAP reveals them */
[data-gt-loop-grid] .e-loop-item {
	opacity: 0;
	visibility: hidden;
}

/* When grid is ready, let GSAP control visibility */
[data-gt-loop-grid].gt-animation-ready .e-loop-item {
	/* GSAP will animate these */
}

/* Fallback: if JS hasn't initialized after 3s, show items */
.gt-loop-grid-no-js .e-loop-item,
.no-js [data-gt-loop-grid] .e-loop-item {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Editor: show items normally */
.elementor-editor-active [data-gt-loop-grid] .e-loop-item {
	opacity: 1 !important;
	visibility: visible !important;
}

/* ===========================
   Animation States
   =========================== */

/*
 * Note: will-change removed - GSAP force3D: "auto" handles GPU acceleration
 * Adding will-change here caused scroll-back glitches when combined with
 * ScrollSmoother and multiple animated elements.
 */

/* During animation - GSAP handles GPU */
[data-gt-loop-grid] .e-loop-item.gt-animating {
	/* GSAP force3D handles GPU acceleration */
}

/* After animation complete */
[data-gt-loop-grid] .e-loop-item.gt-animation-complete {
	/* Ready for next animation if replay enabled */
}

/* ===========================
   Hover Effects
   =========================== */

/* Perspective container ONLY for tilt effect (avoids z-index issues with child widgets) */
[data-gt-loop-grid].gt-hover-tilt-enabled {
	perspective: 1000px;
}

/* 3D transform style ONLY when tilt is enabled */
[data-gt-loop-grid].gt-hover-tilt-enabled .e-loop-item {
	transform-style: preserve-3d;
}

/* Disable transitions on loop items only - GSAP handles animations */
/* Use > to only affect direct loop item, not child widgets */
[data-gt-loop-grid] > .elementor-loop-container > .e-loop-item {
	transition: none;
}

/* Hover active class - minimal z-index bump, only when needed */
[data-gt-loop-grid].gt-hover-tilt-enabled .e-loop-item.gt-hover-active {
	z-index: 10;
}

/* Sibling dimming state */
[data-gt-loop-grid] .e-loop-item.gt-dimmed {
	pointer-events: none;
}

/* Force opacity on dimmed items - high specificity to override Elementor styles */
[data-gt-loop-grid] > .elementor-loop-container > .e-loop-item.gt-dimmed,
[data-gt-loop-grid] .elementor-loop-container .e-loop-item.gt-dimmed,
.e-loop-item.gt-dimmed {
	opacity: var(--gt-dim-opacity, 0.3) !important;
	transition: opacity 0.3s ease;
}

/* ===========================
   Focus Indicators
   =========================== */

[data-gt-loop-grid] .e-loop-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ===========================
   Loading State (AJAX)
   =========================== */

[data-gt-loop-grid][aria-busy="true"] {
	pointer-events: none;
}

[data-gt-loop-grid][aria-busy="true"] .e-loop-item {
	opacity: 0.5;
}

/* ===========================
   Reduced Motion
   =========================== */

@media (prefers-reduced-motion: reduce) {
	/* Only affect direct loop items, not child widget content */
	[data-gt-loop-grid] > .elementor-loop-container > .e-loop-item {
		opacity: 1 !important;
		visibility: visible !important;
	}

	/* Don't reset transforms on child widgets - they handle their own reduced motion */
}

/* ===========================
   Clip Reveal Styles
   =========================== */

/* Clip reveal needs overflow hidden on item */
[data-gt-loop-grid][data-gt-entrance="clip-up"] .e-loop-item,
[data-gt-loop-grid][data-gt-entrance="clip-left"] .e-loop-item {
	overflow: hidden;
}