/* ===============================================================
   結緣品說明頁 — 流體式版面
   Figma 原寸：1940 × 2755（aspect-ratio 約 1 : 1.42）
   座標系：所有絕對定位以原寸百分比換算
   =============================================================== */
* { 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: url("assets/background.png") #ffffff 50% / cover no-repeat fixed;
  background-blend-mode: darken;
  color: #51443b;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }

/* === 主頁面容器 === */
.page {
  position: relative;
  width: 100%;
  max-width: 1940px;
  margin: 0 auto;
  aspect-ratio: 1940 / 2755;
  overflow: hidden;
}

.bg-paper { display: none; }

/* === 背景虛線波紋 === */
.page__wave {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  opacity: 0.85;
  mix-blend-mode: multiply;     /* 白色背景 → 透明 */
}
.page__wave--top {
  left: 1.24%;          /* 24/1940 */
  top: 22.99%;          /* 633/2755 */
  width: 101.86%;       /* 1976/1940 (略超出) */
  aspect-ratio: 1976 / 657;
}
.page__wave--bottom {
  left: -3.92%;         /* -76/1940 */
  top: 65.59%;          /* 1807/2755 */
  width: 112.63%;       /* 2185/1940 */
  aspect-ratio: 2185 / 910;
  transform: scaleY(-1);
  opacity: 0.7;
}

/* === Hero 文字 ===================================================
   x=380 y=202 w=530   |   379/1940=19.59% 202/2755=7.33% 530/1940=27.32%
================================================================ */
.hero { position: static; }
.hero__text {
  position: absolute;
  left: 19.59%;
  top: 7.33%;
  width: 27.32%;
  z-index: 4;
}
.hero__title {
  font-family: "Noto Sans TC", "PingFang TC", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.06vw, 40px);   /* 40 / 1940 */
  line-height: 1.5;                        /* 60/40 */
  color: #66703d;
  margin: 0;
  letter-spacing: 0.02em;
}
.hero__line {
  display: block;
  white-space: nowrap;
}
.hero__em {
  display: inline-block;
  font-weight: 900;
  position: relative;
  z-index: 0;
}
/* 黃色 marker 高亮 — 對齊文字底部 1/3 區段 */
.hero__em--y {
  background-image: linear-gradient(transparent 65%, #ffd53b 65%, #ffd53b 86%, transparent 86%);
}
.hero__em--p {
  background-image: linear-gradient(transparent 65%, #ffb4c6 65%, #ffb4c6 86%, transparent 86%);
}
.hero__subtitle {
  margin-top: clamp(16px, 1.55vw, 30px);
  font-weight: 700;
  font-size: clamp(13px, 0.93vw, 18px);
  line-height: 1.55;
  color: #765e48;
}

/* === 蝴蝶 ==========================================================
   x=1112 y=-309 w=1140 h=1072
   1112/1940=57.32%    -309/2755=-11.21%   1140/1940=58.79%
================================================================ */
.hero__butterfly {
  position: absolute;
  left: 42.32%;
  top: -3.21%;
  width: 58.79%;
  aspect-ratio: 1140 / 1072;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

/* === Hero 圓形照片（巢狀在 .story--01 內，桌機絕對定位疊在蝴蝶暈染上）
   image 1 (109:1870)  page(1224, 587) 209×209  → story--01 相對 (698, -138)
   image 2 (111:1873)  page(1376, 707) 209×209  → story--01 相對 (850, -18)
   story--01 寬 803、高 167
================================================================ */
.hero__photo {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  z-index: 4;
  user-select: none;
  pointer-events: none;
  width: 26.03%;          /* 209/803 */
}
.hero__photo--1 {
  left: 86.93%;           /* 698/803 */
  top: -82.63%;           /* -138/167 */
}
.hero__photo--2 {
  left: 105.85%;          /* 850/803 */
  top: -10.78%;           /* -18/167 */
}
.hero__butterfly img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;

}

/* === 吊飾 ==========================================================
   x=-153 y=678 w=1028 h=967
   -153/1940=-7.89%    678/2755=24.61%    1028/1940=52.99%
================================================================ */
.pendant {
  position: absolute;
  left: -7.89%;
  top: 24.61%;
  width: 52.99%;
  aspect-ratio: 1028 / 967;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}
.pendant img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;

}

/* === 故事三段（曾經 / 轉折 / 重生） =================================
   step01 x=526 y=725  w=803  → 27.11% / 26.32% / 41.39%
   step02 x=705 y=967  w=735  → 36.34% / 35.10% / 37.89%
   step03 x=1007 y=1205 w=684 → 51.91% / 43.74% / 35.26%
================================================================ */
.story {
  position: absolute;
  z-index: 5;
  font-family: "Noto Sans TC", "PingFang TC", sans-serif;
  color: #5a4738;
}
.story__header {
  display: block;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;

}
.story__body {
  margin: 0;
  position: absolute;
  font-weight: 700;
  font-size: clamp(13px, 0.93vw, 18px);
  line-height: 1.6;
  color: #5a4738;
}

/* step01: header (485w 167h) + body (378w 78h, x=435 y=89) inside 803x167 */
.story--01 {
  left: 27.11%;     /* 526/1940 */
  top: 26.32%;      /* 725/2755 */
  width: 41.39%;    /* 803/1940 */
  aspect-ratio: 803 / 167;
}
.story--01 .story__header {
  width: 60.40%;    /* 485/803 */
  aspect-ratio: 485 / 168;
}
.story--01 .story__body {
  left: 51%;
  top: 53.29%;      /* 89/167  */
  right: 0;
}

/* step02: header (405w 167h) + body (306w 130h, x=429 y=37) inside 735x167 */
.story--02 {
  left: 36.34%;     /* 705/1940 */
  top: 35.10%;      /* 967/2755 */
  width: 37.89%;    /* 735/1940 */
  aspect-ratio: 735 / 167;
}
.story--02 .story__header {
  width: 55.17%;    /* 405/735 */
  aspect-ratio: 405 / 168;
}
.story--02 .story__body {
  left: 55%;
  top: 22.63%;      /* 37/167  */
  right: 0;
}

/* step03: header (485w 167h) + photo grid below inside 684x672 */
.story--03 {
  left: 51.91%;     /* 1007/1940 */
  top: 43.74%;      /* 1205/2755 */
  width: 35.26%;    /* 684/1940 */
  height: auto;
}
.story--03 .story__header {
  width: 70.91%;    /* 485/684 */
  aspect-ratio: 485 / 168;
  position: relative;
}

/* 重生 — 兩段照片
   Step03 frame 684×672；header 167h；photos area 684×492 (top=180)
   Row 1 (Frame 2610124): x=88 y=0   w=492 h=240
     - text  block at x=0  y=35  w=240 h=170 (label + body)
     - photo at  x=252 y=0   w=240 h=240
   Row 2 (Frame 2610123): x=88 y=252 w=684 h=240   ← 比 frame 寬，會超出右側
     - text  block at x=120 y=22  w=312 h=196
     - photo at  x=444 y=0   w=240 h=240
================================================================ */
.story__photos {
  position: relative;
  width: 100%;
  aspect-ratio: 684 / 492;
  margin-top: clamp(8px, 0.62vw, 12px);
}

.story__row {
  position: absolute;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 28px);
  height: 48.78%;
  width: 100%;
}
.story__row--paro {
  left: 12.87%;
  top: 0;
}
.story__row--lumbini {
  left: 26.87%;
  top: 51.22%;        /* 252/492 */
}
/* PNG 為 1.5x export，顯示尺寸 = 原圖寬 / 1.5（= Figma 設計尺寸） */
.story__label {
  height: auto;
  align-self: center;
  flex: 0 0 auto;
}
.story__row--paro .story__label {
  width: clamp(160px, 12.37vw, 240px);   /* 360 / 1.5 = 240 */
}
.story__row--lumbini .story__label {
  width: clamp(208px, 16.08vw, 312px);   /* 468 / 1.5 = 312 */
}
.story__photo {
  /* PNG 為 1.5x export (720×720)，顯示尺寸 = 720/1.5 = 480 */
  width: clamp(160px, 12.37vw, 240px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;     /* PNG 已有圓形 mask + 透明邊 */
  flex: 0 0 auto;
}

/* === 手寫筆觸 ======================================================
   x=490 y=1256 w=426
   25.26% / 45.59% / 21.96%
================================================================ */
.handwrite {
  position: absolute;
  left: 25.26%;
  top: 45.59%;
  width: 21.96%;
  aspect-ratio: 426 / 165;
  z-index: 4;
  user-select: none;
  pointer-events: none;

}

/* === 結語 + 奶油色暈染 =============================================
   blob:    x=363 y=1552 w=472 h=534  → 18.71% / 56.33% / 24.33%
   text:    x=462 y=1613 w=408 h=432  → 23.81% / 58.55% / 21.03%
================================================================ */
.closing {
  position: absolute;
  left: 18.71%;
  top: 56.33%;
  width: 24.33%;
  aspect-ratio: 472 / 534;
  z-index: 4;
}
.closing__blob {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  z-index: 1;

}
.closing__text {
  position: absolute;
  /* 文字水平與 blob 的對位（462-363）/472=20.97%；垂直起點 (1613-1552)/534=11.42% */
  left: 18%;
  top: 8%;
  width: 90%;
  margin: 0;
  font-family: "Noto Sans TC", "PingFang TC", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.18vw, 22px);
  line-height: 1.95;        /* 緊一點，放得進 blob */
  color: #434343;
  z-index: 2;
}

/* === 影片區 ======================================================
   x=380 y=2140 w=1180  → 19.59% / 77.68% / 60.82%
   主縮圖 880 / 4.49% gap / 側欄 279
================================================================ */
.videos {
  position: absolute;
  left: 19.59%;
  top: 77.68%;
  width: 60.82%;
  display: grid;
  grid-template-columns: 74.58% 4.49% 20.93%;
  align-items: stretch;
  z-index: 5;
}
/* 只剩主播放（無側欄縮圖）時，主影片置中、限縮在 880px 設計寬內 */
.videos-solo .videos {
  grid-template-columns: 1fr;
  justify-items: center;
}
.videos-solo .videos__main {
  grid-column: 1 / -1;
  width: 74.58%;
  max-width: 880px;
}
.videos-solo .videos__list { display: none; }
.videos__main {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
}
.videos__main-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 880 / 496;
  flex: 0 0 auto;
  overflow: hidden;
  background: #5a544f;
  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;
  gap: clamp(8px, 0.62vw, 12px);
}
.videos__item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.videos__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 279 / 496;
  overflow: hidden;
  background: #5a544f;
  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;
  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;
}

/* === 播放按鈕 === */
.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);
  background: #ffffff;
  cursor: pointer;
  transition: transform 0.2s ease;
  padding: 0;
}
.play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.play-btn span {
  position: absolute;
  top: 50%;
  left: 56%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.7em 0 0.7em 1em;
  border-color: transparent transparent transparent #d8554f;
}
.play-btn--sm {
  width: 28%;
  border-width: 2px;
}

/* ============================================================
   墨水暈染（保留原 anime.js 行為）
============================================================ */
.ink-reveal { --cx: 50%; --cy: 50%; }
.ink-reveal img { display: block; }
.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
============================================================ */

/* ---- 平板 (768-1199px)：保留桌機 absolute 排版，按比例縮小字級與圖片 ---- */
@media (min-width: 768px) and (max-width: 1199px) {
  .hero__title    { font-size: 2.06vw; line-height: 1.4; }
  .hero__subtitle { font-size: 1.05vw; line-height: 1.5; margin-top: 1.2vw; }
  .story__body    { font-size: 1.0vw;  line-height: 1.5; }
  .closing__text  { font-size: 1.45vw; line-height: 1.85; }
  .videos__item-title { font-size: 1.0vw; }

  /* Step03 重生：拿掉 clamp 的最小值，整體按 step03 寬度比例縮小 */
  .story__row {
    gap: 1.5vw;
  }
  .story__row--paro .story__label {
    width: 12.37vw;
  }
  .story__row--lumbini .story__label {
    width: 16.08vw;
  }
  .story__photo {
    width: 12.37vw;
  }
}

/* ---- 手機（< 768px）：解除桌面絕對定位，改自然垂直堆疊 ---- */
@media (max-width: 767px) {
  .page {
    aspect-ratio: auto;
    height: auto;
    padding-bottom: 32px;
  }
  .bg-paper { background-size: cover; background-position: top center; }
  .page__wave { display: none; }

  /* 全部解除絕對定位 */
  .hero, .pendant, .story, .handwrite, .closing, .videos {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
  }

  /* HERO */
  .hero {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .hero__text {
    position: static;
    width: 100%;
    order: 2;
    padding: 12px 20px 0;
  }
  .hero__title {
    font-size: clamp(20px, 5.6vw, 30px);
    line-height: 1.55;
  }
  .hero__line { white-space: normal; }
  .hero__subtitle {
    font-size: clamp(13px, 3.6vw, 16px);
    line-height: 1.7;
    margin-top: 12px;
  }
  .hero__butterfly {
    position: static;
    width: 110%;                  /* 超出視窗寬度，配合裁掉 PNG 兩側透明 */
    max-width: none;
    margin: -6% -5% 0;            /* 負上邊距、左右各裁 5% */
    align-self: stretch;
    aspect-ratio: 938 / 600;      /* 比 PNG 原比例(938/764)更扁，裁掉下方透明 */
    order: 1;
    overflow: hidden;
  }
  .hero__butterfly img {
    object-fit: cover;
    object-position: center 35%;
    transform: scale(1.15);
    transform-origin: center;
  }
  /* hero 圓形照片在 mobile：疊在 step01 標頭右上角 */
  .hero__photo {
    position: absolute;
    width: clamp(80px, 22vw, 140px);
    z-index: 6;
  }
  .hero__photo--1 {
    left: auto;
    right: 18%;
    top: -28%;
  }
  .hero__photo--2 {
    left: auto;
    right: 0;
    top: 0;
  }

  /* PENDANT —— 滿版貼左、與下方故事略疊 */
  .pendant {
    position: relative;
    left: -7.89%;
    top: auto;
    width: 96%;
    max-width: 540px;
    margin: 8px -3% 0 -3%;
    aspect-ratio: 1028 / 967;
    align-self: flex-start;
  }

  /* STORY —— 整段置中堆疊 */
  .story {
    position: relative;
    left: auto; top: auto;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    margin: 18px 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .story__header {
    position: static;
    width: clamp(240px, 70%, 380px);
    aspect-ratio: 485 / 168;
  }
  .story__body {
    position: static;
    width: 100%;
    font-size: 15px;
    line-height: 1.75;
  }

  /* 03 重生：標頭 + 兩段照片區 */
  .story--03 .story__photos {
    position: static;
    aspect-ratio: auto;
    width: 100%;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .story__row,
  .story__row--paro,
  .story__row--lumbini {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  .story__row--paro .story__label,
  .story__row--lumbini .story__label {
    width: clamp(160px, 42vw, 240px);
    flex: 0 0 auto;
  }
  .story__row--lumbini .story__label {
    width: clamp(180px, 48vw, 280px);
  }
  .story__photo {
    width: clamp(140px, 38vw, 220px);
    flex: 0 0 auto;
  }

  /* 手寫筆觸 */
  .handwrite {
    position: relative;
    left: auto; top: auto;
    width: 76%;
    max-width: 380px;
    margin: 24px auto 12px;
    aspect-ratio: 426 / 165;
  }

  /* 結語 + 奶油色暈染 */
  .closing {
    position: relative;
    left: auto; top: auto;
    width: 92%;
    max-width: 460px;
    margin: 12px auto 28px;
    aspect-ratio: 472 / 534;
  }
  .closing__text {
    font-size: 16px;
    line-height: 1.95;
    left: 14%;
    top: 8%;
    width: 80%;
  }

  /* 影片區 */
  .videos {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    margin-top: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .videos__main { grid-column: auto; }
  .videos-solo .videos__main { width: 100%; }
  .videos__main-thumb { aspect-ratio: 16 / 9; }
  .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; }
}

/* ---- 超窄手機 ---- */
@media (max-width: 380px) {
  .hero { padding: 0 16px; }
  .videos { padding: 12px; }
}