/* ==========================================================================
   Додаткові стилі інтерфейсу (перемикач мови, роздільники, spotlight)
   ========================================================================== */

/* ---------- Перемикач мови ---------- */

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
}

.lang-switch-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--muted);
    text-decoration: none;
    transition: background .3s var(--ease), color .3s var(--ease);
}

.lang-switch-link:hover {
    color: var(--accent-3);
}

.lang-switch-link.is-active {
    background: var(--accent);
    color: #10140a;
}

/* ---------- Анімовані роздільники між секціями ---------- */

.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
    max-width: 1320px;
    color: var(--accent);
}

.section-divider::before,
.section-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.section-divider svg {
    flex: 0 0 auto;
    animation: dividerSpin 14s linear infinite;
}

@keyframes dividerSpin {
    to { transform: rotate(360deg); }
}

/* ---------- Розширений spotlight (світло за курсором) ---------- */

.stat,
.money-row,
#faq .accordion-item {
    --mx: 50%;
    --my: 0%;
    background-image: radial-gradient(240px circle at var(--mx) var(--my), rgba(233, 185, 73, .13), transparent 62%);
}

.gallery-album::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(233, 185, 73, .22), transparent 64%);
    transition: opacity .4s var(--ease);
}

.gallery-album:hover::before {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .section-divider svg {
        animation: none;
    }
}
