/* RGB Border animation - Buttery smooth 360-degree rotating gradient border */
/* RGB Border animation - Buttery smooth 360-degree rotating gradient border (JS-driven) */
.rgb-border {
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: linear-gradient(#1e1e1e, #1e1e1e);
  transition: all 0.3s ease;
}

.rgb-border:hover {
  border: 3px solid transparent;
  background: linear-gradient(#1e1e1e, #1e1e1e) padding-box,
    conic-gradient(from var(--angle, 0deg), #ff0040, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080, #ff0040) border-box;
}


/* Smooth card hover animation with scale and glow */
@keyframes cardHoverGlow {
	0% {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		transform: scale(1) translateY(0);
	}
	100% {
		box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.1);
		transform: scale(1.03) translateY(-5px);
	}
}

/* Reverse animation for smooth exit */
@keyframes cardHoverExit {
	0% {
		box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.1);
		transform: scale(1.03) translateY(-5px);
	}
	100% {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		transform: scale(1) translateY(0);
	}
}

@keyframes neonGlow {
	0%, 100% { 
		filter: drop-shadow(0 0 5px var(--neon-red)) 
				drop-shadow(0 0 10px var(--neon-red)) 
				drop-shadow(0 0 15px var(--neon-red));
	}
	50% { 
		filter: drop-shadow(0 0 10px var(--neon-purple)) 
				drop-shadow(0 0 20px var(--neon-purple)) 
				drop-shadow(0 0 30px var(--neon-purple));
	}
}

@keyframes pulseGlow {
	0%, 100% { box-shadow: 0 0 20px rgba(255, 7, 58, 0.3); }
	50% { box-shadow: 0 0 40px rgba(193, 71, 233, 0.5), 0 0 60px rgba(193, 71, 233, 0.3); }
}

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

@keyframes sparkle {
	0% { transform: translateY(0px) translateX(0px); }
	100% { transform: translateY(-200px) translateX(100px); }
}

@keyframes fadeWarning {
	0%,
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes fadeOverlay {
	0% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes flash {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	20% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	40% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}