/* ============================================================
   Hero 组件 —— 4 个变体
   .hero--immersive  全屏背景图 + 居中大标题 + 视差（data-parallax）
   .hero--editorial  左右错位分栏，大标题压图
   .hero--threshold  满屏首屏揭幕（coastal 首发）
   .hero--statement  大字标语（coastal 首发）
   ============================================================ */

/* ---------- 变体 A：immersive ---------- */
.hero--immersive {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero--immersive .hero__bg {
  position: absolute;
  inset: -12% 0; /* 留出视差余量 */
  z-index: -1;
  will-change: transform;
}
.hero--immersive .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero--immersive .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}
.hero--immersive .hero__inner { padding: var(--space-lg); }
.hero__eyebrow {
  font-size: var(--text-sm);
  font-family: var(--font-body);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  opacity: 0.9;
}
.hero__title {
  font-size: var(--text-hero);
  font-weight: 500;
  margin-bottom: var(--space-md);
}
.hero--immersive .hero__title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); }
.hero__sub {
  font-size: var(--text-lg);
  max-width: 34rem;
  margin: 0 auto var(--space-lg);
  opacity: 0.92;
}
.hero__actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }
.hero--immersive .btn { border-color: #fff; color: #fff; }
.hero--immersive .btn--solid { background: #fff; color: #1c1712; border-color: #fff; }
.hero--immersive .btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- 变体 B：editorial ---------- */
.hero--editorial {
  padding-top: calc(var(--space-3xl) + var(--space-lg)); /* 让开固定导航 */
  padding-bottom: var(--space-xl);
  overflow: hidden;
}
.hero-ed {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: 0;
}
.hero-ed__text { position: relative; z-index: 1; padding-bottom: var(--space-lg); }
.hero-ed__eyebrow {
  font-size: var(--text-xs);
  font-family: var(--font-body);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-md);
}
.hero-ed__title {
  font-size: var(--text-hero);
  margin-right: -3.5rem; /* 标题压到图上 */
}
.hero-ed__sub {
  font-size: var(--text-lg);
  color: var(--ink-soft);
  max-width: 26rem;
  margin-top: var(--space-md);
}
.hero-ed__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}
.hero-ed__media { aspect-ratio: 4 / 5; }
/* 图左文右翻转：不压图，标准间距分栏，文字相对图片垂直居中。
   文字组做编辑化处理：eyebrow 带短横引线、标题降一级字阶（em 混色斜体词）、
   副标收窄成利落文字柱，避免大字号顶到栏边 */
.hero-ed--flip {
  grid-template-columns: 5fr 7fr;
  gap: var(--space-xl);
  align-items: center;
}
.hero-ed--flip .hero-ed__media { order: 1; }
.hero-ed--flip .hero-ed__text { order: 2; padding-bottom: 0; }
.hero-ed--flip .hero-ed__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.hero-ed--flip .hero-ed__eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--accent);
}
.hero-ed--flip .hero-ed__title { font-size: var(--text-3xl); }
.hero-ed--flip .hero-ed__sub { max-width: 22rem; }
@media (max-width: 48rem) {
  .hero-ed { grid-template-columns: 1fr; }
  .hero-ed__title { margin-right: 0; }
  .hero-ed__media { margin-top: var(--space-lg); aspect-ratio: 4 / 3; }
  .hero-ed--flip { gap: 0; }
  .hero-ed--flip .hero-ed__media, .hero-ed--flip .hero-ed__text { order: initial; }
}

/* ============================================================
   变体 C：threshold —— 满屏首屏揭幕（coastal 首发）
   满屏照片背景缓慢淡入落定（内部图反向缩小，影院感揭幕）
   + 字符级标题错位升起（em 词斜体混排）+ mono 侧标淡入
   + scroll line 下落 + Ken Burns 呼吸 + 滚动视差。
   布局/动效参考 mallory-gabsi.com：满屏媒体 + 居中白字 + 慢速优雅淡入。
   动效由 motion.js 的 body.loaded 触发，纯 CSS 过渡。
   ============================================================ */
.hero--threshold {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-3xl) + var(--space-md)) var(--space-md) var(--space-xl);
  overflow: hidden;
  text-align: center;
  color: #fff;
}
.hero-th__bg {
  position: absolute;
  inset: -12% 0; /* 留出视差余量 */
  z-index: -1;
  transition: opacity 1.6s ease;
  will-change: transform;
}
/* 隐藏基态一律挂 .js 门（同 base.css 原则：无 JS 时内容保持可见）——
   motion.js 被阻塞（如外部字体 CDN 挂起、脚本未执行）时首屏不藏内容 */
.js .hero-th__bg { opacity: 0; }
body.loaded .hero-th__bg { opacity: 1; }
.hero-th__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 2.4s var(--ease-out) 0.15s;
}
.hero-th__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}
/* 揭幕完成后进入 Ken Burns 呼吸 */
body.loaded .hero-th__bg img {
  transform: scale(1);
  animation: hero-th-breathe 26s ease-in-out 3s infinite alternate;
}
@keyframes hero-th-breathe {
  to { transform: scale(1.06); }
}
.hero-th__eyebrow {
  font-family: var(--font-mono, var(--font-body));
  font-size: var(--text-xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  opacity: 0.92;
  transition: opacity 0.9s ease 0.7s, transform 0.9s var(--ease-out) 0.7s;
}
.js .hero-th__eyebrow { opacity: 0; transform: translateY(0.6rem); }
body.loaded .hero-th__eyebrow { opacity: 0.92; transform: none; }
.hero-th__title {
  font-size: var(--text-hero);
  font-weight: 500;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
/* 混排：em 词斜体（满屏照片上保持白色以保证对比度） */
.hero-th__title em { font-style: italic; font-weight: 400; }
/* 字符级升起（motion.js 拆 .split-chars 成 .wd > .ch，--i 为序号） */
.split-chars .wd { display: inline-block; white-space: nowrap; }
.split-chars .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em) rotate(2deg);
  transition: opacity 0.7s ease, transform 0.9s var(--ease-out);
  transition-delay: calc(1s + var(--i, 0) * 45ms);
}
body.loaded .split-chars .ch { opacity: 1; transform: none; }
.hero-th__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
  justify-content: center;
}
.hero-th__meta > * {
  transition: opacity 0.9s ease, transform 0.9s var(--ease-out);
}
.js .hero-th__meta > * { opacity: 0; transform: translateY(0.9rem); }
body.loaded .hero-th__meta > * { opacity: 1; transform: none; }
body.loaded .hero-th__meta > *:nth-child(1) { transition-delay: 1.9s; }
body.loaded .hero-th__meta > *:nth-child(2) { transition-delay: 2.05s; }
/* mono 坐标标签在照片上反白（覆盖家族皮肤的 muted 色） */
.hero--threshold .hero-th__meta .tag-mono {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
/* scroll 提示线 */
.hero-th__hint {
  margin-top: var(--space-lg);
  transition: opacity 1s ease 2.4s;
}
.js .hero-th__hint { opacity: 0; }
body.loaded .hero-th__hint { opacity: 1; }
.hero-th__hint .line {
  display: block;
  width: 1px;
  height: 3.25rem;
  margin-inline: auto;
  background: linear-gradient(rgba(255, 255, 255, 0.9), transparent);
  animation: hero-th-drop 2.2s ease-in-out infinite;
}
@keyframes hero-th-drop {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 48rem) {
  /* flex column 下子项按 max-content 定宽，需限制防溢出并允许换行 */
  .hero-th__eyebrow, .hero-th__title, .hero-th__meta { max-width: 100%; }
  .hero-th__eyebrow { letter-spacing: 0.22em; }
  .hero-th__title { font-size: clamp(2.2rem, 11vw, 3.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-th__eyebrow, .hero-th__bg, .hero-th__bg img,
  .hero-th__meta > *, .hero-th__hint, .split-chars .ch {
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
  }
}

/* ============================================================
   变体 D：statement —— 大字标语（coastal 首发）
   满屏照片 hero 之后的呼吸段：纯色底 + 居中大衬线一句话
   （参考 mallory-gabsi.com 的 "Vivez l'expérience…"），
   无按钮无图片，split-lines 逐行入场。
   ============================================================ */
.hero--statement {
  padding-block: var(--space-2xl);
  text-align: center;
  overflow: hidden;
}
.hero-st__eyebrow {
  font-size: var(--text-xs);
  font-family: var(--font-body);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-md);
}
.hero-st__title {
  font-size: var(--text-3xl);
  max-width: 24em;
  margin-inline: auto;
}
/* 混色：em 词斜体 + accent */
.hero-st__title em { font-style: italic; font-weight: 400; color: var(--accent); }