/* ==========================================================================
   House16 — 首頁
   ========================================================================== */

/* --------------------------------------------------------------------------
   首屏
   刻意不用「全幅照片壓黑色遮罩」那套（每間民宿都這樣做，而且會把照片弄髒）。
   改成不等分的左右分割：左側畫布白的文字面板（YSL 的留白），
   右側整張照片不加遮罩。蒙德里安的線就是這個版面的分隔線本身。
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 100svh;
  border-bottom: var(--line);
}

.hero__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem var(--gutter) 4rem;
  border-right: var(--line);
  overflow: hidden;

  /* 橫線的位置。刻意用固定的 rem 而非百分比：
     面板高度會隨內容與視窗變動，任何百分比遲早都會壓到文字上。
     這兩個值都落在上下 padding 之內，那段區域結構上保證是空的。 */
  --line-top: 6rem;      /* < padding-top 8rem */
  --line-bottom: 2rem;   /* < padding-bottom 4rem */
}

/* 面板裡的蒙德里安骨架。線條刻意延伸出面板邊緣、不封閉成格子。 */
.hero__line {
  position: absolute;
  background: var(--ink);
  transform-origin: left top;
  animation: draw-x var(--dur-draw) var(--ease-line) forwards;
}
.hero__line--v {
  top: 0; bottom: 0;
  width: var(--line-w);
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  animation-name: draw-y;
}
.hero__line--v1 { left: 11%;  animation-delay: 250ms; }
.hero__line--v2 { left: 78%;  background: var(--hairline); animation-delay: 500ms; }
.hero__line--h {
  left: 0; right: 0;
  height: var(--line-w);
  transform: scaleX(0);
}
.hero__line--h1 { top: var(--line-top); background: var(--hairline); animation-delay: 420ms; }
.hero__line--h2 { bottom: var(--line-bottom); animation-delay: 650ms; }

/* 首屏唯一的色塊，各 22px 見方 —— 這就是「色彩是重音」的示範 */
.hero__sq {
  position: absolute;
  width: 22px; height: 22px;
  opacity: 0;
  animation: pop var(--dur) var(--ease-out) forwards;
}
/* 色塊跟著同一組變數走，才會落在線的交叉點上 */
.hero__sq--red    { left: 11%; top: var(--line-top);    background: var(--red);    transform: translate(-50%, -50%); animation-delay: 900ms; }
.hero__sq--blue   { left: 78%; bottom: var(--line-bottom); background: var(--blue);   transform: translate(-50%, 50%);  animation-delay: 1020ms; }
.hero__sq--yellow { left: 11%; bottom: var(--line-bottom); background: var(--yellow); transform: translate(-50%, 50%);  animation-delay: 1140ms; }

@keyframes draw-x { to { transform: scaleX(1); } }
@keyframes draw-y { to { transform: scaleY(1); } }
@keyframes pop    { to { opacity: 1; } }

.hero__content { position: relative; z-index: 1; }

/* 標題字級依「面板寬度」計算，不是視窗寬度。
   面板在桌機只佔 5/12，用 vw 會在中間尺寸算得太大而爆行。 */
.hero__panel { container-type: inline-size; }

.hero h1 {
  /* 最長一行是「是為了開心。」六字，約 6.5em；13cqw 可確保它塞得下 */
  font-size: min(13cqw, 4.25rem);
  line-height: 1.12;
  margin-bottom: var(--sp-3);
}

/* 每行獨立成塊且不換行——斷行位置由我們決定，不交給瀏覽器 */
.hero h1 span {
  display: block;
  white-space: nowrap;
}

/* 「開心」是品牌的核心字，給它一道黃色重音，
   讓兩行的結構讀起來是刻意的，而不是排不下才斷 */
.hero h1 em {
  font-style: normal;
  background: linear-gradient(transparent 68%, var(--yellow) 68%, var(--yellow) 94%, transparent 94%);
}

/* 舊版瀏覽器不支援容器查詢時的退路 */
@supports not (font-size: 1cqw) {
  .hero h1 { font-size: clamp(2rem, 4.4vw, 3.75rem); }
}

.hero .lead { margin-bottom: var(--sp-4); }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}

/* 官網專屬優惠：訂房引擎上既有的事實，也是最強的轉換理由。放在 CTA 正上方。 */
.hero__deal {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.75rem 0.4rem 0.6rem;
  border: var(--line-hair);
  border-left: 4px solid var(--red);
  background: var(--canvas-lift);
  margin-bottom: var(--sp-3);
}

.hero__from {
  font-size: var(--fs-micro);
  color: var(--grey);
  line-height: 1.5;
}
.hero__from b {
  font-family: var(--font-latin);
  font-size: 1.05rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hero__media {
  position: relative;
  overflow: hidden;
  background: var(--hairline);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-in 1.6s var(--ease-out) both;
}
@keyframes hero-in {
  from { transform: scale(1.06); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* 捲動提示 */
.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: 1.75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-latin);
  color: var(--grey);
}
.hero__scroll::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--grey);
  animation: slide 1.8s var(--ease-line) infinite;
  transform-origin: left;
}
@keyframes slide {
  0%, 100% { transform: scaleX(0.35); }
  50%      { transform: scaleX(1); }
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__media { order: -1; height: 58svh; min-height: 22rem; border-bottom: var(--line); }
  .hero__panel {
    padding: 3rem var(--gutter) 3.5rem;
    border-right: 0;
    /* 手機的 padding 較窄，橫線跟著縮進來，一樣待在空白帶裡 */
    --line-top: 1.5rem;     /* < padding-top 3rem */
    --line-bottom: 1.5rem;  /* < padding-bottom 3.5rem */
  }
  .hero__scroll { display: none; }
  .hero__line--v1 { left: 4%; }
  .hero__sq--red, .hero__sq--yellow { left: 4%; }
  /* 窄版時 78% 這條線會正好切過標題，往外推到版面邊緣 */
  .hero__line--v2 { left: auto; right: 4%; }
  .hero__sq--blue { left: auto; right: 4%; transform: translate(50%, 50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__line { animation: none; transform: none; }
  .hero__sq   { animation: none; opacity: 1; }
  .hero__media img { animation: none; }
  .hero__scroll::after { animation: none; transform: none; }
}

/* --------------------------------------------------------------------------
   引言 + 數字
   -------------------------------------------------------------------------- */

.intro__statement {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.2vw, 2.375rem);
  line-height: 1.55;
  max-width: 30ch;
}
.intro__statement em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%);
}

.intro__facts { margin-top: clamp(3rem, 6vw, 5rem); padding-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   泳池
   -------------------------------------------------------------------------- */

.pool { background: var(--ink); color: var(--canvas); }
.pool .lead { color: #B9B5AC; }
.pool .eyebrow { color: var(--canvas); }
.pool .sec-num { color: #6E6A64; }
.pool .rule { background: var(--canvas); }

.pool__stack { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.pool__stack--2 { grid-template-columns: 5fr 4fr; align-items: start; }
@media (max-width: 860px) { .pool__stack--2 { grid-template-columns: 1fr; } }

/* --- 泳池輪播 -------------------------------------------------------------
   兩張夕陽照交叉淡入淡出，各自帶極慢的推近（Ken Burns），
   讓池面的光看起來是會動的。純 CSS，不需要 JS。
   -------------------------------------------------------------------------- */

.poolshow {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: var(--line-w) solid rgba(244, 241, 234, 0.18);
}
@media (max-width: 760px) {
  .poolshow { aspect-ratio: 4 / 3; }
}

.poolshow__slide {
  position: absolute;
  inset: 0;
  margin: 0;
}
.poolshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 交叉淡入：14 秒一輪，各佔一半，切換處有約 1 秒的重疊 */
.poolshow__slide--a { animation: poolshow-a 14s linear infinite; }
.poolshow__slide--b { animation: poolshow-b 14s linear infinite; opacity: 0; }

@keyframes poolshow-a {
  0%   { opacity: 1; }
  43%  { opacity: 1; }
  50%  { opacity: 0; }
  93%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes poolshow-b {
  0%   { opacity: 0; }
  43%  { opacity: 0; }
  50%  { opacity: 1; }
  93%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 緩慢推近。用 alternate 來回，避免每輪結束時畫面突然跳回原位 */
.poolshow__slide img { animation: poolshow-zoom 14s ease-in-out infinite alternate; }
.poolshow__slide--b img { animation-direction: alternate-reverse; }

@keyframes poolshow-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* 進度條：14 秒走完一輪，順便當成「這裡會動」的提示 */
.poolshow__bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--yellow);
  transform-origin: left;
  animation: poolshow-bar 7s linear infinite;
}
@keyframes poolshow-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 減少動態時：只留第一張，完全靜止 */
@media (prefers-reduced-motion: reduce) {
  .poolshow__slide--a,
  .poolshow__slide--b,
  .poolshow__slide img,
  .poolshow__bar { animation: none; }
  .poolshow__slide--b { display: none; }
  .poolshow__bar { display: none; }
}

.pool__note {
  border-left: 4px solid var(--yellow);
  padding-left: 1.1rem;
  font-size: var(--fs-small);
  color: #B9B5AC;
}

/* --------------------------------------------------------------------------
   建築故事
   -------------------------------------------------------------------------- */

.arch__quote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.35rem, 2.6vw, 1.875rem);
  line-height: 1.6;
  padding-left: 1.4rem;
  border-left: 4px solid var(--red);
}

.swatches { display: flex; gap: 0.5rem; margin-top: var(--sp-3); }
.swatch {
  width: 2.25rem; height: 2.25rem;
  border: var(--line);
}
.swatch--red { background: var(--red); }
.swatch--blue { background: var(--blue); }
.swatch--yellow { background: var(--yellow); }
.swatch--white { background: var(--paper); }
.swatch--ink { background: var(--ink); }

/* --------------------------------------------------------------------------
   綠島體驗
   目前只有海蝕洞一張可用照片，其餘三項無素材，因此採「單張大圖 +
   編號條列」而非四格圖卡。也順便和隔壁的「代訂服務」四宮格做出區別，
   避免兩個區塊長得一樣。
   -------------------------------------------------------------------------- */

.exp { border-top: var(--line); }

/* 五個項目的清單比 3:4 的照片高出一截，並排時左欄會空一大塊。
   讓照片吸附著跟讀者一起往下走，空白就變成刻意的留白而不是漏做。 */
@media (min-width: 861px) {
  #experiences .figure {
    position: sticky;
    top: 7rem;
  }
}

.exp__item {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0 1rem;
  padding: 1.5rem 0;
  border-bottom: var(--line-hair);
}

.exp__num {
  font-family: var(--font-latin);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-latin);
  color: var(--grey);
  padding-top: 0.45rem;
}
.exp__item:nth-child(4n+1) .exp__num { color: var(--red); }
.exp__item:nth-child(4n+2) .exp__num { color: var(--blue); }
.exp__item:nth-child(4n+3) .exp__num { color: #C9A100; }

.exp__item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.exp__item p {
  font-size: var(--fs-small);
  line-height: 1.85;
  color: var(--ink-70);
  margin: 0;
  max-width: 46ch;
}

@media (max-width: 520px) {
  .exp__item { grid-template-columns: 1fr; gap: 0.4rem; }
  .exp__num { padding-top: 0; }
}

/* 這一區的活動由合作教練與船家提供，需要講清楚，避免被當成館內設施 */
.exp__note {
  margin-top: var(--sp-3);
  padding-left: 1.1rem;
  border-left: 4px solid var(--blue);
  font-size: var(--fs-small);
  color: var(--ink-70);
  max-width: 54ch;
}

/* --------------------------------------------------------------------------
   館貓 Bug
   -------------------------------------------------------------------------- */

.bug {
  border-top: var(--line);
  border-bottom: var(--line);
  background: var(--canvas-lift);
  /* 貓咪未揭露時位於 translateX(-40%)，會超出視窗左緣；在此裁掉 */
  overflow: hidden;
}
.bug__inner {
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 760px) { .bug__inner { grid-template-columns: 1fr; } }

/* Bug 的實拍照。方形裁切，讓貓填滿版位而不是縮在角落 */
.bug__mark {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: var(--line);
  background: var(--hairline);
  /* 捲到這裡時從左側探頭（僅在 JS 標記 .reveal 後才藏起來） */
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur) var(--ease-out);
}
.bug__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reveal .bug__mark       { transform: translateX(-40%); opacity: 0; }
.reveal.is-in .bug__mark { transform: translateX(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bug__mark, .reveal .bug__mark { transform: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   景點
   -------------------------------------------------------------------------- */

/* 不等分的照片牆：大、小、小、中。刻意避開等分方格。 */
.spots {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.spot { position: relative; overflow: hidden; }
.spot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.spot:hover img { transform: scale(1.05); }

.spot--a { grid-column: span 7; aspect-ratio: 4 / 3; }
.spot--b { grid-column: span 5; aspect-ratio: 3 / 4; }
.spot--c { grid-column: span 5; aspect-ratio: 4 / 3; }
.spot--d { grid-column: span 7; aspect-ratio: 16 / 10; }

@media (max-width: 760px) {
  .spot--a, .spot--b, .spot--c, .spot--d { grid-column: span 12; aspect-ratio: 4 / 3; }
}

.spot__label {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--canvas);
  border-top: var(--line);
  border-right: var(--line);
  padding: 0.5rem 1rem;
  font-size: var(--fs-small);
  font-weight: 700;
}
.spot__label small { display: block; font-size: var(--fs-micro); font-weight: 400; color: var(--grey); }

/* --------------------------------------------------------------------------
   交通與聯絡
   -------------------------------------------------------------------------- */

.contact__map {
  border: var(--line);
  aspect-ratio: 4 / 3;
  width: 100%;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dur) var(--ease-out);
}
.contact__map:hover { filter: none; }

.contact__list li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--sp-2);
  padding: 0.9rem 0;
  border-bottom: var(--line-hair);
  font-size: var(--fs-small);
}
.contact__list dt,
.contact__list .k {
  font-family: var(--font-latin);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--grey);
  padding-top: 0.15rem;
}