/* Base wrapper */
.avatar-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
}

    /* Neon wrapper */
    .avatar-wrapper.neon-ring::after {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 2px solid rgba(0, 255, 255, 0.7);
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.5);
        animation: neonPulse 2.5s infinite ease-in-out;
        z-index: 0;
    }

    /* Rotating ring */
    .avatar-wrapper.rotating-ring::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 2px solid rgba(255, 0, 255, 0.5);
        box-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
        animation: rotateRing 6s linear infinite;
        z-index: 0;
    }

    /* Color cycle ring */
    .avatar-wrapper.color-cycle-ring::after {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 2px solid cyan;
        animation: cycleColors 5s infinite linear;
        z-index: 0;
    }

    /* Ping */
    .avatar-wrapper.ping-effect::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 48px;
        height: 48px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: rgba(0, 255, 255, 0.1);
        animation: radarPing 2s ease-out infinite;
        z-index: 0;
    }

    /* Hex grid */
    .avatar-wrapper.hex-grid::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-image: url('/Content/Images/hex-grid.png');
        background-size: cover;
        mix-blend-mode: screen;
        opacity: 0.3;
        z-index: 2;
        pointer-events: none;
    }

    /* Glitch on hover */
    .avatar-wrapper.glitch-hover:hover img {
        animation: glitchEffect 0.3s linear infinite alternate;
    }



@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.5);
        border-color: rgba(0, 255, 255, 0.7);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 0, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.6);
        border-color: rgba(255, 0, 255, 0.7);
    }
}


@keyframes radarPing {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
    }
}


@keyframes rotateRing {
    0% {
        transform: rotate(0deg);
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    }

    100% {
        transform: rotate(360deg);
        box-shadow: 0 0 20px rgba(255, 0, 255, 0.6);
    }
}


@keyframes cycleColors {
    0% {
        border-color: cyan;
        box-shadow: 0 0 10px cyan;
    }

    25% {
        border-color: magenta;
        box-shadow: 0 0 10px magenta;
    }

    50% {
        border-color: lime;
        box-shadow: 0 0 10px lime;
    }

    75% {
        border-color: orange;
        box-shadow: 0 0 10px orange;
    }

    100% {
        border-color: cyan;
        box-shadow: 0 0 10px cyan;
    }
}


@keyframes glitchEffect {
    0% {
        filter: hue-rotate(0deg) contrast(1);
    }

    100% {
        filter: hue-rotate(20deg) contrast(1.3);
        transform: translateX(1px);
    }
}

.avatar-wrapper.spinner::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-top: 2px solid #00ffff; /* initial color */
    border-radius: 50%;
    animation: rotateSpinner 6s linear infinite;
    z-index: 0;
}

@keyframes rotateSpinner {
    0% {
        border-top-color: #00ffff; /* cyan */
        transform: rotate(0deg);
    }

    25% {
        border-top-color: #ff00ff; /* magenta */
    }

    50% {
        border-top-color: #39ff14; /* neon green */
        transform: rotate(180deg);
    }

    75% {
        border-top-color: #ff073a; /* neon red */
    }

    100% {
        border-top-color: #00ffff; /* back to cyan */
        transform: rotate(360deg);
    }
}


@keyframes neonColorCycle {
    0% {
        border-top-color: #00ffff; /* cyan */
        box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
    }

    25% {
        border-top-color: #ff00ff; /* magenta */
        box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
    }

    50% {
        border-top-color: #39ff14; /* neon green */
        box-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14;
    }

    75% {
        border-top-color: #ff073a; /* neon red */
        box-shadow: 0 0 10px #ff073a, 0 0 20px #ff073a;
    }

    100% {
        border-top-color: #00ffff;
        box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
    }
}