/* Additional animations for a more lively website */

/* Floating animation for important elements */
.floating {
	animation: floating 3s ease-in-out infinite;
}

.floating-slow {
	animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0px);
	}
}

/* Button hover animations */
.btn {
	position: relative;
	overflow: hidden;
}

.btn:before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: 0.5s;
}

.btn:hover:before {
	left: 100%;
}

/* Cool underline animation for links */
.animated-link {
	position: relative;
}

.animated-link:after {
	content: "";
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -3px;
	left: 0;
	background-color: var(--primary-color);
	transition: width 0.3s ease;
}

.animated-link:hover:after {
	width: 100%;
}

/* Background animations */
.bg-animated {
	position: relative;
	overflow: hidden;
}

.bg-animated:before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);
	animation: rotate 20s linear infinite;
	opacity: 0;
	transition: opacity 0.5s;
	pointer-events: none;
}

.bg-animated:hover:before {
	opacity: 1;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Staggered animations for lists */
.stagger-item {
	opacity: 0;
	transform: translateY(20px);
}

.stagger-item.visible {
	animation: fadeInUp 0.5s forwards;
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Cursor spotlight effect */
.spotlight-effect {
	position: relative;
	background-size: 100% 100%;
	background-position: center;
	transition: all 0.3s ease;
	cursor: none;
}

.spotlight {
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 2;
}

.spotlight-effect:hover .spotlight {
	opacity: 1;
}

/* Heartbeat animation */
.heartbeat {
	animation: heartbeat 1.5s ease-in-out infinite both;
}

@keyframes heartbeat {
	from {
		transform: scale(1);
		transform-origin: center center;
	}
	14% {
		transform: scale(1.1);
	}
	28% {
		transform: scale(1);
	}
	42% {
		transform: scale(1.1);
	}
	70% {
		transform: scale(1);
	}
}

/* Text reveal animation */
.reveal-text {
	position: relative;
	color: transparent;
	overflow: hidden;
}

.reveal-text::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--text-color);
	overflow: hidden;
	white-space: nowrap;
	animation: reveal-text 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes reveal-text {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

/* Ripple button effect */
.ripple-btn {
	position: relative;
	overflow: hidden;
}

.ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	transform: translate(-50%, -50%);
	animation: ripple-animation 0.6s linear;
	pointer-events: none;
}

@keyframes ripple-animation {
	0% {
		width: 0;
		height: 0;
		opacity: 0.5;
	}
	100% {
		width: 300px;
		height: 300px;
		opacity: 0;
	}
}

/* Shake animation */
.shake {
	animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
	10%,
	90% {
		transform: translate3d(-1px, 0, 0);
	}
	20%,
	80% {
		transform: translate3d(2px, 0, 0);
	}
	30%,
	50%,
	70% {
		transform: translate3d(-4px, 0, 0);
	}
	40%,
	60% {
		transform: translate3d(4px, 0, 0);
	}
}

/* Page transitions */
.page-transition {
	animation: fade-in 0.5s ease forwards;
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Glowing effect */
.glow {
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.4), 0 0 15px rgba(107, 255, 186, 0.3),
		0 0 20px rgba(107, 255, 186, 0.2), 0 0 25px rgba(107, 255, 186, 0.1);
	animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
	from {
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.4), 0 0 15px rgba(107, 255, 186, 0.3),
			0 0 20px rgba(107, 255, 186, 0.2), 0 0 25px rgba(107, 255, 186, 0.1);
	}
	to {
		text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(107, 255, 186, 0.4),
			0 0 40px rgba(107, 255, 186, 0.3), 0 0 50px rgba(107, 255, 186, 0.2);
	}
}