/* ============================================
   ANIMATION UTILITIES
   Polished, professional animations
   ============================================ */

/* Animation Data Attributes - Initial States */
[data-animate] {
	opacity: 0;
	will-change: transform, opacity;
}

[data-animate="fade-up"] {
	transform: translateY(40px);
}

[data-animate="fade-down"] {
	transform: translateY(-40px);
}

[data-animate="fade-left"] {
	transform: translateX(-40px);
}

[data-animate="fade-right"] {
	transform: translateX(40px);
}

[data-animate="scale-in"] {
	transform: scale(0.9);
}

[data-animate="slide-in-left"] {
	transform: translateX(-60px);
}

[data-animate="slide-in-right"] {
	transform: translateX(60px);
}

/* ============================================
   WAVE BACKGROUND ANIMATIONS
   ============================================ */

/* Wave Container */
.wave-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: var(--bg-dark);
}

/* Wave Layer Base */
.wave-layer {
	position: absolute;
	width: 400%;
	height: 100%;
	left: -150%;
	bottom: 0;
	will-change: transform;
	transform-origin: center center;
}

/* Wave container rotation for intro section - rotates from 180deg to 90deg to 180deg over 2 minutes */
.bg-animation-waves .wave-background {
	animation: wave-rotation 120s linear infinite;
	transform-origin: center center;
}

@keyframes wave-rotation {
	0% {
		transform: rotate(180deg);
	}
	50% {
		transform: rotate(90deg);
	}
	100% {
		transform: rotate(180deg);
	}
}

/* Wave SVG Paths */
.wave-layer svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Wave Layer 1 - Light Blue, Slow */
.wave-layer-1 {
	opacity: 0.25;
	animation: wave-animation-1 50s linear infinite;
}

/* Wave Layer 2 - Light Purple, Medium */
.wave-layer-2 {
	opacity: 0.2;
	animation: wave-animation-2 40s linear infinite;
	animation-delay: -3s;
}

/* Wave Layer 3 - Light Cyan, Fast */
.wave-layer-3 {
	opacity: 0.22;
	animation: wave-animation-3 36s linear infinite;
	animation-delay: -6s;
}

/* Wave Layer 4 - Light Blue, Reverse */
.wave-layer-4 {
	opacity: 0.18;
	animation: wave-animation-4 44s linear infinite reverse;
	animation-delay: -9s;
}

/* Wave Animation Keyframes - Each layer has unique movement pattern */
/* Layer 1: Diagonal from top-left to bottom-right */
@keyframes wave-animation-1 {
	0% {
		transform: translate(-150%, -150%);
	}
	100% {
		transform: translate(50%, 50%);
	}
}

/* Layer 2: More horizontal movement, less vertical */
@keyframes wave-animation-2 {
	0% {
		transform: translate(-150%, -80%);
	}
	100% {
		transform: translate(50%, 120%);
	}
}

/* Layer 3: More vertical movement, less horizontal */
@keyframes wave-animation-3 {
	0% {
		transform: translate(-80%, -150%);
	}
	100% {
		transform: translate(120%, 50%);
	}
}

/* Layer 4: Steeper diagonal, different angle (reversed) */
@keyframes wave-animation-4 {
	0% {
		transform: translate(-130%, -130%);
	}
	100% {
		transform: translate(70%, 70%);
	}
}

/* ============================================
   BACKGROUND ANIMATION CONTAINER
   ============================================ */

.bg-animation-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: var(--bg-dark);
}

.bg-animation-waves,
.bg-animation-particles,
.bg-animation-geometric,
.bg-animation-gradient,
.bg-animation-mesh {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 2.5s ease-in-out, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform, filter, opacity;
}

/* Scroll warp effect - pauses animations and applies warp */
.bg-animation-container.scrolling .bg-animation-waves,
.bg-animation-container.scrolling .bg-animation-particles,
.bg-animation-container.scrolling .bg-animation-geometric,
.bg-animation-container.scrolling .bg-animation-gradient,
.bg-animation-container.scrolling .bg-animation-mesh {
	animation-play-state: paused !important;
}

.bg-animation-container.scrolling .wave-layer,
.bg-animation-container.scrolling .particle,
.bg-animation-container.scrolling .geometric-shape,
.bg-animation-container.scrolling .gradient-layer,
.bg-animation-container.scrolling .mesh-blob {
	animation-play-state: paused !important;
}

/* Scroll energy field overlay */
.scroll-energy-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}

.scroll-energy-overlay.active {
	opacity: 1;
}

/* Energy particles */
.energy-particle {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(147, 197, 253, 0.9) 0%, rgba(147, 197, 253, 0) 70%);
	box-shadow: 0 0 8px rgba(147, 197, 253, 0.6), 0 0 16px rgba(196, 181, 253, 0.4);
	will-change: transform, opacity;
}

.energy-particle.medium {
	width: 6px;
	height: 6px;
	background: radial-gradient(circle, rgba(196, 181, 253, 0.9) 0%, rgba(196, 181, 253, 0) 70%);
	box-shadow: 0 0 10px rgba(196, 181, 253, 0.6), 0 0 20px rgba(165, 243, 252, 0.4);
}

.energy-particle.large {
	width: 8px;
	height: 8px;
	background: radial-gradient(circle, rgba(165, 243, 252, 0.9) 0%, rgba(165, 243, 252, 0) 70%);
	box-shadow: 0 0 12px rgba(165, 243, 252, 0.6), 0 0 24px rgba(125, 211, 252, 0.4);
}

/* Energy trail effect */
.energy-trail {
	position: absolute;
	width: 2px;
	height: 60px;
	background: linear-gradient(to bottom,
		rgba(147, 197, 253, 0.8) 0%,
		rgba(196, 181, 253, 0.6) 50%,
		rgba(165, 243, 252, 0) 100%);
	box-shadow: 0 0 4px rgba(147, 197, 253, 0.5);
	transform-origin: top center;
	will-change: transform, opacity;
}

/* Subtle motion blur during scroll */
.bg-animation-container.scrolling .bg-animation-waves,
.bg-animation-container.scrolling .bg-animation-particles,
.bg-animation-container.scrolling .bg-animation-geometric,
.bg-animation-container.scrolling .bg-animation-gradient,
.bg-animation-container.scrolling .bg-animation-mesh {
	filter: blur(2px);
	transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-animation-container.scrolling.scroll-up .bg-animation-waves,
.bg-animation-container.scrolling.scroll-up .bg-animation-particles,
.bg-animation-container.scrolling.scroll-up .bg-animation-geometric,
.bg-animation-container.scrolling.scroll-up .bg-animation-gradient,
.bg-animation-container.scrolling.scroll-up .bg-animation-mesh {
	filter: blur(2.5px);
}

.bg-animation-container.scrolling.scroll-down .bg-animation-waves,
.bg-animation-container.scrolling.scroll-down .bg-animation-particles,
.bg-animation-container.scrolling.scroll-down .bg-animation-geometric,
.bg-animation-container.scrolling.scroll-down .bg-animation-gradient,
.bg-animation-container.scrolling.scroll-down .bg-animation-mesh {
	filter: blur(2.5px);
}

/* ============================================
   PARTICLE SYSTEM ANIMATION
   ============================================ */

.bg-animation-particles {
	background: var(--bg-dark);
}

.particle {
	position: absolute;
	border-radius: 50%;
	background: rgba(147, 197, 253, 0.4);
	pointer-events: none;
	will-change: transform, opacity;
}

.particle-small {
	width: 4px;
	height: 4px;
	background: rgba(196, 181, 253, 0.35);
}

.particle-medium {
	width: 6px;
	height: 6px;
	background: rgba(165, 243, 252, 0.3);
}

.particle-large {
	width: 8px;
	height: 8px;
	background: rgba(125, 211, 252, 0.25);
}

@keyframes particle-float-1 {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	50% {
		transform: translate(150px, -100px) scale(1.1);
		opacity: 0.8;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translate(300px, -200px) scale(1.2);
		opacity: 0;
	}
}

@keyframes particle-float-2 {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	50% {
		transform: translate(-200px, -150px) scale(0.9);
		opacity: 0.8;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translate(-400px, -300px) scale(0.8);
		opacity: 0;
	}
}

@keyframes particle-float-3 {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	50% {
		transform: translate(250px, 100px) scale(1.15);
		opacity: 0.8;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translate(500px, 200px) scale(1.1);
		opacity: 0;
	}
}

@keyframes particle-float-4 {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	50% {
		transform: translate(-180px, 120px) scale(0.85);
		opacity: 0.8;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translate(-360px, 240px) scale(0.9);
		opacity: 0;
	}
}

/* Shooting Star */
.shooting-star {
	position: absolute;
	width: 4px;
	height: 4px;
	background: rgba(255, 255, 255, 1);
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 16px rgba(147, 197, 253, 0.8), 0 0 24px rgba(196, 181, 253, 0.6);
	pointer-events: none;
	will-change: transform, opacity;
	z-index: 10;
}

.shooting-star::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 150px;
	height: 1px;
	background: linear-gradient(90deg, 
		rgba(255, 255, 255, 0.8) 0%,
		rgba(147, 197, 253, 0.6) 30%,
		rgba(196, 181, 253, 0.4) 60%,
		transparent 100%);
	transform: translateY(-50%);
	transform-origin: left center;
}

@keyframes shooting-star-1 {
	0% {
		transform: translate(-200px, -200px) rotate(45deg);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translate(calc(100vw + 200px), calc(100vh + 200px)) rotate(45deg);
		opacity: 0;
	}
}

@keyframes shooting-star-2 {
	0% {
		transform: translate(calc(100vw + 200px), -200px) rotate(-45deg);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translate(-200px, calc(100vh + 200px)) rotate(-45deg);
		opacity: 0;
	}
}

@keyframes shooting-star-3 {
	0% {
		transform: translate(-200px, calc(100vh + 200px)) rotate(135deg);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translate(calc(100vw + 200px), -200px) rotate(135deg);
		opacity: 0;
	}
}

/* ============================================
   GEOMETRIC SHAPES ANIMATION
   ============================================ */

.bg-animation-geometric {
	background: var(--bg-dark);
}

.geometric-shape {
	position: absolute;
	opacity: 0.2;
	will-change: transform;
	pointer-events: none;
}

.geometric-circle {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(147, 197, 253, 0.3) 0%, transparent 70%);
	border: 2px solid rgba(147, 197, 253, 0.2);
}

.geometric-triangle {
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 173px solid rgba(196, 181, 253, 0.25);
}

.geometric-square {
	width: 150px;
	height: 150px;
	background: rgba(165, 243, 252, 0.2);
	transform: rotate(45deg);
}

@keyframes geometric-move-1 {
	0% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}
	50% {
		transform: translate(300px, 200px) rotate(180deg) scale(1.2);
	}
	100% {
		transform: translate(0, 0) rotate(360deg) scale(1);
	}
}

@keyframes geometric-move-2 {
	0% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}
	50% {
		transform: translate(-250px, 300px) rotate(-180deg) scale(0.8);
	}
	100% {
		transform: translate(0, 0) rotate(-360deg) scale(1);
	}
}

@keyframes geometric-move-3 {
	0% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}
	50% {
		transform: translate(400px, -150px) rotate(180deg) scale(1.1);
	}
	100% {
		transform: translate(0, 0) rotate(360deg) scale(1);
	}
}

/* ============================================
   ANIMATED GRADIENT SYSTEM
   ============================================ */

.bg-animation-gradient {
	background: var(--bg-dark);
	overflow: hidden;
}

.gradient-layer {
	position: absolute;
	width: 150%;
	height: 150%;
	will-change: transform, background-position;
}

.gradient-layer-1 {
	background: radial-gradient(circle at 20% 30%, rgba(147, 197, 253, 0.4) 0%, transparent 50%),
				radial-gradient(circle at 80% 70%, rgba(196, 181, 253, 0.3) 0%, transparent 50%);
	background-size: 200% 200%;
	animation: gradient-move-1 30s ease-in-out infinite;
}

.gradient-layer-2 {
	background: radial-gradient(circle at 60% 20%, rgba(165, 243, 252, 0.35) 0%, transparent 50%),
				radial-gradient(circle at 30% 80%, rgba(125, 211, 252, 0.25) 0%, transparent 50%);
	background-size: 250% 250%;
	animation: gradient-move-2 25s ease-in-out infinite;
	animation-delay: -5s;
}

.gradient-layer-3 {
	background: linear-gradient(135deg, rgba(147, 197, 253, 0.2) 0%, rgba(196, 181, 253, 0.15) 50%, rgba(165, 243, 252, 0.2) 100%);
	background-size: 300% 300%;
	animation: gradient-move-3 35s linear infinite;
}

@keyframes gradient-move-1 {
	0%, 100% {
		transform: translate(0, 0);
		background-position: 0% 0%, 100% 100%;
	}
	50% {
		transform: translate(-20%, -15%);
		background-position: 100% 100%, 0% 0%;
	}
}

@keyframes gradient-move-2 {
	0%, 100% {
		transform: translate(0, 0);
		background-position: 0% 0%, 100% 100%;
	}
	50% {
		transform: translate(15%, 20%);
		background-position: 100% 100%, 0% 0%;
	}
}

@keyframes gradient-move-3 {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 100% 100%;
	}
}

/* ============================================
   MESH GRADIENT / BLOB ANIMATION
   ============================================ */

.bg-animation-mesh {
	background: var(--bg-dark);
	overflow: hidden;
}

.mesh-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	will-change: transform;
	opacity: 0.4;
}

.mesh-blob-1 {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(147, 197, 253, 0.5) 0%, rgba(147, 197, 253, 0) 70%);
	top: -100px;
	left: -100px;
	animation: blob-morph-1 20s ease-in-out infinite;
}

.mesh-blob-2 {
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(196, 181, 253, 0.4) 0%, rgba(196, 181, 253, 0) 70%);
	bottom: -150px;
	right: -150px;
	animation: blob-morph-2 25s ease-in-out infinite;
	animation-delay: -3s;
}

.mesh-blob-3 {
	width: 450px;
	height: 450px;
	background: radial-gradient(circle, rgba(165, 243, 252, 0.35) 0%, rgba(165, 243, 252, 0) 70%);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: blob-morph-3 22s ease-in-out infinite;
	animation-delay: -7s;
}

.mesh-blob-4 {
	width: 550px;
	height: 550px;
	background: radial-gradient(circle, rgba(125, 211, 252, 0.3) 0%, rgba(125, 211, 252, 0) 70%);
	top: 20%;
	right: 10%;
	animation: blob-morph-4 18s ease-in-out infinite;
	animation-delay: -5s;
}

@keyframes blob-morph-1 {
	0%, 100% {
		transform: translate(0, 0) scale(1);
		border-radius: 50% 50% 50% 50%;
	}
	25% {
		transform: translate(200px, 150px) scale(1.2);
		border-radius: 60% 40% 50% 50%;
	}
	50% {
		transform: translate(100px, 300px) scale(0.9);
		border-radius: 40% 60% 50% 50%;
	}
	75% {
		transform: translate(-100px, 200px) scale(1.1);
		border-radius: 50% 50% 60% 40%;
	}
}

@keyframes blob-morph-2 {
	0%, 100% {
		transform: translate(0, 0) scale(1);
		border-radius: 50% 50% 50% 50%;
	}
	25% {
		transform: translate(-150px, -200px) scale(0.8);
		border-radius: 50% 50% 40% 60%;
	}
	50% {
		transform: translate(-300px, -100px) scale(1.3);
		border-radius: 60% 40% 50% 50%;
	}
	75% {
		transform: translate(-100px, -250px) scale(1);
		border-radius: 40% 60% 50% 50%;
	}
}

@keyframes blob-morph-3 {
	0%, 100% {
		transform: translate(-50%, -50%) scale(1);
		border-radius: 50% 50% 50% 50%;
	}
	33% {
		transform: translate(-30%, -40%) scale(1.2);
		border-radius: 60% 40% 50% 50%;
	}
	66% {
		transform: translate(-70%, -60%) scale(0.9);
		border-radius: 40% 60% 50% 50%;
	}
}

@keyframes blob-morph-4 {
	0%, 100% {
		transform: translate(0, 0) scale(1);
		border-radius: 50% 50% 50% 50%;
	}
	25% {
		transform: translate(100px, -150px) scale(1.1);
		border-radius: 50% 50% 60% 40%;
	}
	50% {
		transform: translate(250px, -50px) scale(0.85);
		border-radius: 60% 40% 50% 50%;
	}
	75% {
		transform: translate(150px, -200px) scale(1.15);
		border-radius: 40% 60% 50% 50%;
	}
}

/* ============================================
   WAVE ANIMATION (Updated for container system)
   ============================================ */

.bg-animation-waves .wave-background {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	[data-animate] {
		opacity: 1;
		transform: none !important;
	}
	
	.wave-layer,
	.particle,
	.geometric-shape,
	.gradient-layer,
	.mesh-blob {
		animation: none !important;
	}
	
	.wave-layer {
		opacity: 0.3;
	}
	
	.particle,
	.geometric-shape {
		opacity: 0.2;
	}
	
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}