/**
 * hero.css - Hero 3D 模块样式
 * 浅奢香槟：暖调象牙白基底 + 暖光晕 + 深炭灰文字
 */

/* ========== 全屏 Hero 容器 ========== */
.hero-3d {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(200, 169, 126, 0.12), transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(216, 188, 146, 0.06), transparent 50%),
    linear-gradient(135deg, #F8F5F0 0%, #EFE9DF 50%, #F8F5F0 100%);
}

/* 无图占位：磨砂金属肌理 + 香槟金暖光 */
.hero-3d.hero-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-frosted-metal);
  background-size: 200px;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}
.hero-3d.hero-placeholder .hero-3d-overlay {
  background:
    linear-gradient(90deg, rgba(248,245,240,0.75) 0%, rgba(248,245,240,0.3) 50%, rgba(248,245,240,0.6) 100%),
    linear-gradient(180deg, rgba(248,245,240,0.2) 0%, transparent 30%, transparent 70%, rgba(248,245,240,0.5) 100%);
}

.hero-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 浅色 overlay：让深色文字在任何图片上都可读 */
.hero-3d-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(248, 245, 240, 0.82) 0%,
      rgba(248, 245, 240, 0.45) 30%,
      rgba(248, 245, 240, 0.12) 55%,
      rgba(248, 245, 240, 0.40) 100%),
    linear-gradient(180deg,
      rgba(248, 245, 240, 0.20) 0%,
      rgba(248, 245, 240, 0.05) 50%,
      rgba(248, 245, 240, 0.45) 100%);
}

/* ========== 文字层 ========== */
.hero-3d-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 0 8vw;
  max-width: 60%;
  pointer-events: none;
}

.hero-3d-content > * {
  pointer-events: auto;
}

.hero-3d-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--metallic-gold);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-5);
  text-shadow: 0 1px 8px rgba(15, 14, 12, 0.7);
}

.hero-3d-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-ivory);
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 16px rgba(15, 14, 12, 0.7), 0 0 32px rgba(15, 14, 12, 0.5);
}

.hero-3d-title em {
  font-style: normal;
  background: var(--metallic-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: var(--weight-normal);
}

.hero-3d-subtitle {
  font-size: var(--text-md);
  color: var(--color-ivory);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-7);
  max-width: 480px;
  text-shadow: 0 1px 8px rgba(15, 14, 12, 0.6), 0 0 24px rgba(15, 14, 12, 0.4);
}

.hero-3d-cta-group {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero-3d-cta-group .btn-primary {
  background: var(--metallic-gold);
  color: var(--color-ivory);
  border: 1px solid var(--brand-accent);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-gold-glow), var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.hero-3d-cta-group .btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--metallic-shine);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.hero-3d-cta-group .btn-primary:hover {
  box-shadow: 0 0 28px rgba(200, 169, 126, 0.25), var(--shadow-lg);
  transform: translateY(-1px);
}
.hero-3d-cta-group .btn-primary:hover::after { opacity: 1; }

.hero-3d-cta-group .btn-ghost {
  background: var(--color-ivory-soft);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  backdrop-filter: blur(4px);
}

.hero-3d-cta-group .btn-ghost:hover {
  border-color: var(--brand-accent);
  background: rgba(200, 169, 126, 0.06);
  color: var(--brand-accent-deep);
}

/* ========== 静态 fallback（无 WebGL / 无深度图） ========== */
.hero-static {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
}

.hero-fallback {
  display: none;
}

.hero-3d.no-webgl .hero-3d-canvas,
.hero-3d.no-depth .hero-3d-canvas {
  display: none;
}

.hero-3d.no-webgl .hero-static,
.hero-3d.no-depth .hero-static {
  display: block;
}

/* ========== image-area 布局（demo-3 风格，图文左右） ========== */
.hero-3d.layout-image-area {
  height: 70vh;
  min-height: 500px;
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 0;
}

.hero-3d.layout-image-area .hero-3d-content {
  position: relative;
  padding: var(--space-8);
  max-width: none;
  background: var(--color-bg);
}

.hero-3d.layout-image-area .hero-3d-canvas,
.hero-3d.layout-image-area .hero-static,
.hero-3d.layout-image-area .hero-3d-overlay {
  grid-column: 2;
}

/* ========== 响应式 ========== */
@media (max-width: 1023px) {
  .hero-3d-content {
    max-width: 70%;
  }

  .hero-3d-title {
    font-size: var(--text-3xl);
  }
}

@media (max-width: 767px) {
  .hero-3d {
    height: 80vh;
    min-height: 500px;
  }

  .hero-3d-content {
    max-width: 100%;
    padding: var(--space-8) var(--container-padding);
    justify-content: flex-end;
    padding-bottom: var(--space-9);
  }

  .hero-3d-title {
    font-size: var(--text-2xl);
  }

  .hero-3d-subtitle {
    font-size: var(--text-base);
  }

  .hero-3d-cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-3d.layout-image-area {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
  }

  .hero-3d.layout-image-area .hero-3d-content {
    grid-column: 1;
    grid-row: 1;
  }

  .hero-3d.layout-image-area .hero-3d-canvas,
  .hero-3d.layout-image-area .hero-static,
  .hero-3d.layout-image-area .hero-3d-overlay {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    height: 60vh;
  }
}

/* ========== reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
  .hero-3d-canvas {
    /* JS 会在 reduced motion 下渲染单帧静态图，不再绑 mousemove */
  }
}