.prologue {
  position: fixed;
  z-index: 50;
  inset: 0;
  min-height: 100dvh;
  overflow: hidden;
  background: #050504;
}

.prologue::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.52), transparent 25%, transparent 62%, rgba(0,0,0,0.76)),
    radial-gradient(circle at center, transparent 45%, rgba(0,0,0,0.48));
}

.prologue__media { position: absolute; inset: 0; margin: 0; }
.prologue__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(1.08) brightness(0.72); animation: documentary-drift 7s ease-out both; }
.prologue__media img[data-phase="now"] { filter: saturate(0.85) contrast(1.02) brightness(0.82); }

@keyframes documentary-drift {
  from { transform: scale(1.035); }
  to { transform: scale(1.11); }
}

/* 照片來源：左下角的 i 圖示，點了才展開 */
.prologue__icon { position: absolute; z-index: 4; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.35); font: 700 1rem/1 var(--serif); cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.prologue__icon:hover { border-color: var(--ember-bright); background: rgba(0, 0, 0, 0.55); }
.prologue__info-toggle { bottom: var(--safe-bottom); left: var(--safe-left); font-style: italic; }
.prologue__info-toggle[aria-expanded='true'] { color: #1b120c; background: var(--paper); }
.prologue__info { position: absolute; z-index: 4; bottom: calc(var(--safe-bottom) + 3.4rem); left: var(--safe-left); display: grid; gap: 0.3rem; max-width: min(26rem, calc(100% - 2rem)); padding: 0.75rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.86); background: rgba(8, 6, 5, 0.82); font-size: 0.76rem; line-height: 1.55; }
.prologue__info a { color: var(--ember-bright); }
.prologue__info small { color: var(--ink-muted); font-size: 0.66rem; letter-spacing: 0.1em; }

.prologue__card {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 12vh max(1.5rem, 8vw);
  text-align: center;
  background: radial-gradient(circle, #18120e 0, #070605 68%);
}

.prologue__card h1 { max-width: 17em; margin: 0 auto; white-space: pre-line; font: 500 clamp(2rem, 6vw, 5.6rem)/1.28 var(--serif); letter-spacing: 0.03em; }
.day-line { display: grid; place-items: center; }
.day-count { margin: -1rem 0 -0.25rem; color: var(--paper); font: 600 clamp(7rem, 24vw, 20rem)/0.95 var(--serif); letter-spacing: -0.08em; text-shadow: 0 0 60px rgba(219, 95, 51, 0.2); }
.day-count + h1 { color: var(--ink-muted); font-size: clamp(1.2rem, 3vw, 2rem); }

/* 跳過與下一張：右下角的小按鈕 */
.prologue__controls { position: absolute; z-index: 4; right: var(--safe-right); bottom: var(--safe-bottom); display: flex; align-items: center; gap: 0.6rem; }
.prologue__controls .prologue__icon { position: static; font: 400 1.15rem/1 var(--sans); }
.prologue__skip { min-height: 2.75rem; padding: 0 0.6rem; border: 0; color: rgba(255, 255, 255, 0.6); background: transparent; font: 600 0.78rem var(--sans); letter-spacing: 0.12em; cursor: pointer; }
.prologue__skip:hover { color: var(--ink); }

/* 進度條：貼齊畫面最上緣的一條細線 */
.prologue__progress { position: absolute; z-index: 6; top: 0; right: 0; left: 0; height: 3px; background: rgba(255, 255, 255, 0.14); }
.prologue__progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); background: var(--ember-bright); box-shadow: 0 0 8px rgba(255, 174, 118, 0.7); transition: width 500ms ease; }

/* 前導播放時：網站控制列只留置中的標題，右上只留聲音圖示 */
body[data-stage='prologue'] .site-bar { justify-content: center; background: linear-gradient(180deg, rgba(5, 4, 3, 0.7), transparent); }
body[data-stage='prologue'] .wordmark { justify-items: center; text-align: center; }
body[data-stage='prologue'] .site-actions { position: absolute; top: var(--safe-top); right: var(--safe-right); }
body[data-stage='prologue'] [data-open-sources] { display: none; }

@media (max-width: 650px) {
  .prologue__card h1 { font-size: clamp(1.8rem, 9vw, 3.2rem); }
  .day-count { font-size: clamp(6rem, 35vw, 10rem); }
}

@media (prefers-reduced-motion: reduce) {
  .prologue__media img { animation: none; transform: none; }
}


.prologue__logo { display: block; width: min(34rem, 78vw); height: auto; margin: 0 auto 1.6rem; }
.prologue__logo[hidden] { display: none; }

/* 預覽密碼 */
.gate { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); background: radial-gradient(ellipse at 50% 40%, #1d140e, #050403 70%); }
.gate__form { display: grid; justify-items: center; gap: 0.8rem; width: min(24rem, 100%); text-align: center; }
.gate__logo { width: min(22rem, 80vw); height: auto; margin-bottom: 1.2rem; }
.gate__title { margin: 0; color: var(--ember-bright); font: 700 0.78rem var(--sans); letter-spacing: 0.3em; }
.gate__label { color: var(--ink-muted); font-size: 0.9rem; }
.gate__row { display: flex; gap: 0.5rem; width: 100%; }
.gate__row input { flex: 1; min-width: 0; min-height: 3rem; padding: 0 1rem; border: 1px solid rgba(255, 214, 170, 0.35); color: var(--ink); background: rgba(0, 0, 0, 0.4); font: 600 1.2rem var(--sans); letter-spacing: 0.4em; text-align: center; }
.gate__status { min-height: 1.4rem; margin: 0; color: #ff9b85; font-size: 0.85rem; }
.gate__form.is-wrong .gate__row { animation: gate-shake 360ms ease; }
@keyframes gate-shake { 20%, 60% { transform: translateX(-0.5rem); } 40%, 80% { transform: translateX(0.5rem); } }
body[data-preview='locked'] .site-bar,
body[data-preview='locked'] .prologue { visibility: hidden; }
/* 預覽碼不是帳號密碼：用一般文字欄位遮字，瀏覽器就不會跳出「儲存密碼」 */
.gate__row input { -webkit-text-security: disc; }