/* Products Image Enhancement V2 - 彻底解决空白边距问题 */

/* ===== 核心容器样式 ===== */
.detail-visual {
  position: relative;
  width: 100%;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 32px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.05),
    0 10px 40px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ===== 图片核心样式 - 完全填充容器 ===== */
.detail-visual img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 32px;
  z-index: 2;
  filter: brightness(1.02) contrast(1.05)
          drop-shadow(0 20px 60px rgba(0, 0, 0, 0.15))
          drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: imageEnter 0.8s ease-out;
}

/* ===== 图片加载动画 ===== */
@keyframes imageEnter {
  0% {
    opacity: 0;
    transform: scale(0.95);
    filter: brightness(1.02) contrast(1.05) blur(10px)
            drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.02) contrast(1.05)
            drop-shadow(0 20px 60px rgba(0, 0, 0, 0.15))
            drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
  }
}

/* ===== 悬停效果 ===== */
.detail-visual:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-4px);
}

.detail-visual:hover img {
  transform: scale(1.08);
  filter: brightness(1.05) contrast(1.08)
          drop-shadow(0 30px 80px rgba(0, 0, 0, 0.2))
          drop-shadow(0 12px 24px rgba(0, 0, 0, 0.15));
}

/* ===== 产品特定背景渐变 ===== */

/* VPS - 蓝色主题 */
.product-detail[data-product="vps"] .detail-visual {
  background: linear-gradient(135deg,
    rgba(0, 113, 227, 0.03) 0%,
    rgba(0, 163, 255, 0.05) 50%,
    rgba(0, 113, 227, 0.03) 100%);
  box-shadow:
    0 1px 3px rgba(0, 113, 227, 0.1),
    0 10px 40px rgba(0, 113, 227, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.product-detail[data-product="vps"] .detail-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(0, 113, 227, 0.08) 0%, transparent 60%);
  border-radius: 32px;
  z-index: 1;
  animation: subtlePulse 6s ease-in-out infinite;
}

/* GPU - 紫色主题 */
.product-detail[data-product="gpu"] .detail-visual {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.04) 0%,
    rgba(217, 70, 239, 0.06) 50%,
    rgba(139, 92, 246, 0.04) 100%);
  box-shadow:
    0 1px 3px rgba(139, 92, 246, 0.1),
    0 10px 40px rgba(139, 92, 246, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.product-detail[data-product="gpu"] .detail-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(139, 92, 246, 0.1) 0%, transparent 60%);
  border-radius: 32px;
  z-index: 1;
  animation: subtlePulse 6s ease-in-out infinite;
}

/* 物理服务器 - 绿色主题 */
.product-detail[data-product="dedicated"] .detail-visual {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.03) 0%,
    rgba(5, 150, 105, 0.05) 50%,
    rgba(16, 185, 129, 0.03) 100%);
  box-shadow:
    0 1px 3px rgba(16, 185, 129, 0.1),
    0 10px 40px rgba(16, 185, 129, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.product-detail[data-product="dedicated"] .detail-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(16, 185, 129, 0.08) 0%, transparent 60%);
  border-radius: 32px;
  z-index: 1;
  animation: subtlePulse 6s ease-in-out infinite;
}

/* 域名注册 - 橙色主题 */
.product-detail[data-product="domain"] .detail-visual {
  background: linear-gradient(135deg,
    rgba(249, 115, 22, 0.03) 0%,
    rgba(234, 88, 12, 0.05) 50%,
    rgba(249, 115, 22, 0.03) 100%);
  box-shadow:
    0 1px 3px rgba(249, 115, 22, 0.1),
    0 10px 40px rgba(249, 115, 22, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.product-detail[data-product="domain"] .detail-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(249, 115, 22, 0.08) 0%, transparent 60%);
  border-radius: 32px;
  z-index: 1;
  animation: subtlePulse 6s ease-in-out infinite;
}

/* ===== 微妙脉冲动画 ===== */
@keyframes subtlePulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

/* ===== 光泽效果 ===== */
.detail-visual::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 70%
  );
  border-radius: 32px;
  transform: rotate(45deg);
  animation: shine 10s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}

@keyframes shine {
  0%, 100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

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

/* 大屏幕优化 */
@media (min-width: 1440px) {
  .detail-visual {
    height: 500px;
  }
}

/* 平板 */
@media (max-width: 1024px) {
  .detail-visual {
    height: 380px;
  }
}

/* 手机 */
@media (max-width: 768px) {
  .detail-visual {
    height: 320px;
    border-radius: 24px;
  }

  .detail-visual img {
    border-radius: 24px;
  }

  .detail-visual:hover {
    transform: translateY(-2px);
  }

  .detail-visual:hover img {
    transform: scale(1.05);
  }

  .detail-visual::after {
    display: none; /* 移动端禁用光泽效果以提升性能 */
  }
}

/* 小屏手机 */
@media (max-width: 480px) {
  .detail-visual {
    height: 280px;
    border-radius: 20px;
  }

  .detail-visual img {
    border-radius: 20px;
  }
}

/* ===== 清除可能的干扰样式 ===== */
.detail-visual {
  line-height: 0;
  font-size: 0;
}

.detail-visual img {
  vertical-align: top;
}

.visual-icon {
  display: none !important;
}

/* ===== 产品详情布局优化 ===== */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  line-height: normal;
}

@media (max-width: 1024px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ===== 图片加载状态 ===== */
.detail-visual img:not([src]),
.detail-visual img[src=""] {
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-visual img:not([src])::before,
.detail-visual img[src=""]::before {
  content: attr(alt);
  color: #999;
  font-size: 16px;
  text-align: center;
  padding: 20px;
}

/* ===== 确保容器过渡流畅 ===== */
.detail-visual {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 性能优化 ===== */
.detail-visual,
.detail-visual img,
.detail-visual::before,
.detail-visual::after {
  will-change: transform, opacity;
}

/* ===== 禁用用户选择和拖拽 ===== */
.detail-visual img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.detail-visual {
  pointer-events: auto;
}