/* =========================================================
   hero-opening — 自包含的三幕劇開場組件（零依賴、純 CSS keyframes）
   來源：v4 KV（依 鶴屋動畫.mov 分鏡 1:1 復刻）。
   命名空間 .hero-* 與 .kv__*，與原站 .header_/.kv_ 不撞。
   移植到任何網站：貼 markup + 這支 CSS，開場全程零 JS。
   ========================================================= */
/* 命名空間變數（--hero-*）掛 :root，避免污染宿主網站的同名變數 */
:root {
  --hero-navy:   #00345C;
  --hero-orange: #E67135;
  --hero-green:  #00664B;
  --hero-teal:   #0096A9;
  --hero-ease:   cubic-bezier(0.21, 0.51, 0.51, 1);
  --hero-dur-l:  1s;
  --hero-dur-s:  0.5s;
}

/* ---- header + menu（收合時徹底移出互動層）----
   header z-index 需高於 menu，否則深藍選單會蓋住關閉鈕（不可按）。 */
.hero-header {
  position: fixed; inset: 0 0 auto 0; z-index: 12;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1.2rem 1.5rem;
}
.hero-header__logo img { width: 56px; height: auto; }
/* 選單開啟時藏 logo：navy logo 疊深藍選單會隱形，只留白色 X。
   用 !important 壓過 logo 自身的 kv-fade-in 動畫 fill（動畫值否則會蓋掉宣告值）。 */
.hero-header:has(.hero-header__burger[aria-expanded="true"]) .hero-header__logo {
  opacity: 0 !important; pointer-events: none;
}
.hero-header__burger {
  width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-content: center; gap: 7px; z-index: 13; position: relative;
}
.hero-header__burger span {
  display: block; width: 28px; height: 2px; background: var(--hero-navy);
  transition: transform var(--hero-dur-s) var(--hero-ease), opacity var(--hero-dur-s) var(--hero-ease), background var(--hero-dur-s) var(--hero-ease);
}
/* 開啟：三條 navy 線 → 白色 X（浮在深藍選單上、可按、可再按關閉） */
.hero-header__burger[aria-expanded="true"] span { background: #fff; }
.hero-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hero-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hero-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 11;
  background: var(--hero-navy);
  display: grid; place-content: center;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity var(--hero-dur-s) var(--hero-ease), visibility 0s linear var(--hero-dur-s);
}
.menu.is-open {
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity var(--hero-dur-s) var(--hero-ease);
}
.menu__list { text-align: center; }
.menu__list a {
  display: inline-block; padding: 0.8rem 2rem; min-height: 44px;
  color: #fff; text-decoration: none; font-size: 1.25rem; letter-spacing: 0.1em;
}

/* ---- 三幕劇開場（純 CSS keyframes — JS 掛掉照樣播）----
   第一幕 0.5s  白舞台上深藍 logo 霧中浮現
   第二幕 1.5s→ 橘帶(上,左掃) 藍綠帶(下,右掃) 深藍曲線(左上滑入) 綠帶(下,右掃 74vw)
   第三幕 5s    照片淡入、logo 深藍→白交叉淡變、header 與 SCROLL 現身 */
.kv {
  position: relative; min-width: 1094px;
  height: 56.15vw; min-height: 560px;   /* 桌機 KV＝海報比例，非視窗高 */
  overflow: hidden; background: #fff;
}
/* 防禦：宿主可能對 .kv 設高 z-index（本站原站 style.css .home .kv{z-index:20}），
   會把整個 KV（含色帶）疊到 fixed header/menu 之上 → 關閉鈕被蓋。
   用等特異性 .kv.kv（0,2,0）+ 後載入順序壓回 z-index:0，讓 header(12)/menu(11) 疊在 KV 之上。
   KV 內部的色帶/曲線仍以自身 z-index 在 KV 這層堆疊，不受影響。 */
.kv.kv { z-index: 0; }
.kv__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: kv-fade-in var(--hero-dur-l) var(--hero-ease) 5s both;
}
.kv__logo {
  position: absolute; z-index: 10; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(160px, 16vw, 240px); aspect-ratio: 220 / 242;
}
.kv__logo img { position: absolute; inset: 0; width: 100%; }
.kv__logo-navy  { animation: kv-logo-in var(--hero-dur-l) var(--hero-ease) 0.5s both, kv-fade-out var(--hero-dur-l) var(--hero-ease) 5s both; }
.kv__logo-white {
  opacity: 0; filter: drop-shadow(0 2px 14px rgba(0, 52, 92, 0.45));
  animation: kv-fade-in var(--hero-dur-l) var(--hero-ease) 5s both;
}
@keyframes kv-logo-in { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
@keyframes kv-fade-out { from { opacity: 1; } to { opacity: 0; } }

.kv__band { position: absolute; z-index: 2; transform: scaleX(0); animation: kv-band-in var(--hero-dur-l) var(--hero-ease) both; height: max(60px, 4.39vw); }
.kv__band--orange { top: 0;    left: 0;  width: 100%;      background: var(--hero-orange); transform-origin: left;  animation-delay: 1.5s; }
.kv__band--teal   { bottom: 0; right: 0; width: 100%;      background: var(--hero-teal);   transform-origin: right; animation-delay: 2s; }
.kv__band--green  { bottom: 0; right: 0; width: 74.359vw;  background: var(--hero-green);  transform-origin: right; animation-delay: 3.5s; z-index: 3; }
@keyframes kv-band-in { to { transform: scaleX(1); } }

.kv__curve {
  position: absolute; z-index: 3; top: 0; left: 0;
  width: 45.754vw; height: 16.764vw; min-width: 300px; min-height: 110px;
  background: url("../img/home/pc_kv_blue.svg") 0 0 / 100% 100% no-repeat;
  transform: translate(-100%, -100%);
  animation: kv-curve-in var(--hero-dur-l) var(--hero-ease) 3s both;
}
@keyframes kv-curve-in { to { transform: translate(0, 0); } }

.hero-header__logo, .hero-header__burger { opacity: 0; animation: kv-fade-in var(--hero-dur-l) var(--hero-ease) 5s both; }
.kv__scroll {
  position: absolute; z-index: 4; right: 1.5rem; bottom: calc(max(60px, 4.39vw) / 2);
  transform: translateY(50%);
  font-size: 0.8rem; letter-spacing: 0.25em; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  opacity: 0; animation: kv-fade-in var(--hero-dur-l) var(--hero-ease) 5s both;
}
.kv__scroll-arrow {
  width: 1px; height: 34px; background: #fff; display: block;
  transform-origin: top; animation: kv-scroll-hint var(--hero-dur-l) var(--hero-ease) infinite;
}
@keyframes kv-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kv-scroll-hint { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* 同 session 回訪：跳過三幕劇直達終態 */
html.skip-opening .kv__bg,
html.skip-opening .kv__logo-navy,
html.skip-opening .kv__logo-white,
html.skip-opening .kv__band,
html.skip-opening .kv__curve,
html.skip-opening .hero-header__logo,
html.skip-opening .hero-header__burger,
html.skip-opening .kv__scroll { animation-delay: 0s; animation-duration: var(--hero-dur-s); }

/* 手機：KV 回到滿屏，色帶用 vw 自動縮放 */
@media (max-width: 767px) {
  .kv { min-width: 0; height: 100svh; }
}

/* 尊重減動偏好：開場直接呈現終態 */
@media (prefers-reduced-motion: reduce) {
  .kv__bg, .kv__logo-white, .hero-header__logo, .hero-header__burger, .kv__scroll { opacity: 1; animation: none; }
  .kv__logo-navy { opacity: 0; animation: none; }
  .kv__band { transform: scaleX(1); animation: none; }
  .kv__curve { transform: none; animation: none; }
  .kv__scroll-arrow { animation: none; }
}