/**
 * Custom Water-Themed AOS Animations
 *
 * Extends AOS library with water-inspired reveal effects.
 * These work WITH the base AOS CSS - we only define transforms,
 * not opacity (AOS handles opacity automatically).
 */

/* ==========================================================================
   Water Bubble Rise - Elements rise like bubbles
   ========================================================================== */

[data-aos="bubble-rise"] {
	transform: translateY(40px) scale(0.95);
}

[data-aos="bubble-rise"].aos-animate {
	transform: translateY(0) scale(1);
}

/* ==========================================================================
   Water Ripple In - Expands from center with ripple effect
   ========================================================================== */

[data-aos="ripple-expand"] {
	transform: scale(0.85);
	filter: blur(3px);
}

[data-aos="ripple-expand"].aos-animate {
	transform: scale(1);
	filter: blur(0);
}

/* ==========================================================================
   Wave Slide - Slides in with wave motion
   ========================================================================== */

[data-aos="wave-left"] {
	transform: translateX(-40px) rotate(-1deg);
}

[data-aos="wave-left"].aos-animate {
	transform: translateX(0) rotate(0);
}

[data-aos="wave-right"] {
	transform: translateX(40px) rotate(1deg);
}

[data-aos="wave-right"].aos-animate {
	transform: translateX(0) rotate(0);
}

/* ==========================================================================
   Drop Splash - Falls into place like a water drop
   ========================================================================== */

[data-aos="drop-splash"] {
	transform: translateY(-30px) scale(0.7);
	transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-aos="drop-splash"].aos-animate {
	transform: translateY(0) scale(1);
}

/* ==========================================================================
   Flow Reveal - Smooth flowing reveal
   ========================================================================== */

[data-aos="flow-up"] {
	transform: translateY(30px);
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-aos="flow-up"].aos-animate {
	transform: translateY(0);
}

[data-aos="flow-down"] {
	transform: translateY(-30px);
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-aos="flow-down"].aos-animate {
	transform: translateY(0);
}

/* ==========================================================================
   Surface Break - Like breaking through water surface
   ========================================================================== */

[data-aos="surface-break"] {
	transform: translateY(20px) scaleY(0.9);
	clip-path: inset(100% 0 0 0);
}

[data-aos="surface-break"].aos-animate {
	transform: translateY(0) scaleY(1);
	clip-path: inset(0 0 0 0);
}

/* ==========================================================================
   Shimmer Fade - Subtle shimmer as it appears
   ========================================================================== */

[data-aos="shimmer-fade"] {
	filter: brightness(1.3) blur(2px);
}

[data-aos="shimmer-fade"].aos-animate {
	filter: brightness(1) blur(0);
}

/* ==========================================================================
   Cascade - Staggered waterfall effect for lists
   ========================================================================== */

[data-aos="cascade"] {
	transform: translateY(20px) translateX(-10px);
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-aos="cascade"].aos-animate {
	transform: translateY(0) translateX(0);
}

/* ==========================================================================
   Reduced Motion - Respect user preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	[data-aos] {
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}