/* ==========================================================================
   ARI Water Solutions 2 - Animation States & Keyframes
   ========================================================================== */

/* ---------- Scroll Indicator Pulse ---------- */
@keyframes ari2-scroll-pulse {
	0%, 100% { opacity: 1; transform: translateY(0); }
	50% { opacity: 0.5; transform: translateY(8px); }
}

.ari2-scroll-indicator {
	animation: ari2-scroll-pulse 2s ease-in-out infinite;
}

/* ---------- Marquee ---------- */
@keyframes ari2-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.ari2-marquee__track {
	display: flex;
	gap: 3rem;
	animation: ari2-marquee 30s linear infinite;
	will-change: auto;
}

.ari2-marquee:hover .ari2-marquee__track {
	animation-play-state: paused;
}

.ari2-marquee__track--reverse {
	animation-direction: reverse;
}

/* ---------- Gradient Text Shimmer ---------- */
@keyframes ari2-shimmer {
	0% { background-position: -200% center; }
	100% { background-position: 200% center; }
}

.ari2-shimmer-text {
	background: linear-gradient(90deg,
		var(--wp--preset--color--accent) 0%,
		var(--wp--preset--color--accent-glow) 40%,
		var(--wp--preset--color--accent) 80%
	);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: ari2-shimmer 3s linear infinite;
}

/* ---------- Water Flow: Hero "Water" text ---------- */
@keyframes ari2-water-flow {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.ari2-water-flow {
	background: linear-gradient(90deg,
		var(--wp--preset--color--accent) 0%,
		var(--wp--preset--color--accent-glow) 20%,
		#c0ecff 40%,
		var(--wp--preset--color--accent-glow) 60%,
		var(--wp--preset--color--accent) 80%,
		var(--wp--preset--color--accent-glow) 100%
	);
	background-size: 400% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: ari2-water-flow 4s ease-in-out infinite;
}

/* ---------- Glass Card Effect ---------- */
.ari2-glass {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
}

/* ---------- Glow Effect on Hover ---------- */
.ari2-glow-hover {
	transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.ari2-glow-hover:hover {
	box-shadow: 0 0 30px rgba(14, 165, 233, 0.15), 0 10px 40px rgba(0, 0, 0, 0.08);
	transform: translateY(-4px);
}

/* ---------- Noise Texture Overlay ---------- */
.ari2-noise::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../images/noise-texture.png');
	background-repeat: repeat;
	opacity: 0.03;
	pointer-events: none;
	z-index: 1;
}

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

	.ari2-marquee__track {
		animation: none !important;
	}
}