.contest-medal {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.contest-medal > img {
    display: block;
    width: 100%;
    height: 100%;
}

.contest-medal--shine::after,
.contest-medal--sequence.is-shining::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.25) 43%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.25) 57%, transparent 65%) 200% 0 / 300% 100% no-repeat;
    -webkit-mask: var(--contest-medal-image) center / contain no-repeat;
    mask: var(--contest-medal-image) center / contain no-repeat;
    animation: contest-medal-shine 7s ease-in-out infinite alternate;
}

.contest-medal--sequence.is-shining::after {
    animation: contest-medal-sequence 1.4s ease-in-out both;
}

@keyframes contest-medal-sequence {
    from { background-position: 200% 0; }
    to { background-position: -100% 0; }
}

@keyframes contest-medal-shine {
    0%, 25% { background-position: 200% 0; }
    65%, 100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .contest-medal--shine::after,
    .contest-medal--sequence.is-shining::after { display: none; animation: none; }
}
