/* footer.css - Стили для навигационного меню (bubble menu) */

@keyframes bubble-float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-8px); }
}

@keyframes rainbow-shimmer {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes bubble-pulse {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 0.9; }
}

.bubble-nav-item {
	position: relative;
	animation: bubble-float 3s ease-in-out infinite;
	animation-delay: var(--nav-delay, 0s);
}

.bubble-bg {
	background: linear-gradient(135deg,
		rgba(255, 255, 255, 0.9) 0%,
		rgba(255, 182, 193, 0.7) 15%,
		rgba(255, 105, 180, 0.6) 30%,
		rgba(138, 43, 226, 0.6) 45%,
		rgba(75, 0, 130, 0.7) 60%,
		rgba(0, 191, 255, 0.6) 75%,
		rgba(173, 216, 230, 0.7) 90%,
		rgba(255, 255, 255, 0.9) 100%
	);
	background-size: 200% 200%;
	animation: rainbow-shimmer 4s ease infinite;
}

.bubble-shine {
	position: absolute;
	top: 15%;
	left: 20%;
	width: 35%;
	height: 35%;
	background: radial-gradient(circle at 30% 30%,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.7) 30%,
		rgba(255, 255, 255, 0.3) 60%,
		transparent 100%
	);
	border-radius: 50%;
	animation: bubble-pulse 2s ease-in-out infinite;
}

.bubble-reflection {
	position: absolute;
	bottom: 20%;
	right: 25%;
	width: 25%;
	height: 25%;
	background: radial-gradient(circle,
		rgba(255, 255, 255, 0.5) 0%,
		rgba(173, 216, 230, 0.4) 40%,
		transparent 70%
	);
	border-radius: 50%;
	animation: bubble-pulse 2.5s ease-in-out infinite reverse;
}

.bubble-border {
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: linear-gradient(45deg,
		rgba(255, 182, 193, 0.6),
		rgba(255, 105, 180, 0.5),
		rgba(138, 43, 226, 0.5),
		rgba(0, 191, 255, 0.5),
		rgba(173, 216, 230, 0.6)
	);
	background-size: 300% 300%;
	animation: rainbow-shimmer 3s ease infinite;
	filter: blur(4px);
	z-index: -1;
}

.bubble-text {
	text-shadow:
		0 0 10px rgba(0, 0, 0, 0.8),
		0 0 20px rgba(0, 0, 0, 0.6),
		0 2px 4px rgba(0, 0, 0, 0.9),
		-1px -1px 0 rgba(0, 0, 0, 0.5),
		1px -1px 0 rgba(0, 0, 0, 0.5),
		-1px 1px 0 rgba(0, 0, 0, 0.5),
		1px 1px 0 rgba(0, 0, 0, 0.5);
}

.bubble-icon {
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.9))
			 drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))
			 drop-shadow(0 0 15px rgba(0, 0, 0, 0.6));
}

.bubble-nav-item.active .bubble-bg {
	box-shadow: 0 25px 50px -12px rgba(236, 72, 153, 0.5);
	transform: scale(1.1);
}

.bubble-nav-item.active:hover .bubble-bg {
	transform: scale(1.1);
}