.ant-container {
    display: inline-block;
    perspective: 1500px;
}

.ant-neon-img {
    transition: transform 0.5s ease, filter 0.5s ease;
    cursor: pointer;
    display: block;
    /* Asegurar que la imagen base se vea bien */
}

/* Animación al hacer hover */
.ant-container:hover .ant-neon-img {
    animation: ant-neon-spin 10s ease-in-out forwards;
}

@keyframes ant-neon-spin {
    /* 
       Secuencia de colores aproximada usando hue-rotate sobre base Cyan (#00FFFF):
       0% Cyan (0deg)
       20% Verde (~ -60deg o +300deg) -> Cyan a Verde
       40% Azul (~ +60deg) -> Cyan a Azul
       60% Rojo (~ +180deg) -> Cyan a Rojo
       80% Fuxia/Magenta (~ +120deg) -> Cyan a Magenta
       100% Cyan (0deg o 360deg)
       
       Rotación: Varias vueltas (ej: 5 vueltas = 1800deg)
    */

    0% {
        transform: rotateY(0deg) scale(1);
        filter: hue-rotate(0deg);
        /* Cyan */
    }

    20% {
        transform: rotateY(360deg) scale(1.05);
        filter: hue-rotate(240deg);
        /* Verde (aprox, depende de la rueda de color exacta del navegador) */
    }

    40% {
        transform: rotateY(720deg) scale(1.1);
        filter: hue-rotate(60deg);
        /* Azul */
    }

    60% {
        transform: rotateY(1080deg) scale(1.15);
        filter: hue-rotate(180deg);
        /* Rojo */
    }

    80% {
        transform: rotateY(1440deg) scale(1.1);
        filter: hue-rotate(300deg);
        /* Fuxia/Magenta */
    }

    100% {
        transform: rotateY(1800deg) scale(1);
        filter: hue-rotate(360deg);
        /* Vuelta a Cyan */
    }
}