/* ============================================================
   CircularCarousel — React Bits (JavaScript + CSS variant)
   以原生 CSS 复刻组件样式表，供静态站点直接引用。
   ============================================================ */
.circular-carousel{
  --cc-fade:#000000;
  --cc-radius:12px;
  --cc-inner:0.4;
  position:relative;width:100%;height:100%;overflow:hidden;outline:none;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.circular-carousel[data-axis='x']{touch-action:pan-x}
.circular-carousel[data-draggable]{cursor:grab}
.circular-carousel[data-dragging]{cursor:grabbing}
.circular-carousel:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(128,128,140,.55)}

.circular-carousel__view{position:absolute;inset:0}
.circular-carousel[data-shape='wheel'] .circular-carousel__view{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.circular-carousel[data-shape='panorama'] .circular-carousel__view{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}

.circular-carousel__stage{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .45s ease;transform-origin:50% 50%;
}
.circular-carousel[data-ready] .circular-carousel__stage{opacity:1}

.circular-carousel__camera,
.circular-carousel__ring,
.circular-carousel__card{width:0;height:0;transform-style:preserve-3d}
.circular-carousel__camera{position:relative}
.circular-carousel__ring,
.circular-carousel__card{position:absolute;left:0;top:0}

.circular-carousel__tile{position:absolute;outline:1px solid transparent;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.circular-carousel__frame{position:absolute;left:0;top:0;width:100%;overflow:hidden}
.circular-carousel__photo{
  position:absolute;display:block;max-width:none;object-fit:cover;pointer-events:none;
  user-select:none;-webkit-user-drag:none;
}
.circular-carousel__photo--leaving{animation:circular-carousel-leave 700ms cubic-bezier(.33,1,.68,1) both}

/* ------------------------------------------------------------
   卡片玻璃罩：边缘磨砂 → 向内渐隐的透明过渡 → 中心清澈，再叠加玻璃棱线
   与下缘实体厚度。卡片被切成 8 条竖向切片，玻璃必须挂在整卡上，否则
   每条切片缝都会多出一道亮边；--cc-depth 让后排卡片自然收淡。
   同一套玻璃画正反两面：圆环远端卡片是用「背面切片」显示的，单面玻璃会
   被 backface-visibility 剔除，导致只有近端卡片有质感。::before 朝 +Z
   覆盖近端，::after 朝 -Z 覆盖远端，两者互补且只绘制朝向镜头的一面。
   不做 backdrop-filter：22 个 3D 图层每帧实时采样背景在集显 / 软件渲染上
   代价很高，改用多层渐变模拟磨砂玻璃断面，中心保持完全透明、作品不失真。
   ------------------------------------------------------------ */
.circular-carousel__card::before,
.circular-carousel__card::after{
  content:'';position:absolute;
  left:calc(var(--cc-card-w, 220px) / -2);top:calc(var(--cc-card-h, 220px) / -2);
  width:var(--cc-card-w, 220px);height:var(--cc-card-h, 220px);
  border-radius:var(--cc-radius);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  pointer-events:none;
  /* 每条边一条渐变：极细亮棱线 → 暗折射带 → 半透明磨砂 → 中心完全清澈。
     中心不加任何底色，作品图形与字标保持锐利，只有边缘「起雾」。
     —— 边缘磨砂相比初版加强：不透明度上调、过渡带加宽，并补一层更亮的
        内发光，让玻璃断面的奶白磨砂感更厚润（中心依旧归零，不洗淡作品）。 */
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.66) 0, rgba(8,10,18,.46) 1px,
      rgba(226,237,255,.46) 2%, rgba(226,237,255,.30) 6%,
      rgba(226,237,255,.13) 14%, rgba(226,237,255,0) 27%),
    linear-gradient(to top,
      rgba(255,255,255,.36) 0, rgba(8,10,18,.40) 1px,
      rgba(206,222,248,.40) 2%, rgba(206,222,248,.25) 6%,
      rgba(206,222,248,.10) 13%, rgba(206,222,248,0) 25%),
    linear-gradient(to right,
      rgba(255,255,255,.60) 0, rgba(8,10,18,.48) 1px,
      rgba(232,240,255,.52) 2%, rgba(232,240,255,.34) 6%,
      rgba(232,240,255,.13) 14%, rgba(232,240,255,0) 26%),
    linear-gradient(to left,
      rgba(255,255,255,.42) 0, rgba(8,10,18,.42) 1px,
      rgba(216,230,255,.44) 2%, rgba(216,230,255,.27) 6%,
      rgba(216,230,255,.11) 13%, rgba(216,230,255,0) 25%),
    /* 只在左上角留一点受光方向，不铺满整张卡，作品颜色不被洗淡 */
    linear-gradient(146deg,
      rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 16%,
      rgba(255,255,255,0) 34%);
  box-shadow:
    /* 加强的奶白磨砂内发光：更粗更亮，边缘玻璃感更厚润 */
    inset 0 0 22px 2px rgba(214,230,255,.22),
    inset 0 0 6px 0 rgba(255,255,255,.28),
    inset 0 -1px 2px rgba(8,10,18,.30),
    /* 层叠的半透明侧边 = 有透光感的厚度 */
    0 1px 0 rgba(226,232,244,.42),
    0 3px 0 rgba(120,132,158,.28),
    0 5px 0 rgba(16,18,24,.38),
    0 9px 20px rgba(0,0,0,.42);
  /* 后排只是略微收淡，保留玻璃断面，不再随深度几乎消失 */
  opacity:calc(1 - var(--cc-depth, 0) * .7);
}
.circular-carousel__card::before{transform:translateZ(2.5px)}
/* 远端卡片朝镜头的是 -Z 方向；翻转自身保证亮棱线 / 渐变仍是正面可见 */
.circular-carousel__card::after{transform:translateZ(-6px) rotateY(180deg)}
/* 近端卡片改由前景层绘制：主层这张只留命中区域，省掉一次重复绘制 */
.circular-carousel__card.cc-front-hidden::before,
.circular-carousel__card.cc-front-hidden::after{display:none}

.circular-carousel__shade,
.circular-carousel__inner{position:absolute;inset:0;pointer-events:none}
.circular-carousel__shade{background:var(--cc-fade);opacity:var(--cc-depth,0)}
.circular-carousel__inner{background:#000000;opacity:var(--cc-inner)}

/* 标题 / 计数 */
.circular-carousel__caption{
  position:absolute;left:0;right:0;bottom:14px;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:0 16px;color:inherit;text-align:center;pointer-events:none;
  animation:circular-carousel-reveal 900ms ease both;
}
.circular-carousel__title{
  display:flex;max-width:100%;flex-direction:column;align-items:center;
  font-size:14px;font-weight:650;line-height:1.3;letter-spacing:.02em;
  animation:circular-carousel-title 520ms cubic-bezier(.22,1,.36,1);
}
.circular-carousel__subtitle{font-weight:400;font-size:11px;letter-spacing:.12em;opacity:.55;margin-top:2px}
.circular-carousel__count{
  display:inline-flex;align-items:center;gap:3px;font-size:12px;font-variant-numeric:tabular-nums;
  line-height:1;opacity:.5;
}
.circular-carousel__slash{opacity:.6}
.circular-carousel__digits{display:inline-flex}
.circular-carousel__digit{display:inline-block;height:1em;overflow:hidden}
.circular-carousel__reel{display:flex;flex-direction:column;transition:transform 600ms cubic-bezier(.22,1,.36,1)}
.circular-carousel__reel>span{height:1em}

.circular-carousel__live{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

@keyframes circular-carousel-title{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes circular-carousel-leave{from{opacity:1}to{opacity:0}}
@keyframes circular-carousel-reveal{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .circular-carousel__stage,
  .circular-carousel__reel,
  .circular-carousel__caption,
  .circular-carousel__title{transition:none;animation:none}
}