/* ============================================
   STAR BACKGROUND - Shared Styles
   ============================================ */

.star-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.star-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300%;
    will-change: transform;
    transition: transform 0.4s ease-out;
}

.star {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
}

/* Layer 1 - Closest, biggest stars, fastest movement */
.star-layer-1 .star {
    width: 4px;
    height: 4px;
    opacity: 0.95;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6);
}

/* Layer 2 */
.star-layer-2 .star {
    width: 3px;
    height: 3px;
    opacity: 0.8;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.4);
}

/* Layer 3 - Middle */
.star-layer-3 .star {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.3);
}

/* Layer 4 */
.star-layer-4 .star {
    width: 1.5px;
    height: 1.5px;
    opacity: 0.45;
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.2);
}

/* Layer 5 - Farthest, smallest stars, slowest movement */
.star-layer-5 .star {
    width: 1px;
    height: 1px;
    opacity: 0.3;
}

/* Star Animations */
@keyframes twinkle {
    0%, 100% { opacity: inherit; }
    50% { opacity: 0.2; }
}

@keyframes driftLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-30px); }
}

@keyframes driftRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(30px); }
}

@keyframes driftWave {
    0% { transform: translateX(-20px); }
    25% { transform: translateX(10px); }
    50% { transform: translateX(25px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(-20px); }
}

@keyframes driftDiagonal {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(15px, -10px); }
    50% { transform: translate(30px, 5px); }
    75% { transform: translate(10px, 10px); }
}