/* ===== Banner 双图轮播 + 底部进度条指示器 ===== */
.banner-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.banner-slider__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero .banner-slider__overlay {
  background:
    linear-gradient(
      105deg,
      rgba(0, 16, 48, 0.9) 0%,
      rgba(0, 32, 82, 0.72) 32%,
      rgba(0, 40, 95, 0.42) 58%,
      rgba(0, 12, 38, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 8, 28, 0.35) 0%,
      transparent 42%,
      rgba(0, 10, 30, 0.25) 100%
    );
}
.banner-slider__indicators {
  z-index: 3;
}
.banner-slider__track {
  position: absolute;
  inset: 0;
}
.banner-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease-out, ease), visibility 0.9s;
}
.banner-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.banner-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-slider__indicators {
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 22px;
  z-index: 4;
  display: flex;
  gap: 10px;
  max-width: 240px;
  pointer-events: auto;
}
.hero .banner-slider__indicators--dock {
  position: absolute;
  bottom: 56px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-width: 280px;
  width: min(280px, 42vw);
  z-index: 5;
  pointer-events: auto;
}
.page-banner .banner-slider__indicators {
  left: max(4vw, calc((100% - 1200px) / 2 + 32px));
  max-width: 200px;
}

.banner-slider__bar {
  flex: 1;
  height: 4px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.banner-slider__bar-bg {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
}
.banner-slider__bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(200, 230, 255, 0.95) 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.banner-slider__bar.is-active .banner-slider__bar-fill {
  animation: bannerBarFill var(--banner-duration, 6s) linear forwards;
}
.banner-slider__bar.is-done .banner-slider__bar-fill {
  width: 100%;
  animation: none;
}

@keyframes bannerBarFill {
  from { width: 0%; }
  to { width: 100%; }
}

/* ===== Banner 文案轮播 ===== */
.banner-slider__copies {
  position: relative;
  z-index: 3;
}
.hero .banner-slider__copies {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.banner-slider__copy {
  display: none;
  animation: none;
}
.banner-slider__copy.is-active {
  display: block;
  animation: bannerCopyIn 0.75s var(--ease-out, ease) both;
}
@keyframes bannerCopyIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.page-banner .banner-slider__copies {
  width: var(--container);
  margin: 0 auto;
  padding-bottom: 8px;
}
.page-banner .banner-slider__copy .page-banner__title {
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .hero .banner-slider__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0, 16, 48, 0.72) 0%,
        rgba(0, 32, 82, 0.55) 38%,
        rgba(0, 12, 38, 0.35) 100%
      ),
      linear-gradient(
        105deg,
        rgba(0, 16, 48, 0.88) 0%,
        rgba(0, 32, 82, 0.6) 100%
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-slider__slide { transition-duration: 0.2s; }
  .banner-slider__bar.is-active .banner-slider__bar-fill {
    animation: none;
    width: 100%;
  }
  .banner-slider__copy.is-active {
    animation: none;
  }
}