:root {
--primary: #FF4A57;
--secondary: #1F2235;
--accent: #00CF5D;
--text: #F4F4F4;
--gradient: linear-gradient(135deg, #FF4A57 0%, #FF6B6B 100%);
--glass: rgba(255,255,255,0.05);
--shadow: 0 10px 30px rgba(0,0,0,0.2);
}
/* Neon Glow Animation */
@keyframes neonPulse {
0% { filter: drop-shadow(0 0 5px var(--primary)); }
50% { filter: drop-shadow(0 0 20px var(--primary)); }
100% { filter: drop-shadow(0 0 5px var(--primary)); }
}
/* Modern Card Flip */
.card-flip {
perspective: 1000px;
}
.card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card-flip:hover .card-inner {
transform: rotateY(180deg);
}
/* Glowing Button Effect */
.glow-btn {
position: relative;
overflow: hidden;
transition: 0.5s;
}
.glow-btn:after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: rgba(255,255,255,0.1);
transform: rotate(45deg);
transition: 0.5s;
}
.glow-btn:hover:after {
left: 10%;
top: 10%;
}
/* Hover Effect for Team Cards */
.team-card {
position: relative;
transition: 0.3s;
transform: translateY(0);
}
.team-card:hover {
transform: translateY(-10px);
}
.team-card:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.2),
transparent
);
transition: 0.5s;
}
.team-card:hover:before {
left: 100%;
}
/* Modern Input Fields */
.input-group {
position: relative;
margin-bottom: 2rem;
}
.input-group input {
width: 100%;
padding: 1rem;
border: 2px solid var(--glass);
background: transparent;
color: var(--text);
border-radius: 8px;
transition: 0.3s;
}
.input-group label {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--text);
pointer-events: none;
transition: 0.3s;
}
.input-group input:focus ~ label,
.input-group input:valid ~ label {
top: -10px;
left: 0.8rem;
font-size: 0.8rem;
color: var(--primary);
}
.input-group input:focus,
.input-group input:valid {
border-color: var(--primary);
}
/* Animated Leaderboard */
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.leaderboard-row {
animation: slideIn 0.5s ease-out;
}
/* Cyber Style Countdown */
.countdown-item {
background: var(--secondary);
border: 2px solid var(--primary);
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
position: relative;
}
.countdown-item:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
background: var(--secondary);
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}// Animated Form Validation
function showError(input, message) {
const error = document.createElement('div');
error.className = 'error-message';
error.style.cssText = `
color: var(--primary);
font-size: 0.8rem;
position: absolute;
bottom: -1.5rem;
left: 0;
animation: slideDown 0.3s ease-out;
`;
error.textContent = message;
input.parentElement.appendChild(error);
setTimeout(() => error.remove(), 3000);
}
// Dynamic Background Particles
function createParticles() {
const particles = document.createElement('div');
particles.id = 'particles';
document.body.appendChild(particles);
for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.cssText = `
position: fixed;
background: rgba(255,74,87,0.5);
width: ${Math.random() * 3}px;
height: ${Math.random() * 3}px;
top: ${Math.random() * 100}vh;
left: ${Math.random() * 100}vw;
animation: float ${10 + Math.random() * 20}s infinite;
`;
particles.appendChild(particle);
}
}
// 3D Card Flip Effect
function addCardFlip() {
document.querySelectorAll('.team-card').forEach(card => {
card.addEventListener('click', () => {
card.classList.toggle('flipped');
});
});
}
// Audio Effects
const hoverSound = new Audio('https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3');
document.querySelectorAll('.glow-btn').forEach(btn => {
btn.addEventListener('mouseenter', () => hoverSound.play());
});
// Custom Cursor
const cursor = document.createElement('div');
cursor.className = 'custom-cursor';
document.body.appendChild(cursor);
document.addEventListener('mousemove', (e) => {
cursor.style.left = `${e.clientX}px`;
cursor.style.top = `${e.clientY}px`;
});
// Add these CSS for custom cursor:
.custom-cursor {
width: 20px;
height: 20px;
border: 2px solid var(--primary);
border-radius: 50%;
position: fixed;
pointer-events: none;
mix-blend-mode: difference;
z-index: 9999;
transition: transform 0.3s, opacity 0.3s;
}