/* ═══════════════════════════════════════════════════════════════
   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 ──────────────────────────────────────────────── */
.bg-anim-ui {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

/* Тонкий вертикальный разделитель между группами */
.bg-anim-sep {
    width: 1px;
    height: 20px;
    background: var(--input-border, #e3e6f0);
    flex-shrink: 0;
    margin: 0 3px;
    align-self: center;
}

.bg-anim-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--input-border, #e3e6f0);
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.bg-anim-btn:hover {
    border-color: var(--accent-color, #667eea);
    color: var(--text-color, #333);
    background: rgba(102,126,234,0.06);
}

.bg-anim-btn:active {
    background: rgba(102,126,234,0.1);
}

.bg-anim-btn.active {
    border-color: var(--accent-color, #667eea);
    background: linear-gradient(135deg, rgba(102,126,234,0.16), rgba(118,75,162,0.10));
    color: var(--accent-color, #667eea);
    box-shadow: 0 1px 6px rgba(102,126,234,0.18);
}

/* Aurora — особый градиент при включённом состоянии */
.bg-anim-btn.aurora-on {
    border-color: #a78bfa;
    background: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(245,87,108,0.10));
    color: #8b5cf6;
    box-shadow: 0 1px 8px rgba(167,139,250,0.22);
}