/* webapp/static/webapp/frames.css */

/* Общий базовый стиль для аватарок с рамками */
.avatar, .podium-avatar, .leaderboard-row .avatar-small {
    position: relative;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

/* 1. Золотая аура (Пульсация) */
.frame-gold {
    border-color: #fbbf24 !important;
    animation: pulseGold 2s infinite;
}
@keyframes pulseGold {
    0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

/* 2. Кибер-неон (Вращающийся градиент) */
.frame-neon {
    border: none !important;
    background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc, #ff00cc);
    background-size: 300% 300%;
    animation: gradientMove 3s linear infinite;
    padding: 3px;
}
.frame-neon > * {
    background: var(--bg);
    border-radius: 50%;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* 3. Пламя дракона (Огненное свечение) */
.frame-fire {
    border-color: #ef4444 !important;
    animation: fireGlow 1.5s ease-in-out infinite alternate;
}
@keyframes fireGlow {
    from { box-shadow: 0 0 5px #ef4444, 0 0 10px #ef4444; }
    to { box-shadow: 0 0 15px #ef4444, 0 0 30px #f97316; }
}

/* 4. Радужный призрак (Переливающаяся радуга с искрами) */
@property --rainbow-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.frame-rainbow {
    border: none !important;
    padding: 2px;
    position: relative;
    overflow: visible !important;
    isolation: isolate;
    z-index: 1;
    border-radius: 50%;

    --rainbow-angle: 0deg;

    background:
        conic-gradient(
            from calc(var(--rainbow-angle) + 35deg),
            transparent 0deg 340deg,
            rgba(255,255,255,0.95) 350deg,
            transparent 360deg
        ),
        conic-gradient(
            from var(--rainbow-angle),
            #ff003c,
            #ff8a00,
            #fff000,
            #00ff85,
            #00eaff,
            #345cff,
            #a000ff,
            #ff00c8,
            #ff003c
        );

    animation: apexSpectrum 5s linear infinite;

    box-shadow:
        0 0 3px rgba(255,255,255,0.8),
        inset 0 0 2px rgba(255,255,255,0.9);
}

/* Фотография */
.frame-rainbow > * {
    background: var(--bg);
    border-radius: 50%;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* МНОГОСЛОЙНАЯ ЭНЕРГЕТИЧЕСКАЯ АУРА */
.frame-rainbow::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    pointer-events: none;

    background: conic-gradient(
        from var(--rainbow-angle),
        #ff003c,
        #ff8a00,
        #fff000,
        #00ff85,
        #00eaff,
        #345cff,
        #a000ff,
        #ff00c8,
        #ff003c
    );

    filter: blur(7px);
    opacity: 0.85;
    z-index: -1;

    animation:
        apexSpectrum 5s linear infinite,
        apexAura 2.4s ease-in-out infinite;
}

/* ЖИВЫЕ ЭНЕРГЕТИЧЕСКИЕ ИСКРЫ */
.frame-rainbow::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;

    background-image:
        radial-gradient(circle at 5% 20%,
            white 1.3px, transparent 2px),

        radial-gradient(circle at 95% 25%,
            #00ffff 1.4px, transparent 2px),

        radial-gradient(circle at 90% 85%,
            #ff00ff 1.3px, transparent 2px),

        radial-gradient(circle at 10% 80%,
            #fff000 1.3px, transparent 2px),

        radial-gradient(circle at 50% 0%,
            white 1.5px, transparent 2.2px),

        radial-gradient(circle at 50% 100%,
            #00ffff 1.5px, transparent 2.2px),

        radial-gradient(circle at 0% 55%,
            #ff00ff 1.2px, transparent 2px),

        radial-gradient(circle at 100% 50%,
            white 1.3px, transparent 2px);

    animation:
        apexParticles 8s linear infinite,
        apexTwinkle 1.8s ease-in-out infinite;
}

/* ДВИЖЕНИЕ ЦВЕТОВОЙ ВОЛНЫ */
@keyframes apexSpectrum {
    from {
        --rainbow-angle: 0deg;
    }
    to {
        --rainbow-angle: 360deg;
    }
}

/* ДЫШАЩАЯ АУРА */
@keyframes apexAura {
    0%, 100% {
        opacity: 0.65;
        filter: blur(6px);
    }

    50% {
        opacity: 1;
        filter: blur(11px);
    }
}

/* ВРАЩЕНИЕ ЧАСТИЦ */
@keyframes apexParticles {
    0% {
        transform: rotate(0deg) scale(0.95);
    }

    50% {
        transform: rotate(180deg) scale(1.08);
    }

    100% {
        transform: rotate(360deg) scale(0.95);
    }
}

/* НЕРАВНОМЕРНОЕ МЕРЦАНИЕ */
@keyframes apexTwinkle {
    0%, 100% {
        opacity: 0.45;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0.65;
    }

    75% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .frame-rainbow,
    .frame-rainbow::before,
    .frame-rainbow::after {
        animation: none !important;
    }
}

/* 5 Комсическая */
@property --blackhole-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.frame-cosmic {
    border: none !important;
    padding: 2px;
    position: relative;
    overflow: visible !important;
    isolation: isolate;
    z-index: 1;
    border-radius: 50%;

    background: conic-gradient(
        from var(--blackhole-angle),
        #080013,
        #6500ff,
        #00cfff,
        #18002d,
        #ff5a00,
        #9b00ff,
        #05000d,
        #080013
    );

    animation: blackHoleSpin 5s linear infinite;

    box-shadow:
        0 0 3px #a500ff,
        inset 0 0 3px #ffffff;
}

/* ФОТОГРАФИЯ */
.frame-cosmic > * {
    background: var(--bg);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* ГРАВИТАЦИОННАЯ АУРА */
.frame-cosmic::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;

    background: conic-gradient(
        from var(--blackhole-angle),
        #090016,
        #8700ff,
        #00d9ff,
        #240044,
        #ff6500,
        #bb00ff,
        #090016
    );

    filter: blur(7px);
    opacity: 0.9;

    animation:
        blackHoleSpin 5s linear infinite,
        blackHolePulse 2.5s ease-in-out infinite;
}

/* ЭНЕРГЕТИЧЕСКИЙ АККРЕЦИОННЫЙ ДИСК */
.frame-cosmic::after {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;

    background:
        radial-gradient(
            ellipse at 50% 50%,
            transparent 52%,
            rgba(0, 0, 0, 0.95) 56%,
            transparent 60%
        ),
        conic-gradient(
            from var(--blackhole-angle),
            transparent 0deg,
            #00dfff 35deg,
            #7b00ff 75deg,
            transparent 115deg,
            #ff5a00 165deg,
            #ffcf72 190deg,
            transparent 230deg,
            #a000ff 290deg,
            transparent 360deg
        );

    mask: radial-gradient(
        circle,
        transparent 53%,
        black 58%,
        black 78%,
        transparent 85%
    );

    opacity: 0.9;

    animation:
        blackHoleDisk 3.5s linear infinite,
        blackHoleFlash 4s ease-in-out infinite;
}

/* ВРАЩЕНИЕ ГРАВИТАЦИОННОГО ПОЛЯ */
@keyframes blackHoleSpin {
    from {
        --blackhole-angle: 0deg;
    }
    to {
        --blackhole-angle: 360deg;
    }
}

/* ДВИЖЕНИЕ ПЛАЗМЫ */
@keyframes blackHoleDisk {
    0% {
        transform: rotate(0deg) scale(0.96);
    }
    50% {
        transform: rotate(180deg) scale(1.04);
    }
    100% {
        transform: rotate(360deg) scale(0.96);
    }
}

/* ПУЛЬСАЦИЯ ЭНЕРГИИ */
@keyframes blackHolePulse {
    0%, 100% {
        opacity: 0.65;
        filter: blur(6px);
    }
    50% {
        opacity: 1;
        filter: blur(10px);
    }
}

/* ЭНЕРГЕТИЧЕСКИЕ ВСПЫШКИ */
@keyframes blackHoleFlash {
    0%, 35%, 100% {
        opacity: 0.65;
    }
    45% {
        opacity: 1;
    }
    52% {
        opacity: 0.8;
    }
}
/* 6 Ледяная */

.frame-frozen {
    border: none !important;
    padding: 3px;
    position: relative;
    overflow: visible !important;
    isolation: isolate;
    z-index: 1;
    border-radius: 50%;

    background: conic-gradient(
        #ffffff,
        #8cecff,
        #008cff,
        #dfffff,
        #38baff,
        #ffffff
    );

    animation: frozenRotate 8s linear infinite;
}

/* Фотография */
.frame-frozen > * {
    background: var(--bg);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* Морозная аура */
.frame-frozen::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;

    background: conic-gradient(
        #ffffff,
        #00eaff,
        #0077ff,
        #b8faff,
        #ffffff
    );

    filter: blur(15px);
    opacity: 0.85;
    z-index: -1;

    animation:
        frozenRotate 10s linear infinite,
        frozenPulse 3s ease-in-out infinite;
}

/* Снежинки и ледяные кристаллы */
.frame-frozen::after {
    content: '';
    position: absolute;
    inset: -19px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;

    background-image:
        radial-gradient(circle at 15% 15%, white 2px, transparent 3px),
        radial-gradient(circle at 85% 20%, #bafaff 2px, transparent 3px),
        radial-gradient(circle at 95% 75%, white 2px, transparent 3px),
        radial-gradient(circle at 10% 85%, #00eaff 2px, transparent 3px),
        radial-gradient(circle at 50% 0%, white 3px, transparent 4px),
        radial-gradient(circle at 50% 100%, #bafaff 3px, transparent 4px),
        radial-gradient(circle at 0% 50%, white 2px, transparent 3px),
        radial-gradient(circle at 100% 50%, #00dfff 2px, transparent 3px);

    animation: frozenSnow 9s linear infinite;
}

/* Вращение льда */
@keyframes frozenRotate {
    to {
        transform: rotate(360deg);
    }
}

/* Холодное свечение */
@keyframes frozenPulse {
    0%, 100% {
        opacity: 0.55;
        filter: blur(11px);
    }
    50% {
        opacity: 1;
        filter: blur(19px);
    }
}

/* Движение снежинок */
@keyframes frozenSnow {
    0% {
        transform: rotate(0deg) scale(0.9);
        opacity: 0.5;
    }
    50% {
        transform: rotate(-180deg) scale(1.12);
        opacity: 1;
    }
    100% {
        transform: rotate(-360deg) scale(0.9);
        opacity: 0.5;
    }
}