/* Rocket Visualization Styles */
#rocket-visualization {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.rocket {
    position: absolute;
    width: 60px;
    height: 20px;
    transform-origin: center center;
    transition: transform 0.1s;
    z-index: 10;
}

.rocket-body {
    position: absolute;
    width: 50px;
    height: 20px;
    background: linear-gradient(135deg, #2c3e50, #34495e, #2c3e50);
    border-radius: 20px 10px 10px 20px;
    border: 2px solid #1a252f;
    z-index: 2;
    left: 0;
    top: 0;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
}

.rocket-nose {
    position: absolute;
    left: 45px;
    top: 0px;
    width: 30px;
    height: 20px;
    background: #e74c3c;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    z-index: 3;
}

.rocket-fin {
    position: absolute;
    left: 5px;
    top: -5px;
    width: 8px;
    height: 30px;
    background: linear-gradient(to bottom, #c0392b, #e74c3c);
    clip-path: polygon(0% 0%, 100% 20%, 100% 80%, 0% 100%);
    z-index: 1;
    border-radius: 2px;
}



.rocket-window {
    position: absolute;
    top: 5px;
    left: 30px;
    width: 12px;
    height: 10px;
    background: radial-gradient(circle, #3498db, #1a5276);
    border-radius: 50%;
    border: 1px solid #2c3e50;
    z-index: 3;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}

.rocket-flame {
    position: absolute;
    right: 35px;
    top: 5px;
    width: 40px;
    height: 10px;
    background: linear-gradient(to right, 
        transparent 0%,
        #ff3300 20%,
        #ff9900 50%,
        #ffff00 80%,
        transparent 100%);
    border-radius: 0 5px 5px 0;
    z-index: 0;
    animation: flame 0.1s infinite alternate;
    filter: blur(1px);
}



@keyframes flame {
    0% {
        transform: scaleX(1) translateX(0px);
        opacity: 0.7;
    }
    100% {
        transform: scaleX(1.3) translateX(-5px);
        opacity: 1;
    }
}

@keyframes flame-inner {
    0% {
        transform: scaleX(1);
        opacity: 0.8;
    }
    100% {
        transform: scaleX(1.2);
        opacity: 1;
    }
}

.gravity-well {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.6) 0%, rgba(52, 152, 219, 0.3) 40%, rgba(52, 152, 219, 0.1) 70%, rgba(52, 152, 219, 0) 85%);
    border: 2px solid rgba(52, 152, 219, 0.8);
    z-index: 5;
}

.black-hole {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, 
        #000000 0%, 
        #1a1a1a 15%,
        #2d2d2d 30%,
        transparent 70%);
    box-shadow: 
        0 0 0 2px #000,
        0 0 20px 5px rgba(231, 76, 60, 0.8),
        0 0 40px 10px rgba(52, 152, 219, 0.6),
        inset 0 0 30px 5px rgba(0, 0, 0, 0.9);
    z-index: 20;
    animation: blackhole-pulse 1.5s infinite alternate;
}

@keyframes blackhole-pulse {
    0% {
        transform: scale(1);
        box-shadow: 
            0 0 0 2px #000,
            0 0 20px 5px rgba(231, 76, 60, 0.8),
            0 0 40px 10px rgba(52, 152, 219, 0.6),
            inset 0 0 30px 5px rgba(0, 0, 0, 0.9);
    }
    100% {
        transform: scale(1.1);
        box-shadow: 
            0 0 0 2px #000,
            0 0 30px 8px rgba(231, 76, 60, 0.9),
            0 0 50px 15px rgba(52, 152, 219, 0.7),
            inset 0 0 40px 8px rgba(0, 0, 0, 0.9);
    }
}

.black-hole-accretion {
    position: absolute;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top: 3px solid #e74c3c;
    border-right: 3px solid #3498db;
    border-bottom: 3px solid #f39c12;
    border-left: 3px solid #9b59b6;
    animation: accretion-spin 2s linear infinite;
    z-index: 19;
    filter: blur(0.5px);
}

@keyframes accretion-spin {
    0% {
        transform: rotate(0deg) scale(1.3);
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(360deg) scale(1.3);
        opacity: 0.8;
    }
}

.black-hole-glow {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(231, 76, 60, 0.3) 0%,
        rgba(52, 152, 219, 0.2) 30%,
        transparent 70%);
    animation: glow-pulse 2s infinite alternate;
    z-index: 18;
}

@keyframes glow-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.4);
        opacity: 0.8;
    }
}