/* Additional CSS for animations and scroll fixes */

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    overflow-x: hidden;
    overflow-y: auto !important;
    min-height: 100vh;
    position: relative;
}

/* Fix for index page scroll */
body.animated-bg {
    overflow-y: visible !important;
    overflow-x: hidden;
}

/* Fix for mobile and desktop scroll */
.animated-bg {
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible !important;
    min-height: 100vh;
}

/* Better star visibility */
.star {
    filter: brightness(1.5);
    background: #ffffff;
    box-shadow: 0 0 4px #ffffff, 0 0 8px #ffffff;
}

/* Enhanced twinkle animation */
@keyframes twinkle {
    0% { 
        opacity: 0; 
        transform: scale(0.5); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2); 
    }
    100% { 
        opacity: 0; 
        transform: scale(0.5); 
    }
}

/* Orb movement improvements */
.orb {
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Enhanced float animation */
@keyframes float-orb {
    0% { 
        transform: translate(0, 0) rotate(0deg) scale(1); 
    }
    20% { 
        transform: translate(80px, -60px) rotate(90deg) scale(1.1); 
    }
    40% { 
        transform: translate(-60px, 40px) rotate(180deg) scale(0.95); 
    }
    60% { 
        transform: translate(-100px, -80px) rotate(270deg) scale(1.05); 
    }
    80% { 
        transform: translate(40px, 60px) rotate(360deg) scale(0.9); 
    }
    100% { 
        transform: translate(0, 0) rotate(360deg) scale(1); 
    }
}

/* Loading optimization */
.stars, .orb, .particle {
    transform: translateZ(0);
}

/* Prevent layout issues */
#stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

#particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Ensure content is above background elements */
.relative {
    position: relative;
    z-index: 10;
}

/* Fix navbar z-index */
.navbar-modern {
    z-index: 100;
}

/* Glass effect improvements */
.glass-effect {
    position: relative;
    z-index: 10;
}