/* アニメーション要素のスタイル */
.animation-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

.floating-satellite,
.floating-drone {
	position: absolute;
	opacity: 0.9;
}

/* 衛星のアニメーション */
.floating-satellite {
	width: 120px;
	height: auto;
	top: 10%;
	animation: satelliteFloat 30s linear infinite;
}

@keyframes satelliteFloat {
	0% {
		left: -150px;
		transform: translateY(0px) rotate(0deg);
	}
	25% {
		transform: translateY(-30px) rotate(10deg);
	}
	50% {
		transform: translateY(20px) rotate(-5deg);
	}
	75% {
		transform: translateY(-20px) rotate(5deg);
	}
	100% {
		left: 100%;
		transform: translateY(0px) rotate(0deg);
	}
}

/* ドローンのアニメーション */
.floating-drone {
	width: 100px;
	height: auto;
	position: absolute;
}

/* ドローン1 - 右から左へ（下部） */
.drone-1 {
	bottom: 20%;
	animation: droneFloat1 25s linear infinite;
}

@keyframes droneFloat1 {
	0% {
		right: -150px;
		transform: translateY(0px) rotate(0deg);
	}
	20% {
		transform: translateY(-20px) rotate(-10deg);
	}
	40% {
		transform: translateY(30px) rotate(5deg);
	}
	60% {
		transform: translateY(-25px) rotate(-5deg);
	}
	80% {
		transform: translateY(15px) rotate(10deg);
	}
	100% {
		right: 100%;
		transform: translateY(0px) rotate(0deg);
	}
}

/* ドローン2 - 左から右へ（中部） */
.drone-2 {
	top: 40%;
	animation: droneFloat2 20s linear infinite;
	animation-delay: 3s;
	width: 80px;
}

@keyframes droneFloat2 {
	0% {
		left: -150px;
		transform: translateY(0px) rotate(0deg) scaleX(-1);
	}
	30% {
		transform: translateY(25px) rotate(8deg) scaleX(-1);
	}
	70% {
		transform: translateY(-15px) rotate(-8deg) scaleX(-1);
	}
	100% {
		left: 100%;
		transform: translateY(0px) rotate(0deg) scaleX(-1);
	}
}

/* ドローン3 - 右から左へ（上部） */
.drone-3 {
	top: 25%;
	animation: droneFloat3 30s linear infinite;
	animation-delay: 8s;
	width: 90px;
}

@keyframes droneFloat3 {
	0% {
		right: -150px;
		transform: translateY(0px) rotate(0deg);
	}
	25% {
		transform: translateY(20px) rotate(12deg);
	}
	50% {
		transform: translateY(-30px) rotate(-8deg);
	}
	75% {
		transform: translateY(10px) rotate(5deg);
	}
	100% {
		right: 100%;
		transform: translateY(0px) rotate(0deg);
	}
}

/* ドローン4 - 左から右へ（下部） */
.drone-4 {
	bottom: 35%;
	animation: droneFloat4 22s linear infinite;
	animation-delay: 12s;
	width: 110px;
}

@keyframes droneFloat4 {
	0% {
		left: -150px;
		transform: translateY(0px) rotate(0deg) scaleX(-1);
	}
	35% {
		transform: translateY(-25px) rotate(-15deg) scaleX(-1);
	}
	65% {
		transform: translateY(20px) rotate(10deg) scaleX(-1);
	}
	100% {
		left: 100%;
		transform: translateY(0px) rotate(0deg) scaleX(-1);
	}
}

/* z-indexの調整 */
main .m-txt {
	z-index: 5;
}

main .count-down {
	z-index: 5;
}

.span-cont {
	z-index: 5;
}

.vtuber-container {
	z-index: 10;
}

main .m-info {
	z-index: 5;
}

/* レスポンシブ対応 */
@media screen and (max-width: 900px) {
	.floating-satellite {
		width: 100px;
		top: 15%;
		animation-duration: 25s;
	}
	
	.drone-1 {
		width: 80px;
		animation-duration: 22s;
	}
	
	.drone-2 {
		width: 65px;
		animation-duration: 18s;
	}
	
	.drone-3 {
		width: 70px;
		animation-duration: 26s;
	}
	
	.drone-4 {
		width: 85px;
		animation-duration: 20s;
	}
}

@media screen and (max-width: 550px) {
	.floating-satellite {
		width: 80px;
		top: 20%;
		animation-duration: 20s;
	}
	
	.drone-1 {
		width: 60px;
		animation-duration: 18s;
	}
	
	.drone-2 {
		width: 50px;
		animation-duration: 16s;
	}
	
	.drone-3 {
		width: 55px;
		animation-duration: 22s;
	}
	
	.drone-4 {
		width: 65px;
		animation-duration: 18s;
	}
}

@media screen and (max-width: 420px) {
	.floating-satellite {
		width: 60px;
		top: 25%;
	}
	
	.drone-1 {
		width: 50px;
		bottom: 15%;
	}
	
	.drone-2 {
		width: 40px;
		top: 45%;
	}
	
	.drone-3 {
		width: 45px;
		top: 30%;
	}
	
	.drone-4 {
		width: 55px;
		bottom: 30%;
	}
}