/* Asteroid Animations - Separate CSS for Performance */

/* Dark Background for Asteroids */
.full-page-asteroids {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(135deg, #0a0a0a, #1a1a1a, #0f0f0f);
}

.full-asteroid {
    position: absolute;
    object-fit: contain;
    filter: drop-shadow(0 0 40px rgba(74, 85, 104, 0.9));
    opacity: 1;
}

/* Fast Random Direction Asteroid Animations */
@keyframes fastAsteroid1 {
    0% {
        transform: translateX(-600px) translateY(0px) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 600px)) translateY(-200px) rotate(720deg);
        opacity: 0;
    }
}

@keyframes fastAsteroid2 {
    0% {
        transform: translateX(-800px) translateY(100px) rotate(0deg);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    92% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 800px)) translateY(-300px) rotate(-720deg);
        opacity: 0;
    }
}

@keyframes fastAsteroid3 {
    0% {
        transform: translateX(-700px) translateY(-50px) rotate(0deg);
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    94% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 700px)) translateY(150px) rotate(540deg);
        opacity: 0;
    }
}

@keyframes fastAsteroid4 {
    0% {
        transform: translateX(-900px) translateY(80px) rotate(0deg);
        opacity: 0;
    }
    7% {
        opacity: 1;
    }
    93% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 900px)) translateY(-250px) rotate(-540deg);
        opacity: 0;
    }
}

@keyframes fastAsteroid5 {
    0% {
        transform: translateX(-500px) translateY(-30px) rotate(0deg);
        opacity: 0;
    }
    4% {
        opacity: 1;
    }
    96% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 500px)) translateY(180px) rotate(900deg);
        opacity: 0;
    }
}

@keyframes fastAsteroid6 {
    0% {
        transform: translateX(-750px) translateY(60px) rotate(0deg);
        opacity: 0;
    }
    9% {
        opacity: 1;
    }
    91% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 750px)) translateY(-180px) rotate(-900deg);
        opacity: 0;
    }
}

@keyframes fastAsteroid7 {
    0% {
        transform: translateX(-900px) translateY(-60px) rotate(0deg);
        opacity: 0;
    }
    7% {
        opacity: 1;
    }
    93% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 900px)) translateY(120px) rotate(1080deg);
        opacity: 0;
    }
}

@keyframes fastAsteroid8 {
    0% {
        transform: translateX(-650px) translateY(90px) rotate(0deg);
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    94% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 650px)) translateY(-200px) rotate(-1080deg);
        opacity: 0;
    }
}

@keyframes fastAsteroid9 {
    0% {
        transform: translateX(-850px) translateY(-40px) rotate(0deg);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    92% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 850px)) translateY(160px) rotate(720deg);
        opacity: 0;
    }
}

@keyframes fastAsteroid10 {
    0% {
        transform: translateX(-550px) translateY(70px) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 550px)) translateY(-140px) rotate(-720deg);
        opacity: 0;
    }
}

@keyframes fastAsteroid11 {
    0% {
        transform: translateX(-950px) translateY(-80px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 950px)) translateY(180px) rotate(540deg);
        opacity: 0;
    }
}

@keyframes fastAsteroid12 {
    0% {
        transform: translateX(-700px) translateY(50px) rotate(0deg);
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    94% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 700px)) translateY(-160px) rotate(-540deg);
        opacity: 0;
    }
}

/* Large Random Size Asteroid Individual Styles */
.full-asteroid-1 {
    width: 580px;
    height: 580px;
    top: 10%;
    animation: fastAsteroid1 25s linear infinite;
    animation-delay: 0s;
    transform: scaleX(-1) rotate(30deg);
}

.full-asteroid-2 {
    width: 720px;
    height: 720px;
    top: 60%;
    animation: fastAsteroid2 28s linear infinite;
    animation-delay: 0s;
    transform: scaleY(-1) rotate(-45deg);
}

.full-asteroid-3 {
    width: 480px;
    height: 480px;
    top: 0%;
    animation: fastAsteroid3 22s linear infinite;
    animation-delay: 0s;
    transform: rotate(60deg) scaleX(-1);
}

.full-asteroid-4 {
    width: 650px;
    height: 650px;
    top: 70%;
    animation: fastAsteroid4 30s linear infinite;
    animation-delay: 0s;
    transform: scaleX(-1) scaleY(-1) rotate(-30deg);
}

.full-asteroid-5 {
    width: 520px;
    height: 520px;
    top: 30%;
    animation: fastAsteroid5 26s linear infinite;
    animation-delay: 0s;
    transform: rotate(75deg);
}

.full-asteroid-6 {
    width: 750px;
    height: 750px;
    top: 80%;
    animation: fastAsteroid6 24s linear infinite;
    animation-delay: 0s;
    transform: scaleX(-1) rotate(-60deg);
}

.full-asteroid-7 {
    width: 680px;
    height: 680px;
    top: 5%;
    animation: fastAsteroid7 27s linear infinite;
    animation-delay: 0s;
    transform: rotate(90deg) scaleX(-1);
}

.full-asteroid-8 {
    width: 590px;
    height: 590px;
    top: 45%;
    animation: fastAsteroid8 23s linear infinite;
    animation-delay: 0s;
    transform: scaleY(-1) rotate(-75deg);
}

.full-asteroid-9 {
    width: 710px;
    height: 710px;
    top: 15%;
    animation: fastAsteroid9 29s linear infinite;
    animation-delay: 0s;
    transform: rotate(45deg) scaleX(-1) scaleY(-1);
}

.full-asteroid-10 {
    width: 530px;
    height: 530px;
    top: 85%;
    animation: fastAsteroid10 21s linear infinite;
    animation-delay: 0s;
    transform: rotate(-90deg);
}

.full-asteroid-11 {
    width: 620px;
    height: 620px;
    top: 50%;
    animation: fastAsteroid11 25s linear infinite;
    animation-delay: 0s;
    transform: scaleX(-1) rotate(120deg);
}

.full-asteroid-12 {
    width: 470px;
    height: 470px;
    top: 90%;
    animation: fastAsteroid12 31s linear infinite;
    animation-delay: 0s;
    transform: rotate(-120deg) scaleY(-1);
}

/* Responsive adjustments for fast asteroids */
@media (max-width: 768px) {
    .full-asteroid-1 {
        width: 290px;
        height: 290px;
        top: 10%;
    }
    
    .full-asteroid-2 {
        width: 360px;
        height: 360px;
        top: 60%;
    }
    
    .full-asteroid-3 {
        width: 240px;
        height: 240px;
        top: 0%;
    }
    
    .full-asteroid-4 {
        width: 325px;
        height: 325px;
        top: 70%;
    }
    
    .full-asteroid-5 {
        width: 260px;
        height: 260px;
        top: 30%;
    }
    
    .full-asteroid-6 {
        width: 375px;
        height: 375px;
        top: 80%;
    }
    
    .full-asteroid-7 {
        width: 340px;
        height: 340px;
        top: 5%;
    }
    
    .full-asteroid-8 {
        width: 295px;
        height: 295px;
        top: 45%;
    }
    
    .full-asteroid-9 {
        width: 355px;
        height: 355px;
        top: 15%;
    }
    
    .full-asteroid-10 {
        width: 265px;
        height: 265px;
        top: 85%;
    }
    
    .full-asteroid-11 {
        width: 310px;
        height: 310px;
        top: 50%;
    }
    
    .full-asteroid-12 {
        width: 235px;
        height: 235px;
        top: 90%;
    }
}

/* Additional Random Movement Keyframes */
@keyframes randomFloat1 {
    0% { transform: translateX(-400px) translateY(0px) rotate(0deg); }
    25% { transform: translateX(25vw) translateY(-100px) rotate(90deg); }
    50% { transform: translateX(50vw) translateY(50px) rotate(180deg); }
    75% { transform: translateX(75vw) translateY(-150px) rotate(270deg); }
    100% { transform: translateX(calc(100vw + 400px)) translateY(0px) rotate(360deg); }
}

@keyframes randomFloat2 {
    0% { transform: translateX(-500px) translateY(0px) rotate(0deg); }
    20% { transform: translateX(20vw) translateY(100px) rotate(-90deg); }
    40% { transform: translateX(40vw) translateY(-80px) rotate(-180deg); }
    60% { transform: translateX(60vw) translateY(120px) rotate(-270deg); }
    80% { transform: translateX(80vw) translateY(-50px) rotate(-360deg); }
    100% { transform: translateX(calc(100vw + 500px)) translateY(0px) rotate(-450deg); }
}

/* Random Direction Classes */
.random-direction-1 {
    animation: randomFloat1 20s ease-in-out infinite;
}

.random-direction-2 {
    animation: randomFloat2 18s ease-in-out infinite;
}