.shine {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;

    background: linear-gradient(
            110deg,
            transparent 0%,
            transparent 30%,
            rgba(255, 255, 255, 0.15) 42%,
            rgba(255, 232, 140, 0.75) 50%,
            rgba(255, 255, 255, 0.2) 58%,
            transparent 70%,
            transparent 100%
    );

    transform: skewX(-18deg);
    animation: shineMove 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shineMove {
    0% {
        left: -120%;
    }

    45% {
        left: -120%;
    }

    80% {
        left: 120%;
    }

    100% {
        left: 120%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shine::after {
        animation: none;
    }
}