/* ============================================================
   carousel.css — 纯 JS 移植版 CircularCarousel
   配色对齐站点：纸感底 + 墨字 + 琥珀强调。
   远卡片淡入「纸色」而非黑色（fadeColor 由 JS 注入 --cc-fade）。
   ============================================================ */

.carousel-wrap{
  position:relative;
  height:clamp(420px, 58vh, 660px);
  margin:clamp(20px,3vh,40px) 0 clamp(8px,1.5vh,22px);
}

.circular-carousel{
  --cc-fade: var(--paper);          /* JS 会注入真实纸色，远卡片淡进出更自然 */
  --cc-radius: 10px;
  --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{ box-shadow:inset 0 0 0 2px rgba(164,112,58,.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;
}
.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;
  box-shadow:var(--shadow);
}
.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__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:#000; opacity:var(--cc-inner); }

/* 字幕：墨色 + 琥珀计数 */
.circular-carousel__caption{
  position:absolute; left:0; right:0; bottom:18px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:0 16px; 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:clamp(15px,1.4vw,18px); font-weight:500; line-height:1.35;
  color:var(--ink);
  animation:circular-carousel-title 520ms cubic-bezier(.22,1,.36,1);
}
.circular-carousel__subtitle{ font-weight:400; opacity:.55; font-size:.86em; }
.circular-carousel__count{
  display:inline-flex; align-items:center; gap:3px;
  font-family:var(--mono); font-size:12px; line-height:1;
  color:var(--ink-dim); font-variant-numeric:tabular-nums;
}
.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-reveal{
  from{ opacity:0; } to{ opacity:1; }
}

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

/* 移动端：环略降高度，避免占用过多屏 */
@media (max-width:640px){
  .carousel-wrap{ height:clamp(360px, 52vh, 460px); }
}