/* Прелоадеры Kaymak.
   Полноэкранный: создаётся components/preloader.js (start/finish/transition).
   Индикатор «тягучие точки»: <span class="k-dots" role="status" aria-label="Загрузка"></span> */

.k-preloader { position: fixed; inset: 0; z-index: 9999; pointer-events: all; overflow: hidden; }
.k-preloader.is-done { pointer-events: none; }
.k-preloader__red, .k-preloader__cream { position: absolute; inset: 0; filter: url(#k-goo-xl); }
.k-preloader__sheet { position: absolute; left: -20px; right: -20px; top: -20px; background: var(--k-mat-red); }
.k-preloader__band { position: absolute; left: -20px; right: -20px; top: -20px; height: 34px; background: var(--k-cream); }
.k-preloader__col { position: absolute; top: -20px; border-radius: 0 0 999px 999px; }
.k-preloader__drop { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--k-cream); }
.k-preloader__brand { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.k-preloader__brand kaymak-logo { width: min(520px, 70vw); }
.k-preloader__pct { position: absolute; left: 28px; bottom: 24px; font: 700 14px var(--k-font-text); color: var(--k-cream); opacity: .85; font-variant-numeric: tabular-nums; }

/* «Тягучие точки» */
.k-dots { position: relative; display: inline-block; width: 120px; height: 40px; filter: url(#k-goo); color: var(--k-red); }
.k-dots::before, .k-dots::after, .k-dots { --s: 24px; }
.k-dots::before, .k-dots::after { content: ""; position: absolute; top: 8px; left: 48px; width: var(--s); height: var(--s); border-radius: 50%; background: currentColor; }
.k-dots { background: radial-gradient(circle at 50% 50%, currentColor 0 12px, transparent 12.5px) center / 24px 24px no-repeat; animation: k-dots-mid 1.6s ease-in-out infinite; }
.k-dots::before { animation: k-dots-l 1.6s ease-in-out infinite; }
.k-dots::after { animation: k-dots-r 1.6s ease-in-out infinite; }
@keyframes k-dots-l { 0%, 100% { transform: translateX(-34px); } 50% { transform: translateX(0) scale(1.15); } }
@keyframes k-dots-r { 0%, 100% { transform: translateX(34px); } 50% { transform: translateX(0) scale(1.15); } }
@keyframes k-dots-mid { 0%, 100% { background-size: 30px 30px; } 50% { background-size: 20px 20px; } }

@media (prefers-reduced-motion: reduce) {
  .k-dots, .k-dots::before, .k-dots::after { animation: none; }
  .k-dots::before { transform: translateX(-30px); }
  .k-dots::after { transform: translateX(30px); }
  .k-preloader { transition: opacity .3s; }
}