@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');
}

/* 舞台同主 slideshow 一樣鎖 9:16（2160×3840），1u = 舞台闊度 1%（= 21.6px） */
:root {
  --u: min(1vw, 0.5625vh);
  --header-h: calc(var(--u) * 16.3);
  --header-w: calc(var(--u) * 16.3);
  --accent: #004e95;
}

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 .6s ease-in-out;
}

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

/* 相片層：fit to width（相片闊度 = 舞台闊度），上下留黑邊由舞台自己出。
   每張相比例唔同，所以高度交返畀相片自己，再喺 header 以下範圍垂直置中 */
.slide .photo {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header-h);
  bottom: 0;
  overflow: hidden;
}

.slide .photo img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(-50%);
  transform-origin: center center;
}

/* 動態：?motion=zoom / down / up（Venus 2026-10-30 要求可以揀放大或上下移動）。
   預設冇動態，方便逐張靜態比對執相效果 */
.photo.m-zoom img { animation: rZoom 14s ease-in-out infinite alternate; }
.photo.m-down img { animation: rDown 14s ease-in-out infinite alternate; }
.photo.m-up img   { animation: rUp 14s ease-in-out infinite alternate; }

@keyframes rZoom {
  from { transform: translateY(-50%) scale(1); }
  to   { transform: translateY(-50%) scale(1.08); }
}

/* 上下移動要預先放大 8%，郁嘅時候先唔會露黑邊 */
@keyframes rDown {
  from { transform: translateY(-54%) scale(1.08); }
  to   { transform: translateY(-46%) scale(1.08); }
}

@keyframes rUp {
  from { transform: translateY(-46%) scale(1.08); }
  to   { transform: translateY(-54%) scale(1.08); }
}

/* Header 跟主 slideshow（logo 方塊 352 + Bodoni 標題 82pt / tracking 20） */
.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);
  z-index: 3;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.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;
}

/* 姓名／年份位置同主 slideshow 完全一致（Venus spec：name top 107.5u、year 114.0u、left 7.4u）
   顏色跟主 slideshow chapter 03（DFA World's Outstanding Chinese Designer）嘅 #004e95 */
.slide .txt {
  position: absolute;
  z-index: 2;
}

.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);
}

.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;
}

/* 版本標籤：左下角（相片 fit to width 之後下面一定有黑邊，唔會遮住相）。
   顯示檔名＋第幾張，方便佢哋逐張對 */
.tag {
  position: absolute;
  left: calc(var(--u) * 2.7);
  bottom: calc(var(--u) * 2.7);
  z-index: 4;
  padding: calc(var(--u) * .6) calc(var(--u) * 1.5);
  background: rgba(0, 0, 0, .45);
  font-family: 'DINMittel', sans-serif;
  font-size: calc(var(--u) * 2.1);
  letter-spacing: .04em;
  color: #fff;
}

/* 全屏掣：同主 slideshow／Timeline 已批規格一樣（圓 182、離右 59、離底 100） */
#fsBtn {
  position: absolute;
  right: calc(var(--u) * 2.731);
  bottom: calc(var(--u) * 4.63);
  width: calc(var(--u) * 8.426);
  height: calc(var(--u) * 8.426);
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .85);
  background-image: url('../assets/ui/fullscreen-arrow.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(var(--u) * 3.38) calc(var(--u) * 3.38);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
  cursor: pointer;
  z-index: 5;
  transition: opacity .4s ease;
  -webkit-tap-highlight-color: transparent;
}

#fsBtn.hide {
  opacity: 0;
  pointer-events: none;
}