/* ============================================
   轮播组件样式 - Carousel
   ============================================ */

/* 🔥 圆角计算系统 - 基于内圆角公式确保完美平滑边缘 */
:root {
  /* 基础配置 */
  --carousel-outer-radius: 24px;        /* 外层容器圆角 */
  --carousel-padding: 0px;              /* 内边距（当前为0） */
  --carousel-border-width: 1px;         /* box-shadow 模拟的边框宽度 */

  /* 核心公式：内圆角 = 外圆角 - 内边距 - 边框宽度 */
  --carousel-inner-radius: calc(
    var(--carousel-outer-radius)
    - var(--carousel-padding)
    - var(--carousel-border-width)
  );
  /* 计算结果：24px - 0px - 1px = 23px */
}

.et-carousel {
  position: relative;
  /* 响应式宽度 - 90vw，最大1200px，超过后居中 */
  width: 78vw;
  /* 保持5:3宽高比 - 高度根据宽度自动计算 */
  height: calc(68vw * 0.58);
  /* 超大屏居中 + 增加上边距 */
  margin: 1.2vh auto 0;
  overflow: hidden;
  /* 防止被flexbox压缩 */
  flex-shrink: 0;
  /* 移除灰白色背景，消除白色锯齿的根源 */
  background: transparent;
  /* 使用外圆角变量（24px） */
  border-radius: var(--carousel-outer-radius);
  /* 四周均匀的阴影效果 */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.15),
    0 0 30px rgba(0, 0, 0, 0.25),
    0 0 60px rgba(0, 0, 0, 0.15);
  z-index: 1;
  /* GPU 硬件加速优化 */
  backface-visibility: hidden;
  transform: translateZ(0);
  /* Flexbox排序 - 在标题之后显示 */
  order: 3;
}

/* 边框效果已改用发散度小的阴影实现（与导航栏一致的设计思路） */
/* 原双层渐变边框效果已禁用 */
/*
.et-carousel:before,
.et-carousel:after {
  border-radius: inherit;
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.et-carousel:before {
  border: 1px solid rgba(255, 255, 255, 0.8);
  mask-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50%);
  -webkit-mask-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50%);
}

.et-carousel:after {
  border: 1px solid #66B1F1;
  mask-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1));
  -webkit-mask-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1));
}
*/

/* 轮播轨道 - 使用相对定位作为绝对定位的参照容器 */
.et-carousel-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* 使用内圆角变量（23px），比外层小1px，确保完美对齐 */
  border-radius: var(--carousel-inner-radius);
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 单个幻灯片 - 绝对定位层叠 + opacity淡入淡出 */
.et-carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 1;
  /* 使用内圆角变量（23px），确保内容不溢出外层圆角 */
  border-radius: var(--carousel-inner-radius);
  overflow: hidden;
}

/* 激活状态的幻灯片 - 显示在最上层 */
.et-carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.et-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  /* 使用内圆角变量（23px），与父容器完美对齐 */
  border-radius: var(--carousel-inner-radius);
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 切换按钮 - 毛玻璃效果 */
.et-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  /* 毛玻璃背景效果 - 高透明度 */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  /* 轻度阴影实现层次感 */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.et-carousel-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px) saturate(200%);
  -webkit-backdrop-filter: blur(16px) saturate(200%);
  /* 悬停时阴影加深 */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.16),
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  transform: translateY(-50%) scale(1.1);
}

.et-carousel-btn:active {
  background: rgba(255, 255, 255, 0.22);
  /* 点击时阴影减弱，营造按下效果 */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transform: translateY(-50%) scale(0.95);
}

.et-carousel-btn--prev {
  left: 15px;
}

.et-carousel-btn--next {
  right: 15px;
}

.et-carousel-btn svg {
  width: 24px;
  height: 24px;
}

/* 指示器容器 */
.et-carousel-indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

/* 单个指示器 */
.et-carousel-indicator {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.et-carousel-indicator:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

.et-carousel-indicator.active {
  background: #66B1F1;
  width: 24px;
  border-radius: 4px;
}

/* 自动播放倒计时进度条 */
.et-carousel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.15);
  z-index: 11;
  overflow: hidden;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

.et-carousel-progress-bar {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  transform: scaleX(0);
  transform-origin: left center;
  transition-property: transform;
  transition-timing-function: linear;
  transition-duration: 0s;
  box-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
  will-change: transform;
}

/* 运行状态 - 进度条动画 */
.et-carousel-progress-bar.running {
  transform: scaleX(1) !important;
}

/* 暂停状态 - 保持当前进度 */
.et-carousel-progress-bar.paused {
  transition: none;
}