/* ==================================================
   KONKRETNE RAMKI – indywidualne efekty
   (ANIMACJA TEKSTURY, NIE GEOMETRII)
   ================================================== */

/* FIRE – płynący conic (bez obrotu kwadratu) */
.avatar-frame.preview.fire::before {
    background: conic-gradient(#ff0000, #ffffff, #ff0000, #ffffff);
    animation: fire-flow 3.5s linear infinite;
}

@keyframes fire-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* GOLD – shimmer złota */
.avatar-frame.preview.gold::before {
    background: linear-gradient(45deg, #FFD700, #FFFACD, #FFD700);
    background-size: 400% 400%;
    filter: brightness(1.4) drop-shadow(0 0 8px #FFD700);
    animation: gold-shimmer 1.6s infinite;
}

@keyframes gold-shimmer {
    0%   { background-position: 0% 0%; filter: brightness(1.1); }
    50%  { background-position: 100% 0%; filter: brightness(2.1); }
    100% { background-position: 0% 0%; filter: brightness(1.1); }
}

/* NEON – pulsujący glow */
.avatar-frame.preview.neon::before {
    background: conic-gradient(#00ffff, #ff00ff, #00ffff);
    background-size: 400% 400%;
    filter: drop-shadow(0 0 12px #00ffff) brightness(1.4);
    animation: neon-flow 1.4s linear infinite;
}

@keyframes neon-flow {
    0%   { background-position: 0% 50%; filter: brightness(1.4); }
    50%  { background-position: 100% 50%; filter: brightness(2.2); }
    100% { background-position: 0% 50%; filter: brightness(1.4); }
}

/* ICE – puls lodowy (bez skali ramki) */
.avatar-frame.preview.ice::before {
    background: rgba(0, 255, 255, 0.35);
    box-shadow: 0 0 10px #0ff inset;
    animation: ice-pulse 1.6s ease-in-out infinite;
}

@keyframes ice-pulse {
    0%   { opacity: 0.6; }
    50%  { opacity: 1; }
    100% { opacity: 0.6; }
}

/* RAINBOW – płynąca tęcza (bez rotacji) */
.avatar-frame.preview.rainbow::before {
    background: linear-gradient(
        90deg,
        red, orange, yellow, green, blue, indigo, violet, red
    );
    background-size: 600% 100%;
    animation: rainbow-flow 5s linear infinite;
}

@keyframes rainbow-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* GREENPULSE – płynąca zieleń z wyraźnym pulsem */
.avatar-frame.preview.greenpulse::before {
    background: linear-gradient(
        90deg,
        #00ff66,
        #00ff99,
        #00ffcc,
        #00ff99,
        #00ff66
    );
    background-size: 600% 100%;

    animation:
        greenpulse-flow 5s linear infinite,
        greenpulse-pulse 1.8s ease-in-out infinite;

    filter: drop-shadow(0 0 6px rgba(0,255,150,0.6));
}

@keyframes greenpulse-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes greenpulse-pulse {
    0% {
        opacity: 0.6;
        filter: drop-shadow(0 0 4px rgba(0,255,150,0.4));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 14px rgba(0,255,180,0.9));
    }
    100% {
        opacity: 0.7;
        filter: drop-shadow(0 0 6px rgba(0,255,150,0.6));
    }
}

/* ===== BLUEICE – lodowy puls (jak RAINBOW / GREENPULSE) */
.avatar-frame.preview.blueice::before {
    background: linear-gradient(
    90deg,
    #00cfff,
    #00e5ff,
    #9df5ff,
    #ff2b2b,
    #ff5c5c,
    #00e5ff,
    #00cfff
);
background-size: 900% 100%;
animation:
    blueice-flow 5s linear infinite,
    blueice-pulse 1.3s ease-in-out infinite,
    blueice-redflash 3.5s ease-in-out infinite;
}

@keyframes blueice-flow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes blueice-pulse {
    0%   { opacity: 0.45; filter: brightness(1); }
    50%  { opacity: 1;    filter: brightness(1.4); }
    100% { opacity: 0.6;  filter: brightness(1.1); }
}

/* czerwony impuls ostrzegawczy */
@keyframes blueice-redflash {
    0%   { filter: brightness(1) saturate(1); }
    40%  { filter: brightness(1) saturate(1); }
    45%  { filter: brightness(1.6) saturate(2.2); }
    55%  { filter: brightness(1.2) saturate(1.6); }
    60%  { filter: brightness(1) saturate(1); }
    100% { filter: brightness(1) saturate(1); }
}

/* ===== PURPLEPULSE – mroczny fioletowy puls ===== */
.avatar-frame.preview.purplepulse::before {
    background: linear-gradient(
        90deg,
        #6a00ff,
        #8a2be2,
        #ba55d3,
        #ff3fd8,
        #ba55d3,
        #8a2be2,
        #6a00ff
    );
    background-size: 900% 100%;
    animation:
        purple-flow 5s linear infinite,
        purple-pulse 1.4s ease-in-out infinite,
        purple-flash 3.2s ease-in-out infinite;
}

@keyframes purple-flow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes purple-pulse {
    0%   { opacity: 0.45; filter: brightness(1) saturate(1.2); }
    50%  { opacity: 1;    filter: brightness(1.6) saturate(2); }
    100% { opacity: 0.6;  filter: brightness(1.2) saturate(1.4); }
}

/* mroczny magiczny błysk */
@keyframes purple-flash {
    0%   { filter: hue-rotate(0deg) brightness(1); }
    40%  { filter: hue-rotate(0deg) brightness(1); }
    50%  { filter: hue-rotate(25deg) brightness(1.8); }
    60%  { filter: hue-rotate(0deg) brightness(1.2); }
    100% { filter: hue-rotate(0deg) brightness(1); }
}

/* ===== BLACKWHITE-SPIN – hipnotyczna czarno-biała aura ===== */
.avatar-frame.preview.blackwhite-spin::before {
    background: linear-gradient(
        90deg,
        #000000,
        #ffffff,
        #000000,
        #ffffff,
        #000000
    );
    background-size: 800% 100%;
    animation:
        blackwhite-flow 4s linear infinite,
        blackwhite-pulse 1.5s ease-in-out infinite;
}

/* płynne przesuwanie kontrastu */
@keyframes blackwhite-flow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 100% 50%; }
}

/* mocny puls jasności i kontrastu */
@keyframes blackwhite-pulse {
    0% {
        opacity: 0.5;
        filter: brightness(1) contrast(1.2);
    }
    50% {
        opacity: 1;
        filter: brightness(2.2) contrast(3);
    }
    100% {
        opacity: 0.7;
        filter: brightness(1.4) contrast(1.6);
    }
}

/* ===== BLUEWHITE – lodowa niebiesko-biała aura (bez rotacji) ===== */
.avatar-frame.preview.bluewhite-spin::before {
    background: linear-gradient(
        90deg,
        #0066ff,
        #00cfff,
        #ffffff,
        #00cfff,
        #0066ff
    );
    background-size: 900% 100%;
    animation:
        bluewhite-flow 4s linear infinite,
        bluewhite-pulse 1.8s ease-in-out infinite;
}

/* płynięcie lodowego gradientu */
@keyframes bluewhite-flow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 100% 50%; }
}

/* zimny puls – jak mróz */
@keyframes bluewhite-pulse {
    0% {
        opacity: 0.55;
        filter: brightness(1.1) contrast(1.2);
    }
    50% {
        opacity: 1;
        filter: brightness(2.3) contrast(2.8);
    }
    100% {
        opacity: 0.7;
        filter: brightness(1.4) contrast(1.6);
    }
}

/* ===== BLUE ELECTRIC – błyski energii (bez obracania ramki) ===== */
.avatar-frame.preview.blue-electric::before {
    background:
        repeating-linear-gradient(
            90deg,
            #0033ff 0%,
            #004dff 8%,
            transparent 12%,
            #001a99 18%,
            transparent 22%
        ),
        linear-gradient(
            90deg,
            #000066,
            #0033ff,
            #0055ff,
            #0033ff,
            #000066
        );

    background-size: 300% 100%, 600% 100%;
    animation:
        electric-flow 1.8s linear infinite,
        electric-flash 1.2s ease-in-out infinite;
}

/* szybkie przebiegi prądu */
@keyframes electric-flow {
    0%   { background-position:   0% 50%,   0% 50%; }
    100% { background-position: 300% 50%, 100% 50%; }
}

/* błyski energii */
@keyframes electric-flash {
    0% {
        opacity: 0.6;
        filter: brightness(1.2) contrast(1.3);
    }
    40% {
        opacity: 1;
        filter: brightness(2.6) contrast(3.2);
    }
    100% {
        opacity: 0.7;
        filter: brightness(1.4) contrast(1.6);
    }
}


/* ===== VOID CORE – czarna dziura (bez obracania ramki) ===== */
.avatar-frame.preview.void-core::before {
    background:
        /* pulsujące jądro */
        radial-gradient(
            circle at 50% 50%,
            #000000 12%,
            #12001f 22%,
            #2b004d 32%,
            #5a00a3 42%,
            #8b00ff 50%,
            #000000 65%
        ),

        /* fioletowo–niebieskie prądy */
        conic-gradient(
            from 0deg,
            #6f00ff,
            transparent 40deg,
            #00c3ff 90deg,
            transparent 140deg,
            #ff003c 190deg,
            transparent 240deg,
            #6f00ff 300deg,
            transparent
        ),

        /* subtelne iskry */
        repeating-radial-gradient(
            circle,
            transparent 0 6px,
            rgba(160,0,255,0.35) 6px 7px
        );

    background-size:
        100% 100%,
        500% 500%,
        100% 100%;

    animation:
        void-flow 2.8s linear infinite,
        void-chaos 1.4s ease-in-out infinite,
        void-glitch 0.9s steps(2) infinite;

    filter: brightness(1.6) contrast(2.8) saturate(1.6);
}

/* płynąca energia */
@keyframes void-flow {
    0%   { background-position: 50% 50%,   0% 50%, 50% 50%; }
    100% { background-position: 50% 50%, 100% 50%, 50% 50%; }
}

/* puls jądra */
@keyframes void-chaos {
    0%   { opacity: 0.65; filter: brightness(1.3) contrast(2.2) saturate(1.2); }
    50%  { opacity: 1;    filter: brightness(3.2) contrast(4.2) saturate(2.6); }
    100% { opacity: 0.75; filter: brightness(1.6) contrast(2.8) saturate(1.6); }
}

/* nieregularne błyski */
@keyframes void-glitch {
    0%   { filter: hue-rotate(0deg); }
    50%  { filter: hue-rotate(40deg); }
    100% { filter: hue-rotate(-40deg); }
}
}

/* ==================================================
   FALLBACK – domyślna animacja
   ================================================== */


/* ==================================================
   DOSTĘPNOŚĆ
   ================================================== */
@media (prefers-reduced-motion: reduce) {
    .avatar-frame::before {
        animation: none !important;
    }
}

.avatar-frame {
    width: 102px;
    height: 102px;
}

/* =========================================
   PROFIL UŻYTKOWNIKA – RAMKA AVATARA
   ========================================= */
.member_profile .avatar-frame {
    padding: 2px;
    box-sizing: content-box;
}

.member_profile .avatar-frame::before {
    inset: -2px;
    z-index: 1;
}

.member_profile .avatar-frame img {
    position: relative;
    z-index: 2;
    display: block;
}








/* =========================================
   PROFIL – REALNY KONTEKST Z HTML
   ========================================= */
.container-md .avatar-frame {
    padding: 2px;
    box-sizing: content-box;
}

.container-md .avatar-frame::before {
    inset: -2px;
    z-index: 1;
}

.container-md .avatar-frame > img {
    position: relative;
    z-index: 2;
    display: block;
}





/* ============================
   AVATAR FRAME – FIX Z-INDEX
   ============================ */

.avatar-frame {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.avatar-frame::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: 8px;
    pointer-events: none;
}

.avatar-frame img {
    position: relative;
    z-index: 1;
    display: block;
}


/* ==================================================
   CZAT – RAMKI AVATARA (IDENTYCZNE JAK avatar-frame.preview)
   ================================================== */

.avatar_wrap .user-avatar {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar_wrap .user-avatar::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 8px;
    pointer-events: none;
}

/* ===== FIRE ===== */
.avatar_wrap .user-avatar.fire::before {
    background: conic-gradient(#ff0000, #ffffff, #ff0000, #ffffff);
    animation: fire-flow 3.5s linear infinite;
}

/* ===== GOLD ===== */
.avatar_wrap .user-avatar.gold::before {
    background: linear-gradient(45deg, #FFD700, #FFFACD, #FFD700);
    background-size: 400% 400%;
    filter: brightness(1.4) drop-shadow(0 0 8px #FFD700);
    animation: gold-shimmer 1.6s infinite;
}

/* ===== NEON ===== */
.avatar_wrap .user-avatar.neon::before {
    background: conic-gradient(#00ffff, #ff00ff, #00ffff);
    background-size: 400% 400%;
    filter: drop-shadow(0 0 12px #00ffff) brightness(1.4);
    animation: neon-flow 1.4s linear infinite;
}

/* ===== ICE ===== */
.avatar_wrap .user-avatar.ice::before {
    background: rgba(0, 255, 255, 0.35);
    box-shadow: 0 0 10px #0ff inset;
    animation: ice-pulse 1.6s ease-in-out infinite;
}

/* ===== RAINBOW ===== */
.avatar_wrap .user-avatar.rainbow::before {
    background: linear-gradient(
        90deg,
        red, orange, yellow, green, blue, indigo, violet, red
    );
    background-size: 600% 100%;
    animation: rainbow-flow 5s linear infinite;
}

/* ===== GREENPULSE ===== */
.avatar_wrap .user-avatar.greenpulse::before {
    background: linear-gradient(
        90deg,
        #00ff66,
        #00ff99,
        #00ffcc,
        #00ff99,
        #00ff66
    );
    background-size: 600% 100%;

    animation:
        greenpulse-flow 5s linear infinite,
        greenpulse-pulse 1.8s ease-in-out infinite;

    filter: drop-shadow(0 0 6px rgba(0,255,150,0.6));
}

@keyframes greenpulse-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes greenpulse-pulse {
    0% {
        opacity: 0.6;
        filter: drop-shadow(0 0 4px rgba(0,255,150,0.4));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 14px rgba(0,255,180,0.9));
    }
    100% {
        opacity: 0.7;
        filter: drop-shadow(0 0 6px rgba(0,255,150,0.6));
    }
}

/* ===== BLUEICE – lodowy puls (jak RAINBOW / GREENPULSE) */
.avatar_wrap .user-avatar.blueice::before {
    background: linear-gradient(
    90deg,
    #00cfff,
    #00e5ff,
    #9df5ff,
    #ff2b2b,
    #ff5c5c,
    #00e5ff,
    #00cfff
);
background-size: 900% 100%;
animation:
    blueice-flow 5s linear infinite,
    blueice-pulse 1.3s ease-in-out infinite,
    blueice-redflash 3.5s ease-in-out infinite;
}

@keyframes blueice-flow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes blueice-pulse {
    0%   { opacity: 0.45; filter: brightness(1); }
    50%  { opacity: 1;    filter: brightness(1.4); }
    100% { opacity: 0.6;  filter: brightness(1.1); }
}

/* czerwony impuls ostrzegawczy */
@keyframes blueice-redflash {
    0%   { filter: brightness(1) saturate(1); }
    40%  { filter: brightness(1) saturate(1); }
    45%  { filter: brightness(1.6) saturate(2.2); }
    55%  { filter: brightness(1.2) saturate(1.6); }
    60%  { filter: brightness(1) saturate(1); }
    100% { filter: brightness(1) saturate(1); }
}

/* ===== PURPLEPULSE – mroczny fioletowy puls ===== */
.avatar_wrap .user-avatar.purplepulse::before {
    background: linear-gradient(
        90deg,
        #6a00ff,
        #8a2be2,
        #ba55d3,
        #ff3fd8,
        #ba55d3,
        #8a2be2,
        #6a00ff
    );
    background-size: 900% 100%;
    animation:
        purple-flow 5s linear infinite,
        purple-pulse 1.4s ease-in-out infinite,
        purple-flash 3.2s ease-in-out infinite;
}

@keyframes purple-flow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes purple-pulse {
    0%   { opacity: 0.45; filter: brightness(1) saturate(1.2); }
    50%  { opacity: 1;    filter: brightness(1.6) saturate(2); }
    100% { opacity: 0.6;  filter: brightness(1.2) saturate(1.4); }
}

/* mroczny magiczny błysk */
@keyframes purple-flash {
    0%   { filter: hue-rotate(0deg) brightness(1); }
    40%  { filter: hue-rotate(0deg) brightness(1); }
    50%  { filter: hue-rotate(25deg) brightness(1.8); }
    60%  { filter: hue-rotate(0deg) brightness(1.2); }
    100% { filter: hue-rotate(0deg) brightness(1); }
}

/* ===== BLACKWHITE-SPIN – hipnotyczna czarno-biała aura ===== */
.avatar_wrap .user-avatar.blackwhite-spin::before {
    background: linear-gradient(
        90deg,
        #000000,
        #ffffff,
        #000000,
        #ffffff,
        #000000
    );
    background-size: 800% 100%;
    animation:
        blackwhite-flow 4s linear infinite,
        blackwhite-pulse 1.5s ease-in-out infinite;
}

/* płynne przesuwanie kontrastu */
@keyframes blackwhite-flow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 100% 50%; }
}

/* mocny puls jasności i kontrastu */
@keyframes blackwhite-pulse {
    0% {
        opacity: 0.5;
        filter: brightness(1) contrast(1.2);
    }
    50% {
        opacity: 1;
        filter: brightness(2.2) contrast(3);
    }
    100% {
        opacity: 0.7;
        filter: brightness(1.4) contrast(1.6);
    }
}

/* ===== BLUEWHITE – lodowa niebiesko-biała aura (bez rotacji) ===== */
.avatar_wrap .user-avatar.bluewhite-spin::before {
    background: linear-gradient(
        90deg,
        #0066ff,
        #00cfff,
        #ffffff,
        #00cfff,
        #0066ff
    );
    background-size: 900% 100%;
    animation:
        bluewhite-flow 4s linear infinite,
        bluewhite-pulse 1.8s ease-in-out infinite;
}

/* płynięcie lodowego gradientu */
@keyframes bluewhite-flow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 100% 50%; }
}

/* zimny puls – jak mróz */
@keyframes bluewhite-pulse {
    0% {
        opacity: 0.55;
        filter: brightness(1.1) contrast(1.2);
    }
    50% {
        opacity: 1;
        filter: brightness(2.3) contrast(2.8);
    }
    100% {
        opacity: 0.7;
        filter: brightness(1.4) contrast(1.6);
    }
}

/* ===== BLUE ELECTRIC – błyski energii (bez obracania ramki) ===== */
.avatar_wrap .user-avatar.blue-electric::before {
    background:
        repeating-linear-gradient(
            90deg,
            #0033ff 0%,
            #004dff 8%,
            transparent 12%,
            #001a99 18%,
            transparent 22%
        ),
        linear-gradient(
            90deg,
            #000066,
            #0033ff,
            #0055ff,
            #0033ff,
            #000066
        );

    background-size: 300% 100%, 600% 100%;
    animation:
        electric-flow 1.8s linear infinite,
        electric-flash 1.2s ease-in-out infinite;
}

/* szybkie przebiegi prądu */
@keyframes electric-flow {
    0%   { background-position:   0% 50%,   0% 50%; }
    100% { background-position: 300% 50%, 100% 50%; }
}

/* błyski energii */
@keyframes electric-flash {
    0% {
        opacity: 0.6;
        filter: brightness(1.2) contrast(1.3);
    }
    40% {
        opacity: 1;
        filter: brightness(2.6) contrast(3.2);
    }
    100% {
        opacity: 0.7;
        filter: brightness(1.4) contrast(1.6);
    }
}

/* ===== VOID CORE – czarna dziura (bez obracania ramki) ===== */
.avatar_wrap .user-avatar.void-core::before {
    background:
        /* pulsujące jądro */
        radial-gradient(
            circle at 50% 50%,
            #000000 12%,
            #12001f 22%,
            #2b004d 32%,
            #5a00a3 42%,
            #8b00ff 50%,
            #000000 65%
        ),

        /* fioletowo–niebieskie prądy */
        conic-gradient(
            from 0deg,
            #6f00ff,
            transparent 40deg,
            #00c3ff 90deg,
            transparent 140deg,
            #ff003c 190deg,
            transparent 240deg,
            #6f00ff 300deg,
            transparent
        ),

        /* subtelne iskry */
        repeating-radial-gradient(
            circle,
            transparent 0 6px,
            rgba(160,0,255,0.35) 6px 7px
        );

    background-size:
        100% 100%,
        500% 500%,
        100% 100%;

    animation:
        void-flow 2.8s linear infinite,
        void-chaos 1.4s ease-in-out infinite,
        void-glitch 0.9s steps(2) infinite;

    filter: brightness(1.6) contrast(2.8) saturate(1.6);
}

/* płynąca energia */
@keyframes void-flow {
    0%   { background-position: 50% 50%,   0% 50%, 50% 50%; }
    100% { background-position: 50% 50%, 100% 50%, 50% 50%; }
}

/* puls jądra */
@keyframes void-chaos {
    0%   { opacity: 0.65; filter: brightness(1.3) contrast(2.2) saturate(1.2); }
    50%  { opacity: 1;    filter: brightness(3.2) contrast(4.2) saturate(2.6); }
    100% { opacity: 0.75; filter: brightness(1.6) contrast(2.8) saturate(1.6); }
}

/* nieregularne błyski */
@keyframes void-glitch {
    0%   { filter: hue-rotate(0deg); }
    50%  { filter: hue-rotate(40deg); }
    100% { filter: hue-rotate(-40deg); }
}
}