/* ========================================
   KAWN WAVE LOADER — волна из 5 столбиков
   Ванильная замена мотивного wave-loader (владелец выбрал референс):
   каждый столбик дышит scaleY 1 -> 1.5 -> 1 со сдвигом фазы 0.1s.
   Разметка: <span class="kawn-wave" aria-hidden="true">
               <i></i><i></i><i></i><i></i><i></i>
             </span>
   Цвет — токен активной палитры; на тёмном фоне (оверлей переходов)
   столбики белые.
   ======================================== */
.kawn-wave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px; /* запас под scaleY(1.5) — не дёргает раскладку */
}
.kawn-wave i {
    display: block;
    width: 5px;
    height: 20px;
    border-radius: 2.5px;
    background: var(--accent, #059669);
    transform-origin: 50% 100%;
    animation: kawnWave 1s ease-in-out infinite;
}
.kawn-wave i:nth-child(2) { animation-delay: 0.1s; }
.kawn-wave i:nth-child(3) { animation-delay: 0.2s; }
.kawn-wave i:nth-child(4) { animation-delay: 0.3s; }
.kawn-wave i:nth-child(5) { animation-delay: 0.4s; }
@keyframes kawnWave {
    0%, 100% { transform: scaleY(1);   opacity: 0.8; }
    50%      { transform: scaleY(1.5); opacity: 1; }
}

/* Подпись рядом с волной («Загрузка библиотеки...» и т.п.) */
.kawn-wave-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--medium-gray, #6b7280);
}

/* На тёмном оверлее переходов между страницами — белая волна по центру */
#page-transition-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}
#page-transition-overlay .kawn-wave i { background: rgba(255, 255, 255, 0.92); }
/* Волна видна только пока оверлей активен; появляется с задержкой,
   чтобы не мигать на мгновенных переходах */
#page-transition-overlay .kawn-wave { opacity: 0; }
#page-transition-overlay.exit .kawn-wave,
#page-transition-overlay.enter .kawn-wave {
    opacity: 1;
    transition: opacity 0.3s ease 0.15s;
}
#page-transition-overlay.enter.hide .kawn-wave { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .kawn-wave i { animation: none; }
}