/* ==========================================================================
   motion-fx.css — шар «живих» анімацій (пара до motion-fx.js).

   Налаштування (усе в :root нижче):
     --fx-accent   основний акцентний колір (смужка завантаження, glow, ripple)
     --fx-ease     плавний easing появи/переходів
     --fx-spring   easing з overshoot (пігулка меню, hover-«пружина»)
     --fx-glow     колір підсвітки під курсором на картках
   Правила: анімуємо лише transform/opacity, жодного filter: blur на великих
   шарах. Більшість ефектів вмикається класом html.fx-on, який ставить JS
   (тільки коли Motion завантажився і немає prefers-reduced-motion).
   ========================================================================== */

:root {
    --fx-accent: #f25600;
    --fx-accent-2: #ff9a3c;
    --fx-ease: cubic-bezier(.22, 1, .36, 1);
    --fx-spring: cubic-bezier(.34, 1.56, .64, 1);
    --fx-glow: rgba(242, 86, 0, .09);
}

/* ---------- 5. Переходи між сторінками (CSS View Transitions, MPA) ------- */
/* Прогресивне покращення: браузери без підтримки просто роблять звичайний
   перехід. Ім'я view-transition-name НЕ ставимо на #masthead / .bottom-bar:
   воно створює containing block для fixed-нащадків і зламало б мобільне меню
   та липку навігацію. Тільки на статичні блоки шапки. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
    .top-header { view-transition-name: fx-top; }
    .main-header { view-transition-name: fx-brand; }

    ::view-transition-old(root) {
        animation: fx-vt-out .14s ease both;
    }
    ::view-transition-new(root) {
        animation: fx-vt-in .24s var(--fx-ease) both;
    }
    ::view-transition-group(fx-top),
    ::view-transition-group(fx-brand) {
        animation-duration: 0s;
    }
}
@keyframes fx-vt-out { to { opacity: 0; } }
@keyframes fx-vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 7. Смужка завантаження зверху -------------------------------- */
#fx-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100000;
    pointer-events: none;
    background: linear-gradient(90deg, var(--fx-accent), var(--fx-accent-2));
    box-shadow: 0 0 8px rgba(242, 86, 0, .55);
    transform-origin: 0 50%;
    transform: scaleX(0);
    opacity: 0;
}

/* Тінь шапки при скролі (липка навігація теми) */
html.fx-on .bottom-bar.aft-sticky-navigation {
    transition-property: transform, height, box-shadow;
}
html.fx-on.fx-scrolled .bottom-bar.aft-sticky-navigation.nav-down {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

/* ---------- 4. Навігація: «магічна» пігулка під курсором ----------------- */
.nav-pill {
    display: none;
}
@media (min-width: 1025px) {
    html.fx-on .main-navigation .menu-desktop {
        position: relative;
    }
    /* .menu-desktop став позиціонованим і інакше перекриває float-будиночок (клік не доходив до посилання) */
    html.fx-on .main-navigation .aft-home-icon {
        position: relative;
        z-index: 2;
    }
    html.fx-on .nav-pill {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 36px;
        border-radius: 9px;
        background: rgba(255, 255, 255, .17);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
        pointer-events: none;
        opacity: 0;
        transform-origin: 0 0;
        transform: translate3d(0, 0, 0);
        transition: transform .5s var(--fx-spring), opacity .22s ease;
        will-change: transform;
    }
    html.fx-on .nav-pill.is-on { opacity: 1; }
    html.fx-on .nav-pill.is-instant { transition: none; }
}

/* ---------- 6. Мікровзаємодії ------------------------------------------- */
/* Підсвітка під курсором: --mx/--my виставляє JS (pointermove + rAF).
   Використовуємо ::after — на цих елементах воно вільне. */
html.fx-on .fx-spot {
    position: relative;
}
html.fx-on .fx-spot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--fx-glow), transparent 65%);
    transition: opacity .3s ease;
}
html.fx-on .fx-spot:hover::after {
    opacity: 1;
}
.sv.sv-off, .sv.sv-unknown {
    --fx-glow: rgba(255, 255, 255, .10);
}

/* Натискання кнопок. Префікс html.fx-on піднімає специфічність над
   локальними :hover/:active стилями сторінок (dovidnyk.css тощо). */
html.fx-on .sv .btn:active,
html.fx-on .sv .chip:active,
html.fx-on .search-submit:active,
html.fx-on .vg-contact-submit:active,
html.fx-on .dov-suggest-link:active,
html.fx-on .dov-admin-add:active,
html.fx-on .dov-card-more:active,
html.fx-on .dov-hint-chip:active,
html.fx-on .dov-form-submit:active,
html.fx-on .tgch > summary:active,
html.fx-on .tgch-folder a:active,
html.fx-on .newsever-pagination .page-numbers:active,
html.fx-on .footer-dev-badge:active,
html.fx-on #scroll-up:active {
    transform: scale(.96);
}
html.fx-on .sv .btn,
html.fx-on .sv .chip,
html.fx-on .vg-contact-submit,
html.fx-on .dov-card-more,
html.fx-on .newsever-pagination .page-numbers {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .18s var(--fx-spring);
}

/* Ripple (span створює JS у момент кліку) */
.fx-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: currentColor;
    opacity: .28;
    transform: scale(0);
    will-change: transform, opacity;
}

/* Блиск на primary-кнопках: діагональна смуга проїжджає раз на ~6 с.
   Тільки transform (анімація зсуву псевдоелемента). */
html.fx-on .dov-suggest-link,
html.fx-on .tgch-folder a,
html.fx-on .sv .btn.chat,
html.fx-on .vg-contact-submit {
    position: relative;
    overflow: hidden;
}
html.fx-on .dov-suggest-link::after,
html.fx-on .tgch-folder a::after,
html.fx-on .sv .btn.chat::after,
html.fx-on .vg-contact-submit::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: translateX(-140%) skewX(-18deg);
    animation: fx-shine 6s ease-in-out 1.2s infinite;
}
@keyframes fx-shine {
    0%, 62% { transform: translateX(-140%) skewX(-18deg); }
    100% { transform: translateX(360%) skewX(-18deg); }
}

/* Пружний hover на значках, іконках, чіпах */
html.fx-on .meta-category a,
html.fx-on .sv .lamp,
html.fx-on .sv .tgico,
html.fx-on .sv .grp,
html.fx-on .search-icon {
    transition: transform .35s var(--fx-spring);
}
html.fx-on .sv .lamp:hover,
html.fx-on .sv .tgico:hover,
html.fx-on .sv .grp:hover,
html.fx-on .search-icon:hover {
    transform: scale(1.14) rotate(-3deg);
}
html.fx-on .meta-category a:hover {
    transform: translateY(-2px) scale(1.04);
}
html.fx-on .fx-num {
    font-variant-numeric: tabular-nums;
}

/* Блиск на бренді шапки: м'яка світла смуга по логотипу */
html.fx-on .site-branding {
    position: relative;
    overflow: hidden;
}
html.fx-on .site-branding::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-160%) skewX(-18deg);
    animation: fx-brand-shine 9s ease-in-out 2s infinite;
}
@keyframes fx-brand-shine {
    0%, 70% { transform: translateX(-160%) skewX(-18deg); }
    100% { transform: translateX(520%) skewX(-18deg); }
}

/* Діалоги довідника: пружна поява (backdrop — лише opacity) */
html.fx-on .dov-dialog[open] {
    animation: fx-pop .32s var(--fx-spring) both;
}
html.fx-on .dov-dialog[open]::backdrop {
    animation: fx-fade .25s ease both;
}
@keyframes fx-pop {
    from { opacity: 0; transform: translateY(14px) scale(.94); }
}
@keyframes fx-fade {
    from { opacity: 0; }
}

/* ---------- 10. «Аврора» на публічних сторінках --------------------------- */
/* Два великі кола з radial-gradient (без filter: blur!) — рухається лише
   transform. Елемент вставляє JS першим дитям контейнера сторінки. */
.fx-aurora-host {
    position: relative;
    overflow: hidden;
    overflow: clip; /* clip не створює scroll-контейнер — sticky-нащадки не ламаються */
    isolation: isolate;
}
/* Шар «прилипає» до верху в'юпорта: кола видно на будь-якому місці довгої сторінки.
   margin-bottom компенсує висоту в потоці, тож розмір контейнера не змінюється. */
.fx-aurora {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    margin-bottom: -100vh;
    margin-bottom: -100dvh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.fx-aurora i {
    position: absolute;
    border-radius: 50%;
    width: 70vmax;
    height: 70vmax;
    max-width: 900px;
    max-height: 900px;
    will-change: transform;
}
.fx-aurora i:nth-child(1) {
    left: -12%;
    top: -22%;
    background: radial-gradient(circle at center, var(--fx-aurora-a, rgba(242, 86, 0, .22)), transparent 65%);
    animation: fx-aurora-a 26s ease-in-out infinite alternate;
}
.fx-aurora i:nth-child(2) {
    right: -14%;
    bottom: -26%;
    background: radial-gradient(circle at center, var(--fx-aurora-b, rgba(96, 120, 255, .18)), transparent 65%);
    animation: fx-aurora-b 32s ease-in-out infinite alternate;
}
@keyframes fx-aurora-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(18%, 14%, 0) scale(1.15); }
}
@keyframes fx-aurora-b {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to { transform: translate3d(-16%, -12%, 0) scale(.95); }
}
.svpage-on {
    --fx-aurora-a: rgba(60, 200, 60, .20);
    --fx-aurora-b: rgba(242, 86, 0, .14);
}
.svpage-off, .svpage-unknown {
    --fx-aurora-a: rgba(242, 86, 0, .26);
    --fx-aurora-b: rgba(90, 110, 255, .24);
}
/* Пружна поява центральної картки на сторінках зі СвітлоБотами */
html.fx-on .sv {
    animation: fx-card-in .7s var(--fx-spring) both;
}
@keyframes fx-card-in {
    from { opacity: .6; transform: translateY(22px) scale(.97); }
}

/* Тонка «пульсація» лічильників при оновленні значення */
.fx-pulse {
    will-change: transform;
}

/* ---------- Доступність та друк ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
    .fx-aurora, #fx-topbar, .nav-pill {
        display: none !important;
    }
}

@media print {
    [data-fx] {
        opacity: 1 !important;
        transform: none !important;
    }
    .fx-aurora, #fx-topbar, .nav-pill, .fx-ripple {
        display: none !important;
    }
}