/* A move learned (MoveLearned): clean and broadcast-like. One element colour, one light sweep, measured timing. */
.sk-learned {
    position: fixed; inset: 0; z-index: 1700;
    display: grid; place-items: center;
    padding: 24px 18px calc(24px + var(--sc-safe-bottom, 0px));
    color: var(--sc-text);
}
.sk-learned-backdrop {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 45% at 50% 38%, color-mix(in srgb, var(--el) 22%, transparent) 0%, transparent 70%),
        color-mix(in srgb, var(--sc-bg) 88%, #000 12%);
    backdrop-filter: blur(6px);
    animation: ml-fade 0.3s ease both;
}
.sk-learned-card {
    position: relative; width: min(360px, 100%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 26px 22px 20px; border-radius: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sc-bg-elevated) 94%, var(--el) 6%), var(--sc-bg-elevated));
    border: 1px solid color-mix(in srgb, var(--el) 30%, rgba(255, 255, 255, 0.08));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    text-align: center;
    animation: ml-card 0.45s cubic-bezier(.2, .9, .3, 1) both;
}

/* The move it replaced slides down and fades before anything else */
.sk-learned-old {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sc-text-muted);
    animation: ml-old 0.9s ease 0.2s both;
}
.sk-learned-old s { text-decoration-thickness: 1.5px; }
@keyframes ml-old { 0% { opacity: 0; transform: translateY(-6px); } 30% { opacity: 1; transform: none; } 100% { opacity: 0.55; transform: translateY(2px); } }

.sk-learned-emblem { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 2px 0 4px; }
.sk-learned-emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sk-learned-track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 2; }
.sk-learned-ring { fill: none; stroke: var(--el); stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 340; stroke-dashoffset: 340; filter: drop-shadow(0 0 4px var(--el));
    animation: ml-draw 0.9s cubic-bezier(.6, 0, .2, 1) 0.25s forwards; }
.sk-learned-ring.is-inner { stroke-width: 1; opacity: 0.45; stroke-dasharray: 290; stroke-dashoffset: 290; animation-delay: 0.45s; }
@keyframes ml-draw { to { stroke-dashoffset: 0; } }
.sk-learned-emblem .sk-element { opacity: 0; animation: ml-emblem 0.5s cubic-bezier(.2, 1.3, .4, 1) 0.55s forwards; }
@keyframes ml-emblem { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

.sk-learned-eyebrow {
    font-size: 11.5px; font-weight: 800; color: var(--el); text-transform: uppercase;
    letter-spacing: 1px; opacity: 0;
    animation: ml-track 0.7s ease 0.85s forwards;
}
@keyframes ml-track { from { opacity: 0; letter-spacing: 1px; } to { opacity: 1; letter-spacing: 6px; } }

.sk-learned-name {
    position: relative; margin: 0; overflow: hidden;
    font-family: var(--sc-font-display); font-size: clamp(26px, 8vw, 34px); line-height: 1.1;
}
.sk-learned-name span { display: inline-block; opacity: 0; animation: ml-rise 0.55s cubic-bezier(.2, .9, .3, 1) 1s forwards; }
.sk-learned-name::after {
    content: ""; position: absolute; inset: -20% auto -20% -40%; width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg); opacity: 0;
    animation: ml-sweep 0.9s ease 1.4s forwards;
}
@keyframes ml-rise { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }
@keyframes ml-sweep { 0% { left: -40%; opacity: 1; } 100% { left: 130%; opacity: 0; } }

.sk-learned-rule { display: block; width: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--el), transparent);
    animation: ml-wipe 0.6s ease 1.5s forwards; }
@keyframes ml-wipe { to { width: 70%; } }

.sk-learned-who { margin: 0; font-size: 13.5px; color: var(--sc-text-muted); opacity: 0; animation: ml-fade 0.4s ease 1.6s forwards; }

.sk-learned-stats { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.sk-learned-stats > span {
    display: grid; justify-items: center; gap: 1px; min-width: 76px; padding: 8px 10px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07);
    opacity: 0; animation: ml-slide 0.4s cubic-bezier(.2, .9, .3, 1) calc(1.7s + var(--i) * 0.12s) forwards;
}
.sk-learned-stats b { font-size: 16px; }
.sk-learned-stats small { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--sc-text-muted); }
@keyframes ml-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.sk-learned-desc { margin: 4px 0 0; font-size: 13.5px; color: var(--sc-text-muted); opacity: 0; animation: ml-fade 0.4s ease 2.1s forwards; }
.sk-learned-go { margin-top: 8px; min-width: 160px; opacity: 0; animation: ml-fade 0.35s ease 2.2s forwards; }

@keyframes ml-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ml-card { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }

.sk-learned.is-skipped *, .sk-learned.is-skipped *::after { animation-delay: 0s !important; animation-duration: 0.01s !important; }

@media (prefers-reduced-motion: reduce) {
    .sk-learned *, .sk-learned *::after { animation-duration: 0.01s !important; animation-delay: 0s !important; }
}