/* UI Animations */

@keyframes fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.05);
    }
}

@keyframes slide-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes blood-drip {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

@keyframes pulse-red {

    0%,
    100% {
        color: var(--horror-red);
        text-shadow: 0 0 10px var(--horror-red);
    }

    50% {
        color: var(--horror-red-bright);
        text-shadow: 0 0 20px var(--horror-red-bright);
    }
}

@keyframes screen-shake {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate(-2px, 2px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate(2px, -2px);
    }
}

@keyframes shake {
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
}

.animate-slide-up {
    animation: slide-up 0.4s ease-out forwards;
}

.animate-shake {
    animation: shake 0.5s infinite;
}

.animate-blood-red {
    animation: pulse-red 2s infinite;
}

/* Hit marker flash */
@keyframes hit-flash {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(45deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) rotate(45deg);
    }

    100% {
        opacity: 0;
        transform: scale(1) rotate(45deg);
    }
}

.hit-marker-active {
    animation: hit-flash 0.2s ease-out forwards;
}

/* Float animation for HUD elements */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.float-ui {
    animation: float 3s ease-in-out infinite;
}

/* Shimmer effect for loading */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Glow pulse for buttons */
@keyframes glow-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(139, 0, 0, 0.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(230, 57, 70, 0.6);
    }
}

@keyframes ken-burns {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.1) translate(-1%, -1%);
    }
}

.ken-burns {
    animation: ken-burns 20s ease-out infinite alternate;
}

@keyframes static-pulse {

    0%,
    100% {
        opacity: 0.05;
    }

    50% {
        opacity: 0.15;
    }
}

.game-over-static {
    background: radial-gradient(circle, rgba(230, 57, 70, 0.2) 0%, transparent 70%);
    animation: static-pulse 0.1s infinite;
}