/* ===============================================================
   結緣品說明頁 — 流體式版面（非縮放）
   Figma 設計原寸：1920 × 3103
   每個元素以百分比基準呈現，字級用 clamp() 流體縮放
   =============================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Noto Sans TC", "PingFang TC", "Heiti TC", "Microsoft JhengHei", sans-serif;
  background: #ffffff;
  color: #51443b;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }

/* === 主頁面容器 ===================================================
   寬度 = 視窗寬，最大 1920；高度依 1920:3103 比例自動換算
================================================================ */
.page {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  /* 等比例維持高度 */
  aspect-ratio: 1920 / 3103;
  background: #ffffff;
  overflow: hidden;
}

/* === 背景紙張紋理 === */
.bg-paper {
  position: absolute;
  inset: 0;
  background: url("assets/background.png") center / cover no-repeat;
  z-index: 0;
}

/* === Hero / 標題區 ================================================
   Figma 文字框：x=232 y=193 w=606
   232/1920=12.08%   193/3103=6.22%   606/1920=31.56%
================================================================ */
.hero { position: static; }

.hero__text {
  position: absolute;
  left: 12.08%;          /* 232 */
  top: 6.22%;            /* 193 */
  width: 31.56%;         /* 606 */
  z-index: 3;
}
.hero__title {
  font-family: "Noto Serif TC", "Noto Sans TC", serif;
  font-weight: 700;
  /* Figma 40px on 1920 → 2.083vw（最小 22px、最大 40px） */
  font-size: clamp(22px, 2.083vw, 40px);
  line-height: 1.5;
  color: #66703d;
  margin: 0;
  letter-spacing: 0;
}
.hero__subtitle {
  margin-top: clamp(16px, 1.56vw, 30px);
  font-weight: 700;
  font-size: clamp(13px, 0.9375vw, 18px);
  line-height: 1.55;
  color: #765e48;
}

/* Butterfly：匯出 PNG 為 839×797（mask 已套用 + trim）。
   錨在右上角，寬度按頁寬比例，高度由 aspect-ratio 自動推算。 */
.hero__butterfly {
  position: absolute;
  right: 0;
  top: 0;
  width: clamp(280px, 43.7vw, 839px);
  height: auto;
  aspect-ratio: 839 / 797;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.hero__butterfly img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top right;
}

/* === Showcase（吊飾照片 + 裝飾虛線） =============================
   Pendant Mask group：x=-116  y=659  w=865  h=813
   Decorative line：    x=792   y=700  w=696  h=955
================================================================ */
/* Pendant：匯出 PNG 為 665×813（mask 已套用 + trim）。 */
.showcase__pendant {
  position: absolute;
  left: 0;
  top: 21.24%;
  width: clamp(220px, 34.6vw, 665px);
  height: auto;
  aspect-ratio: 665 / 813;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.showcase__pendant img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top left;
}
.showcase__line {
  position: absolute;
  left: 41.25%;          /* 792 */
  top: 22.56%;           /* 700 */
  width: 36.25%;         /* 696 */
  height: 30.78%;        /* 955 */
  opacity: 0.9;
  object-fit: contain;
  object-position: top left;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* === 影片區 ======================================================
   Frame 2609937：x=370  y=1828  w=1180  h=540
   370/1920=19.27%   1828/3103=58.91%   1180/1920=61.46%
================================================================ */
.videos {
  position: absolute;
  left: 19.27%;
  top: 58.91%;
  width: 61.46%;
  display: grid;
  /* 主 880 : 縫 53 : 側欄 247，比例 880:53:247 */
  grid-template-columns: 74.58% 4.49% 20.93%;
  align-items: stretch;       /* 主縮圖高度 = 右側欄高度 */
  z-index: 3;
}

.videos__main {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
}
.videos__main-thumb {
  position: relative;
  width: 100%;
  flex: 1 1 auto;             /* 撐滿主欄高度（= 右側清單高度） */
  min-height: 0;
  overflow: hidden;
  background: #2a241f;
  border-radius: 4px;
}
.videos__main-thumb iframe,
.videos__main-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.videos__list {
  grid-column: 3 / 4;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* 三項目均分剩餘空間，項目間留間距 */
  justify-content: space-between;
  gap: clamp(12px, 1.04vw, 20px);
}
.videos__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}
.videos__item {
  display: flex;
  flex-direction: column;
}
.videos__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 247 / 139;
  overflow: hidden;
  background: #2a241f;
  border: 0;
  padding: 0;
  border-radius: 3px;
  cursor: pointer;
  display: block;
}
.videos__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.videos__thumb:hover img { transform: scale(1.04); }
.videos__duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 2px;
  letter-spacing: 0;
  font-weight: 600;
}
.videos__item-title,
.videos__item h4 {
  margin: 6px 0 0;
  font-weight: 700;
  font-size: clamp(12px, 0.83vw, 16px);
  line-height: 1.45;
  color: #51443b;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.videos__item.is-active .videos__thumb {
  outline: 2px solid #66703d;
  outline-offset: 2px;
}
.videos__error {
  grid-column: 1 / -1;
  color: #765e48;
  font-size: 14px;
  padding: 12px;
  background: rgba(118, 94, 72, 0.08);
  border-radius: 4px;
}

/* === 播放按鈕（流體大小） =========================================
   主播按鈕：78px 對 880px 寬影片 = 8.86%
   小播按鈕：44px 對 247px 寬縮圖 ≈ 17.81%
================================================================ */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.86%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.34% solid rgba(255, 255, 255, 0.9); /* 3px / 880 */
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  padding: 0;
}
.play-btn:hover {
  background: rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%) scale(1.06);
}
.play-btn span {
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.85em 0 0.85em 1.3em;
  border-color: transparent transparent transparent #ffffff;
}
.play-btn--sm {
  width: 17.81%;         /* 44/247 */
  border-width: 2px;
}

/* ============================================================
   墨水暈染進場動畫（ink reveal）
   - 圖片起始 clip-path: circle(0%)，從中心點外擴
   - 用 SVG turbulence filter 製造有機破口邊緣
   - 多顆水滴提前 pop 進場，營造潑墨層次
   ============================================================ */

/* 動畫前的初始隱藏狀態由 JS (ink-reveal.js) 接管，這裡只給基本定位 */
.ink-reveal {
  --cx: 50%;
  --cy: 50%;
}
.ink-reveal img {
  display: block;
}

/* 水滴 — 由 anime.js 驅動 transform/opacity */
.ink-drop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(40px, 14%, 120px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%,
              rgba(45, 55, 38, 0.95) 0%,
              rgba(45, 55, 38, 0.75) 30%,
              rgba(45, 55, 38, 0.35) 60%,
              rgba(45, 55, 38, 0) 80%);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  transform: translate(-50%, -50%) scale(0);
  filter: url(#ink-edge) blur(0.5px);
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  .ink-drop { display: none; }
}

/* ============================================================
   RWD：分段式響應
   - ≥ 1024px：完整桌機版（依 1920×3103 比例）
   - 768-1023px：平板，微調字級與內距
   - < 768px：手機，改為自然垂直堆疊（捨棄絕對定位）
   ============================================================ */

/* ---- 平板 ------------------------------------------------ */
@media (max-width: 1023px) {
  .hero__text { width: 38%; left: 6%; top: 4.5%; }
  .hero__butterfly { width: clamp(260px, 50vw, 700px); }
  .showcase__pendant { width: clamp(220px, 38vw, 560px); }
  .showcase__line { width: 30%; top: 22%; left: 45%; }
  .videos {
    left: 6%;
    width: 88%;
    top: 60%;
  }
}

/* ---- 手機 ------------------------------------------------ */
@media (max-width: 767px) {
  /* 解除整頁固定比例：用自然流排版 */
  .page {
    aspect-ratio: auto;
    height: auto;
    padding-bottom: 24px;
  }
  .bg-paper {
    /* 紙張紋理改為背景並重複，避免被 cover 拉太大 */
    background-size: cover;
    background-position: top center;
  }

  /* 區塊改用相對定位 + 垂直堆疊 */
  .hero,
  .showcase,
  .videos {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .hero {
    padding: 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .hero__text {
    position: static;
    width: 100%;
    order: 2;                   /* 蝴蝶在上、文字在下 */
    padding-top: 4px;
  }
  .hero__title {
    font-size: clamp(20px, 6vw, 30px);
    line-height: 1.45;
  }
  .hero__subtitle {
    font-size: clamp(13px, 3.6vw, 16px);
    line-height: 1.6;
    margin-top: 12px;
  }
  .hero__butterfly {
    position: static;
    width: 88%;
    max-width: 480px;
    margin: 0 -20px 0 auto;     /* 抵銷 hero 的右側 20px padding，讓右緣貼齊視窗 */
    align-self: flex-end;
    object-position: top right;
    order: 1;                   /* 蝴蝶排在文字之前 */
  }

  .showcase {
    padding: 8px 0 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .showcase__pendant {
    position: static;
    width: 92%;
    max-width: 520px;
    margin: 0;
    align-self: flex-start;
  }
  .showcase__line {
    position: static;
    width: 60%;
    max-width: 320px;
    height: auto;
    align-self: flex-end;
    margin-right: 8px;
    opacity: 0.85;
  }

  .videos {
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .videos__main { grid-column: auto; }
  .videos__main-thumb {
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
  }
  .videos__list {
    grid-column: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .videos__item {
    flex: 0 0 70%;            /* 一次大致顯示一張多一些，可橫向捲動 */
    max-width: 260px;
    scroll-snap-align: start;
  }
  .videos__thumb { aspect-ratio: 16 / 9; }
  .videos__item-title { font-size: 13px; }
}

/* ---- 超窄手機（< 380px）：再縮一點 ------------------------ */
@media (max-width: 380px) {
  .hero { padding: 20px 16px 0; }
  .videos { padding: 12px; }
  .videos__item { flex-basis: 80%; }
}