/* 拖曳相關元素一律不要顯示手型 */
*,
*::before,
*::after {
  cursor: none !important;
  /* 你已用自訂游標 */
}

/* 保險：禁止 grab / grabbing */
*[draggable="true"],
.grab,
.grabbing,
.swiper,
.swiper * {
  cursor: none !important;
}

/* 游標本體 */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 64px;
  height: 63px;
  pointer-events: none;
  z-index: 1000000;
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: 0;
  /* 💡 初始隱藏，直到 mousemove 觸發 */
  transition: opacity 0.5s ease;
  /* 💡 加入平滑淡入效 */
}

/* 兩張圖疊在一起 */
.cursor-img {
  position: absolute;
  inset: 0;
  background: center/contain no-repeat;
  opacity: 0;
  transform: scale(1);
  transition:
    opacity .35s ease,
    transform .35s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

/* hover1 圖（小顆） */
.cursor .img1 {
  background-image: url("../img/hover1.png");
  transform: scale(0.6);
  /* 38/64 ≈ 0.59 → 用 0.6 */
}

/* hover2 圖（原尺寸） */
.cursor .img2 {
  background-image: url("../img/hover2.png");
  transform: scale(1);
}

/* hover3 圖（顏色版） */
.cursor .img3 {
  background-image: url("../img/hover3.png");
  /* 換成你的彩色圖 */
  transform: scale(0.6);
  /* 要不要比 hover2 大可再調 */
}

/* 狀態：預設顯示 hover1 */
.cursor.is-hover1 .img1 {
  opacity: 1;
}

.cursor.is-hover1 .img2 {
  opacity: 0;
}

.cursor.is-hover1 .img3 {
  opacity: 0;
}

/* 狀態：滑到 m4Clip 顯示 hover2 */
.cursor.is-hover2 .img1 {
  opacity: 0;
}

.cursor.is-hover2 .img2 {
  opacity: 1;
}

.cursor.is-hover2 .img3 {
  opacity: 0;
}

/* 狀態：顏色版 hover3 */
.cursor.is-hover3 .img1 {
  opacity: 0;
}

.cursor.is-hover3 .img2 {
  opacity: 0;
}

.cursor.is-hover3 .img3 {
  opacity: 1;
}

/* 全站反差模式 */
#customCursor.is-contrast {
  /*mix-blend-mode: difference;*/
  /* 想柔一點改 exclusion */
}

/* =========================================
   TOP MENU（Header）
========================================= */
.top-menu {
  width: 100%;
  height: 3.5vw;
  line-height: 3.5vw;
  border-bottom: 1px solid rgba(137, 126, 121, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  background-color: #f3eee7;
  z-index: 99;

  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}

.top-menu.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}


.logo {
  width: 10.5vw;
  height: auto;
  position: absolute;
  left: 16vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

/* =========================================
   MENU ICON WRAP
========================================= */
.menu-icon.right {
  width: 51vw;
  position: absolute;
  right: 4vw;
  top: 50%;
  left: auto;
  transform: translateY(-50%);
  z-index: 999;
  overflow: visible;
}

/* 主按鈕 */
.menu-icon-li {
  width: 8.5vw;
  height: 3.5vw;
  float: left;
  display: block;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  /* 預設保留裁切 */
  cursor: pointer;
}

/* ✅ 只有有 submenu 的按鈕要能長出 submenu（避免被裁掉） */
.menu-icon-li.tbtn1,
.menu-icon-li.tbtn2,
.menu-icon-li.tbtn4 {
  overflow: visible;
}

/* 分隔線 */
.mm-line1 {
  width: 1px;
  height: 3.5vw;
  background-color: rgba(137, 126, 121, 0.5);
  position: absolute;
  left: 69vw;
  top: 0;
  overflow: hidden;
  z-index: 101;
}

.mm-line2 {
  width: 1px;
  height: 3.5vw;
  background-color: rgba(137, 126, 121, 0.5);
  position: absolute;
  left: 86.5vw;
  top: 0;
  overflow: hidden;
  z-index: 101;
}

.mm-line3 {
  width: 1px;
  height: 3.5vw;
  background-color: rgba(137, 126, 121, 0.5);
  position: absolute;
  left: 12.7vw;
  top: 0;
  overflow: hidden;
  z-index: 101;
}

/* =========================================
   MENU TEXT (EN / CHI)
========================================= */
.menu-icon-li .en {
  position: relative;
  width: 6.5vw;
  margin-left: 1vw;
  font-family: "Lora", serif;
  font-weight: 600;
  color: #756b66;
  font-size: calc(16 * var(--vw-base));
  line-height: 3.5vw;
  font-style: normal;
  letter-spacing: 0.08em;
  text-align: center;
  height: 3.5vw;
  opacity: 1;
  transition: all .35s ease-in-out;
  overflow: hidden;
  z-index: 101;
}

.menu-icon-li .en img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-icon-li .chi {
  position: absolute;
  left: 1vw;
  top: 0;
  width: 6.5vw;
  color: #c5a583;
  line-height: 3.5vw;
  height: 3.5vw;
  font-size: calc(16 * var(--vw-base));
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  font-weight: 300;
  opacity: 0;
  transition: all .35s ease-in-out;
  overflow: hidden;
  z-index: 101;
}

.menu-icon-li .chi img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-icon-li:hover .en {
  opacity: 0;
}

.menu-icon-li:hover .chi {
  opacity: 1;
}



/* =========================================
   SUBMENU（tsmenu1 / tsmenu2 / tsmenu4）
   - 在 .menu-icon.right 內
========================================= */

/* 1) 預設隱藏 */
.menu-icon.right .tsmenu1,
.menu-icon.right .tsmenu2,
.menu-icon.right .tsmenu4 {
  position: absolute;
  bottom: -1.5vw;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(8px);
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s linear .25s;

  will-change: transform, opacity;
  z-index: 100;
  /* ✅ submenu 在 bg 上面 */
}

/* 2) 位置 / 尺寸 / 背景 */
.menu-icon.right .tsmenu1 {
  left: -2.5vw;
  width: calc(270 * var(--vw-base));
  height: calc(16 * var(--vw-base));
  /*background:url(../img/smenu1.png) no-repeat center / contain;*/
}

.menu-icon.right .tsmenu2 {
  left: 6.1vw;
  width: calc(270* var(--vw-base));
  height: calc(16 * var(--vw-base));
  /*background:url(../img/smenu2.png) no-repeat center / contain;*/
}

.menu-icon.right .tsmenu4 {
  left: 25.35vw;
  width: calc(180 * var(--vw-base));
  height: calc(16 * var(--vw-base));
  /*background:url(../img/smenu3.png) no-repeat center / contain;*/
}

/* 3) 防縫隙透明橋（掛在 submenu 自己上方） */
.menu-icon.right .tsmenu1::before,
.menu-icon.right .tsmenu2::before,
.menu-icon.right .tsmenu4::before {
  content: "";
  position: absolute;
  left: 0;
  top: -24px;
  width: 100%;
  height: 24px;
  background: transparent;
}

/* 4) 顯示條件：按鈕 hover 或 submenu hover */
.menu-icon.right .tbtn1:hover~.tsmenu1,
.menu-icon.right .tsmenu1:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

.menu-icon.right .tbtn2:hover~.tsmenu2,
.menu-icon.right .tsmenu2:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

.menu-icon.right .tbtn4:hover~.tsmenu4,
.menu-icon.right .tsmenu4:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

/* 5) ✅ 主選單同步反應：滑到 submenu 時，對應按鈕也維持 hover 視覺（en/chi/taf） */
.menu-icon-li.tbtn1:has(~ .tsmenu1:hover) .taf {
  transform: translateZ(0) scaleX(1);
}

.menu-icon-li.tbtn1:has(~ .tsmenu1:hover) .en {
  opacity: 0;
}

.menu-icon-li.tbtn1:has(~ .tsmenu1:hover) .chi {
  opacity: 1;
}

.menu-icon-li.tbtn2:has(~ .tsmenu2:hover) .taf {
  transform: translateZ(0) scaleX(1);
}

.menu-icon-li.tbtn2:has(~ .tsmenu2:hover) .en {
  opacity: 0;
}

.menu-icon-li.tbtn2:has(~ .tsmenu2:hover) .chi {
  opacity: 1;
}

.menu-icon-li.tbtn4:has(~ .tsmenu4:hover) .taf {
  transform: translateZ(0) scaleX(1);
}

.menu-icon-li.tbtn4:has(~ .tsmenu4:hover) .en {
  opacity: 0;
}

.menu-icon-li.tbtn4:has(~ .tsmenu4:hover) .chi {
  opacity: 1;
}

/* =========================================
   TSMENUBG（背景條）
   ✅ 你的新架構：tsmenubg 在 .top-menu 內（menu-icon 外）
   ✅ 需求：hover tbtn1/2/4 或 submenu1/2/4 都顯示
========================================= */
.top-menu .tsmenubg {
  position: absolute;
  left: 0;
  top: 100%;
  /* ✅ 貼著 header 底 */
  width: 100%;
  height: calc(41 * var(--vw-base));
  background-color: rgba(243, 238, 231, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s linear .25s;
  z-index: 50;
  /* ✅ 在 submenu 下方 */
}

/* ✅ 顯示 tsmenubg：6 個 hover 都能打開 */
.top-menu:has(.menu-icon.right .tbtn1:hover) .tsmenubg,
.top-menu:has(.menu-icon.right .tbtn2:hover) .tsmenubg,
.top-menu:has(.menu-icon.right .tbtn4:hover) .tsmenubg,
.top-menu:has(.menu-icon.right .tsmenu1:hover) .tsmenubg,
.top-menu:has(.menu-icon.right .tsmenu2:hover) .tsmenubg,
.top-menu:has(.menu-icon.right .tsmenu4:hover) .tsmenubg {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(1px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

/* =========================
   Top-menu Hill Underline (shared layer)
   - 基底線：沿用 .mm-line1（你本來就有）
   - 山丘層：新增一個 #topHillLayer 疊在 mm-line1 上
========================= */
/* ✅ 保險：top-menu 一定要 fixed，否則會不見/被蓋 */
.top-menu.fixed-menu {
  position: fixed !important;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
  /* 先拉高保險 */
}

/* ✅ 山丘層（共享） */
#topHillLayer {
  position: absolute;
  left: 0;
  top: 0;
  width: 160px;
  height: 120px;
  pointer-events: none;

  opacity: 0;
  z-index: 50;
  /* 確保在 mm-line 上面 */
  will-change: left, top;
  transform: translate3d(0, 0, 0);
}

#topHillLayer.is-on {
  opacity: 1;
}

#topHillLayer svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

#topHillLayer .hill-stroke {
  fill: none !important;
  stroke-width: 1 !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke;
}

#topHillLayer .hill-fill {
  fill: rgba(137, 126, 121, 0.2);
  /* 先加深，保證看得到 */
}

#topHillLayer .hill-stroke {
  stroke: rgba(137, 126, 121, 0.2);
  /* ✅ 打開上緣線 */
}


/* 子選單容器：用 flex 排成一排可點按鈕 */
.menu-icon.right .tsmenu-sbtn {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--vw-base));
  /* 按鈕間距 */
  padding: 0;
  height: calc(16 * var(--vw-base));
  /* ✅ 跟 tsmenuBg 高度一致最好 */
  box-sizing: border-box;
}

.tsmenu1 .tsmenu-sbtn {
  width: calc(270 * var(--vw-base));
  height: calc(16 * var(--vw-base));
  overflow: hidden;
}

.tsmenu2 .tsmenu-sbtn {
  width: calc(270 * var(--vw-base));
  height: calc(16 * var(--vw-base));
  overflow: hidden;
}

.tsmenu4 .tsmenu-sbtn {
  width: calc(180 * var(--vw-base));
  height: calc(16 * var(--vw-base));
  overflow: hidden;
}

/* 各 submenu 外框高度也統一吃 41 */
.menu-icon.right .tsmenu1,
.menu-icon.right .tsmenu2,
.menu-icon.right .tsmenu4 {
  height: calc(16 * var(--vw-base));
}

/* 子按鈕（可點） */
.menu-icon.right .tsmenu-sbtn-li {
  display: inline-block;
  height: calc(16 * var(--vw-base));
  /* 真正的按鈕高度 */
  box-sizing: border-box;
  font-size: calc(16 * var(--vw-base));
  line-height: calc(16 * var(--vw-base));
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 0.05em;
  font-weight: 300;
  color: #897e79;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition:
    color .25s ease,
    transform .25s ease;
}

.menu-icon.right .tsmenu1 .tsmenu-sbtn .tsmenu-sbtn-li {
  width: calc(90 * var(--vw-base));
}

.menu-icon.right .tsmenu2 .tsmenu-sbtn .tsmenu-sbtn-li {
  width: calc(90 * var(--vw-base));
}

.menu-icon.right .tsmenu4 .tsmenu-sbtn .tsmenu-sbtn-li {
  width: calc(90 * var(--vw-base));
}

/* hover/focus：有回饋 */
.menu-icon.right .tsmenu-sbtn-li:hover,
.menu-icon.right .tsmenu-sbtn-li:focus-visible {
  color: #c5a583;
}

/* 你想要更像「底線」也可以加： */
.menu-icon.right .tsmenu-sbtn-li {
  position: relative;
}

.menu-icon.right .tsmenu-sbtn-li::after {
  content: "";
  position: absolute;
  background-color: #a1938c;
  right: calc(-2 * var(--vw-base));
  top: calc(1.5 * var(--vw-base));
  width: 1px;
  height: calc(15 * var(--vw-base));
}

.menu-icon.right .tsmenu-sbtn-li:last-child::after {
  opacity: 0;
}


.menu-icon.right .tsmenu1::before,
.menu-icon.right .tsmenu2::before,
.menu-icon.right .tsmenu4::before {
  top: calc(-24 * var(--vw-base));
  height: calc(60 * var(--vw-base));
}