/* ✨ Кольцо-косичка и экран загрузки (/assets/fx/ring.js). Подключать там, где нужен экран загрузки или кольцо:
   кабинет, урок, витрина курсов. */
.ks-loader { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; background: rgba(12,12,12,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.ks-loader.on { opacity: 1; visibility: visible; transition: opacity .25s; }
.ks-loader-ring { position: relative; width: min(56vw, 220px); aspect-ratio: 1; }
.ks-loader-ring .ks-ring { width: 100%; height: 100%; animation: ks-spin 9s linear infinite; }
.ks-loader-logo { position: absolute; inset: 21%; width: 58%; height: 58%; border-radius: 50%; object-fit: cover; border: 1px solid #d4af37; box-shadow: 0 0 22px rgba(212,175,55,.45); animation: ks-glow 2.4s ease-in-out infinite; background: #111; }
.ks-loader-text { margin: 0; color: #e9dcdc; font-size: 1rem; text-align: center; max-width: 300px; }
.ks-loader-btn { width: auto; padding: 0 28px; }
.ks-loader.is-fail .ks-ring, .ks-loader.is-fail .ks-loader-logo { animation-play-state: paused; opacity: .5; }
.ks-ring-base .ks-grain ellipse { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.12); stroke-width: .8; }
.ks-ring-base .ks-grain path { display: none; }
.ks-ring-gold .ks-grain { transform-box: fill-box; transform-origin: center; animation: ks-weave var(--wd, 2.8s) linear infinite; animation-delay: calc(var(--i) * var(--wd, 2.8s) / var(--n, 72) - var(--wd, 2.8s)); opacity: 0; }
.ks-ring-gold .ks-grain ellipse { fill: #d4af37; stroke: #6e5210; stroke-width: 1.2; }
.ks-ring-gold .ks-grain path { fill: none; stroke: #f5e08a; stroke-width: 1.1; stroke-linecap: round; }
@keyframes ks-weave { 0% { opacity: 0; transform: scale(.35); } 7% { opacity: 1; transform: scale(1.08); } 12% { transform: scale(1); } 62% { opacity: 1; } 88%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes ks-spin { to { transform: rotate(360deg); } }
@keyframes ks-glow { 50% { box-shadow: 0 0 34px rgba(212,175,55,.7); } }
/* маленькое кольцо в плеере при подгрузке */
.ks-mini { position: absolute; z-index: 4; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.ks-mini.on { opacity: 1; }
.ks-mini .ks-ring { animation: ks-spin 9s linear infinite; filter: drop-shadow(0 0 6px rgba(0,0,0,.7)); }
@media (prefers-reduced-motion: reduce) {
  .ks-loader-ring .ks-ring, .ks-mini .ks-ring, .ks-loader-logo { animation: none; }
  .ks-ring-gold .ks-grain { animation: none; opacity: 1; }
}
.ks-ring { overflow: visible; }
/* быстрое маленькое кольцо — ожидание оплаты (QR, «Проверяем оплату…») */
.ks-ring.is-fast { animation: ks-spin 3s linear infinite; --wd: 1.6s; }
@media (prefers-reduced-motion: reduce) { .ks-ring.is-fast { animation: none; } }