/**
 * NationsRO animations and dynamic background layers
 */

/* Animated background containers */
.animated-bg-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

/* Floating particles */
.bg-particles {
	position: absolute;
	width: 100%;
	height: 100%;
}

.particle {
	position: absolute;
	bottom: -20px;
	background: radial-gradient(circle, rgba(0,240,255,0.4) 0%, rgba(0,240,255,0) 70%);
	border-radius: 50%;
	filter: blur(2px);
	animation: floatUp 16s infinite ease-in-out;
}

.particle-pink {
	background: radial-gradient(circle, rgba(255,0,85,0.35) 0%, rgba(255,0,85,0) 70%);
}

.particle-gold {
	background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, rgba(255,215,0,0) 70%);
}

/* Clouds floating */
.bg-clouds {
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 350px;
	background: url('https://i.imgur.com/3Z7mN2Y.png') repeat-x;
	background-size: contain;
	opacity: 0.08;
	filter: blur(3px);
	animation: driftClouds 120s linear infinite;
	pointer-events: none;
}

.bg-clouds-reverse {
	top: 10%;
	opacity: 0.05;
	filter: blur(5px);
	animation: driftCloudsReverse 180s linear infinite;
}

/* Mascots floating */
.floating-mascot {
	animation: floatMascot 6s infinite ease-in-out;
	filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.6));
	mix-blend-mode: screen;
}

.glowing-aura {
	position: relative;
}
.glowing-aura::after {
	content: '';
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	background: var(--nr-accent);
	filter: blur(35px);
	opacity: 0.15;
	z-index: -1;
	animation: pulseAura 4s infinite ease-in-out;
}

/* Keyframes */
@keyframes floatUp {
	0% {
		transform: translateY(0) translateX(0) scale(0.6);
		opacity: 0;
	}
	10% {
		opacity: 0.8;
	}
	90% {
		opacity: 0.8;
	}
	100% {
		transform: translateY(-110vh) translateX(100px) scale(1.2);
		opacity: 0;
	}
}

@keyframes driftClouds {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@keyframes driftCloudsReverse {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes floatMascot {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-12px) rotate(1deg);
	}
}

@keyframes pulseAura {
	0%, 100% {
		transform: scale(0.9);
		opacity: 0.12;
	}
	50% {
		transform: scale(1.15);
		opacity: 0.22;
	}
}

/* Interactive slider animation classes */
.slide-fade {
	animation: slideFade 0.6s ease-in-out forwards;
}

@keyframes slideFade {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}