/* Enhanced Starfield Background - Optional Addition */
/* Alternative: Pure CSS Animated Starfield */
.css-starfield {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
background:
radial-gradient(2px 2px at 20% 30%, white, transparent),
radial-gradient(2px 2px at 40% 80%, rgba(255, 255, 255, 0.8), transparent),
radial-gradient(1px 1px at 90% 40%, rgba(255, 255, 255, 0.9), transparent),
radial-gradient(1px 1px at 10% 60%, rgba(255, 255, 255, 0.7), transparent),
radial-gradient(2px 2px at 70% 20%, rgba(255, 255, 255, 0.6), transparent),
radial-gradient(1px 1px at 80% 90%, rgba(255, 255, 255, 0.8), transparent),
radial-gradient(1px 1px at 30% 50%, rgba(255, 255, 255, 0.9), transparent),
radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.7), transparent);
background-size: 200px 200px;
animation: starfieldMove 120s linear infinite;
}
@keyframes starfieldMove {
0% { transform: translateY(0); }
100% { transform: translateY(-200px); }
}
/* Shooting Stars */
.shooting-star {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
overflow: hidden;
}
.shooting-star::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 300px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.8), transparent);
animation: shootingStar 3s linear infinite;
}
@keyframes shootingStar {
0% {
transform: translateX(-300px) translateY(-50px);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateX(calc(100vw + 300px)) translateY(50px);
opacity: 0;
}
}
/* Nebula Background */
.nebula-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -2;
background:
radial-gradient(ellipse at 20% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 40% 80%, rgba(0, 255, 136, 0.1) 0%, transparent 50%);
animation: nebulaDrift 60s ease-in-out infinite;
}
@keyframes nebulaDrift {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.1) rotate(180deg); }
}
/* Particle System */
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(0, 212, 255, 0.6);
border-radius: 50%;
animation: particleFloat 15s linear infinite;
}
.particle:nth-child(odd) {
background: rgba(168, 85, 247, 0.6);
animation-duration: 20s;
}
.particle:nth-child(3n) {
background: rgba(0, 255, 136, 0.6);
animation-duration: 25s;
}
@keyframes particleFloat {
0% {
transform: translateY(100vh) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) translateX(100px);
opacity: 0;
}
}
/* Grid Overlay */
.cyber-grid {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -3;
background-image:
linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
background-size: 100px 100px;
animation: gridPulse 4s ease-in-out infinite;
}
@keyframes gridPulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.1; }
}
/* How to use these backgrounds */
/*
Add any of these classes to your body or a container:
1. CSS Starfield:
2. Shooting Stars:
3. Nebula Background:
4. Cyber Grid:
5. Particle System (requires JavaScript):
Example combination:
*/