/* ==========================================================================
   Space Vanta · Hero — media（视觉：品牌切面 + 后台图片轮播，v3）
   路径：public/hero/media/cs/media.css

   · 舞台没有底板、边框和背景，与上一版的品牌切面保持同样的“悬浮”状态
   · 图片统一切掉左下角（与切面的切角同一几何），从而延续品牌语言
   · 控制行在舞台下方：分段进度（当前段慢慢亮起）· 计数 · 暂停 / 播放，全部是小字，不抢视觉
   · 图片的切换是慢速淡入，并伴随极轻的缓慢收缩（静止感），不做快速滑动
   ========================================================================== */

.sv-hero__visual {
  position: relative;
  min-width: 0;
}

.sv-hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  overflow: hidden;
  isolation: isolate;
}

.sv-hero__slides {
  position: absolute;
  inset: 0;
}

.sv-hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.2s var(--sv-hero-ease);
}

.sv-hero__slide.is-active { opacity: 1; }

/* 图片：左下切角 */
.sv-hero__slide--media {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 64px 100%, 0 calc(100% - 64px));
  background: var(--sv-hero-paper);
}

.sv-hero__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
  transition: transform 7s linear;
}

.sv-hero__slide.is-active .sv-hero__media-img { transform: scale(1); }

/* ---------- 控制行（舞台之外） ---------- */
.sv-hero__stage-ctrl {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  max-width: 100%;
}

.sv-hero__stage-ctrl[hidden] { display: none !important; }

.sv-hero__dots {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 6px;
  max-width: 220px;
}

.sv-hero__dot {
  appearance: none;
  position: relative;
  flex: 1 1 0;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* 轨道：灰色细线 */
.sv-hero__dot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -.5px;
  background: rgba(21, 26, 38, .2);
}

/* 进度：冷蓝细线（静止时整段点亮；播放时从左慢慢走满） */
.sv-hero__dot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -.5px;
  background: var(--sv-hero-blue);
  transform: scaleX(0);
  transform-origin: left center;
}

.sv-hero__dot.is-active::after { transform: scaleX(1); }

.sv-hero__dot.is-active.is-run::after {
  animation: sv-hero-progress var(--sv-hero-interval, 6s) linear both;
}

.sv-hero__visual[data-playing="false"] .sv-hero__dot.is-run::after {
  animation-play-state: paused;
}

.sv-hero__dot:focus-visible {
  outline: 2px solid var(--sv-hero-blue);
  outline-offset: 3px;
}

.sv-hero__count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--sv-hero-muted);
}

/* 暂停 / 播放：纯文字 + 小图标，无底板 */
.sv-hero__motion {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--sv-hero-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.sv-hero__motion-icon {
  display: inline-block;
  width: 8px;
  height: 9px;
  background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px);
}

.sv-hero__motion[aria-pressed="false"] .sv-hero__motion-icon {
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@keyframes sv-hero-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- 手机 ---------- */
@media (max-width: 767px) {
  .sv-hero__stage {
    aspect-ratio: 4 / 5;
    max-height: 68vh;
  }

  .sv-hero__slide--media {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 48px 100%, 0 calc(100% - 48px));
  }

  .sv-hero__dots { max-width: none; }
}