/**
 * ERGO 360 CTA Section Styles
 * 文字流动渐变动效 + 响应式布局
 */

/* ====================================
   文字渐变波浪动画
   ==================================== */
.ergo-360-cta__title {
  background-image:
    radial-gradient(circle 350px at 30% 40%, #27A4D6 0%, transparent 70%),
    radial-gradient(circle 320px at 70% 60%, #4ECDC4 0%, transparent 70%);
  background-color: #33363E;
  background-size: 150% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ergo-cta-blob-dance 10s ease-in-out infinite;
}

@keyframes ergo-cta-blob-dance {
  0%, 100% {
    background-position: 0% 50%, 100% 50%;
  }
  25% {
    background-position: 50% 0%, 50% 100%;
  }
  50% {
    background-position: 100% 50%, 0% 50%;
  }
  75% {
    background-position: 50% 100%, 50% 0%;
  }
}

/* ====================================
   移动端标题样式
   ==================================== */
.ergo-360-cta__word--dark {
  color: #33363e;
}

.ergo-360-cta__word--gradient {
  background: linear-gradient(180deg, #33363e 0%, #134bd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ====================================
   按钮 hover 效果
   ==================================== */
.ergo-360-cta__btn {
  transition: all 0.3s ease;
}

.ergo-360-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.ergo-360-cta__btn:active {
  transform: translateY(0);
}

/* 深色按钮 hover */
.ergo-360-cta__btn--dark:hover {
  background-color: #444750;
}

/* 蓝色按钮 hover */
.ergo-360-cta__btn--blue:hover {
  background-color: #1a5de0;
}

/* ====================================
   背景视频样式
   ==================================== */
.ergo-360-cta__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* PC 视频默认显示 */
.ergo-360-cta__video--pc {
  display: block;
}

/* 移动端视频默认隐藏 */
.ergo-360-cta__video--mobile {
  display: none;
}

/* ====================================
   响应式适配
   ==================================== */
@media (max-width: 1024px) {
  .ergo-360-cta__title {
    background-image:
      radial-gradient(circle 250px at 30% 40%, #27A4D6 0%, transparent 70%),
      radial-gradient(circle 220px at 70% 60%, #4ECDC4 0%, transparent 70%);
  }
}

@media (max-width: 768px) {
  .ergo-360-cta__title {
    background-image:
      radial-gradient(circle 180px at 30% 40%, #27A4D6 0%, transparent 70%),
      radial-gradient(circle 160px at 70% 60%, #4ECDC4 0%, transparent 70%);
  }

  /* 移动端视频切换 */
  .ergo-360-cta__video--pc {
    display: none;
  }

  .ergo-360-cta__video--mobile {
    display: block;
  }
}