/* Twinkling Stars Background */
.stars, .stars2, .stars3 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.stars {
background: transparent url('data:image/svg+xml,') repeat;
animation: twinkle 4s linear infinite;
}
.stars2 {
background: transparent url('data:image/svg+xml,') repeat;
animation: twinkle 6s linear infinite reverse;
}
.stars3 {
background: transparent url('data:image/svg+xml,') repeat;
animation: twinkle 8s linear infinite;
}
@keyframes twinkle {
0% {
opacity: 0.3;
transform: scale(1);
}
25% {
opacity: 0.8;
transform: scale(1.1);
}
50% {
opacity: 0.5;
transform: scale(1);
}
75% {
opacity: 1;
transform: scale(1.05);
}
100% {
opacity: 0.3;
transform: scale(1);
}
}
/* Additional star effects for more realism */
.stars::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 30%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 60% 20%, rgba(0, 255, 255, 0.08) 0%, transparent 50%);
animation: nebula 20s ease-in-out infinite alternate;
}
@keyframes nebula {
0% {
opacity: 0.3;
transform: rotate(0deg) scale(1);
}
100% {
opacity: 0.6;
transform: rotate(5deg) scale(1.1);
}
}
/* Shooting stars effect */
.stars2::after {
content: '';
position: absolute;
top: 20%;
left: -10%;
width: 2px;
height: 2px;
background: linear-gradient(45deg, transparent, #00ffff, transparent);
border-radius: 50%;
animation: shooting-star 3s linear infinite;
}
@keyframes shooting-star {
0% {
transform: translateX(-100px) translateY(-100px);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateX(100vw) translateY(100vh);
opacity: 0;
}
}