/* ============ 首屏 HeroSection ============ */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg { position: absolute; inset: -6%; z-index: 0; will-change: transform; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }

.hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(8,8,10,0.92) 0%, rgba(8,8,10,0.55) 45%, rgba(8,8,10,0.25) 100%);
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,8,10,0.6) 0%, transparent 22%, transparent 62%, var(--bg-0) 100%);
}

.hero-content { position: relative; z-index: 2; }

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.36em;
  color: var(--ink-dim);
  margin-bottom: 2rem;
}
.hero-kicker i {
  width: 3rem; height: 1px;
  background: var(--gold);
  display: inline-block;
}
.hero-kicker .gold-num { letter-spacing: 0.28em; font-size: 0.9rem; }

.hero-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  line-height: 1.32;
  letter-spacing: 0.08em;
}
.hero-title .line { display: block; }
.hero-title em {
  font-style: normal;
  position: relative;
  background: linear-gradient(115deg,
    var(--gold-deep) 0%, var(--gold) 30%, #fff6d8 50%, var(--gold) 70%, var(--gold-deep) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldFlow 5.5s linear infinite;
}
@keyframes goldFlow {
  from { background-position: 0% 0; }
  to { background-position: -240% 0; }
}
.hero-title em::after {
  content: '';
  position: absolute;
  left: 4%; bottom: 0.08em;
  width: 92%; height: 0.09em;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0.55;
}

.hero-sub {
  margin-top: 2rem;
  font-size: clamp(0.82rem, 1.4vw, 1rem);
  letter-spacing: 0.3em;
  color: var(--ink-dim);
}

.hero-cta { margin-top: 3.2rem; display: flex; align-items: center; gap: 2.4rem; }
.hero-ghost-link {
  position: relative;
  font-size: 0.88rem;
  letter-spacing: 0.3em;
  color: var(--ink);
  padding-bottom: 0.35rem;
}
.hero-ghost-link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0.35);
  transform-origin: 0 50%;
  transition: transform 0.55s var(--ease-lux);
}
.hero-ghost-link:hover::after { transform: scaleX(1); }

/* 入场动效 */
.hero-kicker, .hero-title .line, .hero-sub, .hero-cta {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1.2s var(--ease-lux), transform 1.2s var(--ease-lux);
  transition-delay: var(--d, 0s);
}
.hero-kicker.on, .hero-title .line.on, .hero-sub.on, .hero-cta.on {
  opacity: 1; transform: translateY(0);
}

/* spring 模式：行级入场关闭，标题交给逐字弹簧（自研拆分 + CSS transition 错峰） */
.hero.spring-mode .hero-title .line {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.ttl-ch {
  display: inline-block;
  will-change: transform, opacity;
  transform-origin: 50% 100%;
}
/* 字符初始态：下沉 + 旋转 + 透明，chars-in 后以弹簧曲线弹落归位 */
.hero.spring-mode .ttl-ch {
  opacity: 0;
  transform: translateY(1.15em) rotate(7deg);
  transition: opacity 0.7s var(--ease-lux), transform 1.05s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero.spring-mode.chars-in .ttl-ch {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}
/* 副标题呼吸 / 竖排英文漂移（原 anime 活效，CSS 等价实现；延迟起步避开入场过渡） */
.hero-sub.on { animation: heroSubBreath 4.6s ease-in-out 1.6s infinite; }
@keyframes heroSubBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.hero-side.on .hero-side-text { animation: heroSideBreath 5.2s ease-in-out 2s infinite; }
@keyframes heroSideBreath {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
/* 字符包裹保持 em 渐变金字（字符拆分会插入包裹层，inherit 会断链，需显式重写渐变） */
.hero-title em .ttl-ch {
  background: linear-gradient(115deg,
    var(--gold-deep) 0%, var(--gold) 30%, #fff6d8 50%, var(--gold) 70%, var(--gold-deep) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldFlow 5.5s linear infinite;
}

/* 呼吸光环：motionsites 式背景光晕（旋转弧光 + 缩放呼吸） */
.hero-halo {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(60rem, 130vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212,175,55,0.13) 0%, rgba(212,175,55,0.045) 36%, transparent 62%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: haloBreath 9s ease-in-out infinite;
}
.hero-halo::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: conic-gradient(from var(--ring-a),
    transparent 0deg, rgba(245,227,172,0.20) 55deg, transparent 125deg,
    transparent 195deg, rgba(212,175,55,0.15) 275deg, transparent 335deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: ringSpin 16s linear infinite;
}
@keyframes haloBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(0.93); opacity: 0.75; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

/* hero 鼠标 3D 视差层 */
.hero-tilt { will-change: transform; transform-style: preserve-3d; }

.hero-side {
  position: absolute;
  right: 2.4rem; top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 1.6s ease 1.4s;
}
.hero-side.on { opacity: 1; }
.hero-side-text {
  writing-mode: vertical-rl;
  font-family: var(--latin);
  font-size: 0.66rem;
  letter-spacing: 0.55em;
  color: var(--ink-faint);
}

/* ============ 右侧影院播放器（开屏后飞入落位 · 金色边框 + 播放键） ============ */
.hero-stage-side {
  position: absolute;
  /* 与左侧内容容器（.container = min(1240px, 92vw) 居中）右缘对齐，左右边距对称 */
  right: max(0px, calc((100vw - min(1240px, 92vw)) / 2));
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}
.hero-player {
  position: relative;
  width: clamp(320px, 28vw, 450px);
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 6px;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(212, 175, 55, 0.09), transparent 55%),
    rgba(10, 9, 8, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.55),
    0 30px 80px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;               /* 初始隐藏，由 JS 动画带出 */
  will-change: transform, opacity;
}
/* 内嵌视频：随机品牌影像，播放时淡入覆盖 UI */
.hero-player-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.6s ease;
  cursor: pointer;
  z-index: 1;
}
.hero-player.is-playing .hero-player-video { opacity: 1; }
/* 播放中播放键彻底隐藏（不显示大播放键） */
.hero-player.is-playing .hero-player-play {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}
.hero-player.is-playing .hero-player-meta { opacity: 0.9; }
/* 播放中 hover 播放器时，右上角浮现"换一部"小按钮 */
.hero-player-next {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.5);
  background: rgba(10, 9, 8, 0.6);
  color: var(--gold-hi);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-spring);
  z-index: 3;
  cursor: pointer;
}
.hero-player.is-playing:hover .hero-player-next {
  opacity: 0.9;
  pointer-events: auto;
}
.hero-player-next:hover { transform: scale(1.12); }

/* 四角金色角标：影院感细节 */
.hero-player .hp-corner {
  position: absolute; width: 15px; height: 15px;
  border: 0 solid rgba(212, 175, 55, 0.75);
  z-index: 2;
}
.hp-corner--tl { top: 7px; left: 7px; border-top-width: 1px; border-left-width: 1px; }
.hp-corner--tr { top: 7px; right: 7px; border-top-width: 1px; border-right-width: 1px; }
.hp-corner--bl { bottom: 7px; left: 7px; border-bottom-width: 1px; border-left-width: 1px; }
.hp-corner--br { bottom: 7px; right: 7px; border-bottom-width: 1px; border-right-width: 1px; }
/* 中央播放键：金色圆 + 呼吸金光 */
.hero-player-play {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.75);
  background: rgba(212, 175, 55, 0.16);
  color: var(--gold-hi);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.08), 0 0 30px rgba(212, 175, 55, 0.25);
  transition: transform 0.4s var(--ease-spring), background 0.4s, box-shadow 0.4s, opacity 0.4s ease;
  animation: playerBreath 3.4s ease-in-out 1.6s infinite;
  z-index: 2;
}
.hero-player-play:hover {
  background: rgba(212, 175, 55, 0.32);
  transform: scale(1.07);
  box-shadow: 0 0 0 12px rgba(212, 175, 55, 0.14), 0 0 44px rgba(212, 175, 55, 0.45);
}
@keyframes playerBreath {
  0%, 100% { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.08), 0 0 26px rgba(212, 175, 55, 0.22); }
  50% { box-shadow: 0 0 0 12px rgba(212, 175, 55, 0.14), 0 0 40px rgba(212, 175, 55, 0.38); }
}
/* 底部元信息 + 进度条 */
.hero-player-meta {
  position: absolute; left: 16px; right: 16px; bottom: 27px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.58rem; letter-spacing: 0.22em; color: var(--ink-faint);
  pointer-events: none;
}
.hero-player-meta span { color: var(--gold); font-family: var(--latin); letter-spacing: 0.32em; }
.hero-player-meta i { font-style: normal; }
.hero-player-progress {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  height: 2px; background: rgba(236, 229, 216, 0.14); overflow: hidden;
  pointer-events: none;
}
.hero-player-progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-hi));
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}

@media (max-width: 1100px) {
  .hero-player { width: clamp(250px, 30vw, 330px); }
}
@media (max-width: 900px) {
  .hero-stage-side { display: none; }   /* 移动端隐藏播放器，避免抢占首屏 */
}

.hero-scroll {
  position: absolute;
  left: 50%; bottom: 2.6rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  opacity: 0;
  transition: opacity 1.6s ease 1.6s;
}
.hero-scroll.on { opacity: 1; }
.hero-scroll-line {
  width: 1px; height: 3.4rem;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollPulse 2.2s var(--ease-silk) infinite;
}
@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: 50% 0; }
  45% { transform: scaleY(1); transform-origin: 50% 0; }
  55% { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}
.hero-scroll-text {
  font-family: var(--latin);
  font-size: 0.6rem;
  letter-spacing: 0.5em;
  color: var(--ink-dim);
}

@media (max-width: 768px) {
  .hero-side { display: none; }
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
}

@media (max-width: 560px) {
  .hero { min-height: 560px; }
  .hero-content { padding-bottom: 6rem; }
  .hero-title { letter-spacing: 0.04em; line-height: 1.42; }
  .hero-kicker { letter-spacing: 0.22em; font-size: 0.72rem; margin-bottom: 1.4rem; }
  .hero-kicker i { width: 1.6rem; }
  .hero-sub { letter-spacing: 0.14em; line-height: 2.2; margin-top: 1.5rem; }
  .hero-cta { margin-top: 2.2rem; }
  .hero-scroll { bottom: 1.6rem; }
  .hero-scroll-line { height: 2.4rem; }
}

/* ============ Hero WebGL 畸变转场轮播 ============ */
.hero-gl {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block; will-change: transform;
}
.hero-bg--static img { width: 100%; height: 100%; object-fit: cover; }
.hero-fade-enter-active, .hero-fade-leave-active { transition: opacity 0.9s var(--ease-glide); }
.hero-fade-enter-from, .hero-fade-leave-to { opacity: 0; }

/* 逐字遮罩标题：大字排版公式（clamp 流式 + 微负字距 + 紧行高） */
.hero-slide-title {
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: 0.5rem;
}
.ht-ch { display: inline-block; overflow: hidden; vertical-align: bottom; }
.ht-ch i {
  display: inline-block;
  font-style: normal;
  will-change: transform;
  transform: translateY(0);
}

.hero-slide-desc {
  margin-top: 1.6rem;
  max-width: 34rem;
  color: var(--ink-dim);
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  letter-spacing: 0.12em;
  line-height: 2;
}

/* 编辑式元数据三列：类型 / 领域 / 年份 */
.hero-slide-meta {
  margin-top: 2.2rem;
  display: flex;
  gap: clamp(1.6rem, 4vw, 3.4rem);
}
.hero-slide-meta span {
  display: flex; flex-direction: column; gap: 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--ink);
  border-top: 1px solid rgba(212, 175, 55, 0.4);
  padding-top: 0.7rem;
}
.hero-slide-meta i {
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  color: var(--gold);
}

/* 轮播指示点 */
.hero-dots {
  position: absolute;
  left: 50%; bottom: 6.2rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: 0.9rem;
  opacity: 0;
  transition: opacity 1.4s ease 1.8s;
}
.hero-dots.on { opacity: 1; }
.hero-dot { padding: 0.3rem 0; position: relative; }
/* 扩大触控热区（移动端防误触）：透明伪元素撑大可点面积，视觉不变 */
.hero-dot::after { content: ''; position: absolute; inset: -1rem -0.4rem; }
.hero-dot span {
  display: block;
  width: 1.8rem; height: 2px;
  background: rgba(236, 229, 216, 0.25);
  transition: background 0.5s, width 0.55s var(--ease-glide);
}
.hero-dot:hover span { background: rgba(245, 227, 172, 0.6); }
.hero-dot.active span { background: var(--gold); width: 2.6rem; box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }

@media (max-width: 768px) {
  .hero-slide-meta { gap: 1.2rem; flex-wrap: wrap; }
  .hero-slide-desc { letter-spacing: 0.06em; }
  .hero-dots { bottom: 5rem; }
}
@media (max-width: 560px) {
  .hero-slide-meta span { font-size: 0.75rem; }
  .hero-dots { bottom: 4.4rem; }
}