/* ==========================================================================
   生日賀卡網站樣式 — 2.5D 星座總覽版
   設計原則：
   - 深夜星空底色 + 米白紙質信紙，營造「夜裡讀信」的氛圍
   - 無限循環的小動畫（火焰、發光呼吸）用 CSS @keyframes
   - 有劇本的一次性演出（拆信、亮相、飛入展開）交給 GSAP（見 js/main.js）
   ========================================================================== */

:root {
  --bg: #0b1026;          /* 深夜藍 */
  --bg-2: #1c2452;        /* 亮一階的夜空 */
  --ink: #f5efe6;         /* 米白文字 */
  --ink-dim: #b9b3a6;     /* 次要文字 */
  --gold: #f0c75e;        /* 金色點綴 */
  --paper: #fdf8ee;       /* 信紙 */
  --paper-ink: #3a3226;   /* 信紙上的字 */
  --cream: #fdf3e3;       /* 蛋糕奶油 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* hidden 屬性保證生效（避免被其他 display 規則蓋掉） */
[hidden] { display: none !important; }

body {
  font-family: 'Noto Serif TC', serif;
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-2), var(--bg) 65%);
  color: var(--ink);
  min-height: 100svh;
  overflow: hidden; /* 星座總覽是單一畫面，不捲動 */
}

/* --------------------------------------------------------------------------
   星空畫布：固定鋪滿整個視窗，永遠在最底層
   -------------------------------------------------------------------------- */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none; /* 不擋任何點擊 */
}

/* --------------------------------------------------------------------------
   第 0 幕：信封開場
   信封由 5 層 div 疊出來：封底(1) < 信紙(2) < 口袋(3) < 蓋子(4) < 蠟封(5)
   拆信時 GSAP 會把蓋子翻上去、把信紙往上抽
   -------------------------------------------------------------------------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
}

.envelope {
  position: relative;
  width: min(330px, 82vw);
  aspect-ratio: 3 / 2;
  cursor: pointer;
  perspective: 900px; /* 讓蓋子翻開有 3D 感 */
  -webkit-tap-highlight-color: transparent;
}

.envelope__body {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(#f7ecd8, #e8d9ba);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.envelope__letter {
  position: absolute;
  left: 6%;
  top: 8%;
  width: 88%;
  height: 84%;
  z-index: 2;
  background: var(--paper);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

/* 口袋：用 clip-path 在上緣剪出 V 型缺口，蓋在信紙前面 */
.envelope__pocket {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(#f2e4c8, #e3d2ae);
  border-radius: 8px;
  clip-path: polygon(0 0, 50% 48%, 100% 0, 100% 100%, 0 100%);
}

/* 蓋子：倒三角形，transform-origin 設在上緣，翻開時像掀蓋 */
.envelope__flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 56%;
  z-index: 4;
  background: linear-gradient(#efe0c2, #dcc89e);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  border-radius: 8px 8px 0 0;
}

.envelope__seal {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #f6d8c3;
  background: radial-gradient(circle at 35% 30%, #d05039, #8e2620 70%);
  box-shadow: inset 0 -3px 8px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .3);
}

.envelope__to {
  position: absolute;
  bottom: 10%;
  width: 100%;
  z-index: 4;
  text-align: center;
  color: #7a6644;
  letter-spacing: .12em;
  font-size: 1rem;
}

.intro__hint {
  color: var(--ink-dim);
  letter-spacing: .15em;
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   第 1 幕：星座總覽
   -------------------------------------------------------------------------- */
.sky {
  position: relative;
  z-index: 1;
  height: 100svh;
  overflow: hidden;
}

.sky__head {
  position: absolute;
  top: max(1.6rem, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  pointer-events: none; /* 標題不擋物件點擊 */
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.sky__eyebrow {
  color: var(--ink-dim);
  letter-spacing: .3em;
  font-size: .85rem;
}

.sky__title {
  font-family: 'Playfair Display', 'Noto Serif TC', serif;
  font-size: clamp(1.7rem, 7.5vw, 2.8rem);
  letter-spacing: .06em;
  color: var(--gold); /* 尚未拆字前的備援色 */
}

/* JS 會把標題拆成一個字一個 span 做逐字彈入。
   金色漸層要放在 span 上而不是父層：GSAP 動畫會在 span 留下 transform，
   父層的 background-clip: text 遇到有 transform 的子元素會整段隱形（Chrome 已知怪癖）。 */
.sky__title span {
  display: inline-block;
  background: linear-gradient(150deg, #f8e3a1, var(--gold) 45%, #e8985e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sky__hint {
  color: var(--ink-dim);
  font-size: .85rem;
  letter-spacing: .12em;
}

.sky__foot {
  position: absolute;
  bottom: max(.9rem, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  text-align: center;
  color: var(--ink-dim);
  font-size: .75rem;
  letter-spacing: .2em;
  pointer-events: none;
}

.sky__objects {
  position: absolute;
  inset: 0;
}

/* ---- 漂浮物件的共同外殼 --------------------------------------------------
   外層 .space-object：定位（left/top %）＋ GSAP 視差（x/y）
   內層 .space-object__float：GSAP 上下漂浮（各自不同週期）
   兩層分開，transform 才不會互相覆蓋 */
.space-object {
  position: absolute;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.space-object__float {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
}

.obj-label {
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--ink-dim);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
  white-space: nowrap;
}

.obj-label--gold { color: var(--gold); }

/* ---- 信件星：發光小圓球 -------------------------------------------------- */
.orb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-size: 1.35rem;
  border: 1px solid rgba(255, 255, 255, .28);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .3), transparent 55%),
    radial-gradient(circle, color-mix(in srgb, var(--o-accent, #f0c75e) 45%, transparent), rgba(255, 255, 255, .04) 75%);
  box-shadow: 0 0 20px color-mix(in srgb, var(--o-accent, #f0c75e) 55%, transparent);
}

/* 沒讀過的信會呼吸發光，吸引目光 */
.obj-letter:not(.is-read) .orb {
  animation: glow 2.4s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--o-accent, #f0c75e) 45%, transparent); }
  50%      { box-shadow: 0 0 30px color-mix(in srgb, var(--o-accent, #f0c75e) 85%, transparent); }
}

/* 讀過的信：右上角一個小勾 */
.obj-letter.is-read .orb::after {
  content: '✓';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #12321c;
  background: #9ed89b;
}

.obj-letter .orb { position: relative; }

/* ---- 拍立得合照 ---------------------------------------------------------- */
.polaroid {
  display: block;
  width: 96px;
  padding: 5px 5px 18px;
  background: #fff;
  rotate: var(--rot, 0deg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
}

.polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.space-object:active .polaroid { box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }

/* ---- 相簿星：三張拍立得疊成一疊 ------------------------------------------ */
.album-stack {
  display: grid;  /* 三張都放同一格 → DOM 順序就是由下往上的疊放順序 */
  width: 104px;
}

.album-stack > .polaroid {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
}

/* 張數徽章 */
.album-stack__count {
  position: absolute;
  right: -7px;
  bottom: -7px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  color: #2a2313;
  background: var(--gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* 相簿裡有影片時，封面照蓋一層播放記號 */
.album-stack__play {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: #fff;
  background: rgba(0, 0, 0, .3);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

/* ---- 主星：她的中二照 ----------------------------------------------------- */
.obj-main { --main-size: clamp(116px, 33vw, 158px); }

.obj-main img {
  display: block;
  width: var(--main-size);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 0 0 44px rgba(240, 199, 94, .45);
}

/* 繞著主星緩慢旋轉的虛線光環 */
.obj-main .space-object__float { position: relative; }

.obj-main .space-object__float::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  translate: -50% 0;
  width: calc(var(--main-size) + 22px);
  aspect-ratio: 1;
  border: 1.5px dashed rgba(240, 199, 94, .55);
  border-radius: 50%;
  animation: spin 26s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* 物件從 10 個長到 12 個，窄螢幕要再縮一階才不會互相碰到 */
@media (max-width: 380px), (max-height: 700px) {
  .orb { width: 50px; height: 50px; font-size: 1.15rem; }
  .obj-label { font-size: .74rem; }
  .album-stack { width: 92px; }
}

/* ---- 蛋糕（未解鎖 → 解鎖） ------------------------------------------------ */
.orb--cake { --o-accent: #e2799f; font-size: 1.5rem; }

.obj-cake:disabled { cursor: default; }

.obj-cake:disabled .orb {
  filter: grayscale(1) brightness(.55);
  animation: none;
  box-shadow: none;
}

.obj-cake:disabled .orb::after {
  content: '🔒';
  position: absolute;
  bottom: -4px;
  right: -6px;
  font-size: .85rem;
  filter: none;
}

.obj-cake .orb { position: relative; }

.obj-cake.is-unlocked .orb { animation: glow 2s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Modal：點物件之後飛入展開的那一層
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 22, .72);
  backdrop-filter: blur(3px);
}

.modal__box {
  position: relative;
  width: min(540px, 94vw);
  max-height: 86svh;
  overflow-y: auto;
  border-radius: 12px;
}

.modal__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  color: #fff;
  background: rgba(0, 0, 0, .45);
}

/* 展開的信件（沿用信紙質感） */
.letter {
  position: relative;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 10px;
  border-top: 6px solid var(--letter-accent, var(--gold));
  padding: 2.2rem 1.8rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.letter h3 {
  font-size: 1.05rem;
  color: var(--letter-accent, var(--gold));
  filter: brightness(.85); /* 紙上的字要深一點才好讀 */
  letter-spacing: .12em;
  margin-bottom: 1.2rem;
}

.letter p {
  line-height: 2.05;
  font-size: 1.02rem;
  text-align: justify;
}

.letter p + p { margin-top: 1em; }

.letter__sign {
  margin-top: 1.6rem;
  text-align: right;
  color: var(--letter-accent, var(--gold));
  filter: brightness(.85);
}

/* 展開的照片（大張拍立得） */
.polaroid--big {
  width: 100%;
  padding: 12px 12px 14px;
  rotate: none;
}

.polaroid--big img { aspect-ratio: auto; max-height: 62svh; object-fit: contain; }

.polaroid--big figcaption {
  padding-top: 12px;
  text-align: center;
  color: #4a4238;
  font-size: 1rem;
  letter-spacing: .08em;
}

/* 展開的相簿：一頁一張，用 scroll-snap 做左右滑動 */
.modal__box--album {
  background: radial-gradient(120% 100% at 50% 0%, #232b5e, #101532 70%);
  border: 1px solid rgba(255, 255, 255, .12);
}

.album { padding: 1.3rem 1rem 1.1rem; }

.album__title {
  margin: 0 2.8rem .9rem .3rem; /* 右邊留給關閉鈕 */
  font-size: 1rem;
  letter-spacing: .14em;
  color: var(--album-accent, var(--gold));
}

.album__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.album__track::-webkit-scrollbar { display: none; }

.album__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  padding: 0 .3rem;
}

.album__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50svh;
}

.album__media img,
.album__media video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  background: #000;
}

.album__slide figcaption {
  min-height: 2.8em; /* 說明長短不一，先撐開才不會換頁時整個版面上下跳 */
  text-align: center;
  font-size: .92rem;
  letter-spacing: .06em;
}

.album__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  padding-top: .3rem;
}

.album__nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.album__nav:active { background: rgba(255, 255, 255, .18); }

.album__counter {
  min-width: 3.6em;
  text-align: center;
  color: var(--ink-dim);
  font-size: .82rem;
  letter-spacing: .16em;
}

@media (max-height: 700px) {
  .album__media { height: 42svh; }
}

/* 展開的蛋糕場景 */
.modal__box--cake {
  background: radial-gradient(120% 100% at 50% 0%, #232b5e, #101532 70%);
  border: 1px solid rgba(255, 255, 255, .12);
}

.cake-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 2.6rem 1.2rem 2.2rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   蛋糕本體：純 CSS 三層蛋糕；蠟燭是 <button>（觸控目標夠大、鍵盤也能按）
   -------------------------------------------------------------------------- */
.cake {
  position: relative;
  width: 280px;
  height: 300px;
}

.cake__plate {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 272px;
  height: 24px;
  border-radius: 50%;
  background: rgba(220, 215, 255, .18);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
}

.cake__layer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
}

/* 每層上緣的奶油滴落（圓點重複排出扇形花邊） */
.cake__layer::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 4px;
  right: 4px;
  height: 18px;
  background: radial-gradient(circle at 9px 6px, var(--cream) 8px, transparent 9px) repeat-x;
  background-size: 20px 18px;
}

.cake__layer--bottom { bottom: 14px; width: 240px; height: 66px; background: #a34d5f; }
.cake__layer--mid    { bottom: 78px; width: 200px; height: 60px; background: #c05c73; }
.cake__layer--top    { bottom: 136px; width: 160px; height: 54px; background: #d97487; }

.cake__candles {
  position: absolute;
  bottom: 186px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  z-index: 2;
}

.candle {
  position: relative;
  width: 30px;
  height: 72px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.candle__stick {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 40px;
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, #fff 0 3px, #f3a0b5 3px 6px);
}

.flame {
  position: absolute;
  bottom: 42px;
  left: 50%;
  width: 14px;
  height: 22px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 78%, #fff3c4 15%, #ffd27a 40%, #ff9f45 75%, transparent 90%);
  box-shadow: 0 0 18px 6px rgba(255, 170, 60, .35);
  transform-origin: 50% 100%;
  animation: flicker .22s ease-in-out infinite alternate;
}

@keyframes flicker {
  from { transform: translateX(-50%) scale(1)        rotate(-2deg); }
  to   { transform: translateX(-50%) scale(1.1, 1.18) rotate(2deg); }
}

/* 蠟燭熄滅：火焰消失、冒出一縷煙 */
.candle.is-out .flame { display: none; }

.candle.is-out::after {
  content: '';
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(200, 200, 200, .55);
  filter: blur(2px);
  animation: smoke 1.4s ease-out forwards;
}

@keyframes smoke {
  from { transform: translate(-50%, 0) scale(1);       opacity: .8; }
  to   { transform: translate(-50%, -44px) scale(2.4); opacity: 0; }
}

.cake__hint { color: var(--ink-dim); letter-spacing: .08em; }

.cake__wish h2 {
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  color: var(--gold);
  letter-spacing: .1em;
  text-shadow: 0 0 30px rgba(240, 199, 94, .4);
}

.cake__wish p {
  margin-top: .6rem;
  color: var(--ink-dim);
  letter-spacing: .12em;
}

/* --------------------------------------------------------------------------
   其他
   -------------------------------------------------------------------------- */

/* fetch 失敗（例如直接雙擊 index.html 用 file:// 開啟）時的提示 */
.load-error {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  max-width: 92vw;
  background: #5d1f1f;
  color: #ffe9e3;
  padding: 1rem 1.4rem;
  border-radius: 8px;
  line-height: 1.8;
  font-size: .9rem;
}

.load-error code {
  background: rgba(0, 0, 0, .3);
  padding: .1em .4em;
  border-radius: 4px;
}

/* 尊重「減少動態效果」的系統設定 */
@media (prefers-reduced-motion: reduce) {
  .flame, .intro__hint,
  .obj-letter:not(.is-read) .orb,
  .obj-cake.is-unlocked .orb,
  .obj-main .space-object__float::before { animation: none; }
}