/* Stars Animation for Desktop */
.stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.star {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 70%, transparent 100%);
    border-radius: 50%;
    animation: float linear infinite;
    opacity: 0;
    filter: blur(0.5px);
}

/* Different star sizes */
.star.small {
    width: 2px;
    height: 2px;
}

.star.medium {
    width: 3px;
    height: 3px;
}

.star.large {
    width: 4px;
    height: 4px;
}

/* Animation for stars */
@keyframes float {
    0% {
        transform: translateY(100vh) translateX(-50px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(50px);
        opacity: 0;
    }
}

/* Left side stars animation */
.star.left {
    animation-name: float-left;
    left: 10%;
}

@keyframes float-left {
    0% {
        transform: translateY(100vh) translateX(-30px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(20px);
        opacity: 0;
    }
}

/* Right side stars animation */
.star.right {
    animation-name: float-right;
    right: 10%;
}

@keyframes float-right {
    0% {
        transform: translateY(100vh) translateX(30px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(-20px);
        opacity: 0;
    }
}

/* Night mode support */
body.night-mode .star {
    background: radial-gradient(circle, rgba(179, 127, 235, 0.8) 0%, rgba(179, 127, 235, 0.3) 70%, transparent 100%);
}

/* Hide stars on mobile devices */
@media (max-width: 767px) {
    .stars-container {
        display: none;
    }
}

/* Performance optimization */
.stars-container {
    will-change: transform;
    transform: translateZ(0);
}

.star {
    will-change: transform, opacity;
    transform: translateZ(0);
}