/* Hero Video 共通样式 - 用于 index.html 和 index-mobile.html */

/* 视频容器基础样式 */
.hero-video-container {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* 桌面端视频容器 */
@media (min-width: 769px) {
  .hero-video-container {
    flex: 0 0 75%;
    aspect-ratio: 16 / 9;
    max-width: 100%;
  }
}

/* 移动端视频容器 - 基础 */
@media (max-width: 768px) {
  .hero-video-container {
    width: 83.33vw; /* 1200px based on 1440px */
    height: 41.67vw; /* 600px based on 1440px */
    margin-top: 3.47vw;
  }
}

/* 移动端 - 中等屏幕 */
@media (max-width: 768px) {
  .hero-video-container {
    width: 100vw;
    height: 80vw;
    margin-top: 0;
  }
}

/* 移动端 - 小屏幕 */
@media (max-width: 375px) {
  .hero-video-container {
    width: 100vw;
    height: 96vw;
  }
}

/* 视频元素样式 */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 服务标题动画覆盖层 */
.hero-animation-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* 服务标题图片容器 - 基础样式 */
.hero-title-wrap {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%) scale(1.0);
  opacity: 0;
  transition:
    opacity 0.4s ease,
    left 2s linear,
    top 2s linear;
  filter: drop-shadow(0 0 10px rgba(0, 78, 65, 0.5));
}

/* 桌面端标题宽度 */
@media (min-width: 1440px) {
  .hero-title-wrap {
    width: 28.6%;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .hero-title-wrap {
    width: 28.6%;
  }
}

/* 平板标题宽度 */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-title-wrap {
    width: 33%;
  }
}

/* 移动端标题宽度 - 基础 */
@media (max-width: 768px) {
  .hero-title-wrap {
    width: 46.2%;
    top: 15%;
  }
}

/* 移动端 - 中等屏幕 */
@media (max-width: 768px) and (min-width: 376px) {
  .hero-title-wrap {
    width: 50%;
    top: 20%;
  }
}

/* 移动端 - 小屏幕 */
@media (max-width: 375px) {
  .hero-title-wrap {
    width: 55%;
    top: 20%;
  }
}

/* 标题激活状态 */
.hero-title-wrap.active {
  opacity: 1;
}

/* 标题放大缩小动画（在中心位置） */
.hero-title-wrap.scaling {
  animation: heroScaleUp 1.2s ease-in-out forwards !important;
  transition: none !important;
}

@keyframes heroScaleUp {
  0% {
    transform: translate(-50%, -50%) scale(1.0);
  }
  20% {
    transform: translate(-50%, -50%) scale(1.3);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.0);
  }
}

/* 标题呼吸动画 */
.hero-title-wrap.idle {
  animation: heroBreathe 3s ease-in-out infinite;
}

@keyframes heroBreathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.95);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.0);
  }
}

/* 标题淡出动画 */
.hero-title-wrap.fade-out {
  opacity: 0 !important;
  transition: opacity 1s ease-out !important;
}

/* 平板优化 */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-video-container {
    aspect-ratio: 16 / 9;
    max-width: 100%;
  }
}

/* 小屏幕优化 */
@media (max-width: 767px) {
  .hero-video-container {
    flex: 1;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-width: 100%;
  }
}