@font-face {
  font-family: 'BodoniTitle';
  src: url('../fonts/Bodoni 72.ttc') format('collection');
  font-weight: 400;
}
/* ttc 上面個 face 係 Book（regular），真 Bold 要由 ttc 抽出嚟單獨註冊 */
@font-face {
  font-family: 'BodoniTitle';
  src: url('../fonts/Bodoni72-Bold.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: 'DINMittel';
  src: url('../fonts/DINMittelschriftStd.otf') format('opentype');
}
@font-face {
  font-family: 'ElleNova';
  src: url('../fonts/ElleNovaC-Bold.otf') format('opentype');
}

/* 舞台鎖定 9:16（2160×3840）等比縮放：
   --u = 舞台闊度嘅 1%。85 吋直屏滿屏 1:1；
   橫屏／細窗自動置中加黑邊，設計比例完全唔走樣 */
:root {
  --u: min(1vw, 0.5625vh);
  /* header 高度（= logo 方塊邊長，spec 352/2160 = 16.3u）。
     JS 會將佢 snap 去整數裝置像素：16.3u 本身係小數（2160 全屏 = 352.08px），
     小數邊界會令 header 最尾一列只蓋住 84%，露出下面張相 → 一條 1px 混色線，
     張相郁嘅時候嗰列會跟住變光暗。snap 之後邊界喺整數，混色線完全消失。 */
  --header-h: calc(var(--u) * 16.3);
  /* 同一個 16.3u 喺橫向都係小數 → logo 同白色帶嘅交界會滲 1px，一併 snap */
  --header-w: calc(var(--u) * 16.3);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

#slideshow {
  position: fixed;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 177.78);
  transform: translate(-50%, -50%);
  background: #000;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.slide.is-visible {
  opacity: 1;
}

/* 相片層：screensaver 式輕微 pan/zoom（只郁相，文字獨立）
   六種動態輪流：zoomIn / panUp / zoomOut / panLeft / panDown / panRight */
.slide .photo {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header-h); /* 貼實 header 底邊（同一個變數，唔會錯位露縫）*/
  bottom: 0;
  background-size: cover;
  background-position: center;
  /* 相片層唔好自己淡入：同頁面 crossfade 叠埋會令中段變黑閃；
     淡入淡出統一由 .slide 容器處理 */
  animation: photoMotion 9s ease-in-out forwards;
}

@keyframes photoMotion {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.photo.m-zoomIn  { animation-name: mZoomIn; }
.photo.m-zoomOut { animation-name: mZoomOut; }
.photo.m-panUp   { animation-name: mPanUp; }
.photo.m-panDown { animation-name: mPanDown; }
.photo.m-panLeft { animation-name: mPanLeft; }
.photo.m-panRight{ animation-name: mPanRight; }

/* pan 類要預先放大 12%，平移時先唔會露黑邊 */
@keyframes mZoomIn {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
@keyframes mZoomOut {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
@keyframes mPanUp {
  from { transform: scale(1.12) translateY(2%); }
  to   { transform: scale(1.12) translateY(-2%); }
}
@keyframes mPanDown {
  from { transform: scale(1.12) translateY(-2%); }
  to   { transform: scale(1.12) translateY(2%); }
}
@keyframes mPanLeft {
  from { transform: scale(1.12) translateX(2%); }
  to   { transform: scale(1.12) translateX(-2%); }
}
@keyframes mPanRight {
  from { transform: scale(1.12) translateX(-2%); }
  to   { transform: scale(1.12) translateX(2%); }
}

/* Header：頂欄 = logo 方塊(352) + Bodoni 標題(82pt/tracking 20)，
   尺寸照 Venus spec（2160×3840 基準，1u = 21.6px）。
   白邊根因：非全屏時整個舞台置中會落在小數像素，白底嘅左緣會滲 1px 出黑邊，
   logo 又俾 header 嘅 overflow 裁住、蓋唔住嗰一列 → 睇落係一條白線（全屏時座標係整數所以冇）。
   做法：header 底色直接用該 chapter 品牌色（混到黑邊都係深色），白色由 logo 右緣先開始畫 */
.slide .header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  background: linear-gradient(#fff, #fff) no-repeat var(--header-w) 0 / calc(100% - var(--header-w)) 100%;
  background-color: var(--accent, #ae750c);
  z-index: 3;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* logo 向左出界 2px（由 header／slide 嘅 overflow 裁走），令最左一列像素由 image 自己蓋住，
   唔係靠背景色頂住字母箱邊界 */
.slide .header .logo {
  width: calc(var(--header-w) + 2px);
  height: var(--header-h);
  margin-left: -2px;
  object-fit: cover;
  flex: none;
  display: block;
}

.slide .header .title {
  margin-left: calc(var(--u) * 3.1);
  font-family: 'BodoniTitle', serif;
  font-weight: bold;
  font-size: calc(var(--u) * 3.8);
  letter-spacing: 0.02em;
  color: #111;
  white-space: nowrap;
}

/* 跨組過渡：只有換組嗰頁先由 app.js 加 .header-in — logo 連回彈滑入、標題由左掃開顯現；
   組內換頁唔會郁，避免每頁都晃 */
.slide.header-in .header .logo {
  /* transform-origin 固定左緣＋唔 overshoot 位移：舊版用 1.15 回彈曲線，
     logo 會衝過左邊界露出白底（Venus 鬧「動畫效果時候左邊Logo出現咗白邊」）；
     而家回彈放喺 scale，左緣全程貼住，透明度亦唔再漸變（半透明金疊白底同樣似白邊）*/
  animation: logoIn 1s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  transform-origin: left center;
}

.slide.header-in .header .title {
  animation: titleIn 1.15s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both;
}

@keyframes logoIn {
  0%   { transform: translateX(-125%) scale(1.25); }
  60%  { transform: translateX(0) scale(1.04); }
  100% { transform: translateX(0) scale(1); }
}

/* 標題：由左至右掃開（clip-path），比單純淡入明顯好多 */
@keyframes titleIn {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0.4; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* 文字層 */
.txt {
  position: absolute;
  z-index: 2;
  opacity: 0;
}

.slide.is-visible .txt { opacity: 1; }

/* Winner 年份＋國家：ElleNovaC Bold 70pt / leading 106 / tracking 0（Venus spec）
   top 用 114.0u（2160 屏 = 2462px）：spec 原點 114.9u，10-08 應 Venus 要求上移 60px 至
   112.11u 之後兩行「癡埋」——姓名嘅 Q/g/p 落筆（墨跡底 2440）直接撞住白色行（墨跡頂 2440）。
   114.0u 係量返出嚟嘅最小可行距離：冇落筆嘅姓名行距 66px，有落筆 41px。要再闊只改呢個數 */
.slide .year {
  left: calc(var(--u) * 7.4);
  top: calc(var(--u) * 114.0);
  font-family: 'ElleNova', sans-serif;
  font-size: calc(var(--u) * 3.24);
  line-height: 1.51;
  color: #fff;
}

/* 入場動畫：姓名／年份行改為打字機效果，由 app.js 逐字顯示（Venus 要求） */

/* 人名：ElleNovaC Bold 118pt / leading 106 / tracking 0，left 160px / top 2322px（Venus spec）
   顏色跟返所屬 chapter 嘅品牌色：--accent 由 app.js 按 config.js 嘅 accent 設喺 .slide 上 */
.slide .name {
  left: calc(var(--u) * 7.4);
  top: calc(var(--u) * 107.5);
  font-family: 'ElleNova', sans-serif;
  font-size: calc(var(--u) * 5.46);
  line-height: 0.9;
  color: var(--accent, #ae750c);
}

.slide.is-visible .name {
  opacity: 1;
}

/* 出口動畫：切頁時文字原地 dissolve 淡出（Venus 要求：唔使滑動）
   原因：入場動畫綁 .is-visible，class 一移除動畫即斷，文字會瞬間跳返 opacity:0 */
.slide:not(.is-visible) .year,
.slide:not(.is-visible) .name {
  animation: fadeOut 0.9s ease-in both;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}