/* Efeito de Brilho Automático + Hover */
.art-shine {
    position: relative;
    overflow: hidden;
}

.art-shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    
    /* Esta linha faz o brilho rodar sozinho a cada 6 segundos */
    animation: auto-shine 6s infinite;
}

/* Quando passa o mouse, o brilho atravessa MAIS RÁPIDO */
.art-shine:hover::after {
    animation: hover-shine 0.8s forwards;
}

/* Animação Automática (Lenta) */
@keyframes auto-shine {
    0% { left: -150%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

/* Animação do Mouse (Rápida) */
@keyframes hover-shine {
    from { left: -150%; }
    to { left: 150%; }
}

/* Efeito de Luz Lento e Elegante */

/* Efeito de Luz - Optimized for Desktop & Mobile */
.art-sweep-slow {
    position: relative;
    overflow: hidden;
    /* Fix for Safari/Chrome Mobile to keep the shine inside the box */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    cursor: pointer;
}

.art-sweep-slow::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%; /* Slightly wider for better visibility on small screens */
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    z-index: 2;
    /* Works on mobile automatically */
    animation: auto-shine-slow 6s infinite ease-in-out;
}

/* Hover/Touch trigger */
.art-sweep-slow:hover::after,
.art-sweep-slow:active::after {
    animation: hover-shine-fast 0.8s forwards;
}

@keyframes auto-shine-slow {
    0% { left: -150%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

@keyframes hover-shine-fast {
    from { left: -150%; }
    to { left: 150%; }
}

/* Fix for mobile z-index layering */
.art-sweep-slow img {
    position: relative;
    z-index: 1;
    display: block;
}