@charset "UTF-8";
/* =========================================================
   Emerald Cove Hotel — 設計稿寬 1920px
   1rem = 10px @1920（桌機依視窗等比縮放）
   ========================================================= */

:root {
  --c-primary: #54738b;      /* 區塊藍底 */
  --c-footer: #4e6b81;
  --c-blue: #6587a1;         /* 主標藍 */
  --c-blue-dark: #365b70;
  --c-blue-mid: #52718a;
  --c-blue-light: #a3bac9;   /* 淡藍英文 */
  --c-cream: #f3f1ee;
  --c-text: #262626;
  --c-text-2: #474747;
  --c-text-3: #707070;
  --c-text-4: #7b7b7b;
  --c-white: #fff;

  --ff-en: "Poppins", sans-serif;
  --ff-serif: "Noto Serif TC", serif;
  --ff-sans: "Noto Sans TC", sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: calc(100vw / 192);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 1920px) { html { font-size: 10px; } }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: max(1.6rem, 13px);
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.wrap {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.imgBox { overflow: hidden; }
.imgBox img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- reveal ---------- */
.js-motion [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js-motion [data-reveal].is-show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- 共用按鈕 ---------- */
.btnBracket {
  display: inline-flex;
  align-items: center;
  gap: 4rem;
  font-family: var(--ff-sans);
  font-size: max(1.6rem, 13px);
  letter-spacing: .02em;
  color: var(--c-blue);
  transition: gap .4s var(--ease);
}
.btnBracket::before,
.btnBracket::after { font-family: var(--ff-en); font-weight: 300; font-size: max(2rem, 15px); }
.btnBracket::before { content: "(("; }
.btnBracket::after { content: "))"; }
.btnBracket:hover { gap: 2rem; }
.btnBracket--white { color: var(--c-white); }

/* =========================================================
   header
   ========================================================= */
/* 尺寸換算自 elementis.co（1440 寬設計稿：1px ≈ .1333rem；選單字級依視窗高度） */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: var(--c-white);
  transition: transform .8s cubic-bezier(.24, .43, .15, .97), background-color .6s var(--ease), color .6s var(--ease);
}
.header > .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 15.3rem;
  padding: 0 8.53rem;
  transition: height .6s var(--ease);
}
.header .logo {
  justify-self: start;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: max(2.8rem, 18px);
  letter-spacing: .01em;
}
.header .navBox { display: flex; gap: 3.2rem; }
.header .navBox a,
.header .bookBtn { position: relative; font-family: var(--ff-en); font-weight: 400; font-size: max(2.13rem, 13px); line-height: 1; }
/* 連結底線：由右收、由左出 */
.header .navBox a::before {
  content: ""; position: absolute; left: 0; bottom: -.4rem; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .8s cubic-bezier(.24, .43, .15, .97);
}
.header .navBox a:hover::before { transform: scaleX(1); transform-origin: left center; }
.header .actionBox { justify-self: end; display: flex; align-items: center; gap: 5.33rem; }
.header .bookBtn {
  display: inline-flex; align-items: center; gap: 2.13rem;
  padding: 14px 30px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  transition: box-shadow .8s cubic-bezier(.24, .43, .15, .97);
}
.header .bookBtn svg { width: max(1.33rem, 9px); height: auto; }
.header .bookBtn:hover { box-shadow: inset 0 0 0 1px currentColor; }
/* 漢堡：三條線依序往右滑出、新線由左補進 */
.header .menuBtn {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  width: max(3.73rem, 24px); height: max(2.53rem, 16px); padding: 0; border: 0;
  background: none; color: inherit; cursor: pointer; overflow: hidden;
}
.header .menuBtn::after { content: ""; position: absolute; inset: -100% -60%; }
.header .menuBtn i { position: relative; display: block; width: 100%; height: 1px; background: currentColor; transition: transform .8s cubic-bezier(.24, .43, .15, .97); }
.header .menuBtn i::before { content: ""; position: absolute; inset: 0; background: currentColor; transform: translateX(-170%); }
.header .menuBtn i:nth-child(2) { transition-delay: .15s; }
.header .menuBtn i:nth-child(3) { transition-delay: .3s; }
.header .menuBtn:hover i { transform: translateX(170%); }
/* 捲動後：淺色底、深色字、高度縮小；往下捲時隱藏、往上捲時出現 */
.header.is-scrolled { background: rgba(243, 241, 238, .92); color: var(--c-blue-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.header.is-scrolled > .wrap { height: 10.6rem; }
.header.is-scrolled .bookBtn { box-shadow: inset 0 0 0 1px rgba(54, 91, 112, .4); }
.header.is-scrolled .bookBtn:hover { box-shadow: inset 0 0 0 1px currentColor; }
.header.is-hidden { transform: translateY(-100%); }

/* ---------- 全螢幕選單（展開動畫由 main.js 的 GSAP 控制） ---------- */
.menu {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-columns: 41.5% 1fr;
  background: transparent;
  visibility: hidden; pointer-events: none;
}
.menu.is-open { visibility: visible; pointer-events: auto; }
.menuMedia { position: relative; overflow: hidden; clip-path: inset(100% 0 0 0); }
.menuMedia img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.menuPanel {
  position: relative; display: flex; align-items: center;
  color: var(--c-blue-dark);
}
/* 底色層：比圖片早一步由下往上展開（模擬原站整片底色先升起） */
.menu::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-cream); clip-path: var(--menu-bg, inset(100% 0 0 0)); }
.menuClose {
  position: absolute; top: 4rem; right: 9.2rem; width: max(3.73rem, 24px); height: max(3.73rem, 24px);
  padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; color: inherit;
}
.menuClose::after { content: ""; position: absolute; inset: -60%; }
.menuClose i { position: absolute; left: 50%; top: 50%; width: 100%; height: 1px; overflow: hidden; }
.menuClose i:nth-child(1) { transform: translate(-50%, -50%) rotate(135deg); }
.menuClose i:nth-child(2) { transform: translate(-50%, -50%) rotate(-135deg); }
.menuClose i::before, .menuClose i::after { content: ""; position: absolute; inset: 0; background: currentColor; transition: transform .8s cubic-bezier(.24, .43, .15, .97); }
.menuClose i::after { transform: translateX(-170%); }
.menuClose i:nth-child(1)::before, .menuClose i:nth-child(1)::after { transition-delay: .15s; }
.menuClose:hover i::before { transform: translateX(170%); }
.menuClose:hover i::after { transform: translateX(0); }
.menuInner { width: 100%; padding: 8.6svh 8.53rem 4.3svh 12.8rem; }
.menuLabel { margin: 0; font-family: var(--ff-en); font-weight: 400; font-size: max(2.22svh, 13px); line-height: 1; color: rgba(54, 91, 112, .5); }
.menuLinks {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: column; grid-template-rows: repeat(4, auto);
  margin: 7.9svh 0 9.9svh; padding: 0; list-style: none;
}
.menuLinks a { position: relative; display: flex; align-items: center; padding: max(1rem, 7px) 0; font-family: var(--ff-en); font-weight: 300; font-size: max(3.69svh, 20px); line-height: 1; }
.menuLinks .txt { position: relative; transition: transform .5s cubic-bezier(.24, .43, .15, .97); }
.menuLinks .txt::before {
  content: ""; position: absolute; left: 0; bottom: -.1em; width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center; transition: transform .8s cubic-bezier(.24, .43, .15, .97);
}
.menuLinks .arrow {
  position: absolute; left: 0; top: 50%; font-size: .6em; line-height: 1;
  transform: translate(-150%, -50%); opacity: 0;
  transition: transform .5s cubic-bezier(.24, .43, .15, .97), opacity .4s;
}
.menuLinks a:hover .txt { transform: translateX(5.33rem); }
.menuLinks a:hover .arrow { transform: translate(0, -50%); opacity: 1; }
.menuLinks a.is-current { pointer-events: none; }
.menuLinks a.is-current .txt::before { transform: scaleX(1); transform-origin: left center; }
.menuItem + .menuItem { margin-top: 5.9svh; }
.menuItem .menuLabel { margin-bottom: 2.7svh; }
.menuContact { display: flex; flex-wrap: wrap; gap: 2.4rem; margin: 0; font-family: var(--ff-en); font-size: max(2.22svh, 13px); line-height: 1; }
.menuContact span { opacity: .6; }
.menuSocial { display: flex; gap: 5.3rem; }
.menuSocial svg { width: max(3.6rem, 20px); height: auto; }
.menuSocial a { transition: opacity .4s; }
.menuSocial a:hover { opacity: .55; }
.menuPolicy { font-family: var(--ff-en); font-size: max(1.87rem, 12px); }
html.is-menu-open { overflow: hidden; }

/* =========================================================
   bannerArea
   ========================================================= */
.bannerArea {
  position: relative;
  height: 99rem;
  overflow: hidden;
  color: var(--c-white);
}
.bannerArea .bgBox { position: absolute; inset: 0; }
.bannerArea .bgBox img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bannerArea .titleBox {
  padding-top: 35.5rem;
  text-align: center;
}
.bannerArea .decotitle { font-family: var(--ff-en); font-size: max(1.6rem, 12px); letter-spacing: .02em; }
.bannerArea .title { margin-top: 1.4rem; font-family: var(--ff-en); font-weight: 400; font-size: 8.8rem; line-height: 1.2; }
.bannerArea .subtitle { margin-top: 1.2rem; font-family: var(--ff-serif); font-weight: 700; font-size: 3.8rem; letter-spacing: .05em; }
.bannerArea .text { width: max(39.8rem, 300px); margin: 2.2rem auto 0; font-size: max(1.6rem, 13px); line-height: 1.5; letter-spacing: .04em; }

/* =========================================================
   aboutArea
   ========================================================= */
.aboutArea {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-cream);
}
.aboutArea > .imgBox { height: 110rem; }
.aboutArea > .wrap { padding: 14.9rem 0 8rem; background: var(--c-cream); }
.aboutArea .titleBox { text-align: center; }
.aboutArea .decotitle { font-family: var(--ff-en); font-size: max(1.6rem, 12px); color: #949494; }
.aboutArea .title { margin-top: .4rem; font-family: var(--ff-en); font-weight: 400; font-size: 6rem; line-height: 1.25; color: var(--c-blue); }
.aboutArea .subtitle { margin-top: .6rem; font-family: var(--ff-serif); font-weight: 700; font-size: 2.8rem; letter-spacing: .05em; color: var(--c-text); }

.aboutArea .dataBox { margin-top: 6.6rem; }
.aboutArea .dataList {
  display: grid;
  grid-template-columns: 1fr 36.5rem 1fr;
  gap: 5rem;
  align-items: center;
}
.aboutArea .dataItem--left { text-align: right; }
.aboutArea .dataItem .title { font-weight: 400; font-size: max(1.6rem, 12px); letter-spacing: .02em; color: var(--c-blue); }
.aboutArea .dataItem .subtitle { margin-top: 1.4rem; font-size: max(1.6rem, 13px); color: var(--c-text); }
.aboutArea .dataItem--img .imgBox { height: 43.6rem; }

.aboutArea .titleBox--bottom { margin-top: 5.4rem; }
.aboutArea .titleBox--bottom .text {
  width: 48.8rem;
  margin: 0 auto;
  font-size: max(1.6rem, 12px);
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--c-text-2);
}
.aboutArea .btnBox { margin-top: 1.6rem; }

/* =========================================================
   roomsArea
   ========================================================= */
.roomsArea {
  padding: 16.4rem 0 17.7rem;
  background: var(--c-primary);
  color: var(--c-white);
  overflow: hidden;
}
.roomsArea > .wrap > .titleBox { text-align: center; }
.roomsArea > .wrap > .titleBox .decotitle { font-family: var(--ff-serif); font-weight: 700; font-size: 2.4rem; letter-spacing: .04em; }

/* slogan：依設計稿交錯排版 */
.sloganBox {
  position: relative;
  width: 133.3rem;
  height: 33.6rem;
  margin: 4.9rem 0 0 33.5rem;
}
.sloganItem {
  position: absolute;
  font-family: var(--ff-en);
  font-weight: 400;
  font-size: 6.4rem;
  line-height: 8rem;
  white-space: nowrap;
  color: #eff3f2;
}
.sloganItem--light { color: var(--c-blue-light); }
.sloganItem--zh { font-family: var(--ff-serif); font-size: 2.4rem; color: var(--c-white); }
.sloganBox .s1 { top: .7rem; left: 0; width: 35rem; text-align: right; }
.sloganLine { position: absolute; top: 4.7rem; left: 38.5rem; width: 11.3rem; height: 1px; background: rgba(255, 255, 255, .3); }
.sloganBox .s2 { top: .7rem; left: 54.7rem; }
.sloganBox .s3 { top: 8.7rem; left: 0; }
.sloganBox .s4 { top: 8.7rem; left: 80.2rem; }
.sloganBox .s5 { top: 16.7rem; left: 0; }
.sloganBox .s6 { top: 16.7rem; left: 54.7rem; }
.sloganBox .s7 { top: 16.7rem; left: 80.3rem; }
.sloganBox .s8 { top: 24.7rem; left: 56.3rem; }

/* room */
.roomBox .txtBox { padding: 18.9rem 0 0 14.4rem; }
.roomBox .decotitle { font-size: max(1.6rem, 12px); letter-spacing: .14em; }
.roomBox .decotitle i { margin: 0 1rem; font-style: normal; }
.roomBox .title { margin-top: 1.4rem; font-family: var(--ff-en); font-weight: 400; font-size: 4.8rem; line-height: 1.3; color: #a8bfce; }
.roomBox .subtitle { margin-top: 1.6rem; font-family: var(--ff-serif); font-weight: 700; font-size: 3.6rem; line-height: 1.45; letter-spacing: .04em; }
.roomBox .text { width: 43rem; margin-top: 2.6rem; font-size: max(1.6rem, 12px); line-height: 1.9; color: rgba(255, 255, 255, .88); }

/* experience drag list */
.expBox {
  position: relative;
  margin-top: 19.6rem;
}
.expBox .dataList {
  display: flex;
  gap: 4.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.expBox .dataList::-webkit-scrollbar { display: none; }
.expBox .dataList.is-dragging { cursor: grabbing; }
.expBox .dataItem { flex: 0 0 34.8rem; }
.expBox .dataItem .imgBox { height: 34.8rem; }
.expBox .dataItem--link {
  flex-basis: 35.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dragCursor {
  position: absolute;
  top: 50%;
  left: 109.9rem;
  z-index: 3;
  width: 16.7rem;
  height: 16.7rem;
  margin-top: -8.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-blue);
  font-size: max(1.6rem, 12px);
  color: var(--c-white);
  pointer-events: none;
  transition: transform .3s var(--ease);
}
.dragCursor.is-follow { transition: none; }
.expBox .dataList.is-dragging + .dragCursor { transform: scale(.85); }

/* =========================================================
   resortArea
   ========================================================= */
.resortArea {
  position: relative;
  padding: 19.8rem 0 16.5rem;
  background: #eef3f6;
}
/* 固定背景（不用 background-attachment: fixed，避免捲動時整塊重繪；手機也有效） */
.resortArea .bgFixed { position: absolute; inset: 0; z-index: 0; clip-path: inset(0); pointer-events: none; }
.resortArea .bgImg { position: fixed; inset: 0; background: url(../images/water-bg.jpg) center / cover no-repeat; }
.resortArea .bgVideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); } /* 裁掉影片檔邊緣的黑線 */
.resortArea > .wrap { z-index: 1; }
.resortArea > .wrap > .titleBox { text-align: center; }
.resortArea .titleBox .decotitle { font-family: var(--ff-en); font-size: max(1.6rem, 12px); color: var(--c-blue-mid); }
.resortArea .titleBox .title { margin-top: 2.6rem; font-family: var(--ff-en); font-weight: 400; font-size: 6.4rem; line-height: 1.2; color: var(--c-blue); }
.resortArea .titleBox .subtitle { margin-top: 1.8rem; font-family: var(--ff-serif); font-weight: 700; font-size: 2.8rem; letter-spacing: .05em; color: #323232; }

.dayBox {
  position: relative;
  width: 167.1rem;
  height: 77.2rem;
  margin: 11.8rem 0 0 15.9rem;
}
.dayBox > * { position: absolute; }
.dayBox .introBox { top: 1.4rem; left: .2rem; width: 22rem; }
.dayBox .introBox .title { font-family: var(--ff-en); font-weight: 400; font-size: 2.4rem; color: var(--c-blue); }
.dayBox .introBox .text { margin-top: 1.4rem; font-size: max(1.3rem, 11px); line-height: 1.3; color: #8a8a8a; }
.dayBox .timeBox {
  top: 20.8rem;
  left: 0;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 7.4rem;
  letter-spacing: .06em;
  color: var(--c-blue);
}
.dayBox .paren {
  top: 16.4rem;
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: 15rem;
  line-height: 1;
  color: var(--c-blue);
}
.dayBox .paren--left { left: 26.6rem; }
.dayBox .paren--right { left: 127.8rem; }
.dayBox .storyTitle {
  top: 21.2rem;
  left: 34.1rem;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.45;
  letter-spacing: .04em;
  color: var(--c-text);
}
.dayBox > .imgBox { top: 0; left: 59.3rem; width: 40rem; height: 50rem; }
.dayBox .storyText {
  top: 19.6rem;
  left: 103.7rem;
  width: 22rem;
  font-size: max(1.5rem, 12px);
  line-height: 1.8;
  color: #333;
}
.dayBox .tagline {
  top: 21rem;
  left: 136.8rem;
  display: grid;                 /* 5 組重疊在同一格，隨時段切換 */
  font-family: var(--ff-en);
  font-size: 4rem;
  line-height: 5.5rem;
  white-space: nowrap;
  color: var(--c-blue);
}
.dayBox .tagline .swapItem { grid-area: 1 / 1; display: flex; flex-direction: column; }
.dayBox .tagline span { display: block; }
.dayBox .tagline span:first-child { color: #a7bac8; }

/* 文字/圖片切換動畫 */
.dayBox .js-fade { transition: opacity .35s ease, transform .35s ease; }
.dayBox .js-fade.is-out { opacity: 0; transform: translateY(10px); }

.tagBox { inset: 0; pointer-events: none; }
.tagBox .tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: max(2rem, 13px);
  line-height: 1.35;
  color: var(--c-text-3);
  white-space: nowrap;
  pointer-events: auto;
  transition: color .3s;
}
.tagBox .tag:hover,
.tagBox .tag.is-active { color: var(--c-blue); }
.tagBox .pointer {
  position: absolute;
  top: 76.7rem;
  left: 78.4rem;
  width: 13.6rem;
  height: 1px;
  background: #8a8a8a;
  transform-origin: 0 50%;
  transform: rotate(var(--deg, -38deg));
  transition: transform .6s var(--ease);
}
.tagBox .pointer::before {
  content: "";
  position: absolute;
  left: -.35rem;
  top: -.3rem;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: #5b5b5b;
}
.dayBox .note {
  top: 63.7rem;
  left: 136.8rem;
  width: 23rem;
  font-size: max(1.3rem, 11px);
  line-height: 1.3;
  color: var(--c-text-3);
}


/* =========================================================
   bookingArea
   ========================================================= */
/* 滿版背景 CTA：背景圖 + 藍灰遮罩，置中白字 */
.bookingArea {
  position: relative;
  display: grid;
  place-items: center;
  padding: 14rem 0 10rem;
  text-align: center;
  color: var(--c-white);
  background: var(--c-cream); /* 背景圖展開前露出的頁面底色 */
  overflow: hidden;
}
.bookingBg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bookingBg img { width: 100%; height: 100%; object-fit: cover; }
.bookingShade { position: absolute; inset: 0; background: #0000007a; }
.bookingArea > .wrap { position: relative; z-index: 1; }
.bookingArea .titleBox { width: 95rem; margin: 0 auto; }
.bookingArea .decotitle { font-family: var(--ff-en); font-size: max(1.8rem, 12px); letter-spacing: .12em; color: rgba(255, 255, 255, .8); }
.bookingArea .title { margin-top: 2rem; font-family: var(--ff-en); font-weight: 400; font-size: 8rem; line-height: 1.15; color: var(--c-white); }
.bookingArea .title span { color: #d6e3ea; }
.bookingArea .subtitle { margin-top: 2.6rem; font-family: var(--ff-serif); font-weight: 700; font-size: 3.6rem; letter-spacing: .03em; color: var(--c-white); }
.bookingArea .text { width: 57rem; margin: 2.8rem auto 0; font-size: max(1.6rem, 12px); line-height: 2; color: rgba(255, 255, 255, .88); }
.bookingArea .btnBox { margin-top: 5.6rem; }
.bookingArea .btnArrow { color: var(--c-white); }
.bookingArea .btnArrow:hover .icon { background: var(--c-white); color: var(--c-blue-dark); }
.bookingArea .marqueeBox--small { position: relative; z-index: 1; }
.bookingArea .marqueeBox--small span { color: rgba(255, 255, 255, .75); letter-spacing: .14em; }
.btnArrow {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: max(2.4rem, 16px);
  letter-spacing: .06em;
  color: var(--c-blue-dark);
}
.btnArrow .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.8rem;
  height: 5.8rem;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background .4s, color .4s;
}
.btnArrow .icon svg { width: 2.4rem; height: 2.4rem; min-width: 18px; transition: transform .4s var(--ease); }
.btnArrow:hover .icon { background: var(--c-blue-dark); color: var(--c-white); }
.btnArrow:hover .icon svg { transform: translateX(.4rem); }

/* marquee */
.marqueeBox { overflow: hidden; white-space: nowrap; }
.marqueeBox .track { display: inline-flex; animation: marquee 70s linear infinite; }
.marqueeBox--small { width: 47.6rem; margin: 5rem auto 0; }
.marqueeBox--small { text-align: center; }
.marqueeBox--small .track { display: inline-block; animation: none; }
.marqueeBox--small span { font-family: var(--ff-en); font-size: max(1.4rem, 11px); color: var(--c-primary); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marqueeBox .track { animation: none; } }

/* =========================================================
   footer
   ========================================================= */
.footer { background: var(--c-footer); color: var(--c-white); }
.footer > .wrap { padding: 0 8.6rem; }
.footer .topBox {
  display: grid;
  grid-template-columns: 78.4rem 1fr;
  padding: 5.8rem 0 5.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer .brandBox .logo { font-family: var(--ff-serif); font-size: 4rem; line-height: 1.2; color: var(--c-cream); }
.footer .brandBox .decotitle { margin-top: 3.4rem; font-family: var(--ff-en); font-size: max(1.5rem, 11px); color: #b8c4cd; }
.footer .brandBox .text { margin-top: 1.6rem; font-size: max(1.5rem, 11px); color: #b8c4cd; }
.footer .navBox { display: grid; grid-template-columns: repeat(3, 34.2rem); }
.footer .linkBox { padding-top: 2.1rem; }
.footer .linkBox .title { font-weight: 400; font-size: max(1.6rem, 12px); }
.footer .linkBox ul { display: grid; gap: 1.6rem; margin-top: 2.2rem; }
.footer .linkBox a { font-size: max(1.5rem, 12px); color: #b8c4cd; transition: color .3s; }
.footer .linkBox a:hover { color: var(--c-white); }

.marqueeBox--large { height: 24rem; display: flex; align-items: center; }
.marqueeBox--large span { font-family: var(--ff-en); font-size: 18rem; line-height: 1; color: #b5cbd4; }

.footer .bottomBox {
  display: flex;
  align-items: center;
  padding: 2.6rem 0 10.4rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: max(1.3rem, 11px);
  color: #b8c4cd;
}
.footer .copyright { font-family: var(--ff-en); margin-right: auto; }
.footer .linkList { display: flex; gap: 6.2rem; margin-right: 13.5rem; }
.footer .bottomBox a { transition: color .3s; }
.footer .bottomBox a:hover { color: var(--c-white); }
.footer .backTop { display: inline-flex; align-items: center; gap: 1.4rem; }
.footer .backTop svg { width: 1.4rem; height: 2rem; min-width: 10px; transition: transform .3s; }
.footer .backTop:hover svg { transform: translateY(-.4rem); }
.footer > .imgBox { height: 30rem; }

/* =========================================================
   Tablet / Mobile（< 1024px）— 改為流式單欄
   ========================================================= */
@media (max-width: 1023px) {
  html { font-size: 10px; }
  body { font-size: 1.5rem; }

  .header > .wrap, .header.is-scrolled > .wrap { grid-template-columns: 1fr auto; height: 6.4rem; padding: 0 2rem; }
  .header .logo { font-size: 2.2rem; }
  .header .navBox, .header .bookBtn { display: none; }
  .menu { grid-template-columns: 1fr; }
  .menuMedia { display: none; }
  .menuClose { top: 2rem; right: 2rem; }
  .menuInner { padding: 10rem 2.4rem 6rem; }
  .menuLinks { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; margin: 3.2rem 0 4rem; }
  .menuLinks a { font-size: 1.8rem; padding: 1.2rem 0; }
  .menuLinks a:hover .txt { transform: none; }
  .menuLinks .arrow { display: none; }
  .menuItem + .menuItem { margin-top: 3.2rem; }
  .menuLabel, .menuContact { font-size: 1.4rem; }
  .menuContact { flex-direction: column; gap: 1rem; }
  .menuContact span { display: none; }
  .menuPanel { overflow-y: auto; align-items: flex-start; }
  .menuSocial { gap: 2.8rem; }

  .bannerArea { height: 100svh; min-height: 56rem; display: flex; align-items: center; }
  .bannerArea .bgBox img { object-position: 30% center; }
  .bannerArea .titleBox { padding: 0 2rem; }
  .bannerArea .title { font-size: clamp(3.8rem, 10vw, 6.4rem); }
  .bannerArea .subtitle { font-size: 2.4rem; }
  .bannerArea .text { width: 100%; max-width: 36rem; font-size: 1.4rem; }

  .aboutArea { grid-template-columns: 1fr; }
  .aboutArea > .imgBox { height: 60vw; min-height: 28rem; }
  .aboutArea > .wrap { padding: 6rem 2rem; }
  .aboutArea .title { font-size: clamp(3rem, 8vw, 4.8rem); }
  .aboutArea .subtitle { font-size: 2rem; }
  .aboutArea .dataBox { margin-top: 4rem; }
  .aboutArea .dataList { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .aboutArea .dataItem--img { grid-column: 1 / -1; order: -1; }
  .aboutArea .dataItem--img .imgBox { width: min(100%, 36rem); height: auto; aspect-ratio: 365 / 436; margin: 0 auto; }
  .aboutArea .dataItem--left { text-align: right; }
  .aboutArea .titleBox--bottom { margin-top: 4rem; }
  .aboutArea .titleBox--bottom .text { width: 100%; max-width: 48rem; font-size: 1.4rem; }

  .roomsArea { padding: 8rem 0; }
  .roomsArea > .wrap > .titleBox .decotitle { font-size: 2rem; }
  .sloganBox { width: auto; height: auto; margin: 3rem 2rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
  .sloganItem { position: static; font-size: clamp(2.8rem, 7.5vw, 4.8rem); line-height: 1.3; white-space: normal; }
  .sloganItem--zh { font-size: 1.8rem; margin-top: 1.2rem; }
  .sloganBox .s1 { width: auto; text-align: left; }
  .sloganLine { display: none; }
  .sloganBox .s1 { order: 1; } .sloganBox .s2 { order: 2; }
  .sloganBox .s4 { order: 3; } .sloganBox .s3 { order: 4; } .sloganBox .s5 { order: 5; }
  .sloganBox .s6 { order: 6; } .sloganBox .s7 { order: 7; } .sloganBox .s8 { order: 8; }

  .roomBox .txtBox { padding: 4rem 2rem 0; }
  .roomBox .title { font-size: 3.2rem; }
  .roomBox .subtitle { font-size: 2.6rem; }
  .roomBox .text { width: 100%; font-size: 1.4rem; }

  .expBox { margin-top: 6rem; }
  .expBox .dataList { gap: 1.6rem; padding: 0 2rem; scroll-snap-type: x mandatory; cursor: auto; }
  .expBox .dataItem { flex-basis: 62vw; max-width: 30rem; scroll-snap-align: start; }
  .expBox .dataItem .imgBox { height: auto; aspect-ratio: 1; }
  .expBox .dataItem--link { flex-basis: 16rem; }
  .dragCursor { display: none; }

  .resortArea { padding: 8rem 0; }
  .resortArea .titleBox { padding: 0 2rem; }
  .resortArea .titleBox .title { font-size: clamp(3.4rem, 9vw, 5.2rem); margin-top: 1.4rem; }
  .resortArea .titleBox .subtitle { font-size: 2rem; }
  .dayBox { width: auto; height: auto; margin: 5rem 2rem 0; display: grid; grid-template-columns: auto 1fr; gap: 1.6rem 2rem; align-items: center; }
  .dayBox > * { position: static; }
  .dayBox .introBox { grid-column: 1 / -1; width: auto; }
  .dayBox > .imgBox { left: auto; top: auto; grid-column: 1 / -1; width: 100%; max-width: 40rem; height: auto; aspect-ratio: 4 / 5; justify-self: center; }
  .dayBox .timeBox { font-size: 4.8rem; }
  .dayBox .paren { display: none; }
  .dayBox .storyTitle { font-size: 2.2rem; }
  .dayBox .storyText { grid-column: 1 / -1; width: auto; }
  .dayBox .tagline { grid-column: 1 / -1; font-size: 3rem; line-height: 1.3; }
  .tagBox { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem; pointer-events: auto; }
  .tagBox .tag { position: static; padding: .8rem 1.6rem; border: 1px solid currentColor; border-radius: 99px; font-size: 1.4rem; }
  .tagBox .pointer { display: none; }
  .dayBox .note { grid-column: 1 / -1; width: auto; }


  .bookingArea { padding: 9rem 2rem 6rem; }
  .bookingArea .titleBox { width: 100%; }
  .bookingArea .title { font-size: clamp(3.4rem, 9vw, 5.4rem); }
  .bookingArea .subtitle { font-size: 2.2rem; }
  .bookingArea .text { width: 100%; max-width: 57rem; font-size: 1.4rem; }
  .marqueeBox--small { width: 100%; max-width: 40rem; }

  .footer > .wrap { padding: 0 2rem; }
  .footer .topBox { grid-template-columns: 1fr; gap: 4rem; padding: 5rem 0; }
  .footer .brandBox .logo { font-size: 3.2rem; }
  .footer .navBox { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .footer .linkBox { padding-top: 0; }
  .marqueeBox--large { height: 14rem; }
  .marqueeBox--large span { font-size: 9rem; }
  .footer .bottomBox { flex-wrap: wrap; gap: 1.6rem 3rem; padding: 2.4rem 0 4rem; }
  .footer .copyright { width: 100%; }
  .footer .linkList { gap: 2.4rem; margin-right: auto; }
  .footer > .imgBox { height: 16rem; }
}

@media (max-width: 480px) {
  .footer .navBox { grid-template-columns: 1fr 1fr; }
  .aboutArea .dataList { gap: 1.2rem; }
}

/* =========================================================
   roomBox — 房型橫向軌道（桌機由 GSAP pin 後橫移）
   ========================================================= */
.roomBox { height: 66.6rem; margin-top: 11.6rem; overflow: hidden; }
html:not(.js-motion) .roomBox { overflow-x: auto; }
.roomTrack { display: flex; width: max-content; height: 100%; }
.roomItem { flex: 0 0 176.1rem; display: grid; grid-template-columns: 96rem 1fr; height: 100%; }
.roomItem > .imgBox { height: 100%; }
.roomEnd { flex: 0 0 15.9rem; height: 100%; }
.roomBox .numBox { margin-top: 4.8rem; font-family: var(--ff-en); font-size: max(1.4rem, 12px); letter-spacing: .2em; color: rgba(255, 255, 255, .55); }
.roomBox .numBox b { font-weight: 400; color: #fff; }

/* =========================================================
   storyArea — 背景固定標題 + 前景錯位照片
   ========================================================= */
.storyArea { position: relative; padding-bottom: 22rem; background: var(--c-cream); } /* 與下方 bookingArea 拉開距離 */
.storyArea .stickyBox {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.storyArea .stickyBox .titleBox { white-space: nowrap; }
.storyArea .stickyBox .subtitle {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 2.8rem;
  letter-spacing: .06em;
  text-align: right;
  color: #434343;
}
.storyArea .stickyBox .title {
  margin-top: 2.4rem;
  font-family: var(--ff-en);
  font-weight: 400;
  font-size: 9.6rem;
  line-height: 1.15;
  color: var(--c-blue-mid);
}
.storyArea .stickyBox .decotitle {
  margin-left: 16rem;
  font-family: var(--ff-en);
  font-size: 9.6rem;
  line-height: 1.15;
  color: var(--c-blue-light);
}
.storyContent { position: relative; z-index: 2; margin-top: -100vh; padding-bottom: 1px; }
.storyArea .text { font-size: max(1.6rem, 12px); line-height: 1.9; color: var(--c-text-4); }
.storyArea .dataItem .txtBox { margin-top: 3rem; }
.storyArea .dataItem .text { position: relative; }

.storyArea .imgBox--walk { width: 74.7rem; height: 54rem; margin: 95vh 0 0 8.8rem; } /* 先只看到大標題，往下捲才出現圖片 */
.storyArea .dataItem--spa { width: 66rem; margin: 12rem 0 0 117.5rem; }
.storyArea .dataItem--spa .imgBox { height: 47rem; }
.storyArea .dataItem--spa .text { max-width: 47rem; }
.storyArea .dataItem--breakfast { width: 56rem; margin: 8rem 0 0 24.2rem; }
.storyArea .dataItem--breakfast .imgBox { height: 39.8rem; }
.storyArea .dataItem--chef { width: 70rem; margin: 24rem 0 0 106.2rem; }
.storyArea .dataItem--chef .imgBox { height: 49.5rem; }
.storyArea .dataItem--fish { width: 66rem; margin: 12.5rem 0 0 8.8rem; }
.storyArea .dataItem--fish .imgBox { height: 46.8rem; }
.storyArea .dataItem--swim { width: 76rem; margin: 24rem 0 0 107.6rem; }
.storyArea .dataItem--swim .imgBox { height: 53.8rem; }
.storyArea .rowBox { display: flex; align-items: flex-start; margin-top: 6.2rem; }
.storyArea .imgBox--read { flex: 0 0 56rem; height: 39.8rem; margin-left: 24.2rem; }
.storyArea .imgBox--infinity { position: relative; z-index: 2; flex: 0 0 41.9rem; height: 29.8rem; margin: 28.9rem 0 0 54.1rem; }

@media (max-width: 1023px) {
  .roomBox { height: auto; margin-top: 6rem; overflow: visible; }
  .roomTrack { flex-direction: column; width: auto; gap: 6rem; }
  .roomItem { flex: none; grid-template-columns: 1fr; }
  .roomItem > .imgBox { height: 62vw; }
  .roomEnd { display: none; }
  .roomBox .numBox { margin-top: 2.4rem; }

  .storyArea .stickyBox { height: 100svh; }
  .storyContent { margin-top: -100svh; padding: 0 2rem 6rem; }
  .storyArea .stickyBox .titleBox { white-space: normal; padding: 0 2rem; }
  .storyArea .stickyBox .subtitle { text-align: left; font-size: 1.8rem; }
  .storyArea .stickyBox .title,
  .storyArea .stickyBox .decotitle { font-size: clamp(3.6rem, 11vw, 6rem); margin-left: 0; }
  .storyArea .text { font-size: 1.4rem; }
  .storyArea .text br { display: none; }
  .storyArea .imgBox--walk,
  .storyArea .dataItem--spa,
  .storyArea .dataItem--breakfast,
  .storyArea .dataItem--chef,
  .storyArea .dataItem--fish,
  .storyArea .dataItem--swim { width: 100%; margin: 45vh 0 0; }
  .storyArea .imgBox--walk { margin-top: 60vh; height: 60vw; }
  .storyArea .dataItem .imgBox { height: auto; aspect-ratio: 4 / 3; }
  .storyArea .dataItem .txtBox { margin-top: 1.6rem; }
  .storyArea .rowBox { margin-top: 6rem; gap: 1.6rem; }
  .storyArea .imgBox--read { flex: 1; height: auto; aspect-ratio: 560 / 398; margin: 0; }
  .storyArea .imgBox--infinity { flex: 1; height: auto; aspect-ratio: 419 / 298; margin: 6rem 0 0; }
}