/* ============================================================
   玻璃头像（共享组件）
   使用位置：导航栏 .nav-avatar、个人主页 .page-head-avatar、
            搜索结果页 .search-user-avatar
   （作品详情页头部头像 2026-09-04 随 .work-hero 整块移除，此处不再登记）
   结构：照片铺满 + ::before 磨砂包边 + ::after 玻璃罩。
   各头像只需在自己的文件里定义尺寸（width/height），
   玻璃效果全部由本文件提供；
   小尺寸头像可用 --glass-ring / --glass-blur 两个变量调细参数
   ============================================================ */

.nav-avatar,
.page-head-avatar,
.search-user-avatar {
    --glass-ring: 2px;    /* 包边粗细 */
    --glass-blur: 6px;    /* 磨砂强度 */
    position: relative;                 /* 让两层玻璃伪元素相对它定位 */
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);    /* 外缘细描边 */
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);     /* 外阴影 */
}

/* 照片：铺满整个圆 */
.nav-avatar img,
.page-head-avatar img,
.search-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 磨砂包边：模糊照片边缘，再用 mask 把模糊裁成一圈环形。
   mask 用百分比定位（86%→93% 过渡），任何尺寸的头像都自动适配，
   不需要像像素值那样按尺寸重算 */
.nav-avatar::before,
.page-head-avatar::before,
.search-user-avatar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-mask-image: radial-gradient(circle, transparent 86%, black 93%);
    mask-image: radial-gradient(circle, transparent 86%, black 93%);
    pointer-events: none;
}

/* 玻璃罩：顶部高光带 + 压在照片边缘的透明包边环 + 底部暗边 */
.nav-avatar::after,
.page-head-avatar::after,
.search-user-avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.45),          /* 顶部高光带 */
        rgba(255, 255, 255, 0.05) 35%,
        transparent 55%);
    box-shadow:
        inset 0 0 0 var(--glass-ring) rgba(255, 255, 255, 0.2),  /* 玻璃包边 */
        inset 0 -8px 12px rgba(0, 0, 0, 0.18),                   /* 底部内暗边 */
        inset 0 1px 1px rgba(255, 255, 255, 0.5);                /* 顶缘亮线 */
    pointer-events: none;
}

/* 导航栏头像只有 32px，玻璃参数整体调细一档 */
.nav-avatar {
    --glass-ring: 1px;
    --glass-blur: 3px;
}
.nav-avatar::after {
    box-shadow:
        inset 0 0 0 var(--glass-ring) rgba(255, 255, 255, 0.2),
        inset 0 -3px 5px rgba(0, 0, 0, 0.15),    /* 小尺寸暗边收窄，避免半张脸发暗 */
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}