/**
 * Hero Carousel 3D 轮播样式
 * 配合 hero-carousel.js 实现高级3D轮播效果
 * 
 * @author CloudWise Team
 * @version 1.0.0
 */

/* ==================== 容器样式 ==================== */

.new-hero-3d-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 500px;
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: visible;
  z-index: 10; /* 确保轮播图层级高于左侧文字 */
}

/* ==================== 卡片基础样式 ==================== */

/* 使用更具体的选择器覆盖 new-home.css 中的样式 */
.new-hero-3d-container > .new-hero-img {
  position: absolute;
  width: 310px;
  height: 416px;
  left: 50%;
  top: 50%;
  margin-left: -155px;
  margin-top: 0;
  cursor: pointer;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
  pointer-events: auto; /* 确保可以接收点击事件 */
  overflow: visible; /* 防止内容被裁剪 */
  z-index: auto; /* 由 JavaScript 动态控制 */
  transition: transform 2.5s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 2.5s ease-out,
              filter 2.5s ease-out;
  /* 确保整个卡片区域都可以点击，不受3D变换影响 */
  -webkit-tap-highlight-color: transparent;
}

/* 用户交互时的平滑动画 */
.new-hero-3d-container > .new-hero-img.user-interacting {
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 1s ease-out,
              filter 1s ease-out;
}

/* ==================== 卡片内容样式 ==================== */

.new-hero-3d-container > .new-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  pointer-events: none; /* 确保图片不阻挡父元素的点击事件 */
  user-select: none;
  -webkit-user-drag: none;
  transition: box-shadow 2s ease-out;
}

/* 用户交互时的阴影过渡 */
.new-hero-3d-container > .new-hero-img.user-interacting img {
  transition: box-shadow 0.8s ease-out;
}

/* ==================== 打字机效果样式 ==================== */

.hero-carousel-typing-mask {
  position: absolute;
  top: 22%;
  left: 5%;
  width: 90%;
  height: 20%;
  pointer-events: none;
  z-index: 11;
  background: linear-gradient(to right, #FCFFFE 0%, #E2FDED 100%),
              linear-gradient(to right, #FCFFFE 0%, #E2FDED 100%);
  background-size: 100% 40%, 100% 40%;
  background-position: 0 0, 0 60%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: mask-image, -webkit-mask-image;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* ==================== 光线效果（中心卡片） ==================== */

.new-hero-img.center-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 30%, rgba(59, 130, 246, 0.5) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: lightSweep 4s ease-in-out infinite;
  mix-blend-mode: screen;
  z-index: 1;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.new-hero-img.center-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.25) 0%, transparent 60%);
  animation: pulseGlow 2.5s ease-in-out infinite;
  mix-blend-mode: screen;
  z-index: 1;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 中心卡片激活光线效果 */
.new-hero-img.center-card.active::before,
.new-hero-img.center-card.active::after {
  opacity: 1;
}

/* 旋转过程中暂停光效，避免轻微抖动 */
.new-hero-3d-container.is-rotating > .new-hero-img::before,
.new-hero-3d-container.is-rotating > .new-hero-img.center-card::before,
.new-hero-3d-container.is-rotating > .new-hero-img.center-card::after {
  animation: none;
}

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

/* 光线扫描动画 */
@keyframes lightSweep {
  0%, 100% {
    background-position: -100% 0;
  }
  50% {
    background-position: 200% 0;
  }
}

/* 脉冲发光动画 */
@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}

/* 光线闪烁动画 */
@keyframes lightFlicker {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}

/* ==================== 渐变遮罩 ==================== */

.new-hero-img .gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent, transparent);
  pointer-events: none;
  border-radius: 8px;
  z-index: 2;
}

/* ==================== 响应式设计 ==================== */

/* 平板设备 */
@media (max-width: 1024px) {
  .new-hero-3d-container {
    min-height: 450px;
  }

  .new-hero-img {
    width: 280px;
    height: 376px;
    margin-left: -140px;
    margin-top: 0;
  }
}

/* 移动设备 */
@media (max-width: 768px) {
  .new-hero-3d-container {
    min-height: 400px;
    perspective: 800px;
  }

  .new-hero-img {
    width: 250px;
    height: 336px;
    margin-left: -125px;
    margin-top: 0;
  }

  /* 移动端简化动画 */
  .new-hero-img {
    transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1),
                opacity 1.5s ease-out;
  }

  .new-hero-img.user-interacting {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.6s ease-out;
  }

  /* 移动端禁用光线效果以提升性能 */
  .new-hero-img.center-card::before,
  .new-hero-img.center-card::after {
    display: none;
  }

  /* 移动端调整打字机效果位置 */
  .hero-carousel-typing-mask {
    top: 20%;
    left: 4%;
    width: 92%;
    height: 22%;
  }
}

/* 小屏移动设备 */
@media (max-width: 480px) {
  .new-hero-3d-container {
    min-height: 350px;
    perspective: 600px;
  }

  .new-hero-img {
    width: 220px;
    height: 296px;
    margin-left: -110px;
    margin-top: 0;
  }
}

/* ==================== 性能优化 ==================== */

/* 减少重绘 */
.new-hero-img,
.new-hero-img img {
  transform-origin: center center;
}

/* GPU 加速 */
.new-hero-img {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/* 平滑字体渲染 */
.new-hero-img {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==================== 浏览器兼容性 ==================== */

/* Safari 兼容 */
@supports (-webkit-appearance: none) {
  .new-hero-img {
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
  }

  .new-hero-3d-container {
    -webkit-perspective: 1200px;
    -webkit-transform-style: preserve-3d;
  }
}

/* Firefox 兼容 */
@-moz-document url-prefix() {
  .new-hero-img {
    transform-style: preserve-3d;
  }
}

/* IE11 降级方案（禁用3D效果） */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .new-hero-3d-container {
    perspective: none;
  }

  .new-hero-img {
    transform-style: flat;
  }
}

/* ==================== 打印样式 ==================== */

@media print {
  .new-hero-3d-container {
    perspective: none;
    overflow: hidden;
  }

  .new-hero-img {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    page-break-inside: avoid;
  }

  .new-hero-img.center-card::before,
  .new-hero-img.center-card::after,
  .hero-carousel-typing-mask {
    display: none;
  }
}

/* ==================== 辅助功能 ==================== */

/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {
  .new-hero-img {
    transition: none;
  }

  .new-hero-img img {
    transition: none;
  }

  @keyframes lightSweep,
  @keyframes pulseGlow,
  @keyframes lightFlicker {
    animation: none;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .new-hero-img img {
    box-shadow: 0 0 0 2px currentColor;
  }
}

/* ==================== 调试样式（开发环境） ==================== */

/* 取消注释以下代码用于调试 */
/*
.new-hero-img::before {
  content: attr(data-card-id);
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  z-index: 100;
  pointer-events: none;
}
*/