/* =====================================================
   INSIDER GAME - Animations & Effects
   ===================================================== */

/* ── Neon Flicker (Title) ── */
@keyframes neonFlicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        text-shadow:
            0 0 8px #39ff14,
            0 0 20px #39ff14,
            0 0 50px #39ff14,
            0 0 80px rgba(57, 255, 20, 0.6);
    }

    20%,
    24%,
    55% {
        text-shadow: none;
        opacity: 0.7;
    }
}

/* ── Pulse glow ── */
@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 4px #39ff14, 0 0 12px rgba(57, 255, 20, 0.3);
    }

    50% {
        box-shadow: 0 0 10px #39ff14, 0 0 30px rgba(57, 255, 20, 0.6), 0 0 50px rgba(57, 255, 20, 0.2);
    }
}

/* ── Scanline sweep ── */
@keyframes scanline {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.6;
    }

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

/* ── Fade in up ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

/* ── Fade in ── */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Card flip ── */
@keyframes cardFlip {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(180deg);
    }
}

/* ── Countdown heartbeat ── */
@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.12);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.06);
    }
}

/* ── Timer ring ── */
@keyframes timerDash {
    from {
        stroke-dashoffset: 0;
    }
}

/* ── Role reveal pop ── */
@keyframes rolePop {
    0% {
        transform: scale(0.5) rotate(-8deg);
        opacity: 0;
    }

    70% {
        transform: scale(1.08) rotate(1deg);
    }

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

/* ── Neon border trace ── */
@keyframes borderTrace {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0% 0 0);
    }
}

/* ── Glitch ── */
@keyframes glitch {

    0%,
    100% {
        clip-path: inset(0 0 95% 0);
        transform: translateX(0);
    }

    25% {
        clip-path: inset(20% 0 50% 0);
        transform: translateX(-4px);
    }

    50% {
        clip-path: inset(60% 0 20% 0);
        transform: translateX(4px);
    }

    75% {
        clip-path: inset(85% 0 5% 0);
        transform: translateX(-2px);
    }
}

/* ── Applied classes ── */
.neon-flicker {
    animation: neonFlicker 6s infinite;
}

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease forwards;
}

.animate-fadeIn {
    animation: fadeIn 0.4s ease forwards;
}

.animate-rolePop {
    animation: rolePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* ── Scanline overlay (title screen) ── */
.title-scanline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(transparent, rgba(57, 255, 20, 0.4), transparent);
    animation: scanline 4s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* ── Timer warning states ── */
.timer-warning .timer-ring-progress {
    stroke: var(--neon-yellow) !important;
    filter: drop-shadow(0 0 6px var(--neon-yellow));
}

.timer-critical .timer-ring-progress {
    stroke: var(--neon-red) !important;
    filter: drop-shadow(0 0 8px var(--neon-red));
    animation: heartbeat 1s ease infinite;
}

.timer-critical .timer-time {
    color: var(--neon-red) !important;
    text-shadow: var(--glow-red) !important;
    animation: heartbeat 1s ease infinite;
}