/* ============================================================
   РАМКИ ДЛЯ АВАТАРОК — L4D-DARKNESS
   Версия: 4.0 — с лавой, огнём, плазмой и голограммой
   ============================================================ */

/* === Базовые статические рамки === */

.av-frame-default {
    border-color: rgba(155,89,182,0.4);
    box-shadow: 0 0 0 3px rgba(155,89,182,0.15), 0 0 20px rgba(155,89,182,0.3);
}

.av-frame-bronze {
    border-color: #cd7f32;
    box-shadow:
        0 0 0 3px rgba(205,127,50,0.85),
        0 0 0 5px rgba(210,150,80,0.5),
        0 0 25px rgba(205,127,50,0.7);
}

.av-frame-silver {
    border-color: #c0c0c0;
    box-shadow:
        0 0 0 3px rgba(192,192,192,0.85),
        0 0 0 5px rgba(230,230,230,0.5),
        0 0 25px rgba(192,192,192,0.7);
}

.av-frame-gold {
    border-color: #ffd700;
    box-shadow:
        0 0 0 3px rgba(255,215,0,0.85),
        0 0 0 5px rgba(255,237,78,0.5),
        0 0 25px rgba(255,215,0,0.7);
}

.av-frame-neon-blue {
    border-color: #00d4ff;
    box-shadow:
        0 0 0 3px #00d4ff,
        0 0 0 5px rgba(0,212,255,0.4),
        0 0 30px rgba(0,212,255,0.9);
}

.av-frame-neon-green {
    border-color: #00ff88;
    box-shadow:
        0 0 0 3px #00ff88,
        0 0 0 5px rgba(0,255,136,0.4),
        0 0 30px rgba(0,255,136,0.9);
}

.av-frame-neon-pink {
    border-color: #ff00ff;
    box-shadow:
        0 0 0 3px #ff00ff,
        0 0 0 5px rgba(255,0,255,0.4),
        0 0 30px rgba(255,0,255,0.9);
}

.av-frame-ice {
    border-color: #b8e6ff;
    box-shadow:
        0 0 0 3px #b8e6ff,
        0 0 0 5px #e0f4ff,
        0 0 30px rgba(184,230,255,0.9);
}

.av-frame-blood {
    border-color: #8b0000;
    box-shadow:
        0 0 0 3px #8b0000,
        0 0 0 5px #ff0000,
        0 0 30px rgba(255,0,0,0.8);
}

.av-frame-royal {
    border-color: #9400d3;
    box-shadow:
        0 0 0 3px #9400d3,
        0 0 0 5px #ffd700,
        0 0 30px rgba(148,0,211,0.8);
}

/* === Обычные анимированные рамки === */

.av-frame-fire {
    border-color: #ff4500;
    animation: frame-pulse-fire 1.5s ease-in-out infinite;
}
@keyframes frame-pulse-fire {
    0%, 100% { box-shadow: 0 0 0 3px #ff4500, 0 0 0 5px #ff8c00, 0 0 30px rgba(255,69,0,0.9); }
    50%      { box-shadow: 0 0 0 4px #ff8c00, 0 0 0 6px #ffd700, 0 0 45px rgba(255,140,0,1); }
}

.av-frame-toxic {
    border-color: #39ff14;
    animation: frame-pulse-toxic 2s ease-in-out infinite;
}
@keyframes frame-pulse-toxic {
    0%, 100% { box-shadow: 0 0 0 3px #39ff14, 0 0 0 5px #7fff00, 0 0 30px rgba(57,255,20,0.9); }
    50%      { box-shadow: 0 0 0 4px #7fff00, 0 0 0 6px #39ff14, 0 0 45px rgba(127,255,0,1); }
}

.av-frame-cyber {
    border-color: #00ffff;
    animation: frame-pulse-cyber 1.8s ease-in-out infinite;
}
@keyframes frame-pulse-cyber {
    0%, 100% { box-shadow: 0 0 0 3px #00ffff, 0 0 0 5px #ff00ff, 0 0 30px rgba(0,255,255,0.9); }
    50%      { box-shadow: 0 0 0 4px #ff00ff, 0 0 0 6px #00ffff, 0 0 45px rgba(255,0,255,1); }
}

.av-frame-rainbow {
    border-color: #ff0080;
    animation: frame-rainbow 3s linear infinite;
}
@keyframes frame-rainbow {
    0%   { box-shadow: 0 0 0 3px #ff0080, 0 0 0 5px #ff8c00, 0 0 30px rgba(255,0,128,0.9); }
    20%  { box-shadow: 0 0 0 3px #ff8c00, 0 0 0 5px #ffd700, 0 0 30px rgba(255,140,0,0.9); }
    40%  { box-shadow: 0 0 0 3px #00ff00, 0 0 0 5px #00d4ff, 0 0 30px rgba(0,255,0,0.9); }
    60%  { box-shadow: 0 0 0 3px #0080ff, 0 0 0 5px #8000ff, 0 0 30px rgba(0,128,255,0.9); }
    80%  { box-shadow: 0 0 0 3px #8000ff, 0 0 0 5px #ff0080, 0 0 30px rgba(128,0,255,0.9); }
    100% { box-shadow: 0 0 0 3px #ff0080, 0 0 0 5px #ff8c00, 0 0 30px rgba(255,0,128,0.9); }
}

/* ============================================================
   ОГНЕННАЯ ЭЛИТНАЯ — огонь ВНУТРИ рамки
   ============================================================ */

.av-frame-fire-elite {
    position: relative;
    overflow: visible;
    border-color: #ff4500;
    animation: frame-fire-elite 1.2s ease-in-out infinite;
}

.av-frame-fire-elite img,
.av-frame-fire-elite .default-avatar {
    border-radius: 50%;
}

/* Огонь снизу — языки пламени внутри */
.av-frame-fire-elite::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 55%;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    pointer-events: none;
    z-index: 5;
    background:
        radial-gradient(ellipse 40% 80% at 20% 100%, rgba(255,200,0,0.85) 0%, rgba(255,100,0,0.6) 40%, transparent 70%),
        radial-gradient(ellipse 50% 90% at 50% 100%, rgba(255,69,0,0.9) 0%, rgba(255,140,0,0.7) 40%, transparent 75%),
        radial-gradient(ellipse 40% 80% at 80% 100%, rgba(255,215,0,0.85) 0%, rgba(255,69,0,0.6) 40%, transparent 70%);
    animation: frame-fire-inside 0.9s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

/* Мерцание сверху — искры */
.av-frame-fire-elite::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    background-image:
        radial-gradient(circle at 30% 80%, #ffd700 1.5px, transparent 2px),
        radial-gradient(circle at 70% 75%, #ff8c00 1.5px, transparent 2px),
        radial-gradient(circle at 50% 90%, #ff4500 2px, transparent 2.5px);
    background-size: 100% 100%;
    animation: frame-fire-sparks 1.6s ease-in-out infinite;
    filter: drop-shadow(0 0 4px #ff8c00) drop-shadow(0 0 8px #ff4500);
    opacity: 0.9;
}

@keyframes frame-fire-inside {
    0% {
        transform: scaleY(0.9);
        opacity: 0.75;
    }
    100% {
        transform: scaleY(1.1);
        opacity: 1;
    }
}

@keyframes frame-fire-sparks {
    0%, 100% {
        transform: translateY(0) scale(0.9);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-4px) scale(1.1);
        opacity: 1;
    }
}

@keyframes frame-fire-elite {
    0%, 100% {
        box-shadow:
            0 0 0 3px #ff0000,
            0 0 0 5px #ff4500,
            0 0 0 7px #ff8c00,
            0 0 25px rgba(255,69,0,0.9),
            0 0 50px rgba(255,140,0,0.6);
    }
    50% {
        box-shadow:
            0 0 0 4px #ff4500,
            0 0 0 6px #ff8c00,
            0 0 0 8px #ffd700,
            0 0 35px rgba(255,69,0,1),
            0 0 70px rgba(255,215,0,0.8);
    }
}

/* ============================================================
   ЛАВА — стекающие капли лавы вниз
   ============================================================ */

.av-frame-lava {
    position: relative;
    overflow: visible;
    border-color: #8b0000;
    animation: frame-lava 2.5s ease-in-out infinite;
}

.av-frame-lava img,
.av-frame-lava .default-avatar {
    border-radius: 50%;
}

/* Капля лавы №1 (левая) */
.av-frame-lava::before {
    content: '';
    position: absolute;
    top: 88%;
    left: 30%;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle at 30% 30%, #ffd700, #ff4500 50%, #8b0000);
    border-radius: 50%;
    box-shadow:
        0 0 12px #ff4500,
        0 0 24px rgba(255,69,0,0.8),
        0 0 40px rgba(255,140,0,0.5);
    animation: frame-lava-drop 2.6s ease-in infinite;
    pointer-events: none;
    z-index: 5;
}

/* Капля лавы №2 (правая) */
.av-frame-lava::after {
    content: '';
    position: absolute;
    top: 82%;
    left: 65%;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle at 30% 30%, #ffed4e, #ff8c00 50%, #cc3300);
    border-radius: 50%;
    box-shadow:
        0 0 10px #ff8c00,
        0 0 20px rgba(255,140,0,0.8),
        0 0 35px rgba(255,69,0,0.5);
    animation: frame-lava-drop 3.1s ease-in infinite;
    animation-delay: 1.4s;
    pointer-events: none;
    z-index: 5;
}

@keyframes frame-lava-drop {
    0% {
        top: 86%;
        opacity: 0;
        transform: translateX(-50%) scale(0.4);
    }
    10% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    55% {
        opacity: 0.95;
    }
    100% {
        top: 170%;
        opacity: 0;
        transform: translateX(-50%) scale(1.2);
    }
}

@keyframes frame-lava {
    0%, 100% {
        box-shadow:
            0 0 0 3px #8b0000,
            0 0 0 5px #ff4500,
            0 0 0 7px #ff8c00,
            0 0 25px rgba(255,69,0,0.7),
            0 0 50px rgba(255,140,0,0.4);
    }
    50% {
        box-shadow:
            0 0 0 4px #ff4500,
            0 0 0 6px #ff8c00,
            0 0 0 8px #ffd700,
            0 0 40px rgba(255,69,0,1),
            0 0 80px rgba(255,215,0,0.7);
    }
}

/* ============================================================
   ПЛАЗМА — электрические разряды по кругу рамки
   ============================================================ */

.av-frame-plasma {
    position: relative;
    overflow: visible;
    border-color: #ff00ff;
    animation: frame-plasma 1.5s ease-in-out infinite;
}

.av-frame-plasma img,
.av-frame-plasma .default-avatar {
    border-radius: 50%;
}

/* Молнии-разряды вокруг рамки */
.av-frame-plasma::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            #ff00ff 20deg,
            transparent 40deg,
            #8000ff 80deg,
            transparent 100deg,
            #ff00ff 140deg,
            transparent 160deg,
            #8000ff 200deg,
            transparent 220deg,
            #ff00ff 260deg,
            transparent 280deg,
            #8000ff 320deg,
            transparent 340deg,
            #ff00ff 360deg);
    animation: frame-plasma-spark 0.4s steps(4) infinite;
    -webkit-mask: radial-gradient(circle, transparent 55%, #000 62%, #000 68%, transparent 75%);
            mask: radial-gradient(circle, transparent 55%, #000 62%, #000 68%, transparent 75%);
    filter: drop-shadow(0 0 4px #ff00ff) drop-shadow(0 0 8px #8000ff);
    opacity: 0.9;
}

/* Дополнительные искры */
.av-frame-plasma::after {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    background-image:
        radial-gradient(circle at 15% 30%, #ff00ff 1.5px, transparent 2px),
        radial-gradient(circle at 85% 20%, #8000ff 1.5px, transparent 2px),
        radial-gradient(circle at 20% 80%, #ff00ff 1.5px, transparent 2px),
        radial-gradient(circle at 80% 75%, #8000ff 1.5px, transparent 2px),
        radial-gradient(circle at 50% 10%, #ff80ff 1.5px, transparent 2px),
        radial-gradient(circle at 50% 90%, #ff80ff 1.5px, transparent 2px);
    background-size: 100% 100%;
    animation: frame-plasma-arcs 0.6s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 4px #ff00ff) drop-shadow(0 0 8px #8000ff);
}

@keyframes frame-plasma-spark {
    0%   { transform: rotate(0deg);   opacity: 0.8; }
    25%  { transform: rotate(90deg);  opacity: 1;   }
    50%  { transform: rotate(180deg); opacity: 0.7; }
    75%  { transform: rotate(270deg); opacity: 1;   }
    100% { transform: rotate(360deg); opacity: 0.8; }
}

@keyframes frame-plasma-arcs {
    0% {
        opacity: 0.5;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes frame-plasma {
    0%, 100% {
        box-shadow:
            0 0 0 3px #ff00ff,
            0 0 0 5px #8000ff,
            0 0 30px rgba(255,0,255,0.9),
            0 0 60px rgba(128,0,255,0.5);
    }
    33% {
        box-shadow:
            0 0 0 3px #8000ff,
            0 0 0 5px #ff00ff,
            0 0 35px rgba(128,0,255,1),
            0 0 70px rgba(255,0,255,0.6);
    }
    66% {
        box-shadow:
            0 0 0 4px #ff00ff,
            0 0 0 6px #ff80ff,
            0 0 40px rgba(255,128,255,1),
            0 0 80px rgba(255,0,255,0.7);
    }
}

/* ============================================================
   ГОЛОГРАММА — помехи/глитчи внутри рамки
   ============================================================ */

.av-frame-hologram {
    position: relative;
    overflow: visible;
    border-color: #00ffff;
    animation: frame-hologram 2s linear infinite;
}

.av-frame-hologram img,
.av-frame-hologram .default-avatar {
    border-radius: 50%;
}

/* Горизонтальные полосы-помехи, пробегающие сверху вниз */
.av-frame-hologram::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0,255,255,0.12) 0px,
            rgba(0,255,255,0.12) 1px,
            transparent 1px,
            transparent 4px
        );
    animation: frame-hologram-scan 1.5s linear infinite;
    mix-blend-mode: screen;
}

/* Вертикальные искажения + цветной сдвиг */
.av-frame-hologram::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 6;
    background:
        linear-gradient(180deg,
            transparent 0%,
            rgba(255,0,255,0.3) 25%,
            transparent 30%,
            transparent 65%,
            rgba(0,255,255,0.35) 70%,
            transparent 75%,
            transparent 100%);
    animation: frame-hologram-glitch 0.9s steps(3) infinite;
    mix-blend-mode: screen;
    opacity: 0.85;
}

@keyframes frame-hologram-scan {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

@keyframes frame-hologram-glitch {
    0%   { transform: translateX(0);   opacity: 0.6; }
    33%  { transform: translateX(-3px); opacity: 0.9; }
    66%  { transform: translateX(3px);  opacity: 0.7; }
    100% { transform: translateX(0);   opacity: 0.6; }
}

@keyframes frame-hologram {
    0%   { box-shadow: 0 0 0 3px #00ffff, 0 0 0 5px #00bfff, 0 0 30px rgba(0,255,255,0.9), 0 0 60px rgba(0,191,255,0.5); }
    25%  { box-shadow: 0 0 0 3px #00ffff, 0 0 0 5px #ff00ff, 0 0 30px rgba(0,255,255,0.9), 0 0 60px rgba(255,0,255,0.5); }
    50%  { box-shadow: 0 0 0 4px #ff00ff, 0 0 0 6px #00ffff, 0 0 35px rgba(255,0,255,1),   0 0 70px rgba(0,255,255,0.6); }
    75%  { box-shadow: 0 0 0 3px #00ffff, 0 0 0 5px #00bfff, 0 0 30px rgba(0,255,255,0.9), 0 0 60px rgba(0,191,255,0.5); }
    100% { box-shadow: 0 0 0 3px #00ffff, 0 0 0 5px #00bfff, 0 0 30px rgba(0,255,255,0.9), 0 0 60px rgba(0,191,255,0.5); }
}

/* ============================================================
   КИСЛОТНАЯ — стекающие капли кислоты
   ============================================================ */

.av-frame-acid {
    position: relative;
    overflow: visible;
    border-color: #39ff14;
    animation: frame-acid 2s ease-in-out infinite;
}

.av-frame-acid img,
.av-frame-acid .default-avatar {
    border-radius: 50%;
}

.av-frame-acid::before {
    content: '';
    position: absolute;
    top: 90%;
    left: 35%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at 30% 30%, #baff9c, #39ff14 60%, #1a7a00);
    border-radius: 50%;
    box-shadow:
        0 0 10px #39ff14,
        0 0 20px rgba(57,255,20,0.8);
    animation: frame-acid-drop 2.2s ease-in infinite;
    pointer-events: none;
    z-index: 5;
}

.av-frame-acid::after {
    content: '';
    position: absolute;
    top: 85%;
    left: 62%;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle at 30% 30%, #d9ffb3, #7fff00 60%, #39ff14);
    border-radius: 50%;
    box-shadow:
        0 0 8px #7fff00,
        0 0 16px rgba(127,255,0,0.7);
    animation: frame-acid-drop 2.8s ease-in infinite;
    animation-delay: 1.1s;
    pointer-events: none;
    z-index: 5;
}

@keyframes frame-acid-drop {
    0% {
        top: 88%;
        opacity: 0;
        transform: translateX(-50%) scale(0.4);
    }
    12% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    60% {
        opacity: 0.95;
    }
    100% {
        top: 165%;
        opacity: 0;
        transform: translateX(-50%) scale(1.15);
    }
}

@keyframes frame-acid {
    0%, 100% {
        box-shadow:
            0 0 0 3px #39ff14,
            0 0 0 5px #7fff00,
            0 4px 18px rgba(57,255,20,0.7),
            0 0 30px rgba(57,255,20,0.7);
    }
    50% {
        box-shadow:
            0 0 0 3px #7fff00,
            0 0 0 5px #39ff14,
            0 8px 26px rgba(57,255,20,1),
            0 0 45px rgba(127,255,0,0.9);
    }
}

/* ============================================================
   КОСМИЧЕСКАЯ — летающие звёздочки
   ============================================================ */

.av-frame-cosmic {
    position: relative;
    overflow: visible;
    border-color: #4b0082;
    animation: frame-cosmic 4s ease-in-out infinite;
}

.av-frame-cosmic img,
.av-frame-cosmic .default-avatar {
    border-radius: 50%;
}

.av-frame-cosmic::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    background-image:
        radial-gradient(circle at 15% 20%, #ffffff 1.5px, transparent 2px),
        radial-gradient(circle at 8% 55%, #c8a8ff 1px, transparent 1.5px),
        radial-gradient(circle at 25% 85%, #ffffff 1.2px, transparent 1.7px),
        radial-gradient(circle at 5% 35%, #a97fff 1px, transparent 1.5px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: cosmic-stars-left 5s ease-in-out infinite;
    filter: drop-shadow(0 0 4px #c8a8ff) drop-shadow(0 0 8px #8a2be2);
}

.av-frame-cosmic::after {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    background-image:
        radial-gradient(circle at 85% 25%, #ffffff 1.5px, transparent 2px),
        radial-gradient(circle at 92% 60%, #c8a8ff 1px, transparent 1.5px),
        radial-gradient(circle at 75% 80%, #ffffff 1.2px, transparent 1.7px),
        radial-gradient(circle at 95% 40%, #a97fff 1px, transparent 1.5px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: cosmic-stars-right 6s ease-in-out infinite;
    animation-delay: 0.5s;
    filter: drop-shadow(0 0 4px #c8a8ff) drop-shadow(0 0 8px #8a2be2);
}

@keyframes cosmic-stars-left {
    0%, 100% { transform: rotate(0deg) scale(1);     opacity: 0.7; }
    25%      { transform: rotate(3deg) scale(1.05);  opacity: 1;   }
    50%      { transform: rotate(0deg) scale(1.1);   opacity: 0.85;}
    75%      { transform: rotate(-3deg) scale(1.05); opacity: 1;   }
}

@keyframes cosmic-stars-right {
    0%, 100% { transform: rotate(0deg) scale(1);     opacity: 0.85; }
    25%      { transform: rotate(-3deg) scale(1.08); opacity: 1;    }
    50%      { transform: rotate(0deg) scale(1.12);  opacity: 0.7;  }
    75%      { transform: rotate(3deg) scale(1.06);  opacity: 1;    }
}

@keyframes frame-cosmic {
    0%, 100% {
        box-shadow:
            0 0 0 3px #1a0033,
            0 0 0 5px #4b0082,
            0 0 0 7px #8a2be2,
            0 0 30px rgba(75,0,130,0.9),
            0 0 60px rgba(138,43,226,0.6);
    }
    50% {
        box-shadow:
            0 0 0 4px #4b0082,
            0 0 0 6px #8a2be2,
            0 0 0 8px #9370db,
            0 0 45px rgba(138,43,226,1),
            0 0 90px rgba(147,112,219,0.8);
    }
}

/* ============================================================
   КОМПАКТНЫЕ ВЕРСИИ (топ-5, карточки игроков)
   ============================================================ */

.av-frame-compact {
    animation: none;
}

.av-frame-compact.av-frame-bronze,
.av-frame-compact.av-frame-silver,
.av-frame-compact.av-frame-gold,
.av-frame-compact.av-frame-blood,
.av-frame-compact.av-frame-royal,
.av-frame-compact.av-frame-ice,
.av-frame-compact.av-frame-neon-blue,
.av-frame-compact.av-frame-neon-green,
.av-frame-compact.av-frame-neon-pink,
.av-frame-compact.av-frame-fire,
.av-frame-compact.av-frame-toxic,
.av-frame-compact.av-frame-cyber,
.av-frame-compact.av-frame-rainbow,
.av-frame-compact.av-frame-fire-elite,
.av-frame-compact.av-frame-acid,
.av-frame-compact.av-frame-lava,
.av-frame-compact.av-frame-plasma,
.av-frame-compact.av-frame-hologram,
.av-frame-compact.av-frame-cosmic {
    box-shadow: 0 0 0 2px currentColor, 0 0 14px currentColor;
}

/* Отключаем декор в компактном режиме */
.av-frame-compact.av-frame-acid::before,
.av-frame-compact.av-frame-acid::after,
.av-frame-compact.av-frame-lava::before,
.av-frame-compact.av-frame-lava::after,
.av-frame-compact.av-frame-cosmic::before,
.av-frame-compact.av-frame-cosmic::after,
.av-frame-compact.av-frame-fire-elite::before,
.av-frame-compact.av-frame-fire-elite::after,
.av-frame-compact.av-frame-plasma::before,
.av-frame-compact.av-frame-plasma::after,
.av-frame-compact.av-frame-hologram::before,
.av-frame-compact.av-frame-hologram::after {
    display: none;
}

/* ============================================================
   Уважаем настройки системы (уменьшение анимаций)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .av-frame-fire,
    .av-frame-toxic,
    .av-frame-cyber,
    .av-frame-rainbow,
    .av-frame-fire-elite,
    .av-frame-acid,
    .av-frame-lava,
    .av-frame-plasma,
    .av-frame-hologram,
    .av-frame-cosmic {
        animation: none !important;
    }

    .av-frame-acid::before,
    .av-frame-acid::after,
    .av-frame-lava::before,
    .av-frame-lava::after,
    .av-frame-cosmic::before,
    .av-frame-cosmic::after,
    .av-frame-fire-elite::before,
    .av-frame-fire-elite::after,
    .av-frame-plasma::before,
    .av-frame-plasma::after,
    .av-frame-hologram::before,
    .av-frame-hologram::after {
        display: none !important;
    }
}