/* ============================================
   SHINE BANNERS - Efeito shine nos banners
   Arquivo: /assets/shine-banners.css
   Site: k807q.com
   ============================================ */

/* Wrapper gerado pelo JS ao redor das imagens */
.shine-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: inherit;
    width: 100%;
    line-height: 0;
}

/* A imagem dentro do wrapper ocupa 100% */
.shine-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* A linha brilhante */
.shine-wrapper::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 45%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.50) 50%,
        transparent 80%
    );
    transform: skewX(-20deg);
    animation: shine-sweep 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}

/* Animação da passagem do brilho */
@keyframes shine-sweep {
    0%   { left: -75%; opacity: 0; }
    8%   { opacity: 1; }
    45%  { left: 130%; opacity: 1; }
    46%  { opacity: 0; }
    100% { left: 130%; opacity: 0; }
}

/* Delay diferente para cada banner (visual escalonado) */
.shine-wrapper:nth-child(1)::after { animation-delay: 0s; }
.shine-wrapper:nth-child(2)::after { animation-delay: 0.8s; }
.shine-wrapper:nth-child(3)::after { animation-delay: 1.6s; }
.shine-wrapper:nth-child(4)::after { animation-delay: 2.4s; }
.shine-wrapper:nth-child(5)::after { animation-delay: 3.2s; }
.shine-wrapper:nth-child(6)::after { animation-delay: 0.4s; }