/* Shared MariaStacks Match Score ring.
 * A complete neutral track is always visible. The color layer is revealed from
 * 12 o'clock clockwise and is driven by --ms-match-ring-progress.
 */

.ms-match-ring {
    --ms-match-ring-thickness: 4px;
    --ms-match-ring-target: 0%;
    --ms-match-ring-progress: var(--ms-match-ring-target);
    position: relative;
    isolation: isolate;
    contain: paint;
}

.ms-match-ring::before,
.ms-match-ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

.ms-match-ring::before {
    background: var(--ms-meter-track-dark, rgba(255,255,255,0.14));
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--ms-match-ring-thickness)),
        #000 calc(100% - var(--ms-match-ring-thickness))
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--ms-match-ring-thickness)),
        #000 calc(100% - var(--ms-match-ring-thickness))
    );
}

.ms-match-ring::after {
    background: var(--ms-match-score-ring-gradient);
    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - var(--ms-match-ring-thickness)),
            #000 calc(100% - var(--ms-match-ring-thickness))
        ),
        conic-gradient(
            from 0deg,
            #000 0 var(--ms-match-ring-progress),
            transparent var(--ms-match-ring-progress) 100%
        );
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - var(--ms-match-ring-thickness)),
            #000 calc(100% - var(--ms-match-ring-thickness))
        ),
        conic-gradient(
            from 0deg,
            #000 0 var(--ms-match-ring-progress),
            transparent var(--ms-match-ring-progress) 100%
        );
    mask-composite: intersect;
    will-change: -webkit-mask-image, mask-image;
    transform: translateZ(0);
    backface-visibility: hidden;
}


/* JavaScript owns the reveal. The no-JS fallback keeps the server-rendered
 * target visible instead of leaving an empty progress ring. */
.js .ms-match-ring[data-match-ring-target] {
    --ms-match-ring-progress: 0%;
}

@media (prefers-reduced-motion: reduce) {
    .js .ms-match-ring[data-match-ring-target] {
        --ms-match-ring-progress: var(--ms-match-ring-target);
    }
}

/* Subscription-page demo uses the same 0–100 Match Score language as albums.
 * Existing hero sizing/typography remain owned by the subscription page styles. */
.abo-score-circle.ms-match-ring {
    border: 0 !important;
    background: transparent !important;
}

.abo-score-circle.ms-match-ring .abo-score-number::after {
    content: "%";
    margin-left: 0.08em;
    font-size: 0.45em;
    line-height: 1;
    vertical-align: 0.12em;
    letter-spacing: 0;
    opacity: 0.82;
}