/* 客户评价区域样式 */
.testimonials {
  position: relative;
  overflow: visible; /* 改为visible以防止内容被裁剪 */
  padding: 80px 0;
  background-color: rgba(10, 20, 30, 0.7);
  min-height: 400px; /* 确保整个区域有足够高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 背景渐变 */
.testimonials-bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: linear-gradient(to right, #194f69 0%, #18485f 25%, #1a3d51 50%, #1b3246 75%, #1e293b 100%);
}

/* 装饰形状 */
.testimonials-bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: -1;
  opacity: 0.5;
}

.testimonials-bg-shape-1 {
  width: 45vw;
  height: 45vw;
  background: linear-gradient(135deg, rgba(41, 97, 122, 0.3), rgba(30, 41, 59, 0.2));
  top: -20vw;
  right: -10vw;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

.testimonials-bg-shape-2 {
  width: 35vw;
  height: 35vw;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.2), rgba(41, 97, 122, 0.15));
  bottom: -15vw;
  left: -10vw;
  border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
}

/* 文本样式调整 */
.premium-quote {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 40px;
  margin: 20px auto;
  max-width: 800px;
  width: 100%;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  text-align: center;
  transform-style: preserve-3d;
  transition: all 0.9s cubic-bezier(0.23, 1, 0.32, 1);
  min-height: 200px; /* 增加最小高度，确保所有引用框有统一高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  will-change: transform, opacity; /* 优化渲染性能 */
  backface-visibility: hidden; /* 防止闪烁 */
}

.testimonial-slide.active .premium-quote {
  animation: quoteAppear 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.testimonial-slide.prev .premium-quote,
.testimonial-slide.next .premium-quote {
  animation: quoteDisappear 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes quoteAppear {
  0% {
    transform: translateY(20px) scale(0.95) rotateX(2deg);
    opacity: 0;
    filter: blur(2px);
  }
  100% {
    transform: translateY(0) scale(1) rotateX(0);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes quoteDisappear {
  0% {
    transform: translateY(0) scale(1) rotateX(0);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(-10px) scale(0.98) rotateX(-2deg);
    opacity: 0;
    filter: blur(2px);
  }
}

/* 确保页脚不会在轮播动画时闪现 */
.testimonials .container {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

/* 强制保持页面结构 */
.testimonials::after {
  content: '';
  display: block;
  height: 20px;
  width: 100%;
  clear: both;
}

.premium-quote p {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
  margin-bottom: 20px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium-quote-author {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  align-self: flex-end;
  width: 100%;
  text-align: right;
}

.testimonials-divider {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
}

/* 轮播相关样式 */
.testimonial-carousel {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  perspective: 1500px; /* 增强3D效果 */
  min-height: 350px; /* 增加轮播区域高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d; /* 保持3D变换 */
}

.testimonial-slide {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* 优化缓动函数 */
  visibility: hidden;
  pointer-events: none;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity; /* 提示浏览器优化渲染 */
}

.testimonial-slide.active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.testimonial-slide.prev {
  transform: translateX(-50px);
  opacity: 0;
}

.testimonial-slide.next {
  transform: translateX(50px);
  opacity: 0;
}

.testimonial-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 15px;
}

.prev-testimonial,
.next-testimonial {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.prev-testimonial:hover,
.next-testimonial:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.prev-testimonial:active,
.next-testimonial:active {
  transform: translateY(0);
  box-shadow: none;
}

.prev-testimonial svg,
.next-testimonial svg {
  transition: transform 0.3s ease;
}

.prev-testimonial:hover svg {
  transform: translateX(-3px);
}

.next-testimonial:hover svg {
  transform: translateX(3px);
}

.prev-testimonial:before,
.next-testimonial:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.5s ease;
}

.prev-testimonial:active:before,
.next-testimonial:active:before {
  width: 120%;
  height: 120%;
  opacity: 0.3;
}

.testimonial-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性缓动 */
  position: relative;
  overflow: hidden;
  margin: 0 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.dot.active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.25);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.dot:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 弹跳效果 */
}

.dot:hover:after {
  transform: scale(1.6);
  opacity: 0.3;
}

.dot:active:after {
  transform: scale(0.8);
  opacity: 0.5;
  transition: all 0.2s ease;
}

.relative {
  position: relative;
  z-index: 1;
}

/* 添加规则确保轮播项水平对齐 */
.testimonial-slide,
.testimonial-slide.active {
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  backface-visibility: hidden; /* 防止3D变换闪烁 */
  perspective: 1000px;
}

.testimonial-slide.active {
  transform: translateX(0) translateY(-50%);
  opacity: 1;
  transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1); /* 优化入场动画 */
}

.testimonial-slide.prev {
  transform: translateX(-60px) translateY(-50%);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53); /* 优化离场动画 */
}

.testimonial-slide.next {
  transform: translateX(60px) translateY(-50%);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53); /* 优化离场动画 */
}