body {
	min-height: 100%;
	background: #f1f9ff80;
}

@keyframes starpulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}
}

.star-pulse {
	animation: starpulse 2.5s ease-in-out infinite;
	transform-origin: center;
}

/* ========== 1 ========== */
@keyframes float1 {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	25% {
		transform: translate(8px, -6px) rotate(2deg);
	}

	50% {
		transform: translate(-6px, 10px) rotate(-2deg);
	}

	75% {
		transform: translate(5px, 4px) rotate(1deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

/* ========== 2 ========== */
@keyframes float2 {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	20% {
		transform: translate(-10px, -5px) rotate(-3deg);
	}

	40% {
		transform: translate(6px, 7px) rotate(2deg);
	}

	60% {
		transform: translate(-4px, 10px) rotate(-1deg);
	}

	80% {
		transform: translate(8px, -3px) rotate(2deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

/* ========== 3 ========== */
@keyframes float3 {
	0% {
		transform: translate(0, 0) scale(1);
	}

	25% {
		transform: translate(5px, 5px) scale(1.02);
	}

	50% {
		transform: translate(-8px, -6px) scale(0.98);
	}

	75% {
		transform: translate(6px, -3px) scale(1.01);
	}

	100% {
		transform: translate(0, 0) scale(1);
	}
}

/* ========== 4 ========== */
@keyframes float4 {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	30% {
		transform: translate(10px, 3px) rotate(3deg);
	}

	50% {
		transform: translate(-6px, 7px) rotate(-2deg);
	}

	70% {
		transform: translate(3px, -8px) rotate(1deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

/* ========== 5 ========== */
@keyframes float5 {
	0% {
		transform: translate(0, 0);
	}

	20% {
		transform: translate(-8px, 6px);
	}

	40% {
		transform: translate(6px, -8px);
	}

	60% {
		transform: translate(-10px, -4px);
	}

	80% {
		transform: translate(8px, 5px);
	}

	100% {
		transform: translate(0, 0);
	}
}

/* ========== 6 ========== */
@keyframes float6 {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	25% {
		transform: translate(6px, -8px) rotate(2deg);
	}

	50% {
		transform: translate(-5px, 5px) rotate(-2deg);
	}

	75% {
		transform: translate(8px, 8px) rotate(1deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

/* === Utility Classes === */
.float-1 {
	animation: float1 6s ease-in-out infinite;
}

.float-2 {
	animation: float2 7s ease-in-out infinite;
}

.float-3 {
	animation: float3 8s ease-in-out infinite;
}

.float-4 {
	animation: float4 9s ease-in-out infinite;
}

.float-5 {
	animation: float5 7.5s ease-in-out infinite;
}

.float-6 {
	animation: float6 10s ease-in-out infinite;
}

body {
	min-height: 100%;
	background: #f1f9ff80;
}

@keyframes starpulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}
}

.star-pulse {
	animation: starpulse 2.5s ease-in-out infinite;
	transform-origin: center;
}

/* ========== 1 ========== */
@keyframes float1 {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	25% {
		transform: translate(8px, -6px) rotate(2deg);
	}

	50% {
		transform: translate(-6px, 10px) rotate(-2deg);
	}

	75% {
		transform: translate(5px, 4px) rotate(1deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

/* ========== 2 ========== */
@keyframes float2 {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	20% {
		transform: translate(-10px, -5px) rotate(-3deg);
	}

	40% {
		transform: translate(6px, 7px) rotate(2deg);
	}

	60% {
		transform: translate(-4px, 10px) rotate(-1deg);
	}

	80% {
		transform: translate(8px, -3px) rotate(2deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

/* ========== 3 ========== */
@keyframes float3 {
	0% {
		transform: translate(0, 0) scale(1);
	}

	25% {
		transform: translate(5px, 5px) scale(1.02);
	}

	50% {
		transform: translate(-8px, -6px) scale(0.98);
	}

	75% {
		transform: translate(6px, -3px) scale(1.01);
	}

	100% {
		transform: translate(0, 0) scale(1);
	}
}

/* ========== 4 ========== */
@keyframes float4 {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	30% {
		transform: translate(10px, 3px) rotate(3deg);
	}

	50% {
		transform: translate(-6px, 7px) rotate(-2deg);
	}

	70% {
		transform: translate(3px, -8px) rotate(1deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

/* ========== 5 ========== */
@keyframes float5 {
	0% {
		transform: translate(0, 0);
	}

	20% {
		transform: translate(-8px, 6px);
	}

	40% {
		transform: translate(6px, -8px);
	}

	60% {
		transform: translate(-10px, -4px);
	}

	80% {
		transform: translate(8px, 5px);
	}

	100% {
		transform: translate(0, 0);
	}
}

/* ========== 6 ========== */
@keyframes float6 {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	25% {
		transform: translate(6px, -8px) rotate(2deg);
	}

	50% {
		transform: translate(-5px, 5px) rotate(-2deg);
	}

	75% {
		transform: translate(8px, 8px) rotate(1deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

/* === Utility Classes === */
.float-1 {
	animation: float1 6s ease-in-out infinite;
}

.float-2 {
	animation: float2 7s ease-in-out infinite;
}

.float-3 {
	animation: float3 8s ease-in-out infinite;
}

.float-4 {
	animation: float4 9s ease-in-out infinite;
}

.float-5 {
	animation: float5 7.5s ease-in-out infinite;
}

.float-6 {
	animation: float6 10s ease-in-out infinite;
}