@property --rotateX {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}

@property --rotateY {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}

.game.quick-pulse {
    animation-name: quick-pulse;
    animation-direction: alternate;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.game.selectable-focus-visible > img {
    animation-name: rocket-float;
    animation-direction: alternate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes rocket-float {
    50% {
        transform: translateY(10px) rotate(-0.5deg);
    }

    100% {
        transform: translateY(-10px) rotate(0.5deg);
    }
}

/* Quick pulse effect with opacity changes */
@keyframes quick-pulse {
    19.999%,
    22%,
    62.999%,
    64%,
    64.999%,
    70% {
        filter: drop-shadow(-7px -5px 15px #11ff0010) drop-shadow(7px 9px 8px #00ff0010) drop-shadow(4px -10px 10px #ffff0020);
    }

    20%,
    21.999%,
    63%,
    63.999%,
    65%,
    69.999% {
        filter: drop-shadow(-7px -5px 12px #11ff0020) drop-shadow(7px 9px 6px #00ff0005) drop-shadow(4px -10px 15px #ffff0010);
    }
}