/* Shared three-star finish: a metallic rim, never an overlay on the content. */
@property --gold-phase {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.topic-card.lesson-perfect,
.card.card-perfect {
    position: relative;
    border: 2px solid #d8bd78;
    box-shadow: 0 0 18px rgba(216, 189, 120, .12), inset 0 1px 0 rgba(255, 242, 207, .12);
}

.topic-card.lesson-perfect:hover,
.topic-node:hover > .topic-card.lesson-perfect {
    border-color: #ecd49a;
    box-shadow: 0 0 24px rgba(236, 212, 154, .20);
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .topic-card.lesson-perfect::before,
    .card.card-perfect::before {
        content: '';
        position: absolute;
        inset: -2px;
        padding: 2px;
        border-radius: inherit;
        pointer-events: none;
        background: conic-gradient(from calc(var(--gold-phase) + var(--gold-tilt, 0deg)),
            #af965f 0deg, #d8bd78 45deg, #efdcaa 72deg,
            #fffaf0 85deg, #fff 89deg, #e6ce91 101deg,
            #bda36b 150deg, #d3b775 210deg, #f4e5bf 248deg,
            #fffaf0 260deg, #d8bd78 278deg, #af965f 360deg);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        animation: gold-sheen 24s linear infinite;
    }
}

.topic-card.lesson-perfect:focus-visible {
    outline: 3px solid var(--accent, #6cf6ff);
    outline-offset: 4px;
}

@keyframes gold-sheen {
    to { --gold-phase: 360deg; }
}

.gold-motion-paused .lesson-perfect::before,
.gold-motion-paused .card-perfect::before {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .topic-card.lesson-perfect::before,
    .card.card-perfect::before {
        animation: none;
        --gold-tilt: 0deg;
    }
}