@keyframes starPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
    }
    25% {
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 16px rgba(255, 255, 255, 1));
    }
    75% {
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    }
}

@keyframes mapSway {
    0% {
        transform: rotate(-1deg);
    }
    50% {
        transform: rotate(1deg);
    }
    100% {
        transform: rotate(-1deg);
    }
}

#mapContainer.animate-rotation {
    animation: mapSway 20s ease-in-out infinite;
}

@keyframes zoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5);
    }
}

@keyframes blobify {
    0% {
        border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
        transform: translateX(0) translateY(0) scale(1);
    }
    50% {
        border-radius: 30% 70% 70% 30% / 40% 60% 40% 60%;
        transform: translateX(100px) translateY(100px) scale(1.2);
    }
    100% {
        border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
        transform: translateX(0) translateY(0) scale(1);
    }
}

@keyframes noise {
    0% {
        transform: translate3d(0, 9rem, 0);
    }
    10% {
        transform: translate3d(-1rem, -4rem, 0);
    }
    20% {
        transform: translate3d(-8rem, 2rem, 0);
    }
    30% {
        transform: translate3d(9rem, -9rem, 0);
    }
    40% {
        transform: translate3d(-2rem, 7rem, 0);
    }
    50% {
        transform: translate3d(-9rem, -4rem, 0);
    }
    60% {
        transform: translate3d(2rem, 6rem, 0);
    }
    70% {
        transform: translate3d(7rem, -8rem, 0);
    }
    80% {
        transform: translate3d(-9rem, 1rem, 0);
    }
    90% {
        transform: translate3d(6rem, -5rem, 0);
    }
    100% {
        transform: translate3d(-7rem, 0, 0);
    }
}

.grain {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    z-index: 1;
    transform: translateZ(0);
}

.grain::before {
    content: "";
    top: -10rem;
    left: -10rem;
    width: calc(100% + 20rem);
    height: calc(100% + 20rem);
    z-index: 2;
    position: absolute;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3Oeli1');
    opacity: 0.15;
    pointer-events: none;
    animation: noise 1s steps(2) infinite;
    will-change: transform;
}

#backgroundAnimation {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, #0d1f38, #000);
}

#backgroundAnimation::before {
    content: "";
    position: absolute;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle at top left, #062d57 30%, #41ffd2 110%);
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
    left: -20%;
    top: -20%;
    filter: blur(150px);
    animation: blobify 7s ease-in-out 0s infinite;
    will-change: transform, border-radius;
}

#backgroundAnimation::after {
    content: "";
    position: absolute;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle at bottom right, #073979, #41ffd2 90%);
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
    right: -15%;
    bottom: -30%;
    filter: blur(150px);
    animation: blobify 10s ease-in-out 0s infinite;
    will-change: transform, border-radius;
}

.star-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}