/* ═══════════════════════════════════════════════════════════════
   bg-anim.css — Animated background layer for all ЛК views
   ═══════════════════════════════════════════════════════════════ */

#bg-anim-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

#bg-anim-layer img {
    position: absolute;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    filter: blur(0.6px);
    will-change: transform, opacity;
}

/* ── Float animation ──────────────────────────────────────────── */
.bga-float {
    animation: bgDrift linear infinite;
}

@keyframes bgDrift {
    0%   { transform: translateY(0px)    translateX(0px)    rotate(var(--rot)) scale(1);    }
    20%  { transform: translateY(-16px)  translateX(9px)    rotate(calc(var(--rot) + 5deg)) scale(1.04); }
    45%  { transform: translateY(-7px)   translateX(-11px)  rotate(calc(var(--rot) - 3deg)) scale(0.97); }
    65%  { transform: translateY(-22px)  translateX(7px)    rotate(calc(var(--rot) + 7deg)) scale(1.02); }
    80%  { transform: translateY(-12px)  translateX(-6px)   rotate(calc(var(--rot) + 2deg)) scale(1);    }
    100% { transform: translateY(0px)    translateX(0px)    rotate(var(--rot)) scale(1);    }
}

/* ── Rain animation ───────────────────────────────────────────── */
.bga-rain {
    top: -80px;
    animation: bgRain linear infinite;
}

@keyframes bgRain {
    0%   { transform: translateY(-80px) rotate(var(--rot)); opacity: 0; }
    6%   { opacity: var(--op); }
    88%  { opacity: var(--op); }
    100% { transform: translateY(110vh)  rotate(var(--rot)); opacity: 0; }
}

/* ── Pulse animation ──────────────────────────────────────────── */
.bga-pulse {
    animation: bgPulse ease-in-out infinite;
}

@keyframes bgPulse {
    0%   { transform: scale(0.78) rotate(var(--rot)); opacity: 0.015; }
    40%  { transform: scale(1.18) rotate(var(--rot)); opacity: var(--op); }
    65%  { transform: scale(1.05) rotate(var(--rot)); opacity: calc(var(--op) * 0.55); }
    100% { transform: scale(0.78) rotate(var(--rot)); opacity: 0.015; }
}

/* ── Settings UI: плитки с превью, цвет лого, Аврора ─────────── */
.bga-ui { display: flex; flex-direction: column; gap: 10px; }

.bga-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 6px;
}

.bga-tile {
    display: flex; flex-direction: column; gap: 5px;
    padding: 6px 6px 7px;
    border-radius: var(--r-md, 12px);
    border: 1.5px solid var(--input-border, #e3e6f0);
    background: var(--card-bg, transparent);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.bga-tile:hover { border-color: var(--accent, #5560d0); transform: translateY(-1px); }
.bga-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring, rgba(85,96,208,.22)); }
.bga-tile.active {
    border-color: var(--accent, #5560d0);
    box-shadow: 0 0 0 1px var(--accent, #5560d0), 0 4px 14px rgba(var(--accent-rgb, 85,96,208), .18);
}

.bga-tile-label {
    font-size: 11px; font-weight: 700; text-align: center;
    color: var(--text-muted, #6b7280); letter-spacing: .01em;
}
.bga-tile.active .bga-tile-label { color: var(--accent, #5560d0); }

/* Превью-область плитки */
.bga-pv {
    position: relative; display: block; height: 44px;
    border-radius: 8px; overflow: hidden;
    background:
        radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb, 85,96,208), .14), transparent 65%),
        radial-gradient(circle at 75% 80%, rgba(var(--accent-2-rgb, 118,75,162), .12), transparent 60%),
        var(--input-bg, #f6f7fb);
}
.bga-pv--none {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted, #6b7280); font-size: 15px; opacity: .7;
}
.bga-pv-img { position: absolute; width: 17px; height: 17px; opacity: .65; user-select: none; }

/* превью «Плывущие» */
.bga-pv-float.bga-pv-i0 { top: 6px;  left: 12%; animation: bgaPvDrift 4.6s ease-in-out infinite; }
.bga-pv-float.bga-pv-i1 { top: 18px; left: 45%; animation: bgaPvDrift 5.8s ease-in-out -2s infinite; }
.bga-pv-float.bga-pv-i2 { top: 8px;  left: 72%; animation: bgaPvDrift 5.2s ease-in-out -3.5s infinite; }
@keyframes bgaPvDrift {
    0%, 100% { transform: translate(0, 0) rotate(-8deg); }
    50%      { transform: translate(3px, -5px) rotate(8deg); }
}

/* превью «Дождь» */
.bga-pv-rain.bga-pv-i0 { left: 15%; animation: bgaPvRain 2.6s linear infinite; }
.bga-pv-rain.bga-pv-i1 { left: 47%; animation: bgaPvRain 3.4s linear -1.2s infinite; }
.bga-pv-rain.bga-pv-i2 { left: 74%; animation: bgaPvRain 3.0s linear -2s infinite; }
@keyframes bgaPvRain {
    0%   { transform: translateY(-18px) rotate(10deg); opacity: 0; }
    18%  { opacity: .6; }
    82%  { opacity: .6; }
    100% { transform: translateY(48px) rotate(10deg); opacity: 0; }
}

/* превью «Пульс» */
.bga-pv-pulse.bga-pv-i0 { top: 5px;  left: 14%; animation: bgaPvPulse 2.4s ease-in-out infinite; }
.bga-pv-pulse.bga-pv-i1 { top: 16px; left: 44%; animation: bgaPvPulse 3s ease-in-out -1s infinite; }
.bga-pv-pulse.bga-pv-i2 { top: 7px;  left: 71%; animation: bgaPvPulse 2.7s ease-in-out -1.8s infinite; }
@keyframes bgaPvPulse {
    0%, 100% { transform: scale(.7);  opacity: .18; }
    45%      { transform: scale(1.15); opacity: .7; }
}

/* Нижний ряд: цвет логотипа + Аврора */
.bga-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.bga-chips { display: inline-flex; align-items: center; gap: 6px; transition: opacity .15s; }
.bga-chips.is-off { opacity: .45; }
.bga-chips-label { font-size: 11px; font-weight: 600; color: var(--text-muted, #6b7280); margin-left: 2px; }

.bga-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    border: 1.5px solid var(--input-border, #e3e6f0);
    cursor: pointer; padding: 0;
    transition: border-color .15s, box-shadow .15s;
}
.bga-chip img { width: 20px; height: 20px; }
.bga-chip--white { background: linear-gradient(135deg, #334155, #111827); }
.bga-chip--color { background: #ffffff; }
.bga-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring, rgba(85,96,208,.22)); }
.bga-chip.active { border-color: var(--accent, #5560d0); box-shadow: 0 0 0 1px var(--accent, #5560d0); }

/* Аврора — переключатель-пилюля */
.bga-aurora {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    border: 1.5px solid var(--input-border, #e3e6f0);
    background: transparent; font-family: inherit;
    font-size: 11px; font-weight: 700; color: var(--text-muted, #6b7280);
    cursor: pointer;
    transition: border-color .15s, color .15s, box-shadow .15s;
}
.bga-aurora:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring, rgba(85,96,208,.22)); }
.bga-aurora-track {
    position: relative; width: 30px; height: 18px; border-radius: 999px;
    background: var(--input-border, #d6dae3); transition: background .2s; flex-shrink: 0;
}
.bga-aurora-dot {
    position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
    border-radius: 50%; background: #fff; transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.bga-aurora.on { color: #8b5cf6; border-color: #a78bfa; }
.bga-aurora.on .bga-aurora-track { background: linear-gradient(135deg, #818cf8, #a78bfa, #f093fb); }
.bga-aurora.on .bga-aurora-dot { transform: translateX(12px); }

/* Доступность: без анимаций превью при prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .bga-pv-img { animation: none !important; }
}