/* ================================================
   hero.css — 首屏英雄区（兼容 v1）
   景合画星 官网 v2
   ================================================ */

#hero {
  position: relative;
  height: 100vh; min-height: 520px;
  overflow: hidden;
  background: #231709;
}

/* ---------- 轮播 ---------- */
.hero-carousel {
  position: relative; width: 100%; height: 100%;
}
.hero-slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
}
.hero-slide.active { opacity: 1; z-index: 1; }

/* ---------- 幻灯片背景 + Ken Burns 缩放 ---------- */
.hero-slide .slide-bg {
  position: absolute; top: -5%; left: -5%; width: 110%; height: 110%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(0.50);
  background-color: #1a0e05;
  background-image: radial-gradient(ellipse at center, #2d1f12 0%, #231709 50%, #1a0e05 100%);
}
.hero-slide.active .slide-bg {
  animation: kenBurns 10s ease-in-out forwards;
}
@keyframes kenBurns {
  0% { transform: scale(0.50); }
  100% { transform: scale(1.40); }
}

/* ---------- 渐变覆盖层 ---------- */
.hero-slide .slide-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(40, 35, 30, 0.10) 0%,
    rgba(40, 35, 30, 0.05) 35%,
    rgba(40, 35, 30, 0.08) 60%,
    rgba(40, 35, 30, 0.15) 100%
  );
  z-index: 1;
}

/* ---------- 幻灯片内容 ---------- */
.hero-slide .slide-content {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%; max-width: 700px;
  z-index: 2;
}
.hero-slide .slide-content .slide-label {
  font-size: 0.75rem; letter-spacing: 4px;
  color: var(--color-accent);
  margin-bottom: 12px; text-transform: uppercase;
  opacity: 0; transform: translateY(18px);
  animation: fadeInUp 0.8s ease forwards 0.2s;
}
.hero-slide .slide-content h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: rgba(240,214,160,0.92);
  letter-spacing: 4px;
  margin-bottom: 12px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  opacity: 0; transform: translateY(22px);
  animation: fadeInUp 0.8s ease forwards 0.4s;
}
.hero-slide .slide-content .hero-slogan {
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  color: var(--color-accent);
  letter-spacing: 3px;
  margin-bottom: 20px;
  opacity: 0; transform: translateY(18px);
  animation: fadeInUp 0.8s ease forwards 0.6s;
}
.hero-slide .slide-content .hero-tags {
  display: flex; justify-content: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 28px;
  opacity: 0; transform: translateY(18px);
  animation: fadeInUp 0.8s ease forwards 0.8s;
}
.hero-slide .slide-content .hero-tags span {
  padding: 5px 14px;
  background: rgba(201,169,110,0.14);
  border: 1px solid rgba(201,169,110,0.35);
  border-radius: 3px;
  font-size: 0.72rem;
  color: rgba(240,214,160,0.85);
  letter-spacing: 1px;
}
.hero-slide .slide-content .hero-buttons {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap;
  opacity: 0; transform: translateY(14px);
  animation: fadeInUp 0.8s ease forwards 1s;
}

.hero-slide .slide-content .btn-primary {
  display: inline-block; padding: 12px 34px;
  background: var(--color-accent); color: var(--color-bg-card);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 2px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  text-decoration: none;
}
.hero-slide .slide-content .btn-primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201,169,110,0.3);
}
.hero-slide .slide-content .btn-outline {
  display: inline-block; padding: 10px 28px;
  background: transparent; color: rgba(240,214,160,0.92);
  border: 1px solid rgba(201,169,110,0.55);
  border-radius: var(--radius-sm);
  font-size: 0.82rem; letter-spacing: 0.5px;
  transition: var(--transition);
  text-decoration: none;
}
.hero-slide .slide-content .btn-outline:hover {
  border-color: var(--color-accent);
  background: rgba(201,169,110,0.15);
  transform: translateY(-2px);
}

/* ---------- 轮播箭头 ---------- */
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(201,169,110,0.14);
  border: 1px solid rgba(201,169,110,0.35);
  color: rgba(240,214,160,0.92);
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 10;
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.carousel-arrow:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.carousel-arrow.prev { left: 20px; }
.carousel-arrow.next { right: 20px; }

/* ---------- 指示器 ---------- */
.carousel-indicators {
  position: absolute; bottom: 30px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 10;
}
.carousel-indicators .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(201,169,110,0.35);
  cursor: pointer;
  transition: var(--transition);
}
.carousel-indicators .dot.active {
  background: var(--color-accent);
  width: 24px; border-radius: 4px;
}

/* ---------- 两侧装饰点缀（v1 标准） ----------
   2026-09-16：用户反馈「底板两边有亮点，有点乱」——去掉原先叠在上面的 8 团
   radial-gradient(circle …) 小光球，保留金色渐隐底纹、4 条大范围柔光与上下两条
   金色短线，两侧金边氛围不变。 */
.hero-deco {
  position: absolute; top: 0; height: 100%;
  width: 18%; z-index: 1; pointer-events: none;
  opacity: 0;
  animation: decoFadeIn 1.5s ease forwards 0.5s;
}
.hero-deco-left { left: 0;
  background:
    linear-gradient(to right, rgba(201,169,110,0.40) 0%, rgba(201,169,110,0.20) 40%, transparent 90%),
    radial-gradient(ellipse 130% 60% at 70% 18%, rgba(201,169,110,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 38%, rgba(201,169,110,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 110% 65% at 60% 62%, rgba(201,169,110,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 55% at 40% 85%, rgba(201,169,110,0.15) 0%, transparent 50%);
  mask-image: linear-gradient(to right, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
  border-right: 1px solid rgba(201,169,110,0.35);
}
.hero-deco-right { right: 0;
  background:
    linear-gradient(to left, rgba(201,169,110,0.40) 0%, rgba(201,169,110,0.20) 40%, transparent 90%),
    radial-gradient(ellipse 130% 60% at 30% 18%, rgba(201,169,110,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 38%, rgba(201,169,110,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 110% 65% at 40% 62%, rgba(201,169,110,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 55% at 60% 85%, rgba(201,169,110,0.15) 0%, transparent 50%);
  mask-image: linear-gradient(to left, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, black 50%, transparent 100%);
  border-left: 1px solid rgba(201,169,110,0.35);
}
.hero-deco::before { content: ""; position: absolute; width: 45%; height: 2px; border-radius: 1px; }
.hero-deco-left::before { top: 10%; left: 12%; background: linear-gradient(to right, rgba(201,169,110,0.55), transparent); }
.hero-deco-right::before { top: 10%; right: 12%; background: linear-gradient(to left, rgba(201,169,110,0.55), transparent); }
.hero-deco::after { content: ""; position: absolute; width: 45%; height: 2px; border-radius: 1px; }
.hero-deco-left::after { bottom: 10%; left: 12%; background: linear-gradient(to right, rgba(201,169,110,0.55), transparent); }
.hero-deco-right::after { bottom: 10%; right: 12%; background: linear-gradient(to left, rgba(201,169,110,0.55), transparent); }
@keyframes decoFadeIn { to { opacity: 1; } }
/* ---------- 滚动提示 ---------- */
.hero-scroll-hint {
  position: absolute; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: rgba(240,214,160,0.55);
  font-size: 0.7rem;
  letter-spacing: 2px;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}
.hero-scroll-hint::after {
  /* 2026-09-19 修正：原来写成 "\u2193"（JS 写法），CSS 不识别这种转义，
     页面底部会直接显示一行「u2193」的乱码文字。CSS 用的是十六进制转义 \2193。 */
  content: "\2193";
  display: block; text-align: center; font-size: 1rem; margin-top: 4px;
}

/* ---------- 星光粒子 ---------- */
.starlight-container {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
  overflow: hidden;
}
.starlight-particle {
  position: absolute; width: 3px; height: 3px;
  background: var(--color-accent);
  border-radius: 50%;
  opacity: 0;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

/* ---------- 滚动缩放 ---------- */
#hero.zoomed .hero-slide.active .slide-bg {
  transform: scale(1.12);
}
#hero.zoomed .hero-slide.active .slide-content {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

/* ---------- 动画通用 ---------- */
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 单艺人页文字（2026-09-16） ----------
   只作用于带 is-artist 标记的艺人幻灯片（hero.js 里加的）：
   文字块从屏幕正中间下移到下三分之一，艺人名和简介各收小一档。
   公司介绍页 / 其余两页的排版和字号完全不动。
   注意：本段用 3 个类名（.hero-slide.is-artist .slide-content）选元素，
   优先级高于下面的窄屏媒体查询，所以手机端也会按这里的比例走。
   关于数值：core.css 里 section 自带 padding: 60px 0，首页这块 section 也不例外，
   所以轮播的实际高度 = 屏幕高 - 上下各 60px。这里的百分比是相对轮播那一条算的，
   79% 换算到整屏就是文字块中心落在屏幕约 75% 处（下三分之一里，且不与底部圆点、
   右下角小猫重叠）。 */
.hero-slide.is-artist .slide-content {
  top: 79%;
}
.hero-slide.is-artist .slide-content h1 {
  font-size: clamp(1.5rem, 4vw, 2.9rem);
}
.hero-slide.is-artist .slide-content .hero-slogan {
  font-size: clamp(0.62rem, 1.6vw, 0.8rem);
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .hero-slide .slide-content { padding: 0 16px; }
  .hero-slide .slide-content h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); letter-spacing: 2px; }
  .hero-slide .slide-content .hero-slogan { font-size: clamp(0.7rem, 2vw, 0.85rem); letter-spacing: 2px; }
  .hero-slide .slide-content .hero-tags span { padding: 4px 12px; font-size: 0.7rem; }
  .hero-slide .slide-content .btn-primary, .hero-slide .slide-content .btn-outline { padding: 10px 24px; font-size: 0.75rem; }
  .carousel-arrow { display: none; }
  .hero-scroll-hint { display: none; }
  /* 手机上箭头隐藏后，底部圆点是唯一的手动翻页入口：
     把可点区域放大到 24×24（视觉大小不变），否则 8px 的圆点根本点不中（2026-09-16） */
  .carousel-indicators { gap: 0; bottom: 24px; }
  .carousel-indicators .dot {
    box-sizing: content-box;
    padding: 8px;
    background-clip: content-box;
  }
}