/* =========================================================
   神樂舞：京夜律章 — 視覺優化疊加層（v2）
   疊在 main.css 之後載入；只新增/覆蓋，不改動原檔。
   取色沿用原站色票：夜藍 #0F1626 / 月金 #EBD9A6 / 深金線 #C9A64E /
   朱 #A8322E / 霧藍 #4A5E7E / 鬼火青 #7CD2F2
   ---------------------------------------------------------
   本層新增：
   ① 拉丁顯示字 .latin（Cormorant Garamond）
   ② 三語切換 pill + 提示 toast
   ③ Hero 側標、eyebrow 金線、主 CTA 呼吸光暈
   ④ 段落 eyebrow 小標
   ⑤ 介紹卡：破框大數字（壹貳參）
   ⑥ 畫面：三格截圖廊
   ⑦ 四張場景融入段落背景（介紹/登記/FAQ/頁尾）＋ Ken-Burns 推鏡
   ⑧ 登記區：月兔式神交疊、底框加不透明、朱印菱形
   ========================================================= */

.latin { font-family: "Cormorant Garamond", "EB Garamond", "Noto Serif TC", serif; }

/* ---------- ② 三語切換 ---------- */
.lang-switch {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto;
  border: 1px solid rgba(201, 166, 78, 0.4);
  border-radius: 999px; padding: 3px;
}
.lang-switch + .btn-nav { margin-left: 14px; }
.lang-switch button {
  font-family: inherit; cursor: pointer; border: 0;
  background: transparent; color: var(--moon-gold, #EBD9A6);
  font-size: 13px; letter-spacing: 0.08em;
  padding: 4px 13px; border-radius: 999px;
  transition: background 200ms, color 200ms;
}
.lang-switch button.latin { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; }
.lang-switch button.is-active { background: #C9A64E; color: #0F1626; }
.lang-switch button:not(.is-active):hover { color: #F4F1E8; }

.lang-toast {
  position: fixed; left: 50%; bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  background: rgba(24, 34, 56, 0.96);
  border: 1px solid #C9A64E; color: #EBD9A6;
  padding: 12px 24px; font-size: 14.5px; letter-spacing: 0.08em;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms, transform 300ms;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.lang-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 720px) {
  .lang-switch { margin-left: auto; }
  .lang-switch + .btn-nav { display: none; } /* 窄螢幕收起 CTA，保留語言切換 */
}

/* ---------- ③ Hero 強化 ---------- */
.hero-side-label {
  position: absolute; right: clamp(14px, 3vw, 42px); top: 50%;
  transform: translateY(-50%); z-index: 2;
  writing-mode: vertical-rl; letter-spacing: 0.5em;
  font-size: 14px; color: rgba(235, 217, 166, 0.72);
  text-shadow: 0 2px 12px rgba(9, 13, 24, 0.9);
  pointer-events: none;
}
@media (max-width: 720px) { .hero-side-label { display: none; } }

/* eyebrow 前綴金線 */
.hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; }
.hero-eyebrow::before {
  content: ""; width: 34px; height: 1px;
  background: linear-gradient(to right, transparent, #C9A64E);
}
.hero-title-en { font-style: italic; }

/* 主 CTA 呼吸光暈 */
@keyframes kg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(235, 217, 166, 0); }
  50% { box-shadow: 0 0 30px 2px rgba(168, 50, 46, 0.4); }
}
.btn-pulse { animation: kg-pulse 3.6s ease-in-out infinite; }

/* ---------- ④ 段落 eyebrow 小標 ---------- */
.section-eyebrow {
  color: #C9A64E; letter-spacing: 0.3em;
  font-size: 14px; font-style: italic;
  margin-bottom: 10px;
}

/* ---------- ⑤ 介紹卡：破框大數字 ---------- */
.about-grid { align-items: stretch; }
.about-item {
  position: relative;
  border: 1px solid rgba(201, 166, 78, 0.22);
  background: linear-gradient(170deg, rgba(24, 34, 56, 0.6), rgba(15, 22, 38, 0.3));
  padding: clamp(56px, 7vw, 82px) clamp(26px, 3vw, 38px) clamp(26px, 3vw, 38px);
  transition: border-color 300ms, transform 300ms;
}
.about-item:hover { border-color: rgba(201, 166, 78, 0.5); transform: translateY(-4px); }
.about-index {
  position: absolute; top: -26px; left: -4px;
  line-height: 1; font-weight: 900;
  font-size: clamp(58px, 8vw, 96px);
  color: #A8322E;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.about-index i {
  font-style: italic; font-weight: 600;
  font-size: 0.26em; color: #C9A64E;
  vertical-align: super; margin-left: 8px; letter-spacing: 0.08em;
}

/* ---------- 菱形分隔 ---------- */
.divider-diamond {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 0 clamp(20px, 6vw, 64px);
}
.divider-diamond span {
  height: 1px; flex: 1; max-width: 220px;
  background: linear-gradient(to right, transparent, rgba(201, 166, 78, 0.4));
}
.divider-diamond span:last-child { background: linear-gradient(to left, transparent, rgba(201, 166, 78, 0.4)); }
.divider-diamond i { width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid #C9A64E; }

/* ---------- ⑥ 三格截圖廊 ---------- */
.shot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 22px;
}
.shot {
  margin: 0; border: 1px solid rgba(74, 94, 126, 0.4);
  background: #111a2c; overflow: hidden;
  transition: border-color 300ms;
}
.shot:hover { border-color: rgba(201, 166, 78, 0.5); }
.shot img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.shot figcaption { padding: 14px 16px; }
.shot-name { color: #EBD9A6; letter-spacing: 0.14em; font-size: 15px; }
.shot-desc { display: block; color: rgba(244, 241, 232, 0.6); font-size: 13px; margin-top: 3px; }

/* ---------- ⑦ 場景融入段落背景 ---------- */
@keyframes kg-kenburns {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.09) translateY(-1.5%); }
}
/* 讓段落成為定位脈絡（.section 原本已 position:relative；footer 補上） */
.site-footer { position: relative; overflow: hidden; }
.about, .gallery, .signup, .faq { overflow: hidden; }

.scene-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  animation: kg-kenburns 34s ease-in-out infinite alternate;
}
.scene-bg::after { content: ""; position: absolute; inset: 0; }

/* 內容浮於場景之上 */
.about .section-inner,
.faq .section-inner,
.signup .signup-card { position: relative; z-index: 1; }
.site-footer > .footer-cta,
.site-footer > .footer-meta { position: relative; z-index: 1; }

/* 介紹：幽林鳥居（青碧） */
.scene-bg--about img { object-position: center 55%; opacity: 0.6; animation-duration: 34s; }
.scene-bg--about::after { background: linear-gradient(180deg, #0F1626 0%, rgba(15,22,38,0.68) 22%, rgba(15,22,38,0.74) 78%, #0F1626 100%); }

/* 登記：月樂殿（金月） */
.scene-bg--signup img { object-position: center 40%; opacity: 0.94; animation-duration: 30s; }
.scene-bg--signup::after { background: radial-gradient(ellipse 82% 92% at 50% 46%, rgba(15,22,38,0.14), rgba(15,22,38,0.52) 68%, #0F1626 100%); }

/* FAQ：荒塚霧夜（灰）。⚠️FAQ 是手風琴、展開會變高——背景圖改「固定高度、頂端錨定」，
   不隨區塊變高而重新縮放（否則每開一題背景就放大一次）。開題只是露出更多同一張圖、不縮放。 */
.scene-bg--faq img { object-position: center 42%; opacity: 0.5; animation-duration: 36s; height: 128vh; bottom: auto; }
.scene-bg--faq::after { background: linear-gradient(180deg, #0F1626 0%, rgba(15,22,38,0.74) 20%, rgba(15,22,38,0.8) 100%); }

/* 頁尾：緋夜祭（暖橙） */
.scene-bg--footer img { object-position: center 44%; opacity: 0.44; animation-duration: 42s; }
.scene-bg--footer::after { background: linear-gradient(180deg, #0F1626 0%, rgba(15,22,38,0.7) 26%, rgba(10,15,28,0.84) 100%); }

/* ---------- ⑧ 登記區：底框加不透明 + 月兔交疊 + 朱印菱形 ---------- */
.signup { padding-block: clamp(72px, 10vw, 120px); }
.signup-card {
  position: relative;
  max-width: 680px;
  background: linear-gradient(170deg, rgba(24,34,56,0.94), rgba(19,27,44,0.9));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.signup-diamond {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 16px; height: 16px; background: #0F1626; border: 1px solid #C9A64E;
}
.signup-rabbit {
  position: absolute;
  right: clamp(-142px, -9vw, -104px); bottom: -46px;
  width: clamp(158px, 20vw, 248px);
  opacity: 0.97;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,0.6)) drop-shadow(0 0 24px rgba(235,217,166,0.3));
  animation: kg-float 6.5s ease-in-out infinite;
  pointer-events: none; z-index: 5;
}
@keyframes kg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (max-width: 560px) {
  .signup-rabbit { width: 128px; right: -30px; bottom: -30px; }
}

/* ---------- 尊重 prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .scene-bg img, .btn-pulse, .signup-rabbit { animation: none !important; }
}