/**
 * ERGO 360 Video Scroll Section
 * 视频卡片放大 + mask 内容区域 + 自定义光标 + 视频弹窗
 */

/* ========================================
   视频区域标题渐变文字效果 - "Story." 部分
   ======================================== */
.video-scroll__gradient-text {
  background: linear-gradient(90deg, #5281FF 80%, #0079DD 86.7%, #00ABE0 93.4%, #0BD2E0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   mask 区域标题渐变文字效果 - "YOUR CURVES MATTER"（移动端用）
   ======================================== */
.video-scroll__mask-gradient-text {
  background: linear-gradient(90deg, #5281FF 30.29%, #0079DD 44.23%, #00ABE0 65.87%, #0BD2E0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   Blur Overlay 遮罩层
   ======================================== */
.video-scroll__blur-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

/* 移动端 Blur Overlay */
.video-scroll__blur-overlay--mobile {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

/* ========================================
   PC 端 Mask 层 - 100vh 全屏
   ======================================== */
.video-scroll__mask-section--desktop {
  /* 初始状态：在屏幕下方（通过 JS 控制 translateY） */
  will-change: transform;
}

/* ========================================
   移动端 Mask 层 - 滚动动画
   ======================================== */
.video-scroll__mask-section--mobile-scroll {
  /* 初始状态：在屏幕下方（通过 JS 控制 translateY） */
  will-change: transform;
}

/* 移动端滚动 Mask 按钮 - 纯文字 + icon，无背景 */
.video-scroll__mask-button--mobile-scroll {
  background: transparent;
}

/* ========================================
   mask 区域底部按钮样式
   ======================================== */
/* 桌面端按钮 - 纯文字 + icon，无背景 */
.video-scroll__mask-button--desktop {
  background: transparent;
}

/* 移动端按钮 - 纯文字 + icon，无背景 */
.video-scroll__mask-button--mobile {
  background: transparent;
}

/* ========================================
   初始状态提示文字
   ======================================== */
.video-scroll__initial-hint {
  will-change: opacity;
  transition: opacity 0.3s ease;
}

/* ========================================
   视频卡片
   ======================================== */
.video-scroll__video-card {
  /* 桌面端：宽高比跟随浏览器视口 */
  aspect-ratio: var(--viewport-ratio, 16 / 9);
  will-change: transform, border-radius;
  transform-origin: center center;
}

/* 移动端：视频区域 100vh 高度以支持 Pin */
@media (max-width: 767px) {
  .video-scroll__video-section {
    height: 100vh;
    min-height: 100vh;
  }

  .video-scroll__video-wrapper {
    height: 100%;
  }

  .video-scroll__video-card {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }

  .video-scroll__video {
    object-fit: cover !important;
  }
}

/* 确保视频填满容器 */
.video-scroll__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   自定义光标
   ======================================== */
.video-scroll__cursor {
  transition: opacity 0.2s ease;
  will-change: transform;
}

.video-scroll__cursor-inner {
  transition: transform 0.2s ease;
}

/* 悬停时光标放大效果 */
.video-scroll__cursor--active .video-scroll__cursor-inner {
  transform: scale(1);
}

/* 点击时缩小 */
.video-scroll__cursor--clicking .video-scroll__cursor-inner {
  transform: scale(0.9);
}

/* 触摸设备隐藏自定义光标 */
@media (hover: none) and (pointer: coarse) {
  .video-scroll__cursor {
    display: none !important;
  }
}

/* ========================================
   mask 内容区域
   ======================================== */
.video-scroll__mask-section {
  /* 正常文档流，无需特殊定位 */
}

.video-scroll__mask-content {
  /* 内容自适应高度 */
}

/* 移动端 Watch Full Video 按钮淡出动画 */
.video-scroll__mobile-play-btn {
  will-change: opacity;
}

/* ========================================
   视频弹窗 Modal
   ======================================== */
.video-scroll-modal {
  /* 默认隐藏 */
}

.video-scroll-modal .fixed-modal {
  transition: opacity 0.3s ease;
}

.video-scroll-modal__close {
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}

.video-scroll-modal__close:hover {
  opacity: 1;
  transform: scale(1.1);
}

.video-scroll-modal__video {
  max-width: 90vw;
  max-height: 80vh;
}

/* ========================================
   页面滚动锁定（弹窗打开时）
   ======================================== */
body.has-video-modal-open {
  overflow: hidden;
}

/* ========================================
   移动端响应式适配
   ======================================== */
@media (max-width: 767px) {


  /* 弹窗视频 */
  .video-scroll-modal__video {
    max-width: 95vw;
    max-height: 50vh;
  }

  /* 关闭按钮位置调整 */
  .video-scroll-modal__close {
    top: 16px;
    right: 16px;
  }
}

/* ========================================
   平板适配
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .video-scroll__title {
    font-size: 48px !important;
  }

  .video-scroll__mask-title {
    font-size: 48px !important;
  }

  .video-scroll__mask-subtitle {
    font-size: 18px !important;
  }

}

/* ========================================
   大屏幕适配
   ======================================== */
@media (min-width: 1920px) {
  /* 大屏幕保持 80vw 初始宽度 */
}

/* ========================================
   动画性能优化
   ======================================== */
.video-scroll__video-section {
  /* GPU 加速 */
  transform: translateZ(0);
  backface-visibility: hidden;
}