/* =========================================================================
   Ann Coach — 開場序列版面與初始狀態
   ========================================================================= */

*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

html, body { min-height: 100%; }
/* 導覽列連結跳段時，讓區塊落在固定導覽列下方 */
html { scroll-padding-top: 88px; }

body {
  background: var(--color-bg);
  color: var(--color-on-light);
  font-family: var(--font-latin);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 開場期間鎖住捲動；轉場（scroll.js）接手後移除此 class */
body.opening-lock { overflow: hidden; height: 100%; }

/* ---------- 第一屏：開場 + 轉場容器（ScrollTrigger 會釘住它） ---------- */
.hero-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
}

/* ---------- 形象照層（開場落定的畫面；轉場時淡出） ---------- */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-bg);
  z-index: 2;
}

/* ---------- 六張匯聚圖片 ---------- */
.images { position: absolute; inset: 0; }

.conv-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--hero-width);
  height: auto;
  display: block;
  /* JS 尚未接手前先完全隱藏，避免置中閃現 */
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45);
}

/* 疊在最上層那張＝形象圖 */
.conv-img.is-hero { z-index: 20; }

/* ---------- 置中開場 logo（Reference 1，深色字在米黃背景上） ---------- */
.intro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--color-on-light);
  z-index: 30;                 /* 開場時在圖片之上 */
  pointer-events: none;
}

.intro-pts {
  font-family: var(--font-latin);
  font-weight: var(--fw-latin-medium);
  font-size: var(--fs-intro-tagline);
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
}

.intro-sub {
  margin-top: 0.7em;
  font-size: var(--fs-intro-sub);
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
}

/* ---------- 形象圖上的左右標語（Reference 3，米黃字壓在圖上） ---------- */
/* 隱形框：與形象圖同寬同比例、同樣置中，讓左右標語永遠壓在圖片內緣 */
.hero-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--hero-width);          /* 與 .conv-img 同寬（單一來源） */
  aspect-ratio: 3 / 2;               /* 與圖片同比例（600×400） */
  z-index: 25;                       /* 在形象圖之上 */
  pointer-events: none;
}

.hero-caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-on-image);
  opacity: 0;                  /* 由 JS 於階段 1 結束時淡入 */
  white-space: nowrap;
}

.hero-caption--left  { left: 5%;  text-align: left; }
.hero-caption--right { right: 5%; text-align: right; }

.hero-caption .pts {
  font-family: var(--font-latin);
  font-weight: var(--fw-latin-medium);
  font-size: var(--fs-hero-latin);
  letter-spacing: var(--tracking-wide);
}

.hero-caption .cjk {
  font-family: var(--font-cjk);
  font-weight: var(--fw-cjk-medium);
  font-size: var(--fs-hero-cjk);
  letter-spacing: var(--tracking-wide);
}

.hero-caption .latin {
  font-family: var(--font-latin);
  font-weight: var(--fw-latin-extralight);
  font-size: var(--fs-hero-latin);
  letter-spacing: var(--tracking-wide);
}

/* 開場 logo 副標裡的中英排版：中文字後補半形空隙 */
.intro-sub .cjk {
  font-family: var(--font-cjk);
  font-weight: var(--fw-cjk-medium);
}
.intro-sub .latin {
  font-family: var(--font-latin);
  font-weight: var(--fw-latin-extralight);
  margin-left: 0.5em;
}
/* 右側標語一行：小安教練　Ann Coach */
.hero-caption--right .latin { display: inline; margin-left: 0.5em; }