/* ==========================================================================
   FRAMES.CSS — МОДУЛЬ АНИМИРОВАННЫХ КИБЕРПАНК-РАМОК АВАТАРОВ
   --------------------------------------------------------------------------
   ОПТИМИЗИРОВАНО: Анимации свечения перенесены на псевдоэлементы и opacity
   для предотвращения постоянного Repaint на CPU.
   ========================================================================== */

/* Базовая круглая обертка аватара для наложения рамок */
.sk-preview-avatar-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    box-sizing: border-box;
}

.sk-preview-avatar-wrap img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    position: relative;
    z-index: 2;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   1. ОГНЕННЫЙ ШТОРМ (.sk-frame-fire)
   -------------------------------------------------------------------------- */
.sk-frame-fire {
    background: #0d0502;
    position: relative;
}
.sk-frame-fire::before {
    content: '';
    position: absolute;
    top: -2.5px; left: -2.5px; right: -2.5px; bottom: -2.5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff1a00, #ff7b00, #ffea00, #ff2200, #ff9900, #ff1a00);
    z-index: -1;
    animation: frameSmoothRotate 5s linear infinite;
    box-shadow: 0 0 8px rgba(255, 85, 0, 0.4);
    will-change: transform;
}
.sk-frame-fire::after {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    border-radius: 50%;
    border: 1px solid #ffaa00;
    box-shadow: inset 0 0 5px #ff3300;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 2.8s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   2. НЕОНОВЫЙ ПУЛЬС (.sk-frame-neon)
   -------------------------------------------------------------------------- */
.sk-frame-neon {
    border: 2px solid #00d2ff;
    position: relative;
}
.sk-frame-neon::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid #c084fc;
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.45), inset 0 0 6px #00d2ff;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 4.5s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   3. ТОКСИЧНЫЙ РАСПАД (.sk-frame-toxic)
   -------------------------------------------------------------------------- */
.sk-frame-toxic {
    background: #020b04;
    position: relative;
    border: 2px solid #39ff14;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.4), inset 0 0 5px #15803d;
}
.sk-frame-toxic::before {
    content: '';
    position: absolute;
    top: -2.5px; left: -2.5px; right: -2.5px; bottom: -2.5px;
    border-radius: 50%;
    border: 1px dashed #a3e635;
    opacity: 0.7;
    z-index: 1;
    pointer-events: none;
    animation: frameSmoothRotate 14s linear infinite;
    will-change: transform;
}
.sk-frame-toxic::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(163, 230, 53, 0.5), inset 0 0 6px #166534;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 3.5s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   4. ЗОЛОТОЙ VIP (.sk-frame-gold)
   -------------------------------------------------------------------------- */
.sk-frame-gold {
    background: #0d0a02;
    position: relative;
}
.sk-frame-gold::before {
    content: '';
    position: absolute;
    top: -2.5px; left: -2.5px; right: -2.5px; bottom: -2.5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #b8860b, #ffd700, #ffffff, #ffd700, #b8860b, #ffd700, #ffffff, #b8860b);
    z-index: -1;
    animation: frameSmoothRotate 6s linear infinite;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    will-change: transform;
}
.sk-frame-gold::after {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    z-index: 1;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. КИБЕР-ГЛИТЧ (.sk-frame-glitch)
   -------------------------------------------------------------------------- */
.sk-frame-glitch {
    background: #08020a;
    position: relative;
    border: 2px solid #00f0ff;
    box-shadow: -1px 0 6px rgba(0, 240, 255, 0.6), 1px 0 6px rgba(255, 0, 85, 0.6);
}
.sk-frame-glitch::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 50%;
    border: 1px solid #ff0055;
    opacity: 0.6;
    z-index: -1;
    animation: glitchSmoothShift 4.5s infinite ease-in-out;
    will-change: transform, opacity;
}
@keyframes glitchSmoothShift {
    0%, 85%, 100% { transform: translate(0, 0); opacity: 0.5; }
    88% { transform: translate(1.5px, -1px); opacity: 0.8; }
    92% { transform: translate(-1px, 0); opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   6. ВЕЧНАЯ МЕРЗЛОТА (.sk-frame-ice)
   -------------------------------------------------------------------------- */
.sk-frame-ice {
    background: #020d18;
    position: relative;
    border: 2px solid #38bdf8;
    box-shadow: 0 0 8px #38bdf8, 0 0 16px rgba(56, 189, 248, 0.3), inset 0 0 5px #0284c7;
}
.sk-frame-ice::before {
    content: '';
    position: absolute;
    top: -2.5px; left: -2.5px; right: -2.5px; bottom: -2.5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #0284c7, #38bdf8, #ffffff, #38bdf8, #0284c7, #38bdf8, #ffffff, #0284c7);
    opacity: 0.8;
    z-index: -1;
    animation: frameSmoothRotate 7s linear infinite;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
    will-change: transform;
}
.sk-frame-ice::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 12px #bae6fd, inset 0 0 8px #38bdf8;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 4s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   7. ЦИФРОВАЯ МАТРИЦА (.sk-frame-matrix)
   -------------------------------------------------------------------------- */
.sk-frame-matrix {
    background: #010602;
    position: relative;
    border: 2px solid #00ff41;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.6), inset 0 0 5px #002200;
}
.sk-frame-matrix::before {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%;
    background-color: #010502;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='80' viewBox='0 0 40 80'%3E%3Cstyle%3E.c%7Bfont-family:monospace;font-size:9px;font-weight:900;text-shadow:0 0 2px %2300ff41%7D.d%7Bfill:%23003300%7D.m%7Bfill:%23009911%7D.b%7Bfill:%2300ff41%7D.w%7Bfill:%23ffffff%7D%3C/style%3E%3Ctext x='4' y='10' class='c d'%3E0%3C/text%3E%3Ctext x='4' y='22' class='c m'%3E1%3C/text%3E%3Ctext x='4' y='34' class='c b'%3EX%3C/text%3E%3Ctext x='4' y='46' class='c w'%3E7%3C/text%3E%3Ctext x='22' y='26' class='c d'%3E1%3C/text%3E%3Ctext x='22' y='38' class='c m'%3E0%3C/text%3E%3Ctext x='22' y='50' class='c b'%3E9%3C/text%3E%3Ctext x='22' y='62' class='c w'%3E1%3C/text%3E%3C/svg%3E");
    background-size: 40px 80px;
    background-repeat: repeat-y;
    z-index: -1;
    animation: matrixStreamFall 2s linear infinite;
    will-change: background-position;
}
.sk-frame-matrix::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.8), inset 0 0 7px #004d00;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 3.5s infinite alternate ease-in-out;
    will-change: opacity;
}
@keyframes matrixStreamFall {
    0% { background-position: 0 0; }
    100% { background-position: 0 80px; }
}

/* --------------------------------------------------------------------------
   8. RGB ХРОМА ГЕЙМЕР (.sk-frame-rainbow)
   -------------------------------------------------------------------------- */
.sk-frame-rainbow {
    background: #0d1117;
    position: relative;
}
.sk-frame-rainbow::before {
    content: '';
    position: absolute;
    top: -2.5px; left: -2.5px; right: -2.5px; bottom: -2.5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #00ff88, #00e5ff, #7000ff, #ff0088, #ff0000);
    z-index: -1;
    animation: frameSmoothRotate 5s linear infinite;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   9. КОСМИЧЕСКАЯ БЕЗДНА (.sk-frame-void)
   -------------------------------------------------------------------------- */
.sk-frame-void {
    background: #05020c;
    position: relative;
    border: 2px solid #8b5cf6;
    box-shadow: 0 0 8px #7c3aed, inset 0 0 6px #3b0764;
}
.sk-frame-void::before {
    content: '';
    position: absolute;
    top: -2.5px; left: -2.5px; right: -2.5px; bottom: -2.5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #1e1b4b, #6b21a8, #c084fc, #3b0764, #7c3aed, #1e1b4b);
    z-index: -1;
    animation: frameSmoothRotate 10s linear infinite;
    box-shadow: 0 0 10px #8b5cf6;
    will-change: transform;
}
.sk-frame-void::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 12px #c084fc, inset 0 0 8px #6d28d9;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 4s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   10. КИБЕР-СХЕМА (.sk-frame-cyber)
   -------------------------------------------------------------------------- */
.sk-frame-cyber {
    background: #020914;
    position: relative;
    border: 2px solid #00f0ff;
    box-shadow: 0 0 6px #00f0ff;
}
.sk-frame-cyber::before {
    content: '';
    position: absolute;
    top: -2.5px; left: -2.5px; right: -2.5px; bottom: -2.5px;
    border-radius: 50%;
    border: 1px dashed #00f0ff;
    opacity: 0.75;
    z-index: 1;
    pointer-events: none;
    animation: frameSmoothRotate 18s linear infinite;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   11. ПЛАЗМЕННЫЙ РАЗРЯД (.sk-frame-plasma)
   -------------------------------------------------------------------------- */
.sk-frame-plasma {
    background: #050414;
    position: relative;
    border: 2px solid #ec4899;
    box-shadow: 0 0 8px #ec4899, inset 0 0 5px #3b82f6;
}
.sk-frame-plasma::before {
    content: '';
    position: absolute;
    top: -2.5px; left: -2.5px; right: -2.5px; bottom: -2.5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #ec4899, #06b6d4, #3b82f6);
    z-index: -1;
    animation: frameSmoothRotate 4s linear infinite;
    box-shadow: 0 0 10px #8b5cf6;
    will-change: transform;
}
.sk-frame-plasma::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 8px #06b6d4, inset 0 0 6px #8b5cf6;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 3.8s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   12. КРОВАВЫЙ БЕРСЕРК (.sk-frame-blood)
   -------------------------------------------------------------------------- */
.sk-frame-blood {
    background: #140204;
    position: relative;
    border: 2px solid #dc2626;
    box-shadow: 0 0 8px #990000, inset 0 0 6px #450a0a;
}
.sk-frame-blood::before {
    content: '';
    position: absolute;
    top: -2.5px; left: -2.5px; right: -2.5px; bottom: -2.5px;
    border-radius: 50%;
    border: 1.5px solid #990000;
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
    animation: frameBloodSmoothRing 2.8s infinite ease-out;
    will-change: transform, opacity;
}
.sk-frame-blood::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 14px #dc2626, inset 0 0 8px #7f1d1d;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 2.8s infinite alternate ease-in-out;
    will-change: opacity;
}
@keyframes frameBloodSmoothRing {
    0% { transform: scale(1); opacity: 0.7; border-color: #ff1a1a; }
    100% { transform: scale(1.08); opacity: 0; border-color: #7f1d1d; }
}

/* --------------------------------------------------------------------------
   13. ЛЕПЕСТКИ САКУРЫ (.sk-frame-sakura)
   -------------------------------------------------------------------------- */
.sk-frame-sakura {
    background: #0f0308;
    position: relative;
    border: 2px solid #f472b6;
    box-shadow: 0 0 8px #f472b6, inset 0 0 5px #9d174d;
}
.sk-frame-sakura::before {
    content: '';
    position: absolute;
    top: -2.5px; left: -2.5px; right: -2.5px; bottom: -2.5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #f472b6, #fbcfe8, #fda4af, #f472b6, #ec4899, #f472b6);
    z-index: -1;
    animation: frameSmoothRotate 12s linear infinite;
    box-shadow: 0 0 10px rgba(244, 114, 182, 0.4);
    will-change: transform;
}
.sk-frame-sakura::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 12px #f9a8d4, inset 0 0 8px #db2777;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 4.5s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   14. СОЛНЕЧНЫЙ ГИГАНТ (.sk-frame-sun)
   -------------------------------------------------------------------------- */
.sk-frame-sun {
    background: #0d0802;
    position: relative;
    border: 2px solid #f59e0b;
    box-shadow: 0 0 10px #f59e0b, inset 0 0 8px #78350f;
}
.sk-frame-sun::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #f59e0b, #fef08a, #d97706, #fef08a, #f59e0b);
    z-index: -1;
    animation: frameSmoothRotate 5s linear infinite;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
    will-change: transform;
}
.sk-frame-sun::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 16px #fcd34d, inset 0 0 12px #b45309;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 3s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   15. ПОЛНОЕ ЗАТМЕНИЕ (.sk-frame-eclipse)
   -------------------------------------------------------------------------- */
.sk-frame-eclipse {
    background: #020204;
    position: relative;
    border: 2px solid #ffffff;
    box-shadow: 0 0 10px #ffffff, 0 0 20px rgba(255, 255, 255, 0.4), inset 0 0 6px rgba(255, 255, 255, 0.3);
}
.sk-frame-eclipse::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 16px #ffffff, 0 0 28px rgba(255, 255, 255, 0.6);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 4s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   16. 8-BIT АРКАДА (.sk-frame-pixel)
   -------------------------------------------------------------------------- */
.sk-frame-pixel {
    background: #0a030d;
    position: relative;
    border: 2px dotted #ff007f;
    box-shadow: 0 0 8px #ff007f;
}
.sk-frame-pixel::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px dotted #00d2ff;
    box-shadow: 0 0 10px #00d2ff;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 3s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   17. ГРОЗОВОЙ ШТОРМ (.sk-frame-thunder)
   -------------------------------------------------------------------------- */
.sk-frame-thunder {
    background: #030814;
    position: relative;
    border: 2px solid #00f0ff;
    box-shadow: 0 0 10px #00f0ff, 0 0 20px rgba(0, 240, 255, 0.3);
}
.sk-frame-thunder::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: 50%;
    border: 1px dashed #ffffff;
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
    animation: frameSmoothRotate 8s linear infinite;
    will-change: transform;
}
.sk-frame-thunder::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 18px #00f0ff, 0 0 28px #ffffff;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 3s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   18. ДРЕВНИЕ РУНЫ (.sk-frame-runes)
   -------------------------------------------------------------------------- */
.sk-frame-runes {
    background: #080314;
    position: relative;
    border: 2px solid #a855f7;
    box-shadow: 0 0 10px #a855f7, inset 0 0 6px #581c87;
}
.sk-frame-runes::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #8b5cf6, #06b6d4, #a855f7, #8b5cf6);
    z-index: -1;
    animation: frameSmoothRotate 8s linear infinite;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
    will-change: transform;
}
.sk-frame-runes::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 14px #06b6d4;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 3.5s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   19. ОКО ШАРИНГАН (.sk-frame-sharingan)
   -------------------------------------------------------------------------- */
.sk-frame-sharingan {
    background: #140202;
    position: relative;
    border: 2px solid #ff0033;
    box-shadow: 0 0 10px #ff0033, inset 0 0 6px #660000;
}
.sk-frame-sharingan::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff0033, #000000, #ff0033, #000000, #ff0033);
    z-index: -1;
    animation: frameSmoothRotate 6s linear infinite;
    box-shadow: 0 0 12px rgba(255, 0, 51, 0.5);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   20. НЕОНОВЫЙ ТОКИО (.sk-frame-tokyo)
   -------------------------------------------------------------------------- */
.sk-frame-tokyo {
    background: #090214;
    position: relative;
    border: 2px solid #ff007f;
    box-shadow: 0 0 10px #ff007f, inset 0 0 6px #7928ca;
}
.sk-frame-tokyo::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff007f, #7928ca, #00f0ff, #ff007f);
    z-index: -1;
    animation: frameSmoothRotate 5s linear infinite;
    box-shadow: 0 0 12px rgba(255, 0, 127, 0.4);
    will-change: transform;
}
.sk-frame-tokyo::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 14px #00f0ff;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    animation: frameOpacityPulse 4s infinite alternate ease-in-out;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   21. СИНЕМА (.sk-frame-cinema)
   -------------------------------------------------------------------------- */
.sk-frame-cinema {
    background: #0d0a04;
    position: relative;
    border: 2px dashed #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5), inset 0 0 6px #78350f;
    animation: frameSmoothRotate 20s linear infinite;
    will-change: transform;
}

/* Общие плавные анимации (Оптимизировано для GPU) */
@keyframes frameSmoothRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes frameOpacityPulse {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes frameSmoothBreathe {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}