@keyframes orbit-spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(20, 30, 60, 0.6), 0 0 40px rgba(30, 40, 80, 0.4), 0 0 20px rgba(59, 130, 246, 0.3);
    }

    50% {
        opacity: 0.8;
        box-shadow: 0 0 15px rgba(10, 20, 50, 0.8), 0 0 60px rgba(20, 30, 70, 0.6), 0 0 80px rgba(59, 130, 246, 0.4);
    }
}

.animate-orbit {
    animation: orbit-spin 40s linear infinite;
}

.twinkle-border {
    animation: twinkle 3s ease-in-out infinite;
}

@keyframes sequential-reveal-1 {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    10% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes sequential-reveal-2 {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    20% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes sequential-reveal-3 {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    30% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.reveal-1 {
    animation: sequential-reveal-1 6s ease-in-out infinite;
}

.reveal-2 {
    animation: sequential-reveal-2 6s ease-in-out infinite;
}

.reveal-3 {
    animation: sequential-reveal-3 6s ease-in-out infinite;
}