/* ============================================================
 * 錦屏美人湯館 STYLE A — 首頁動畫層（還原 version-a-氛圍極致.html）
 * 全域 enqueue（mu-plugin dz-jinping-anim.php），靠 jp-* class 掛到 Bricks 原生元素。
 * 不碰任何頁面內容 meta、不影響 Bricks 可視覺編輯。
 * 變數命名/數值對齊 DEMO 原始 CSS。
 * ============================================================ */
:root{
  --jp-mist:#FAF7F2;
  --jp-ink-deep:#2B2A28;
  --jp-ink-faint:#8A857E;
  --jp-bamboo:#6B8E7F;
  --jp-night:#1F1B17;
  --jp-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- HERO：背景圖 Ken Burns + 雙層漸層遮罩 + 霧氣 ---------- */
/* Bricks 把 section 背景圖放在 .brxe-section 的 background-image。
   要對「背景圖」做 Ken Burns，需把背景搬到 ::after 偽元素自己跑動畫。 */
.jp-hero{position:relative;overflow:hidden;background-color:var(--jp-night)!important}

/* 背景圖層（JS 注入的 .jp-hero-bg div，搬 section 背景圖過來做 Ken Burns + 視差）。
   分成「外層 .jp-hero-bg 跑視差 translateY、內層 img 跑 Ken Burns」避免 transform 互相覆蓋。*/
.jp-hero-bg{
  position:absolute;inset:-4%;z-index:0;overflow:hidden;
  will-change:transform;
}
.jp-hero-bg .jp-kb{
  width:100%;height:100%;
  background-image:var(--jp-hero-img);
  background-size:cover;background-position:center 40%;
  animation:jpKenburns 20s ease-in-out infinite alternate;
}
@keyframes jpKenburns{
  0%{transform:scale(1.0) translate(0,0)}
  100%{transform:scale(1.10) translate(-2.5%,-1.5%)}
}
/* 關閉 section 自身背景圖（改由 .jp-hero-bg 顯示，避免雙層重疊） */
.jp-hero{background-image:none!important}

/* 雙層漸層暗化遮罩（對齊 DEMO .hero-overlay） */
.jp-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(135deg, rgba(15,12,10,0.62) 0%, rgba(31,27,23,0.42) 60%, rgba(15,12,10,0.55) 100%),
    linear-gradient(180deg, transparent 50%, rgba(15,12,10,0.40) 100%);
}

/* 霧氣 SVG turbulence 飄移層（對齊 DEMO .hero-fog） */
.jp-hero > .jp-fog{
  position:absolute;inset:-10%;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  opacity:0.22;mix-blend-mode:screen;
  animation:jpDrift 36s ease-in-out infinite alternate;
}
@keyframes jpDrift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-3%,2%) scale(1.05)}
}

/* hero 內容墊到遮罩之上 */
.jp-hero-content{position:relative;z-index:5}

/* scroll hint（底部滴落光點） */
.jp-scroll-hint{
  position:absolute;bottom:48px;left:50%;transform:translateX(-50%);
  z-index:5;text-align:center;color:rgba(250,247,242,0.55);
}
.jp-scroll-hint .jp-sh-label{
  font-family:"Cormorant Garamond",serif;font-size:11px;font-style:italic;
  letter-spacing:0.32em;text-transform:uppercase;margin-bottom:14px;
}
.jp-scroll-hint .jp-sh-line{
  width:1px;height:48px;background:rgba(250,247,242,0.45);margin:0 auto;
  position:relative;overflow:hidden;
}
.jp-scroll-hint .jp-sh-line::after{
  content:"";position:absolute;top:-48px;left:0;width:1px;height:48px;
  background:linear-gradient(to bottom,transparent,var(--jp-mist));
  animation:jpScrollDrop 2.4s ease-in-out infinite;
}
@keyframes jpScrollDrop{0%{top:-48px}100%{top:48px}}

/* ---------- 進場：字符 stagger（hero 主標） ---------- */
.jp-stagger .jp-ch{
  display:inline-block;opacity:0;transform:translateY(120%);
  transition:opacity 1000ms var(--jp-ease),transform 1200ms var(--jp-ease);
}
.jp-stagger.in .jp-ch{opacity:1;transform:translateY(0)}
/* 拆字期間用 overflow 藏住浮上來的字 */
.jp-stagger{overflow:hidden}

/* ---------- 進場：fade-in（hero 標籤/引言/CTA） ---------- */
.jp-fade{opacity:0;transition:opacity 2400ms var(--jp-ease)}
.jp-fade.in{opacity:1}

/* ---------- 進場：scroll reveal（全站區塊） ---------- */
.jp-reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity 1400ms var(--jp-ease),transform 1400ms var(--jp-ease);
}
.jp-reveal.in{opacity:1;transform:translateY(0)}
.jp-d2{transition-delay:220ms}
.jp-d3{transition-delay:440ms}
.jp-d4{transition-delay:660ms}
.jp-d5{transition-delay:880ms}

/* ---------- 圖片 hover 緩放（介紹圖/章節圖） ---------- */
.jp-zoom-img{overflow:hidden}
.jp-zoom-img img{transition:transform 6000ms var(--jp-ease)}
.jp-zoom-img:hover img{transform:scale(1.05)}

/* ---------- 沉浸大圖：進場緩放 + 底部 veil ---------- */
.jp-immersive{position:relative;overflow:hidden}
.jp-immersive img{transition:transform 4000ms var(--jp-ease),opacity 2000ms var(--jp-ease)}
.jp-immersive.in img{transform:scale(1.04)}
.jp-immersive::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(15,12,10,0.15) 0%, transparent 30%, transparent 70%, rgba(15,12,10,0.45) 100%);
}

/* ---------- 價格卡 hover 微浮 ---------- */
.jp-card{transition:transform 600ms var(--jp-ease),box-shadow 600ms var(--jp-ease)}
.jp-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -24px rgba(43,42,40,0.45)}

/* ---------- 終曲霧氣層 ---------- */
.jp-finale{position:relative;overflow:hidden}
.jp-finale::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  opacity:0.10;mix-blend-mode:screen;
  animation:jpDrift 40s ease-in-out infinite alternate;
}
.jp-finale > *{position:relative;z-index:2}

/* ---------- CTA 填充 hover（hero + 終曲鈕） ---------- */
.jp-cta-fill .brxe-button,
.jp-cta-fill.brxe-button{
  position:relative;overflow:hidden;z-index:0;
  transition:color 1200ms var(--jp-ease),border-color 1200ms var(--jp-ease);
}
.jp-cta-fill .brxe-button::before,
.jp-cta-fill.brxe-button::before{
  content:"";position:absolute;inset:0;background:var(--jp-mist);
  transform:translateY(100%);transition:transform 1200ms var(--jp-ease);z-index:-1;
}
.jp-cta-fill .brxe-button:hover,
.jp-cta-fill.brxe-button:hover{color:var(--jp-ink-deep)!important;border-color:var(--jp-mist)!important}
.jp-cta-fill .brxe-button:hover::before,
.jp-cta-fill.brxe-button:hover::before{transform:translateY(0)}

/* ============================================================
 * 站台級導覽 chrome：漢堡選單 + 浮層 Logo + 全屏 overlay
 * 由 mu-plugin 注入到 wp_footer（站台層，不在頁面內容 meta 內）
 * ============================================================ */
.jp-menu-toggle{
  position:fixed;top:36px;left:36px;z-index:1000;
  width:48px;height:48px;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:6px;cursor:pointer;
  background:none;border:none;
}
.jp-menu-toggle span{
  display:block;width:24px;height:1px;background:var(--jp-mist);
  transition:transform 600ms var(--jp-ease),opacity 400ms var(--jp-ease),background 400ms var(--jp-ease);
}
.jp-menu-toggle.scrolled span{background:var(--jp-ink-deep)}
.jp-menu-toggle.open span{background:var(--jp-mist)}
.jp-menu-toggle.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.jp-menu-toggle.open span:nth-child(2){opacity:0}
.jp-menu-toggle.open span:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}

.jp-brand-mark{
  position:fixed;top:36px;right:36px;z-index:1000;text-align:right;
  transition:opacity 600ms var(--jp-ease);
}
.jp-brand-mark .zh{
  font-family:"Noto Serif TC",serif;font-size:14px;font-weight:500;
  letter-spacing:0.22em;color:var(--jp-mist);transition:color 600ms var(--jp-ease);
}
.jp-brand-mark.scrolled .zh{color:var(--jp-ink-deep)}
.jp-brand-mark .en{
  font-family:"Cormorant Garamond",serif;font-size:11px;font-style:italic;font-weight:300;
  letter-spacing:0.32em;color:rgba(250,247,242,0.7);margin-top:4px;text-transform:uppercase;
  transition:color 600ms var(--jp-ease);
}
.jp-brand-mark.scrolled .en{color:var(--jp-ink-faint)}

.jp-menu-overlay{
  position:fixed;inset:0;z-index:999;
  background:rgba(31,27,23,0.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  opacity:0;pointer-events:none;transition:opacity 800ms var(--jp-ease);
}
.jp-menu-overlay.open{opacity:1;pointer-events:all}
.jp-menu-overlay nav{text-align:center}
.jp-menu-overlay a{
  display:block;font-family:"Noto Serif TC",serif;font-size:36px;font-weight:400;
  color:var(--jp-mist);letter-spacing:0.12em;margin:24px 0;
  opacity:0;transform:translateY(20px);
  transition:opacity 800ms var(--jp-ease),transform 800ms var(--jp-ease),color 400ms var(--jp-ease);
}
.jp-menu-overlay.open a{opacity:1;transform:translateY(0)}
.jp-menu-overlay.open a:nth-child(1){transition-delay:200ms}
.jp-menu-overlay.open a:nth-child(2){transition-delay:300ms}
.jp-menu-overlay.open a:nth-child(3){transition-delay:400ms}
.jp-menu-overlay.open a:nth-child(4){transition-delay:500ms}
.jp-menu-overlay.open a:nth-child(5){transition-delay:600ms}
.jp-menu-overlay.open a:nth-child(6){transition-delay:700ms}
.jp-menu-overlay a:hover{color:var(--jp-bamboo)}
.jp-menu-overlay .jp-menu-cta{
  margin-top:48px;display:inline-block;
  font-family:"Noto Serif TC",serif;font-size:14px;letter-spacing:0.32em;font-weight:400;
  color:var(--jp-mist);padding:18px 56px;border:1px solid rgba(250,247,242,0.4);
  transition:all 600ms var(--jp-ease);
}
.jp-menu-overlay .jp-menu-cta:hover{background:var(--jp-mist);color:var(--jp-ink-deep)}

/* ---------- RWD ---------- */
@media (max-width:768px){
  .jp-menu-toggle{top:24px;left:24px;width:42px;height:42px}
  .jp-brand-mark{top:24px;right:24px}
  .jp-brand-mark .zh{font-size:13px}
  .jp-brand-mark .en{font-size:10px}
  .jp-scroll-hint{bottom:32px}
  .jp-menu-overlay a{font-size:28px;margin:18px 0}
}

/* ---------- 尊重使用者「減少動態」偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .jp-hero::after,.jp-hero > .jp-fog,.jp-finale::after,
  .jp-scroll-hint .jp-sh-line::after{animation:none!important}
  .jp-reveal,.jp-fade,.jp-stagger .jp-ch{opacity:1!important;transform:none!important}
}