/* ==========================================================================
   components/carousel.css — 首页「陪陪展示」轮播
   结构 = 线上原版：容器 860px · 卡片 16:9 · radius 14px · 圆点 10px
   视觉 = 糖果粗野：ink 硬描边 + 实心硬影 + 纯色块
   ========================================================================== */

.home-carousel {
  position: relative;
  width: min(100%, 860px);
  margin: 0 auto clamp(14px, 3vw, 20px);
}

.carousel-stage {
  position: relative;
}

.carousel-viewport {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--panel-flat);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--hard);
}

.carousel-track {
  display: flex;
  transition: transform 0.48s var(--ease-out);
  will-change: transform;
  touch-action: pan-y pinch-zoom;
}

.carousel-slide {
  flex: 0 0 100%;
  padding: 0 clamp(4px, 1vw, 10px);
}

/* --------------------------------------------------------------------------
   卡片：16:9 纯色块 + ink 描边
   -------------------------------------------------------------------------- */

.carousel-card {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--candy-purple-soft);
  border: var(--stroke-thin) solid var(--ink);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-pop), box-shadow var(--t-fast) var(--ease-pop);
}

.carousel-card:hover {
  transform: var(--lift);
  box-shadow: var(--hard);
}

.carousel-card:active {
  transform: var(--press-flat);
  box-shadow: var(--hard-none);
}

/* 播放角标：提示"点开即可观看"（站长要求：轮播卡片点击直接弹播放器） */
.carousel-play {
  position: absolute;
  top: clamp(10px, 2.4vw, 16px);
  right: clamp(10px, 2.4vw, 16px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(38px, 7vw, 52px);
  height: clamp(38px, 7vw, 52px);
  background: var(--candy-pink);
  border: var(--stroke-thin) solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--hard);
  pointer-events: none;
  transition: transform var(--t-fast) var(--ease-pop), background var(--t-fast) var(--ease);
}

.carousel-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--ink);
}

.carousel-card:hover .carousel-play {
  transform: scale(1.12);
}

/* 轮播卡片是 role=button，补一个键盘焦点环 */
.carousel-slide:focus-visible {
  outline: var(--stroke) solid var(--ink);
  outline-offset: 4px;
  border-radius: var(--r-md);
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
}

.carousel-img.loaded {
  opacity: 1;
}

.carousel-card:hover .carousel-img.loaded {
  transform: scale(1.05);
}

/* 无海报时的糖果占位图 */
.carousel-no-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 52px;
  opacity: 0.72;
  background:
    radial-gradient(circle, rgba(62, 44, 74, 0.1) 1.6px, transparent 1.7px) 0 0 / 22px 22px,
    var(--candy-pink-soft);
}

.carousel-card.is-placeholder {
  cursor: default;
}

.carousel-card.is-placeholder:hover {
  transform: none;
  box-shadow: none;
}

.carousel-card.is-placeholder .carousel-no-poster {
  opacity: 1;
}

/* 底部文案带 */
.carousel-card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(12px, 3vw, 20px);
  color: var(--ink);
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.86) 55%);
}

.carousel-card-label {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--candy-pink);
  border: var(--stroke-thin) solid var(--ink);
  border-radius: var(--r-pill);
}

.carousel-card-name {
  display: block;
  font-size: clamp(17px, 3.2vw, 22px);
  font-weight: var(--fw-blackest);
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   左右箭头
   -------------------------------------------------------------------------- */

.carousel-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(36px, 6vw, 44px);
  height: clamp(36px, 6vw, 44px);
  padding: 0 0 3px;
  font-size: clamp(24px, 4.2vw, 33px);
  line-height: 1;
  color: var(--ink);
  background: var(--panel-solid);
  border: var(--stroke-thin) solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--hard-sm);
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s var(--ease-pop),
    box-shadow 0.2s ease;
}

.home-carousel:hover .carousel-arrow {
  opacity: 1;
  pointer-events: auto;
}

.carousel-arrow:hover {
  color: var(--ink);
  background: var(--candy-yellow);
  transform: translateY(-50%) translate(-2px, -2px);
  box-shadow: var(--hard);
}

.carousel-arrow:active {
  transform: translateY(-50%);
  box-shadow: var(--hard-none);
}

.carousel-prev {
  left: clamp(8px, 2vw, 16px);
}

.carousel-next {
  right: clamp(8px, 2vw, 16px);
}

/* --------------------------------------------------------------------------
   圆点（线上：10px 圆形）
   -------------------------------------------------------------------------- */

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  background: var(--ink-3);
  border: var(--stroke-thin) solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease-pop),
    width var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.carousel-dot:hover {
  background: var(--ink-2);
  transform: scale(1.2);
}

.carousel-dot.active {
  width: 22px;
  background: var(--candy-pink);
  border-color: var(--ink);
  border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   移动端
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .carousel-card {
    aspect-ratio: 4 / 3;
  }

  .carousel-slide {
    padding: 0 3px;
  }

  .carousel-arrow {
    opacity: 1;
    pointer-events: auto;
    width: 34px;
    height: 34px;
  }

  .carousel-card-name {
    font-size: 16px;
  }
}