/* Rocket Launch Animation Styles */

/* Rocket Launch Animation */
.rocket-icon.launching {
    position: fixed !important;
    z-index: 9999;
    pointer-events: none;
    border: none !important;
    animation: rocketLaunch 3s ease-out forwards;
}



@keyframes rocketLaunch {
    0% {
        transform: translateY(0) rotate(-90deg) scale(1);
        opacity: 1;
    }
    20% {
        transform: translateY(-100px) rotate(-90deg) scale(1.1);
        opacity: 1;
    }
    50% {
        transform: translateY(-50vh) rotate(-90deg) scale(1.3);
        opacity: 0.8;
    }
    80% {
        transform: translateY(-80vh) rotate(-90deg) scale(1.5);
        opacity: 0.4;
    }
    100% {
        transform: translateY(-100vh) rotate(-90deg) scale(1.8);
        opacity: 0;
    }
}





/* Emoji Rocket Launch Animation */
#a-rocket {
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
}

#a-rocket:hover {
    transform: scale(1.2);
}

#a-rocket.launching-right {
    position: fixed !important;
    z-index: 9999;
    pointer-events: none;
    animation: rocketLaunchRight 4s ease-out forwards;
}



@keyframes rocketLaunchRight {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    20% {
        transform: translateX(150px) translateY(-120px) rotate(20deg) scale(1.1);
        opacity: 1;
    }
    40% {
        transform: translateX(40vw) translateY(-200px) rotate(35deg) scale(1.2);
        opacity: 0.95;
    }
    60% {
        transform: translateX(65vw) translateY(-180px) rotate(40deg) scale(1.4);
        opacity: 0.8;
    }
    80% {
        transform: translateX(85vw) translateY(-120px) rotate(45deg) scale(1.6);
        opacity: 0.4;
    }
    100% {
        transform: translateX(100vw) translateY(-80px) rotate(50deg) scale(1.8);
        opacity: 0;
    }
}