/* Avatar Decoration Styles - Discord-like avatar borders and effects */

.avatar-container {
    position: relative;
    display: inline-block;
    aspect-ratio: 1 / 1;
    overflow: visible;
}

.avatar-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}

.avatar-decoration.discord-decoration {
    width: 120%;
    height: 120%;
}

/* Custom Border Styles */
.avatar-decoration.custom-border {
    width: 110%;
    height: 110%;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

/* None - No decoration */
.avatar-decoration.border-none {
    display: none;
}

/* Gradient Border */
.avatar-decoration.border-gradient {
    box-shadow: 0 0 0 4px transparent;
    background: linear-gradient(var(--avatar-bg, white), var(--avatar-bg, white)) padding-box,
                linear-gradient(135deg, var(--gradient-from, #ff6b6b), var(--gradient-to, #4ecdc4)) border-box;
}

/* Neon Border */
.avatar-decoration.border-neon {
    box-shadow: 0 0 0 4px var(--border-color, #00ffff),
                0 0 10px var(--border-color, #00ffff),
                0 0 20px var(--border-color, #00ffff),
                0 0 30px var(--border-color, #00ffff),
                inset 0 0 10px var(--border-color, #00ffff);
}

/* Glow Border */
.avatar-decoration.border-glow {
    box-shadow: 0 0 0 4px var(--border-color, #fff),
                0 0 calc(var(--glow-intensity, 5) * 2px) var(--border-color, #fff);
}

/* Rainbow Border */
.avatar-decoration.border-rainbow {
    box-shadow: 0 0 0 4px transparent;
    background: linear-gradient(var(--avatar-bg, white), var(--avatar-bg, white)) padding-box,
                linear-gradient(45deg,
                    red,
                    orange,
                    yellow,
                    green,
                    blue,
                    indigo,
                    violet,
                    red
                ) border-box;
    background-size: 400% 400%;
    animation: rainbow-rotate var(--animation-speed, 3s) linear infinite;
}

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

/* Pulse Border */
.avatar-decoration.border-pulse {
    box-shadow: 0 0 0 4px var(--border-color, #ff6b6b);
    animation: pulse-animation var(--animation-speed, 2s) ease-in-out infinite;
}

@keyframes pulse-animation {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.7;
    }
}

/* Fire Border */
.avatar-decoration.border-fire {
    box-shadow: 0 0 0 4px transparent;
    background: linear-gradient(var(--avatar-bg, white), var(--avatar-bg, white)) padding-box,
                linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #ff0000) border-box;
    background-size: 300% 300%;
    animation: fire-flicker var(--animation-speed, 2s) ease-in-out infinite;
}

@keyframes fire-flicker {
    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(1);
    }
    25% {
        background-position: 50% 25%;
        filter: brightness(1.2);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(0.9);
    }
    75% {
        background-position: 50% 75%;
        filter: brightness(1.1);
    }
}

/* Ice Border */
.avatar-decoration.border-ice {
    box-shadow: 0 0 0 4px transparent,
                0 0 15px rgba(0, 255, 255, 0.5),
                inset 0 0 15px rgba(0, 255, 255, 0.3);
    background: linear-gradient(var(--avatar-bg, white), var(--avatar-bg, white)) padding-box,
                linear-gradient(135deg, #00ffff, #0080ff, #00bfff, #00ffff) border-box;
    animation: ice-shimmer var(--animation-speed, 3s) ease-in-out infinite;
}

@keyframes ice-shimmer {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
}

/* Gold Border */
.avatar-decoration.border-gold {
    box-shadow: 0 0 0 4px transparent,
                0 0 10px rgba(255, 215, 0, 0.5);
    background: linear-gradient(var(--avatar-bg, white), var(--avatar-bg, white)) padding-box,
                linear-gradient(135deg, #ffd700, #ffed4e, #ffd700) border-box;
}

/* Silver Border */
.avatar-decoration.border-silver {
    box-shadow: 0 0 0 4px transparent,
                0 0 10px rgba(192, 192, 192, 0.5);
    background: linear-gradient(var(--avatar-bg, white), var(--avatar-bg, white)) padding-box,
                linear-gradient(135deg, #c0c0c0, #e8e8e8, #c0c0c0) border-box;
}

/* Bronze Border */
.avatar-decoration.border-bronze {
    box-shadow: 0 0 0 4px transparent,
                0 0 10px rgba(205, 127, 50, 0.5);
    background: linear-gradient(var(--avatar-bg, white), var(--avatar-bg, white)) padding-box,
                linear-gradient(135deg, #cd7f32, #d4a574, #cd7f32) border-box;
}

/* Animation Speeds */
.animation-slow {
    --animation-speed: 4s;
}

.animation-normal {
    --animation-speed: 2s;
}

.animation-fast {
    --animation-speed: 1s;
}

/* Size variants */
.avatar-decoration.size-small {
    width: 105%;
    height: 105%;
}

.avatar-decoration.size-medium {
    width: 110%;
    height: 110%;
}

.avatar-decoration.size-large {
    width: 120%;
    height: 120%;
}

/* Border width variants */
.avatar-decoration[style*="--border-width"] {
    --border-width-px: calc(var(--border-width, 4) * 1px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .avatar-decoration {
        width: 115%;
        height: 115%;
    }
}

/* Discord decoration image support */
.avatar-decoration.discord-decoration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0 !important;
}