/* app/static/css/dk_loader.css
   v0.3.0 — анимация принудительная на всех устройствах: удалён блок prefers-reduced-motion (телефоны с отключёнными анимациями гасили полёт граней)
   v0.2.0 — временно скрыт старый прелоадер #ptrOverlay */
/* ════════════════════════════════════════════════════════════
   КОНТЕЙНЕР — фуллскрин-оверлей поверх контента (под модалками).
   Разметку в body вставляет dk_loader.js; фазы — классы на #dkLoader:
     .is-active     — оверлей видим
     .dk-phase-in   — грани прилетают и собираются (контур → заливка)
     .dk-phase-hold — собранный зуб «дышит», страница ещё грузится
     .dk-phase-out  — заливка гаснет, контур стирается, грани улетают
                      В ТЕ ЖЕ исходные точки — цикл бесшовный.
   ════════════════════════════════════════════════════════════ */
#dkLoader {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
#dkLoader.is-active {
    display: flex;
    pointer-events: all; /* глушим клики на время перехода */
}
/* ─── Подложка: дым темы + золотое свечение за зубом ────────── */
.dkl-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 46% 38% at 50% 44%,
            rgba(var(--accent-rgb), 0.10) 0%, transparent 70%),
        var(--search-modal-bg);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    opacity: 0;
    transition: opacity 0.24s ease;
}
.dk-phase-in .dkl-backdrop,
.dk-phase-hold .dkl-backdrop {
    opacity: 1;
}
.dk-phase-out .dkl-backdrop {
    opacity: 0;
    transition: opacity 0.45s ease 0.15s;
}
/* ─── Сцена с зубом ─────────────────────────────────────────── */
.dkl-stage {
    position: relative;
    width: clamp(120px, 20vw, 170px);
    aspect-ratio: 1 / 1;
}
.dkl-tooth {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
/* ─── Грань: базовое состояние = ИСХОДНАЯ ТОЧКА (разлетевшись).
   transform-box: fill-box — трансформации вокруг центра грани.
   pathLength="1" в разметке — контур рисуется через dashoffset. ── */
.dkl-f {
    transform-box: fill-box;
    transform-origin: center;
    stroke: #FFC24A;
    stroke-width: 6;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
    will-change: transform, fill-opacity, stroke-dashoffset;
}
/* Исходные точки граней (юниты viewBox 1024). Из них прилетают
   в фазе in и РОВНО в них же улетают в фазе out. */
.dkl-f1 { transform: translate(-900px, -640px) rotate(-40deg); }
.dkl-f2 { transform: translate(-1150px, 430px) rotate(20deg); }
.dkl-f3 { transform: translate(330px, -1050px) rotate(30deg); }
.dkl-f4 { transform: translate(1100px, 330px) rotate(-34deg); }
/* ════════════════════════════════════════════════════════════
   ФАЗА IN — сборка: перелёт + контур по пути + заливка при посадке
   ════════════════════════════════════════════════════════════ */
.dk-phase-in .dkl-f1 { animation: dkl-in-f1 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0s    forwards; }
.dk-phase-in .dkl-f2 { animation: dkl-in-f2 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s forwards; }
.dk-phase-in .dkl-f3 { animation: dkl-in-f3 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s forwards; }
.dk-phase-in .dkl-f4 { animation: dkl-in-f4 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.24s forwards; }
@keyframes dkl-in-f1 {
    0%   { transform: translate(-900px, -640px) rotate(-40deg); stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; }
    55%  { stroke-dashoffset: 0; fill-opacity: 0; }
    100% { transform: none; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0.45; }
}
@keyframes dkl-in-f2 {
    0%   { transform: translate(-1150px, 430px) rotate(20deg); stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; }
    55%  { stroke-dashoffset: 0; fill-opacity: 0; }
    100% { transform: none; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0.45; }
}
@keyframes dkl-in-f3 {
    0%   { transform: translate(330px, -1050px) rotate(30deg); stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; }
    55%  { stroke-dashoffset: 0; fill-opacity: 0; }
    100% { transform: none; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0.45; }
}
@keyframes dkl-in-f4 {
    0%   { transform: translate(1100px, 330px) rotate(-34deg); stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; }
    55%  { stroke-dashoffset: 0; fill-opacity: 0; }
    100% { transform: none; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0.45; }
}
/* Свечение при посадке граней */
.dk-phase-in .dkl-tooth { animation: dkl-glow-in 0.95s ease-out forwards; }
@keyframes dkl-glow-in {
    0%   { filter: drop-shadow(0 0 0 rgba(255, 160, 25, 0)) drop-shadow(0 0 0 rgba(255, 140, 0, 0)); }
    62%  { filter: drop-shadow(0 0 16px rgba(255, 160, 25, 0.55)) drop-shadow(0 0 56px rgba(255, 140, 0, 0.30)); }
    100% { filter: drop-shadow(0 0 8px rgba(255, 160, 25, 0.30)) drop-shadow(0 0 28px rgba(255, 140, 0, 0.16)); }
}
/* ════════════════════════════════════════════════════════════
   ФАЗА HOLD — собранный зуб дышит, пока страница грузится
   (статические значения = финал фазы in, скачка нет)
   ════════════════════════════════════════════════════════════ */
.dk-phase-hold .dkl-f {
    transform: none;
    stroke-dashoffset: 0;
    fill-opacity: 1;
    stroke-opacity: 0.45;
}
.dk-phase-hold .dkl-tooth { animation: dkl-glow-hold 2.4s ease-in-out infinite; }
@keyframes dkl-glow-hold {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 160, 25, 0.22)) drop-shadow(0 0 20px rgba(255, 140, 0, 0.10)); }
    50%      { filter: drop-shadow(0 0 15px rgba(255, 160, 25, 0.50)) drop-shadow(0 0 50px rgba(255, 140, 0, 0.28)); }
}
/* ════════════════════════════════════════════════════════════
   ФАЗА OUT — разлёт: заливка гаснет, контур стирается, грани
   улетают В ТЕ ЖЕ исходные точки (бесшовный цикл)
   ════════════════════════════════════════════════════════════ */
.dk-phase-out .dkl-f1 { animation: dkl-out-f1 0.55s cubic-bezier(0.5, 0.06, 0.75, 0.35) 0.18s forwards; }
.dk-phase-out .dkl-f2 { animation: dkl-out-f2 0.55s cubic-bezier(0.5, 0.06, 0.75, 0.35) 0.12s forwards; }
.dk-phase-out .dkl-f3 { animation: dkl-out-f3 0.55s cubic-bezier(0.5, 0.06, 0.75, 0.35) 0.06s forwards; }
.dk-phase-out .dkl-f4 { animation: dkl-out-f4 0.55s cubic-bezier(0.5, 0.06, 0.75, 0.35) 0s    forwards; }
@keyframes dkl-out-f1 {
    0%   { transform: none; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0.45; }
    45%  { fill-opacity: 0; stroke-opacity: 1; }
    100% { transform: translate(-900px, -640px) rotate(-40deg); stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 0; }
}
@keyframes dkl-out-f2 {
    0%   { transform: none; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0.45; }
    45%  { fill-opacity: 0; stroke-opacity: 1; }
    100% { transform: translate(-1150px, 430px) rotate(20deg); stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 0; }
}
@keyframes dkl-out-f3 {
    0%   { transform: none; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0.45; }
    45%  { fill-opacity: 0; stroke-opacity: 1; }
    100% { transform: translate(330px, -1050px) rotate(30deg); stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 0; }
}
@keyframes dkl-out-f4 {
    0%   { transform: none; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0.45; }
    45%  { fill-opacity: 0; stroke-opacity: 1; }
    100% { transform: translate(1100px, 330px) rotate(-34deg); stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 0; }
}
.dk-phase-out .dkl-tooth { animation: dkl-glow-out 0.55s ease-in forwards; }
@keyframes dkl-glow-out {
    0%   { filter: drop-shadow(0 0 8px rgba(255, 160, 25, 0.30)) drop-shadow(0 0 28px rgba(255, 140, 0, 0.16)); }
    100% { filter: drop-shadow(0 0 0 rgba(255, 160, 25, 0)) drop-shadow(0 0 0 rgba(255, 140, 0, 0)); }
}

/* ════════════════════════════════════════════════════════════
   СТАРЫЙ ПРЕЛОАДЕР ВРЕМЕННО СКРЫТ (не удалён)
   #ptrOverlay из base.html (кружок-зуб + «PORTAL · LOADING» +
   точки) показывался при первой полной загрузке и теперь
   дублирует entry-цикл DKLoader — на экране жили два лоадера
   сразу. Вернуть старый: удалить это правило. Тонкий
   прогресс-бар #ptrProgress сверху НЕ трогаем — он остаётся.
   ════════════════════════════════════════════════════════════ */
#ptrOverlay {
    display: none !important;
}