/**
 * GSEWS Theme - Animation Stylesheet
 *
 * Clean liquid-motion animation system.
 *
 * @package GSEWS_Theme
 * @since 1.0.6
 */

/* ==========================================================
   01. KEYFRAMES
========================================================== */

@keyframes gsewsFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes gsewsFadeUp {
	from {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes gsewsSoftZoom {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes gsewsFloat {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -10px, 0); }
}

@keyframes gsewsLiquidShine {
	0% { transform: translateX(-120%) rotate(8deg); }
	100% { transform: translateX(120%) rotate(8deg); }
}

/* ==========================================================
   02. BASIC ANIMATION CLASSES
========================================================== */

.gsews-animate-fade-in {
	animation: gsewsFadeIn 0.7s ease forwards;
}

.gsews-animate-fade-up {
	animation: gsewsFadeUp 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.gsews-animate-soft-zoom {
	animation: gsewsSoftZoom 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.gsews-animate-float {
	animation: gsewsFloat 4.8s ease-in-out infinite;
}

/* ==========================================================
   03. SCROLL REVEAL SYSTEM
========================================================== */

.gsews-reveal,
.gsews-reveal-left,
.gsews-reveal-right,
.gsews-reveal-zoom {
	opacity: 0;
	transition:
		opacity 0.75s cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1),
		filter 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
	will-change: opacity, transform, filter;
}

.gsews-reveal {
	transform: translate3d(0, 26px, 0);
	filter: blur(4px);
}

.gsews-reveal-left {
	transform: translate3d(-34px, 0, 0);
	filter: blur(4px);
}

.gsews-reveal-right {
	transform: translate3d(34px, 0, 0);
	filter: blur(4px);
}

.gsews-reveal-zoom {
	transform: scale(0.96);
	filter: blur(3px);
}

.gsews-reveal.gsews-visible,
.gsews-reveal.is-visible,
.gsews-reveal-left.gsews-visible,
.gsews-reveal-left.is-visible,
.gsews-reveal-right.gsews-visible,
.gsews-reveal-right.is-visible,
.gsews-reveal-zoom.gsews-visible,
.gsews-reveal-zoom.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	filter: blur(0);
}

.gsews-delay-1 { transition-delay: 0.08s; }
.gsews-delay-2 { transition-delay: 0.16s; }
.gsews-delay-3 { transition-delay: 0.24s; }
.gsews-delay-4 { transition-delay: 0.32s; }
.gsews-delay-5 { transition-delay: 0.40s; }

/* ==========================================================
   04. LIQUID SHINE UTILITY
========================================================== */

.gsews-liquid-shine {
	position: relative;
	overflow: hidden;
}

.gsews-liquid-shine::after {
	content: "";
	position: absolute;
	inset: -40% auto -40% 0;
	width: 48%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
	transform: translateX(-120%) rotate(8deg);
	pointer-events: none;
}

.gsews-liquid-shine:hover::after,
.gsews-liquid-shine:focus-within::after {
	animation: gsewsLiquidShine 0.9s ease forwards;
}

/* ==========================================================
   05. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.gsews-reveal,
	.gsews-reveal-left,
	.gsews-reveal-right,
	.gsews-reveal-zoom {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}