/* ============================================
   ERGO 360 - 101 Carousel Section Styles
   ============================================ */

/* 主容器高度 */
.ergo-360-101 {
  height: 100vh;
  min-height: 600px;
  max-height: 1080px;
}

@media screen and (min-width: 768px) {
  .ergo-360-101 {
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: none;
  }
}

/* 渐变遮罩 - 从 Figma: transparent 50% -> rgba(0,0,0,0.6) 80.463% */
.ergo-360-101__mask {
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 0, 0, 0.6) 80.463%
  );
}

/* 第一个视频默认可见（不参与入场动画） */
.ergo-360-101__video[data-index="0"] {
  opacity: 1;
}

/* 视频激活状态 */
.ergo-360-101__video.is-active {
  opacity: 1;
}

/* Slide 激活状态 */
.ergo-360-101__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 入场动画初始状态（GSAP 控制） */
.ergo-360-101__logo,
.ergo-360-101__subtitle,
.ergo-360-101__nav,
.ergo-360-101__progress {
  opacity: 0;
}

/* 内容行初始状态（用于 GSAP 动画） */
.ergo-360-101__row {
  opacity: 0;
  transform: translateY(20px);
}

/* 进度条填充 */
.ergo-360-101__progress-fill {
  display: block !important;
  width: 0%;
  height: 100%;
  background-color: #ffffff !important;
  border-radius: 2px;
}

/* 进度条容器 */
.ergo-360-101__progress-bar {
  flex: 1;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

/* 进度条完成状态 */
.ergo-360-101__progress-bar.is-complete .ergo-360-101__progress-fill {
  width: 100%;
}

/* 进度条之前的 bar（已播放完的） */
.ergo-360-101__progress-bar.is-past .ergo-360-101__progress-fill {
  width: 100%;
}

/* ============================================
   箭头按钮悬停效果
   ============================================ */
.ergo-360-101__arrow {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ergo-360-101__arrow:active {
  transform: scale(0.95);
}

/* ============================================
   移动端适配
   ============================================ */
@media screen and (max-width: 767px) {
  /* 移动端高度适配 */
  .ergo-360-101 {
    height: 100vh;
    height: 100dvh;
    min-height: 500px;
  }

  /* 移动端渐变遮罩 - 根据 Figma 调整 */
  .ergo-360-101__mask {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 55.296%
    );
  }
}

/* ============================================
   动画关键帧
   ============================================ */

/* 内容进场动画（备用，主要由 GSAP 控制） */
@keyframes ergo-101-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 进度条闪烁提示（可选） */
@keyframes ergo-101-progress-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}