/* avatar.css */
.avatar-container {
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    overflow: visible;
    transform: translateZ(0); /* 创建新的渲染层 */
    border: 2px solid #ddd;
    background: #f5f5f5 url('data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="none" stroke="%23ddd" stroke-width="4"/></svg>') no-repeat center;
}

.avatar {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(var(--pos-x), var(--pos-y));
    transition: opacity 0.3s;
}

/* avatar.css */
.avatar-container {
    --size: 100px;
    --pos-x: 0px;
    --pos-y: 0px;
    /* 保持原有样式基础上增加 */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #ddd;
    background: #f5f5f5 url('data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="none" stroke="%23ddd" stroke-width="4"/></svg>') no-repeat center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* 新增阴影效果 */
    /* 保持原有容器样式不变 */
    /* 新增定位上下文 */
    isolation: isolate;

}

.avatar-container::after {
    content: '';
    position: absolute; /* 改为绝对定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%, 
        rgba(100, 180, 255, 0.8) 0%,  /* 增强颜色可见度 */
        rgba(100, 180, 255, 0) 70%
    );
    filter: blur(12px); /* 增大模糊范围 */
    z-index: 0;
    pointer-events: none;
    transform: translateZ(0); /* 启用GPU加速 */
}

.avatar {
    /* 新增圆形裁剪 */
    border-radius: 50%;
    /* 强制硬件加速 */
    backface-visibility: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(var(--pos-x), var(--pos-y)) scale(1) rotate(0deg);
    transition: opacity 0.3s;
    z-index: 1; /* 确保头像在光晕上方 */
    cursor: pointer;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1); /* 双重居中修正 */
}

@keyframes rotateAndScale {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(0.5);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }
}


@media (max-width: 768px) {
    .avatar-container {
        --size: 80px; /* 手机端大小 */
        /* 同步缩小阴影和光晕 */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
    .avatar-container::after {
        filter: blur(6px); /* 缩小光晕尺寸 */
    }
}