/* ============================================================================
 * site.css — islands 專用 class、過場動畫、開場/遮罩樣式
 * （tailwind.build.css 負責所有 utility；這裡只放元件級與動畫）
 * ========================================================================== */

/* ---------- 字體變數（原專案由 next/font 注入） ---------- */
:root {
  --font-noto-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-noto-serif: "Noto Serif TC", "Songti TC", Georgia, serif;
}

/* ---------- nav / footer 共用 ---------- */
.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: rgb(36 44 40 / 0.75);
  transition: color 0.2s;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s;
}
.nav-link:hover { color: var(--foreground); background-size: 100% 1px; }

.col-title {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #EDE7D8;
}
.foot-link {
  font-size: 0.875rem;
  color: rgb(237 231 216 / 0.6);
  transition: color 0.2s;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s;
}
.foot-link:hover { color: #EDE7D8; background-size: 100% 1px; }

/* ---------- 圖片 skeleton ---------- */
.skeleton-img {
  background: linear-gradient(90deg, oklch(0.93 0.01 90) 25%, oklch(0.97 0.008 92) 37%, oklch(0.93 0.01 90) 63%);
  background-size: 400px 100%;
  animation: shimmer 1.6s linear infinite;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.skeleton-img.is-loaded { opacity: 1; animation: none; background: none; }

/* ---------- 進場動畫 ---------- */
@keyframes popIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.pop-in { animation: popIn 0.22s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes popScale {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}
.pop-scale { animation: popScale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.overlay-in { animation: overlayIn 0.25s ease; }

@keyframes sheetInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sheetInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.sheet-in-right { animation: sheetInRight 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.sheet-in-left { animation: sheetInLeft 0.34s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes sheetUp { from { transform: translateY(80px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet-up { animation: sheetUp 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes stepIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
.step-in { animation: stepIn 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes pageIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.page-in { animation: pageIn 0.55s cubic-bezier(0.22, 1, 0.36, 1); animation-fill-mode: backwards; }

@keyframes imgFade { from { opacity: 0.4; transform: scale(1.01); } to { opacity: 1; transform: scale(1); } }
.img-fade { animation: imgFade 0.45s ease; }

/* ---------- hero 換場 ---------- */
.hero-enter-active { transition: opacity 1.1s ease-in-out; }
.hero-leave-active { transition: opacity 1.1s ease-in-out; position: absolute; inset: 0; }
.hero-enter-from, .hero-leave-to { opacity: 0; }
.hero-copy-enter-active { transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-copy-leave-active { transition: opacity 0.3s ease, transform 0.3s ease; }
.hero-copy-enter-from { opacity: 0; transform: translateY(32px); }
.hero-copy-leave-to { opacity: 0; transform: translateY(-20px); }
@keyframes heroProgress { from { width: 0; } to { width: 100%; } }
.hero-progress { animation: heroProgress 6s linear forwards; }

/* ---------- toast ---------- */
.toast-enter-active { transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.toast-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; position: absolute; right: 0; width: 100%; }
.toast-enter-from { opacity: 0; transform: translateY(12px) scale(0.97); }
.toast-leave-to { opacity: 0; transform: translateY(8px); }
.toast-move { transition: transform 0.25s ease; }

/* ---------- 開場畫面 ---------- */
#boot-screen {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: #22382E;
  transition: opacity 0.7s ease, visibility 0.7s;
}
#boot-screen.is-done { opacity: 0; visibility: hidden; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.boot-ring { stroke-dasharray: 260; stroke-dashoffset: 260; animation: bootDraw 1.15s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards; }
.boot-char { opacity: 0; animation: bootChar 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards; }
.boot-word {
  font-family: var(--font-serif, "Noto Serif TC", serif); font-weight: 600; font-size: 22px;
  color: #F5F1E6; letter-spacing: 0.15em; text-align: center; line-height: 1;
  opacity: 0; animation: bootChar 0.6s ease 0.55s forwards;
  display: flex; flex-direction: column; gap: 8px;
}
.boot-word span { font-family: var(--font-sans, sans-serif); font-size: 9px; font-weight: 500; letter-spacing: 0.4em; color: #C9A26B; }
.boot-bar { width: 120px; height: 1.5px; overflow: hidden; border-radius: 99px; background: rgb(245 241 230 / 0.15); }
.boot-bar span { display: block; height: 100%; width: 40%; background: #C9A26B; animation: bootBar 1.1s ease-in-out infinite; }
@keyframes bootDraw { to { stroke-dashoffset: 0; } }
@keyframes bootChar { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } }
@keyframes bootBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

/* ---------- 換頁遮罩 ---------- */
#route-mask { position: fixed; inset: 0; z-index: 70; pointer-events: none; display: flex; visibility: hidden; }
#route-mask.is-on, #route-mask.is-lift { visibility: visible; }
#route-mask .panel {
  flex: 1; background: #22382E;
  transform: translateY(101%);
  transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}
#route-mask .panel:nth-child(2) { transition-delay: 0.05s; }
#route-mask .panel:nth-child(3) { transition-delay: 0.1s; }
#route-mask.is-on .panel { transform: translateY(0); }
#route-mask.is-lift .panel { transform: translateY(-101%); }
#route-mask.is-off .panel { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .pop-in, .pop-scale, .overlay-in, .sheet-in-right, .sheet-in-left, .sheet-up, .step-in, .page-in, .img-fade,
  .hero-progress, .boot-ring, .boot-char, .boot-word, .boot-bar span { animation: none !important; }
  .skeleton-img { animation: none; opacity: 1; }
  #boot-screen { transition: opacity 0.1s; }
  #route-mask .panel { transition-duration: 0.1s; }
}