/*
 * Avalist Ambient — глобальний прозорий фон з орбітальною анімацією.
 * Стиль відповідає hero-блоку головної сторінки:
 *   - Фонова сітка (дрібні лінії)
 *   - Центральний radial glow
 *   - Лого-watermark у центрі (менш яскраве ніж на головній)
 *   - 3 концентричні orbit-кола (пунктирні / суцільні)
 *   - Маленькі світні dot-и на орбітах
 *
 * CSS-only анімації — мінімум CPU.
 * Лежить поза потоком (position:fixed, z-index:-1, pointer-events:none).
 */

.av-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

@media print {
    .av-ambient { display: none !important; }
}

/* ── Фонова сітка ── */
.av-ambient__bg-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .016) 1px, transparent 1px);
    background-size: 72px 72px;
}

/* ── Scene — точка відліку, центрована на viewport ── */
.av-ambient__scene {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}

/* ── Центральний radial glow ── */
.av-ambient__glow {
    position: absolute;
    width: 540px;
    height: 540px;
    margin-top: -270px;
    margin-left: -270px;
    background: radial-gradient(circle,
        rgba(115, 174, 32, .11) 0%,
        rgba(115, 174, 32, .05) 38%,
        transparent 68%
    );
    border-radius: 50%;
    animation: av-ambient-glow-pulse 7s ease-in-out infinite;
}

/* ── Лого-watermark у центрі ── */
.av-ambient__logo {
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    background-image: url("../img/logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.10;
    filter: drop-shadow(0 0 18px rgba(115, 174, 32, .35));
    animation: av-ambient-logo-breathe 9s ease-in-out infinite;
}

/* ── Orbit-кола ── */
.av-ambient__ring {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}

/* Внутрішнє — пунктирне, обертається за годинниковою */
.av-ambient__ring--1 {
    width: 280px;
    height: 280px;
    margin-top: -140px;
    margin-left: -140px;
    border: 1px dashed rgba(115, 174, 32, .32);
    animation: av-ambient-ring-cw 26s linear infinite;
}

/* Середнє — суцільне тонке, проти годинникової */
.av-ambient__ring--2 {
    width: 460px;
    height: 460px;
    margin-top: -230px;
    margin-left: -230px;
    border: 1px solid rgba(115, 174, 32, .16);
    animation: av-ambient-ring-ccw 44s linear infinite;
}

/* Зовнішнє — пунктирне, дуже тонке, за годинниковою */
.av-ambient__ring--3 {
    width: 660px;
    height: 660px;
    margin-top: -330px;
    margin-left: -330px;
    border: 1px dashed rgba(115, 174, 32, .10);
    animation: av-ambient-ring-cw 70s linear infinite;
}

/* ── Dot-и на кільцях ── */
.av-ambient__dot {
    position: absolute;
    border-radius: 50%;
}

/* Великий dot на внутрішньому колі (зверху, по центру) */
.av-ambient__ring--1 .av-ambient__dot {
    width: 10px;
    height: 10px;
    top: -5px;
    left: calc(50% - 5px);
    background: #9fd43a;
    box-shadow: 0 0 12px rgba(115, 174, 32, .8), 0 0 26px rgba(115, 174, 32, .4);
}

/* Середній dot на середньому колі (справа, по центру) */
.av-ambient__ring--2 .av-ambient__dot {
    width: 8px;
    height: 8px;
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    background: var(--av-green, #73AE20);
    box-shadow: 0 0 10px rgba(115, 174, 32, .7);
}

/* Малий dot на зовнішньому колі (знизу-ліворуч) */
.av-ambient__ring--3 .av-ambient__dot {
    width: 6px;
    height: 6px;
    bottom: -3px;
    left: 30%;
    background: rgba(115, 174, 32, .75);
    box-shadow: 0 0 8px rgba(115, 174, 32, .55);
}

/* Другий dot на зовнішньому колі (справа-зверху) */
.av-ambient__ring--3 .av-ambient__dot--b {
    bottom: auto;
    top: 22%;
    left: auto;
    right: -3px;
    width: 4px;
    height: 4px;
    background: rgba(159, 212, 58, .65);
    box-shadow: 0 0 6px rgba(115, 174, 32, .45);
}

/* ── Анімації ── */
@keyframes av-ambient-glow-pulse {
    0%, 100% { opacity: .75; transform: scale(.94); }
    50%      { opacity: 1;   transform: scale(1.06); }
}

@keyframes av-ambient-logo-breathe {
    0%, 100% { opacity: .10; transform: scale(1); }
    50%      { opacity: .16; transform: scale(1.04); }
}

@keyframes av-ambient-ring-cw  { to { transform: rotate(360deg);  } }
@keyframes av-ambient-ring-ccw { to { transform: rotate(-360deg); } }

/* ── Малі екрани — менші радіуси ── */
@media (max-width: 768px) {
    .av-ambient__glow {
        width: 360px;
        height: 360px;
        margin-top: -180px;
        margin-left: -180px;
    }
    .av-ambient__logo {
        width: 72px;
        height: 72px;
        margin-top: -36px;
        margin-left: -36px;
    }
    .av-ambient__ring--1 {
        width: 200px;
        height: 200px;
        margin-top: -100px;
        margin-left: -100px;
    }
    .av-ambient__ring--2 {
        width: 320px;
        height: 320px;
        margin-top: -160px;
        margin-left: -160px;
    }
    .av-ambient__ring--3 { display: none; }
}

/* ── Reduced motion → статичний фон ── */
@media (prefers-reduced-motion: reduce) {
    .av-ambient__glow,
    .av-ambient__logo,
    .av-ambient__ring {
        animation: none !important;
    }
}

/* Сторінки де ambient вимкнено (друк, QR-export) */
body.av-no-ambient .av-ambient { display: none !important; }