/* ============================================================================
 * AESTHSIA · fx-ring.css —— 「彩带环」可复用组件
 * ----------------------------------------------------------------------------
 * 来源：Google AI Studio 的 promo-card 边框（conic-gradient + @property 角度
 *       动画 + 模糊外发光）。2026-10-25 定稿参数 = 转速 4s / 浓度 93% /
 *       光晕 10px·28% / 环宽 2px。
 *
 * 用法（容器必须自带 position:relative 与圆角，否则环会以更外层定位祖先为基准）：
 *
 *   <div class="avatar rainbow-avatar">…头像图/字母…</div>
 *
 *   任意祖先或元素上可覆盖参数：
 *     --fx-dur      转一圈的时间            默认 4s
 *     --fx-alpha    三段彩色的浓度 0~1      默认 .93
 *     --fx-glow-t   光晕强度 0~1            默认 .28（blur = 35px×t ⇒ 10px，opacity = t）
 *     --fx-ring-w   环宽                    默认 2px
 *     --fx-base     彩带之间的那段底色      默认 rgba(0,0,0,.09)
 *
 * 实现要点（改之前先读）：
 *  1) ★★★ r97：**转的是伪元素的 transform，不是 --fx-angle 自定义属性**。
 *     原来用 @property 注册角度 + `@keyframes { to { --fx-angle: 360deg } }`，
 *     视觉没问题，但自定义属性动画**上不了合成器**：每帧都要重算样式 + 重绘
 *     整个宿主图层。实测主页 3 个特殊头像 ⇒ 整块 1003×169 的 .home-members
 *     每秒重绘约 60 次（滚动 12 次里量到 +120 次重绘；只暂停这条动画 ⇒ 归零），
 *     滚动时合成器被这份无谓重绘拖住，底部就出现「一亮一暗」的频闪（用户实锤）。
 *     现在 conic-gradient 固定 `from 0deg`，伪元素整体 `transform: rotate(1turn)`
 *     —— 圆周上转角度与改 `from` 逐像素等价（元素与遮罩都是正圆），而 transform
 *     动画走合成器：光栅一次、之后只改矩阵，滚动期间零重绘。
 *     ★ 若将来要再引入"会变的颜色/角度"，先想清楚它会不会每帧触发 paint。
 *  2) 环是「外挂」的：inset = -环宽，再用 mask 把中心挖空（半径 = 100% - 环宽）。
 *     这样盒子 56px 的头像仍然是 56px —— 不会把整排头像挤换行。
 *  3) mask 的 radial-gradient 必须写 `circle closest-side`。默认尺寸是
 *     farthest-corner，`50%` 会被当成角半径（≈1.41×半边长），挖空半径算小一半，
 *     环会变成一条盖住头像的粗实心圈（实测 11px 宽、压住头像 9px）。
 *  4) 光晕要向外扩（inset 负值）。blur 半径一旦大于头像半径，整层被衰减到
 *     几乎全透明 —— 看上去像「没有光晕」。
 *  5) 光晕 z-index:-1 必须配容器的 isolation:isolate：不隔离的话负层会跑到
 *     页面根层叠上下文里，被祖先背景整块盖掉；隔离后它画在容器背景之上、
 *     文字/头像之下 —— 字母头像也不会被彩雾糊住。
 *  6) 环 z-index:2（> 头像图的 1），低于 .avatar-cam 的 3（编辑页相机角标）。
 * ========================================================================== */

:root {
  --fx-dur: 4s;
  --fx-alpha: .93;
  --fx-glow-t: .28;
  --fx-ring-w: 2px;
  /* 彩带的三段彩色（RGB 通道，alpha 由 --fx-alpha 统一控制） */
  --fx-blue: 66 133 244;
  --fx-green: 26 166 74;
  --fx-yellow: 252 189 0;
  --fx-red: 219 55 45;
  --fx-base: rgba(0, 0, 0, .09);
}

/* ---------------------------------------------------------------------------
 * 容器：只挂层叠上下文，不动任何几何、也不跑动画（动画在伪元素上，见下）。
 * ★ r97：动画从容器搬到了 ::before / ::after 的 transform 上 —— 这样它能在
 *   合成器上跑，不会每帧把宿主图层（整块成员网格）重绘一遍。
 * ------------------------------------------------------------------------- */
.rainbow-avatar {
  isolation: isolate;
}

.rainbow-avatar::before,
.rainbow-avatar::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  /* 与 AI Studio 一致：灰底 + 三段断续彩弧（不是一整圈彩虹）
     ★ r97：角度固定从 0deg 起，转圈交给下面的 transform 动画 */
  background: conic-gradient(from 0deg at 50% 50%,
    var(--fx-base) 0deg,
    var(--fx-base) 69deg,
    rgb(var(--fx-blue) / var(--fx-alpha)) 115deg,
    rgb(var(--fx-green) / var(--fx-alpha)) 193deg,
    var(--fx-base) 270deg,
    rgb(var(--fx-yellow) / var(--fx-alpha)) 291deg,
    rgb(var(--fx-red) / var(--fx-alpha)) 322deg,
    var(--fx-base) 1turn);
  /* ★★★ r97：转圈在合成器上（transform），不是自定义属性 —— 见文件头第 1 条。
     元素与遮罩都是正圆 ⇒ 旋转与「改 conic 的 from 角度」逐像素等价。
     多头像错峰：home.js 渲染成员网格时按序号写 --halo-delay（负数 = 从周期中段
     开始），多个特殊头像不会整齐划一地转；单人头像不设置 = 0s。 */
  transform-origin: 50% 50%;
  animation: fx-ring-spin var(--fx-dur, 4s) linear infinite;
  animation-delay: var(--halo-delay, 0s);
}

@keyframes fx-ring-spin { to { transform: rotate(1turn); } }

/* 外发光：同一份渐变再模糊一次 */
.rainbow-avatar::before {
  inset: -22%;
  filter: blur(calc(35px * var(--fx-glow-t, .28)));
  opacity: var(--fx-glow-t, .28);
  z-index: -1;
}

/* 环：外挂一圈，中心挖空 */
.rainbow-avatar::after {
  inset: calc(var(--fx-ring-w, 2px) * -1);
  z-index: 2;
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%,
    rgba(0, 0, 0, 0) calc(100% - var(--fx-ring-w, 2px) - .3px),
    #000 calc(100% - var(--fx-ring-w, 2px) + .7px));
  mask: radial-gradient(circle closest-side at 50% 50%,
    rgba(0, 0, 0, 0) calc(100% - var(--fx-ring-w, 2px) - .3px),
    #000 calc(100% - var(--fx-ring-w, 2px) + .7px));
}

/* 系统开了「减少动态效果」：停转，只留静态彩带
   （home.css 里还有一条全局 animation-duration:.01ms!important，这里显式关掉更干净） */
@media (prefers-reduced-motion: reduce) {
  .rainbow-avatar::before,
  .rainbow-avatar::after { animation: none; }
}