/* =========================================================
   Mishkalang — общие стили: свайпы, подсказка, лоадер.
   Подключение:  <link rel="stylesheet" href="/swipe-nav.css?v=1">
   Требует переменных темы: --text-muted, --border-color,
   --surface-hover, --accent-primary.
   ========================================================= */

/* ---------- Зона свайпа ---------- */
#swipe-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    touch-action: pan-y;
}

.swipe-anim-left  { animation: mk-slide-left  0.32s ease-in-out; }
.swipe-anim-right { animation: mk-slide-right 0.32s ease-in-out; }

@keyframes mk-slide-left {
    0%   { transform: translateX(0);     opacity: 1; }
    45%  { transform: translateX(-35px); opacity: 0; }
    55%  { transform: translateX(35px);  opacity: 0; }
    100% { transform: translateX(0);     opacity: 1; }
}
@keyframes mk-slide-right {
    0%   { transform: translateX(0);     opacity: 1; }
    45%  { transform: translateX(35px);  opacity: 0; }
    55%  { transform: translateX(-35px); opacity: 0; }
    100% { transform: translateX(0);     opacity: 1; }
}

/* ---------- Подсказка ---------- */
#swipe-hint {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 7px 14px;
    margin: -14px 0 20px 0;
    opacity: 0;
    transition: opacity 0.45s ease;
    user-select: none;
    -webkit-user-select: none;
    text-align: center;
}
#swipe-hint.visible { display: flex; opacity: 1; }

.swipe-nudge { animation: mk-nudge 0.95s ease-in-out; }
@keyframes mk-nudge {
    0%, 100% { transform: translateX(0); }
    22%      { transform: translateX(-16px); }
    55%      { transform: translateX(10px); }
    80%      { transform: translateX(-4px); }
}

/* ---------- Скелетон ---------- */
.mk-skeleton {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: linear-gradient(
        90deg,
        var(--surface-hover) 25%,
        var(--border-color) 50%,
        var(--surface-hover) 75%
    );
    background-size: 200% 100%;
    animation: mk-shimmer 1.4s ease-in-out infinite;
}
@keyframes mk-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-skeleton { animation: none; background: var(--surface-hover); }
}

/* ---------- Лоадер ---------- */
/* Размер задаётся в em, поэтому спиннер наследует font-size родителя
   и сам подстраивается под крупный заголовок или мелкий текст. */
.mk-loader {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border: 0.1em solid rgba(2, 132, 199, 0.2);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: mk-spin 0.7s linear infinite;
    vertical-align: -0.1em;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* Обёртка для случаев, когда лоадер вставляется в пустой контейнер
   без крупного шрифта (сетка карточек, список вариантов). */
.mk-loader-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 40px;
    min-height: 120px;
}

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    .swipe-anim-left,
    .swipe-anim-right,
    .swipe-nudge { animation: none; }
    .mk-loader { animation-duration: 1.6s; }
}