/* Логотип в шапке: встроенный SVG (include/logo_svg.php) и его анимации (js/logo-fx.js).
   3 — появление (контур букв → заливка, у каждой буквы своя скорость), 4 — орбита при наведении,
   6 — «дыхание» в тёмной теме, 7 — вращение глобуса при загрузке, 8 — шторка при смене темы. */

.site-logo .hk-logo {
    height: 100%;
    width: auto;
    aspect-ratio: 2308.2 / 636.5;
    display: block;
    overflow: visible;           /* орбита и свечение выходят за границы логотипа */
    color: #2B2A29;
}
html[data-theme="dark"] .site-logo .hk-logo { color: #FEFEFE; }
/* логотип в выдвижном меню (nav.php) — высота как была у картинки */
.mobile-nav-head .site-logo .hk-logo { height: 28px; }

.hk-logo .hk-draw { stroke: currentColor; stroke-width: 0; stroke-linejoin: round; }
.hk-logo .hk-globe,
.hk-logo .hk-corner,
.hk-logo .hk-star { transform-box: fill-box; transform-origin: center; }

/* ---------- 3. Появление (один раз за сессию; класс hk-pre ставит скрипт в header.php) ---------- */
.hk-logo.hk-pre .hk-draw {
    fill-opacity: 0;
    stroke-width: var(--hk-sw, 24);
    /* Пунктир в SVG начинается заново в каждом подконтуре (клетки глобуса, внутренний контур «o»),
       поэтому длина штриха = самый длинный подконтур элемента (--hk-len считает js/logo-fx.js):
       все подконтуры растут одновременно с одной скоростью. Запасное значение прячет контур до расчёта. */
    stroke-dasharray: var(--hk-len, 100000) var(--hk-len, 100000);
    stroke-dashoffset: var(--hk-len, 100000);
}
.hk-logo.hk-pre .hk-corner { opacity: 0; transform: translateX(260px) scale(.4); }
.hk-logo.hk-pre .hk-star { opacity: 0; transform: scale(0) rotate(-90deg); }
.hk-logo.hk-pre .hk-glow { opacity: 0 !important; }

.hk-logo.hk-play .hk-draw {
    animation:
        hkDraw var(--dd, 1s) var(--de, cubic-bezier(.45, .05, .35, 1)) var(--dt, 0s) forwards,
        hkFill var(--fd, .5s) ease var(--ft, 1s) forwards;
}
.hk-logo.hk-play .hk-corner { animation: hkSnap .6s cubic-bezier(.34, 1.56, .64, 1) var(--dt, .8s) forwards; }
.hk-logo.hk-play .hk-star { animation: hkPop .45s cubic-bezier(.34, 1.56, .64, 1) calc(.55s + var(--i, 0) * .09s) forwards; }

@keyframes hkDraw { to { stroke-dashoffset: 0; } }
@keyframes hkFill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes hkSnap { to { opacity: 1; transform: none; } }
@keyframes hkPop  { to { opacity: 1; transform: none; } }

/* ---------- 4. Орбита при наведении: Япония, Корея, Китай ---------- */
.hk-logo .hk-orbit { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.hk-logo .hk-orbit-ring { fill: none; stroke: currentColor; stroke-opacity: .25; stroke-width: 10; stroke-dasharray: 20 34; }
/* is-orbiting ставит js/logo-fx.js: наведение мышью, а на сенсорном экране — после появления,
   при касании логотипа и при открытии меню */
.hk-logo.is-orbiting .hk-orbit,
.site-logo:focus-visible .hk-orbit { opacity: 1; }
html[data-theme="dark"] .hk-logo .hk-dot { filter: drop-shadow(0 0 30px rgba(255, 255, 255, .35)); }

/* ---------- 6. «Дыхание» за глобусом — только тёмная тема ---------- */
.hk-logo .hk-glow { opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
html[data-theme="dark"] .hk-logo .hk-glow { animation: hkBreath 4.8s ease-in-out infinite; }
@keyframes hkBreath {
    0%, 100% { opacity: .35; transform: scale(.9); }
    50%      { opacity: .9;  transform: scale(1.06); }
}

/* ---------- 7. Идёт загрузка (запросы к API, переход на страницу) — глобус вращается ---------- */
.hk-logo.is-busy .hk-globe { animation: hkSpin 1.15s cubic-bezier(.45, .1, .55, .9) infinite; }
@keyframes hkSpin { to { transform: rotate(360deg); } }

/* ---------- 8. Смена темы: копия старым цветом уезжает под шторкой ---------- */
.hk-logo .hk-ghost { display: none; }
.hk-logo.is-wiping .hk-ghost { display: inline; color: var(--hk-old, #2B2A29); }

/* Системная настройка «уменьшить движение»: без анимаций, загрузка — просто приглушённый глобус */
@media (prefers-reduced-motion: reduce) {
    .hk-logo .hk-glow,
    .hk-logo.is-busy .hk-globe { animation: none !important; }
    .hk-logo .hk-orbit { display: none; }
    .hk-logo.is-busy .hk-globe { opacity: .5; transition: opacity .3s; }
}