/* ============================================================
   十一居 · 诗意栖居 官方展示站
   参考：希尔顿官网 —— 模块化布局 / 大图主导 / 清晰层级 / 差异化按钮
   色彩：浅灰白 #F9FAFB × 米白 #F3EFE6 × 墨黑文字 #1F2937；深绿 #16201A × 浅绿 #9CBEAB
   字体：Noto Serif SC（标题） · Noto Sans SC（正文）
   订房电话：187 2313 8033
   ============================================================ */
:root{
  /* 主题 · 统一基调：极浅暖白 #FAF9F6（大背景）× 米白 #F3EFE6（拱门 / 深绿底反白 / 小标签）
     × 纯白 #FFFFFF（小卡片）× 深绿 #16201A × 浅绿 #9CBEAB */
  --bg:#FAF9F6;            /* 全站页面底色：极浅暖白，唯一的大背景，所有浅色板块都透出它 */
  --card:#FFFFFF;          /* 纯白：仅限小卡片（.card / .act-card / .room-card / .arc-card / .contact-card 等） */
                            /* 注：全宽 section 禁止使用 --card，否则会出现白色色块拼接断层 */
  --ink:#1F2937;           /* 主文字 */
  --ink-soft:#6B7280;      /* 辅助文字 */
  --line:#E5E7EB;          /* 边框 / 分割线 */
  --btn:#1F2937;           /* 主按钮（墨黑实心） */
  --btn-fg:#FFFFFF;        /* 主按钮文字 */
  --btn-h:#111827;         /* 主按钮悬停 */
  --btn-ghost-line:#D1D5DB;/* 描边按钮边框 */
  --brand-green:#5B8A6E;   /* 旧辅助色（已统一到 --light-green，保留兼容） */
  --brand-wood:#A88052;    /* 辅助色 · 暖木棕 */
  --bg-cream:#F3EFE6;      /* 深米色：比 --bg 深一档；拱门 .arc-shape / 深绿底上的反白文字 / .eyebrow .tag 小标签 */
                            /* 注：与 --bg 保持色阶差，浅底上的"米色药丸"才有轮廓层次 */
  --deep-green:#16201A;    /* 核心深绿：全屏深色板块底 / 页脚 / CTA */
  --light-green:#9CBEAB;   /* 浅绿点缀：只用于深色底上的线条 / 图标 / 小标记 */
                            /* 注：浅底上的文字若用浅绿仅 1.8:1 对比度，一律用 --deep-green */
  --ink-2:var(--ink-soft); /* 次级正文（旧变量缺定义，补齐避免色值丢失） */
  --brand-cream:#F3EFE6;   /* 旧米白（已并入 --bg-cream） */
  --ph-bg:#E4DED3;         /* 图片占位底色（随大背景改为暖调，避免冷灰块） */
  --ph-x:#A1998A;          /* 图片占位文字 / 交叉线（暖灰） */
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --shadow-lg:0 18px 44px rgba(31,41,55,.18);
  --header-h:72px;
  --maxw:1200px;
  --font-title:"Noto Serif SC",serif;
  --font-body:"Noto Sans SC",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:16px;line-height:1.75;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
input,textarea,button,select{font-family:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.section{padding:88px 0}
/* 全屏板块：每个 <section> 占满一屏并垂直居中 */
section{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
::selection{background:var(--light-green);color:var(--deep-green)}

/* ---------- 图片占位（低保真：灰底 + 交叉线；填入真实图片后自动隐藏） ---------- */
.ph{position:relative;overflow:hidden;background:var(--ph-bg);display:flex;align-items:center;justify-content:center}
.ph::before,.ph::after{content:"";position:absolute;left:50%;top:50%;width:120%;height:1.5px;background:var(--ph-x);transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
.ph::after{transform:translate(-50%,-50%) rotate(-45deg)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph:has(> img)::before,.ph:has(> img)::after{display:none}
.ph:has(> img) .ph-label{display:none}
.ph-big{display:grid;place-items:center;width:100%;height:100%;background:var(--ph-bg);position:relative}
.ph-note{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:12px;color:rgba(243,239,230,.92);letter-spacing:.18em;z-index:2;background:rgba(22,32,26,.68);padding:4px 14px;border-radius:6px;white-space:nowrap}
.ph-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;color:var(--ph-x);z-index:2}
.ph-xl{min-height:420px}
.ph-sm{min-height:120px}
.ph-voice{aspect-ratio:16/9}
.ph:not(.ph-voice){display:block}

/* ---------- 排版工具 ---------- */
.center{text-align:center}
.text-soft{color:var(--ink-soft)}
.small{font-size:13px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-40{margin-top:40px}.mt-64{margin-top:64px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-40{margin-bottom:40px}
.hidden{display:none}

/* ---------- 标题组 ---------- */
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.35em;color:var(--deep-green);background:var(--bg-cream);padding:6px 14px;border-radius:99px;margin-bottom:20px;font-weight:500}
.section-head{max-width:680px;margin-bottom:52px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-title{font-family:var(--font-title);font-size:34px;line-height:1.35;font-weight:600;margin-bottom:18px;letter-spacing:.04em}
.section-desc{font-size:16px;color:var(--ink-soft);line-height:1.9}
.section-title .thin{font-weight:400;color:var(--ink-soft)}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;border-radius:8px;font-size:15px;font-weight:500;text-align:center;transition:all .3s;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn-solid{background:var(--btn);color:var(--btn-fg)}
.btn-solid:hover{background:var(--btn-h);box-shadow:0 8px 22px rgba(31,41,55,.25);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--btn-ghost-line)}
.btn-outline:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.btn-outline-light{border-color:rgba(243,239,230,.85);color:var(--bg-cream)}
.btn-outline-light:hover{background:var(--bg-cream);color:var(--ink)}
.btn-lg{height:52px;padding:0 32px;font-size:16px}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn-block{width:100%}
.btn .ico{width:16px;height:16px;flex:none}
.btn-lg .ico{width:18px;height:18px}
.link-more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--btn);transition:gap .3s}
.link-more:hover{gap:10px}
.arrow{width:14px;height:14px;flex:none}
.link-plain{font-size:14px;color:var(--ink-soft)}
.link-plain:hover{color:var(--btn)}

/* ---------- 标签 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;font-size:12px;color:var(--ink-soft);border:1px solid var(--line);border-radius:99px;padding:4px 12px;background:var(--card)}
.chip.on{background:var(--deep-green);border-color:var(--deep-green);color:var(--bg-cream)}
.chip.wood{background:var(--bg-cream);border-color:var(--deep-green);color:var(--brand-wood)}
.tag{display:inline-block;font-size:12px;line-height:1;padding:6px 12px;border-radius:6px;background:var(--bg-cream);color:var(--deep-green);font-weight:500}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .35s,box-shadow .35s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .ph{aspect-ratio:16/10}
.card-body{padding:22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-title{font-family:var(--font-title);font-size:21px;font-weight:600;line-height:1.4}
.card-text{font-size:14px;color:var(--ink-soft);line-height:1.8}
.card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2px}
.card-foot{margin-top:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ---------- 网格 ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}

/* ---------- 横滑 ---------- */
.h-scroll{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;cursor:grab;padding-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.h-scroll::-webkit-scrollbar{height:6px}
.h-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;cursor:grab}
.h-scroll .h-item{flex:0 0 auto;width:340px;scroll-snap-align:start}
.h-scroll .card .ph{min-height:200px}
.edges{overflow:hidden}
.h-scroll .h-item .card{height:100%}

/* ---------- 热门房型 · 左竖版标题 + 右侧卡片横向滑动 ---------- */
.room-sec{
  position:relative;
  height:100vh;
  min-height:100vh;
  overflow:hidden;
  background:var(--deep-green);              /* 深绿，和其他深色板块统一 */
  color:var(--bg-cream);                   /* 默认浅色文字 */
  padding:0;
  isolation:isolate;               /* 隔离层叠上下文，防止噪点覆盖层干扰 */
}
.room-layout{display:flex;width:100%;height:100vh;align-items:center}
.room-side{width:22vw;height:100vh;flex-shrink:0;padding:12vh 2vw 6vh 5vw;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;box-sizing:border-box}
.room-side-inner{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;width:100%}
.room-side .eyebrow{font-size:.7rem;letter-spacing:.3em;color:var(--ink-soft);padding-bottom:.6rem;border-bottom:1px solid var(--line);width:100%;background:none;border-radius:0;margin:0;text-transform:uppercase}
.room-side-titles{display:flex;gap:1.5rem;align-items:flex-start;margin-top:1.5rem}
.room-side-title{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--font-title);font-size:clamp(1.8rem,2.6vw,2.8rem);font-weight:700;color:var(--ink);letter-spacing:.15em;line-height:1;margin:0}
.room-side-title.t-2{margin-top:5rem;color:var(--deep-green)}
.room-side-desc{margin-top:2.5rem;font-size:.85rem;color:var(--ink-soft);line-height:1.9;letter-spacing:.1em}
.room-side-hint{display:flex;align-items:center;gap:.6rem;margin-top:3rem;font-size:.7rem;letter-spacing:.4em;color:var(--ink-soft);text-transform:uppercase}
.room-side-hint::before{content:"";display:inline-block;width:32px;height:1px;background:var(--light-green);margin-right:.4rem}
.room-side-hint .hint-arrow{letter-spacing:0;font-size:.85rem;line-height:1}
@media (max-width:900px){
  .room-side-titles{flex-direction:column}
  .room-side-title.t-2{margin-top:0}
  .room-side-title{font-size:clamp(1.4rem,4.6vw,1.9rem)}
}
.room-stage-wrap{flex:1;height:100vh;overflow:hidden;position:relative;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 94%,transparent 100%)}
.room-stage{display:flex;align-items:center;width:max-content;will-change:transform;padding-left:2vw;gap:3vw}
.room-card{position:relative;width:44vw;min-width:440px;height:62vh;flex-shrink:0;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 30px 60px rgba(0,0,0,.15)}
.room-ph{position:absolute;inset:0;z-index:0}
.room-ph img{width:100%;height:100%;object-fit:cover;display:block}
.room-ph .room-index{position:absolute;top:20px;left:22px;font-family:var(--font-title);font-size:13px;letter-spacing:.2em;color:rgba(243,239,230,.85);background:rgba(10,15,17,.45);border:1px solid rgba(243,239,230,.25);border-radius:99px;padding:4px 12px}
.room-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,15,17,.15) 0%,rgba(10,15,17,.1) 45%,rgba(10,15,17,.82) 100%)}
.room-body{position:relative;z-index:2;color:var(--bg-cream);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 48px;max-width:36em}
.room-store{letter-spacing:.22em;font-size:12px;color:rgba(243,239,230,.72)}
.room-name{font-family:var(--font-title);font-size:clamp(28px,3.2vw,40px);font-weight:600;letter-spacing:.05em;line-height:1.25}
.room-meta{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.room-meta .chip{background:rgba(22,32,26,.45);border-color:rgba(243,239,230,.28);color:var(--bg-cream);font-size:12px}
.room-price{font-family:"Georgia","Noto Serif SC",serif;font-size:30px;font-weight:700;color:var(--brand-wood);line-height:1}
.room-price .unit{font-size:14px;color:var(--ink-soft);font-weight:500;margin-left:4px;font-family:var(--font-body)}
.room-body .btn{margin-top:4px}
@media (max-width:768px){
  .room-layout{flex-direction:column;align-items:stretch}
  .room-side{width:100%;height:auto;padding:12vh 6vw 4vh;justify-content:flex-start}
  .room-side-inner{align-items:flex-start;gap:.4rem;text-align:left}
  .room-side-desc{font-size:.8rem}
  .room-side-hint{display:none}
  .room-stage-wrap{width:100%;flex:none;height:52vh;-webkit-mask-image:none;mask-image:none}
  .room-stage{padding-left:6vw;gap:4vw}
  .room-card{width:78vw;min-width:0;height:50vh}
  .room-body{padding:24px 28px}
}

/* ---------- 热门房型页 · 独立两列网格（rooms.html，无 pin 静态浏览） ---------- */
.room-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem;margin-top:4rem}
.room-grid .room-card{width:100%;min-width:unset;height:60vh}
@media (max-width:900px){
  .room-grid{grid-template-columns:1fr;gap:2rem}
  .room-grid .room-card{height:55vh}
}

/* ---------- 当季活动 · 水平滚动画廊（pin + scrub，无边框） ---------- */
.ax-sec{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;background:var(--bg);overflow:hidden;padding:0}
.ax-head{flex:0 0 auto;padding-top:clamp(40px,6vh,72px)}
.ax-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 4vw}
/* 轨道包裹层：无边框、无底色，仅保留上下留白 */
.h-scroll-frame{position:relative;width:100%;max-width:1180px;padding:20px 0;overflow:hidden;clip-path:inset(0 0 0 0%)}
.h-scroll-frame::before,.h-scroll-frame::after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;background:linear-gradient(90deg,var(--bg),transparent)}
.h-scroll-frame::before{left:0}
.h-scroll-frame::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
/* 轨道本身：覆盖 .h-scroll 的原生滚动，交给 GSAP scrub */
.h-scroll-frame .h-scroll{display:flex;gap:1.5rem;align-items:stretch;overflow:visible;scroll-snap-type:none;cursor:default;padding-bottom:0;will-change:transform}
.h-scroll-frame .h-item{flex:0 0 auto;width:28vw;min-width:280px;max-width:380px;scroll-snap-align:center}
.h-scroll-frame .h-item .card{height:100%}
/* 卡片：图片在上、文字在下 */
.h-scroll-frame .card-img{position:relative;height:200px;overflow:hidden;flex:none}
.h-scroll-frame .card-img img{width:100%;height:100%;object-fit:cover;display:block}
.h-scroll-frame .card-text-body{padding:16px 18px 18px;flex:1 1 auto;display:flex;flex-direction:column;gap:10px}
@media (max-width:900px){
  .ax-stage{align-items:flex-start;padding:0 3vw}
  .h-scroll-frame{padding:20px 0}
  .h-scroll-frame .h-scroll{gap:1.25rem}
  .h-scroll-frame .h-item{width:78vw;min-width:280px;max-width:420px}
}
@media (max-width:768px){
  /* 活动卡片：移动端降级为原生横向滑动（保留触摸滑动，不绑 GSAP） */
  .h-scroll-frame{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .h-scroll-frame .h-scroll{transform:none;scroll-snap-type:x proximity;cursor:grab}
  .h-scroll-frame .h-item{width:80vw;min-width:0;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .h-scroll-frame{overflow-x:auto}
  .h-scroll-frame .h-scroll{transform:none;scroll-snap-type:x proximity;cursor:grab}
}

/* ---------- 山野餐饮精选 · 场景式滚动叙事（一屏一菜，主时间线 pin） ---------- */
.dining-sec{position:relative;height:100vh;overflow:hidden;background:var(--bg);padding:0}
.dining-head{position:absolute;top:6vh;left:0;right:0;z-index:3;text-align:center;pointer-events:none}
.dining-head .section-title{font-size:clamp(26px,3.2vw,38px)}
.dining-stage{position:relative;width:100%;height:100vh}
.dining-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6vw;padding:18vh 6vw 0}
.dining-img-wrap{width:42vw;height:55vh;min-height:300px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);flex-shrink:0;will-change:transform,opacity}
.dining-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.dining-text-wrap{width:32vw;min-width:240px;display:flex;flex-direction:column;gap:1.2rem;will-change:transform,opacity}
.dining-text-wrap .eyebrow{margin-bottom:4px}
.dining-text-wrap .dining-title{font-family:var(--font-title);font-size:clamp(28px,3vw,38px);font-weight:600;letter-spacing:.04em;line-height:1.3;margin-bottom:6px}
.dining-text-wrap .dining-desc{font-size:15px;color:var(--ink-soft);line-height:1.95}
.dining-price{font-family:"Georgia","Noto Serif SC",serif;font-size:32px;font-weight:700;color:var(--brand-wood);line-height:1}
.dining-price .unit{font-size:14px;color:var(--ink-soft);font-weight:500;margin-left:4px;font-family:var(--font-body)}
@media (max-width:768px){
  .dining-scene{flex-direction:column;gap:1.5rem;padding:20vh 6vw 0;text-align:center}
  .dining-img-wrap{width:82vw;height:36vh;min-height:220px}
  .dining-text-wrap{width:100%;align-items:center;gap:.9rem}
  .dining-text-wrap .dining-desc{max-width:34ch}
}
@media (prefers-reduced-motion:reduce){
  .dining-scene:not([data-index="0"]){opacity:0;visibility:hidden;pointer-events:none}
}

/* ---------- 唤醒 ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.card.reveal:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
/* ---------- 顶部导航 ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:990;background:rgba(22,32,26,.42);backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);transition:background .35s,border-color .35s,box-shadow .35s;border-bottom:1px solid rgba(243,239,230,.07)}
/* 左(Logo) / 中(导航) / 右(按钮组) 三段式：space-between 分开，nowrap 强制同一排 */
.site-header .inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:nowrap}
.brand{display:flex;flex-direction:row;align-items:center;gap:12px;color:var(--bg-cream);line-height:1;white-space:nowrap}
.brand .b-name{font-family:var(--font-title);font-size:24px;font-weight:600;letter-spacing:.14em;line-height:1}
.brand .b-sub{font-size:12px;letter-spacing:.4em;color:rgba(243,239,230,.75);white-space:nowrap;line-height:1;padding-top:2px}
/* 滚动态：按设计稿「背景由透明变白色 + 轻微阴影」，故为浅底 + 深色文字 */
.site-header.scrolled{background:rgba(255,255,255,.88);backdrop-filter:blur(20px) saturate(1.35);-webkit-backdrop-filter:blur(20px) saturate(1.35);box-shadow:0 8px 28px rgba(31,41,55,.12);border-bottom-color:var(--line)}
.site-header.scrolled .brand{color:var(--ink)}
.site-header.scrolled .brand .b-sub{color:var(--ink-soft)}
.nav{display:flex;align-items:center;gap:26px;flex-wrap:nowrap}
.nav a{font-size:13px;color:var(--bg-cream);opacity:.92;position:relative;padding:6px 0;transition:.3s;white-space:nowrap}
.nav a:hover{opacity:1}
.nav a.active{font-weight:600;opacity:1}
.nav a.active::after,.nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
.site-header.scrolled .nav a{color:var(--ink);opacity:.85}
.site-header.scrolled .nav a:hover,.site-header.scrolled .nav a.active{opacity:1}
.header-right{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;flex-shrink:0}
/* 关键：禁止头部右侧换行——按钮再多也保持同一行 */
.header-right > *{flex:none;white-space:nowrap}
.header-right .phone-link{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--bg-cream);font-weight:500}
.site-header.scrolled .phone-link{color:var(--ink)}
.header-right .phone-link .p-ico{width:16px;height:16px}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid rgba(243,239,230,.4);border-radius:8px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--bg-cream);transition:.3s}
.site-header.scrolled .nav-toggle span{background:var(--ink)}
.nav-toggle.close span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav-toggle.close span:nth-child(2){opacity:0}
.nav-toggle.close span:nth-child(3){transform:translateY(-3px) rotate(-45deg)}

/* 中等屏幕（1025~1250px）：右侧按钮组变长会挤压中间导航，
   这里先收一档导航间距与按钮尺寸，保证三段仍在同一排、导航不折行。 */
@media(max-width:1250px){
  .site-header .inner{gap:16px}
  .nav{gap:18px}
  .header-right{gap:8px}
  .header-right .btn{padding:0 12px;font-size:13px}
  .header-right .phone-link{font-size:13px;gap:8px}
}
/* 1025~1150px：品牌(260) + 导航(376) + 右侧按钮组(381) 已超过可用宽度，
   右侧「山野捕光」会被挤出视口右缘。此处隐藏电话号码只留图标、导航间距再收一档。 */
@media(max-width:1150px){
  .header-right .phone-link .p-txt{display:none}
  .nav{gap:14px}
  .header-right{gap:6px}
}

/* ---------- 移动端抽屉 ---------- */
.drawer{position:fixed;top:0;right:-320px;width:320px;height:100vh;z-index:1000;background:var(--card);box-shadow:var(--shadow-lg);transition:right .4s ease;display:flex;flex-direction:column;padding:96px 28px 32px}
.drawer.open{right:0}
.drawer a.d-item{font-size:20px;font-family:var(--font-title);color:var(--ink);padding:16px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.drawer a.d-item small{font-size:11px;color:var(--ink-soft);letter-spacing:.2em}
.drawer a.d-item:hover{color:var(--deep-green);padding-left:6px}
.drawer a.d-item.active{color:var(--deep-green);font-weight:600}
.drawer .d-actions{margin-top:30px;display:flex;flex-direction:column;gap:12px}
.drawer .d-actions .btn{width:100%}
.drawer-foot{margin-top:auto;font-size:12px;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:18px;line-height:1.9}
.scrim,.m-scrim{position:fixed;inset:0;background:rgba(17,24,39,.5);opacity:0;visibility:hidden;transition:.35s;z-index:995}
.scrim.show,.m-scrim.show{opacity:1;visibility:visible}

/* ---------- 页面顶部（子页） ---------- */
.page-hero{position:relative;padding:172px 0 84px;background:var(--deep-green);color:var(--bg-cream);overflow:hidden}
.page-hero .inner{position:relative;z-index:2}
.page-hero h1{font-family:var(--font-title);font-size:38px;font-weight:600;letter-spacing:.05em;margin-bottom:12px}
.page-hero p{font-size:16px;color:rgba(243,239,230,.8);max-width:640px}

/* ---------- 页面统一 Banner（stores/about/rooms/activities/dining 5 个详情页） ---------- */
.page-banner{height:50vh;min-height:320px;padding:90px 5vw 0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--deep-green);color:var(--bg-cream)}
.page-banner-title{font-family:var(--font-title);font-size:clamp(2rem,4vw,3.5rem);font-weight:600;letter-spacing:.06em;line-height:1.3;color:var(--bg-cream);margin:0}
.page-banner-sub{font-size:1rem;letter-spacing:.15em;line-height:1.8;color:rgba(243,239,230,.85);margin-top:14px;max-width:640px}
.page-banner .eyebrow{background:rgba(243,239,230,.14);color:var(--bg-cream);border:1px solid rgba(243,239,230,.28)}
.crumbs{font-size:13px;color:rgba(243,239,230,.7);margin-bottom:18px}
.crumbs a:hover{color:var(--bg-cream)}
.crumbs .sep{margin:0 8px;opacity:.5}
.crumbs .cur{color:var(--bg-cream)}

/* ---------- Hero（首页） ---------- */
.hero{position:relative;height:100vh;min-height:600px;background:var(--ph-bg);color:var(--bg-cream);overflow:hidden}
.hero .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;display:flex;align-items:center;background:var(--ph-bg)}
.hero .hero-slide.active{opacity:1}
.hero .hero-slide .ph{position:absolute;inset:0}
.hero .mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,24,39,.45) 0%,rgba(17,24,39,.2) 45%,rgba(17,24,39,.55) 100%)}
.hero .inner{position:relative;z-index:3;max-width:720px;padding-top:calc(var(--header-h) + 40px)}
.hero-eyebrow{font-size:12px;letter-spacing:.5em;color:rgba(243,239,230,.85);margin-bottom:24px}
.hero .hero-caption h1{font-family:var(--font-title);font-size:52px;line-height:1.25;font-weight:600;letter-spacing:.05em;margin-bottom:22px}
.hero-sub{font-size:17px;color:rgba(243,239,230,.92);margin-bottom:40px;max-width:560px;line-height:1.9}
.hero .btn-actions{display:flex;flex-wrap:wrap;gap:16px}
.hero-dots{position:absolute;right:40px;bottom:40px;z-index:5;display:flex;gap:10px}
.hero-dots i{width:8px;height:8px;border-radius:50%;background:rgba(243,239,230,.5);cursor:pointer}
.hero-dots i.active,.hero-dots i.on{background:var(--bg-cream);width:22px;border-radius:99px}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;border:1px solid rgba(243,239,230,.5);border-radius:50%;color:var(--bg-cream);font-size:22px;transition:.3s;background:rgba(0,0,0,.1)}
.hero-arrow:hover{background:var(--bg-cream);color:var(--ink);border-color:var(--bg-cream)}
.hero-arrow.prev{left:30px}
.hero-arrow.next{right:30px}
.scrolldown{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(243,239,230,.8);font-size:11px;letter-spacing:.35em;cursor:pointer}
.scrolldown .mouse{width:22px;height:34px;border:1.5px solid rgba(243,239,230,.7);border-radius:12px;position:relative}
.scrolldown .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;background:var(--bg-cream);border-radius:2px;transform:translateX(-50%);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:1}70%{opacity:.2}100%{opacity:0}}

/* ---------- 品牌故事 ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.story-media{aspect-ratio:4/5;border-radius:var(--radius);box-shadow:var(--shadow)}
.story-quote{font-family:var(--font-title);font-size:28px;line-height:1.5;color:var(--ink);margin:16px 0 20px}
.story-quote .hl{background:linear-gradient(transparent 62%,rgba(156,190,171,.25) 0)}
.story-body p.body{font-size:15px;color:var(--ink-soft);line-height:2;margin-bottom:16px}
.story-body .stat-row{display:flex;gap:40px;margin-top:28px}
.stat b{font-family:var(--font-title);font-size:30px;color:var(--deep-green);display:block;line-height:1.2}
.stat span{font-size:13px;color:var(--ink-soft)}
@media(max-width:980px){.story-grid{grid-template-columns:1fr;gap:36px}.story-media{aspect-ratio:16/10}}

/* ---------- 品牌故事 · 拼接 → 全屏放大 → 文字浮现（pin 连续滚动，不被打断） ---------- */
.story-section{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--bg);overflow:hidden;padding:0}
#about .about-veil{position:absolute;inset:0;background:var(--bg);opacity:0;pointer-events:none;z-index:10}
.split-stage{position:relative;width:60vw;height:60vh;border-radius:12px;overflow:hidden;z-index:1;transform-origin:center center;will-change:transform;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.split-img{position:absolute;top:0;bottom:0;width:50%;height:100%;background-image:url('../images/山野风景.webp?sharecode=HVYYYDTDM4');background-size:cover;background-repeat:no-repeat;will-change:transform;image-rendering:-webkit-optimize-contrast}
.split-img.left{left:0;background-position:left center;transform:translateX(-30px)}
.split-img.right{right:0;background-position:right center;transform:translateX(30px)}
/* 文字层：整屏 Flexbox 居中，子内容包裹于 .story-card（毛玻璃卡片） */
.story-text{position:absolute;top:0;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2;text-align:center;opacity:0;visibility:hidden;pointer-events:none}
.story-card{position:relative;pointer-events:auto;width:82%;max-width:800px;background:rgba(22,32,26,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;padding:50px;color:var(--bg-cream)}
.story-text .section-title{color:var(--bg-cream)}
.story-text .story-quote{margin:14px auto 18px;color:var(--bg-cream)}
.story-text p.body{font-size:14px;line-height:2;color:rgba(243,239,230,.9);margin-bottom:12px}
.story-text .btn-outline{color:var(--bg-cream);border-color:rgba(243,239,230,.55)}
.story-text .btn-outline:hover{border-color:var(--bg-cream);color:var(--bg-cream)}
.story-text .stat-row{display:flex;gap:36px;margin-top:22px;justify-content:center;flex-wrap:wrap}
.story-text .stat span{color:rgba(243,239,230,.72)}
@media (max-width:900px){
  .split-stage{width:88vw;height:52vh}
  .story-card{width:90%;padding:26px 20px}
}
@media (prefers-reduced-motion:reduce){
  .split-img.left,.split-img.right{transform:none}
  .story-text{opacity:1;visibility:visible}
}
/* ---------- 模块标题 - 详见 section-head 上方，补充带"数字编号"样式 ---------- */
.sec-num{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.3em;color:var(--ink-soft)}
.sec-num b{font-family:var(--font-title);font-size:26px;color:var(--deep-green)}

/* ---------- 门店卡片（探索门店-横版大图卡片） ---------- */
.store-list{display:flex;flex-direction:column;gap:40px;width:100%;max-width:800px;margin:0 auto}
.store-card{position:relative;width:100%;max-width:800px;margin:0 auto}
.store-card .card-img-link{display:block;width:100%}
.store-card .ph{aspect-ratio:16/9;width:100%;min-height:0;background-size:cover;background-position:center}
.store-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.store-card .meta{position:absolute;left:24px;top:24px;z-index:3;display:flex;flex-wrap:wrap;gap:8px}
.store-card .ph-note{background:rgba(22,32,26,.72);color:rgba(243,239,230,.92)}
.store-card .stay-line{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:14px}

/* ---------- 活动 / 餐饮横滑 ---------- */
.act-mini .ph{aspect-ratio:3/2;min-height:200px}
.dish-mini .ph{aspect-ratio:1/1;min-height:280px}

/* ---------- 页脚 ---------- */
.site-footer{background:var(--deep-green);color:var(--bg-cream);padding:72px 0 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:48px;padding-bottom:48px}
.footer-col h4{font-size:13px;letter-spacing:.2em;color:rgba(243,239,230,.5);margin-bottom:20px;font-weight:500}
.footer-col ul li{margin-bottom:12px}
.footer-col ul a{font-size:14px;color:rgba(243,239,230,.78);transition:.25s}
.footer-col ul a:hover{color:var(--bg-cream);padding-left:4px}
.footer-brand .brand{color:var(--bg-cream);margin-bottom:14px}
.footer-brand p{font-size:13px;color:rgba(243,239,230,.6);line-height:2;max-width:300px}
.footer-phone{font-family:var(--font-title);font-size:28px;letter-spacing:.04em;color:var(--bg-cream);display:inline-flex;align-items:center;gap:12px;margin-bottom:10px}
.footer-phone .p-ico{width:22px;height:22px}
.footer-addr{font-size:13px;color:rgba(243,239,230,.6);line-height:2}
.footer-addr div{margin-bottom:2px}
.footer-bottom{border-top:1px solid rgba(243,239,230,.12);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:rgba(243,239,230,.45)}
.footer-bottom a{color:rgba(243,239,230,.6)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr;gap:36px}}

/* ---------- 门店详情 ---------- */
.detail-hero{height:60vh;min-height:420px;position:relative;color:var(--bg-cream);display:flex;align-items:flex-end;background:var(--ph-bg)}
.detail-hero .info{position:relative;z-index:2;padding:52px 0}
.detail-hero h1{font-family:var(--font-title);font-size:40px;margin-bottom:10px;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.detail-hero .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.detail-hero .tagline{font-size:15px;color:rgba(243,239,230,.85);max-width:640px}
.detail-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);margin-top:-40px;position:relative;z-index:3;padding:30px 34px}
.detail-card .dc-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:30px}
.detail-card .dc-right{display:flex;flex-direction:column;gap:14px;justify-content:center}
.detail-card .dc-right .btn{width:100%}
.detail-card .dc-line{display:flex;gap:12px;font-size:14px;color:var(--ink-soft);align-items:baseline}
.detail-card .dc-line b{color:var(--ink);min-width:72px}
.feat{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.feat.rev .f-img{order:2}
.feat .f-img{aspect-ratio:4/3;border-radius:var(--radius);box-shadow:var(--shadow)}
.feat h3{font-family:var(--font-title);font-size:24px;margin-bottom:16px}
.feat ul li{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px;color:var(--ink-2)}
.feat ul li:last-child{border-bottom:none}
.feat .dot{width:6px;height:6px;border-radius:50%;background:var(--light-green);margin-top:9px;flex:none}
@media(max-width:900px){.feat{grid-template-columns:1fr;gap:30px}.feat.rev .f-img{order:0}.detail-card .dc-grid{grid-template-columns:1fr}}
.contact-band{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;text-align:center;color:var(--ink);will-change:transform,opacity;transform-origin:center}
.contact-band h2{font-family:var(--font-title);font-size:clamp(30px,3.4vw,44px);font-weight:600;letter-spacing:.04em;color:var(--ink);margin:0}
.contact-band p{color:var(--ink-soft);font-size:16px;margin:0}
.contact-band .tel-big{display:inline-flex;align-items:center;font-family:'Noto Serif SC',serif;font-size:6rem;font-weight:700;line-height:1.2;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.contact-band .tel-big .d{display:inline-block}
.contact-band .tel-big .sp{display:inline-block;width:.4em}
.contact-band .cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:16px}

/* ---------- 联系电话 · pin 分段文字（cta-group ×5，全部出现后释放） ---------- */
.cta-sec{position:relative;height:100vh;overflow:hidden;padding:0;background:var(--bg);color:var(--ink)}
.cta-inner{position:relative;width:100%;display:flex;align-items:center;justify-content:center;height:100vh;padding:0 5vw}

/* ---------- 图集 ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery .ph{aspect-ratio:4/3}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}

/* ---------- 关于 / 地图 ---------- */
.map-wrap{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--ph-bg)}
.map-wrap .ph{aspect-ratio:16/7;opacity:.55}
.map-pin{position:absolute;transform:translate(-50%,-100%);z-index:3;text-align:center}
.map-pin i{display:block;width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--light-green);transform:rotate(-45deg);margin:0 auto;border:2px solid var(--bg-cream);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.map-pin span{display:block;margin-top:6px;font-size:12px;color:var(--ink);background:var(--card);padding:3px 10px;border-radius:6px;box-shadow:var(--shadow);white-space:nowrap}
.map-legend{position:absolute;left:20px;top:20px;z-index:4;background:rgba(27,36,38,.92);border-radius:12px;padding:16px 18px;font-size:13px;color:var(--ink-soft);box-shadow:var(--shadow)}
.map-legend div{display:flex;align-items:center;gap:8px;padding:3px 0}
.map-legend i{width:10px;height:10px;border-radius:50% 50% 50% 0;background:var(--light-green);transform:rotate(45deg)}

/* ---------- 联系我们 ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.contact-card h3{font-family:var(--font-title);font-size:21px}
.contact-card p{font-size:14px;color:var(--ink-soft);line-height:1.9}
.contact-card .c-tag{color:var(--deep-green);font-size:13px}
@media(max-width:900px){.contact-cards{grid-template-columns:1fr}}
.tel-hero{text-align:center;padding:30px 0}
.tel-hero .label{font-size:13px;letter-spacing:.3em;color:var(--ink-soft)}
.tel-hero .num{font-family:var(--font-title);font-size:52px;font-weight:600;color:var(--deep-green);display:block;margin:14px 0 24px;letter-spacing:.05em}

/* ---------- 折叠面板 ---------- */
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);margin-bottom:14px;overflow:hidden}
.faq-q{padding:20px 24px;font-size:15px;font-weight:500;display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:16px}
.faq-q .p-chev{width:12px;height:12px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);transition:.3s;flex:none;margin-top:-4px}
.faq-item.open .faq-q .p-chev{transform:rotate(-135deg);margin-top:6px}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a > div{padding:0 24px 22px;font-size:14px;color:var(--ink-soft);line-height:2}
.copied{background:var(--deep-green)!important;border-color:var(--deep-green)!important}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(80px);background:var(--deep-green);color:var(--bg-cream);padding:14px 26px;border-radius:99px;font-size:14px;box-shadow:var(--shadow-lg);transition:.4s;opacity:0;z-index:1200;pointer-events:none;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .nav{display:none}
  .nav-toggle{display:flex}
}
@media(max-width:900px){
  .header-right .phone-link .p-txt{display:none}
  .hero .hero-caption h1{font-size:38px}
  .hero .inner{padding:calc(var(--header-h) + 16px) 20px}
  .section-title{font-size:28px}
  .detail-hero h1{font-size:30px}
  .hero-arrow{display:none}
  .hero-dots{right:20px;bottom:90px}
  .scrolldown{bottom:84px}
}
@media(max-width:620px){
  .container{padding:0 18px}
  .section{padding:64px 0}
  .hero{min-height:560px}
  .hero .hero-caption h1{font-size:32px;letter-spacing:.03em}
  .hero-sub{font-size:15px}
  .btn-lg{height:48px;padding:0 22px}
  .contact-band{padding:36px 26px}.contact-band .tel-big{font-size:clamp(2.6rem,9vw,4.5rem);white-space:normal;flex-wrap:wrap;row-gap:.05em}
  .tel-hero .num{font-size:36px}
  .brand .b-sub{display:none}
}
.filter-ctrls{display:flex;flex-direction:column;align-items:center;gap:10px;overflow-x:auto;padding:4px 0}
.filter-ctrls .chips{justify-content:center;flex-wrap:nowrap}
.dish-card .card-foot b{color:var(--deep-green);font-size:17px}
.store-card .ph{aspect-ratio:16/9;min-height:0}
.act-full .ph{aspect-ratio:3/4}
.act-full{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;padding:18px}
.act-body{border-top:1px dashed var(--line);padding-top:18px;margin-top:18px}
.spec-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:820px;margin:0 auto}
.copy-hint{font-size:12px;color:var(--ink-soft)}
.loc-list{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:stretch}
@media(max-width:900px){.filter-ctrls{justify-content:flex-start}.loc-list{grid-template-columns:1fr}}

/* ============================================================
   首页视觉升级 v2 —— Loading / Hero 双层导航 / 门店手风琴
   ============================================================ */

/* ---------- 等待页 Loading Screen ---------- */
#loading-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;pointer-events:none;background:var(--deep-green);transition:opacity .8s ease}
#loading-screen.hidden{opacity:0;visibility:hidden}
/* 非首次访问：渲染前即隐藏，杜绝闪烁 */
.skip-loading #loading-screen{display:none!important}
#loading-screen .load-inner{text-align:center;color:var(--bg-cream);padding:24px}
#loading-screen .load-logo{font-family:var(--font-title);font-size:clamp(46px,8vw,66px);font-weight:600;letter-spacing:.18em;text-indent:.18em;line-height:1;background:linear-gradient(180deg,var(--bg-cream),var(--light-green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#loading-screen .load-sub{margin-top:18px;font-size:13px;letter-spacing:.5em;text-indent:.5em;color:rgba(243,239,230,.6)}
#loading-screen .load-ind{display:flex;justify-content:center;gap:10px;margin-top:36px}
#loading-screen .load-ind i{width:7px;height:7px;border-radius:50%;background:var(--light-green);opacity:.25;animation:loadPulse 1.3s ease-in-out infinite}
#loading-screen .load-ind i:nth-child(2){animation-delay:.2s}
#loading-screen .load-ind i:nth-child(3){animation-delay:.4s}
@keyframes loadPulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){#loading-screen .load-ind i{animation:none;opacity:.55}}

/* ---------- 门店背景基调（低保真占位 → 品牌色渐变） ---------- */
.l-banan{background:var(--deep-green)}
.l-liangping{background:var(--deep-green)}
.l-nantianhu{background:var(--deep-green)}

/* ---------- Hero v2 · 双层结构（背景图交叉淡入 + 纵向文字导航） ---------- */
.hero.hero-v2{display:block}
.hero-v2 .hero-bg{position:absolute;inset:0;z-index:0}
.hero-v2 .hero-bg-layer{position:absolute;inset:0;background-size:cover!important;background-position:center!important;opacity:0;transition:opacity 1.1s ease;overflow:hidden}
.hero-v2 .hero-bg-layer.active{opacity:1}
.hero-v2 .hero-wrap{position:relative;z-index:3;width:100%}
/* 容器：占满视口高度，内容沉底 */
.hero-v2 .hero-inner{position:relative;width:100%;max-width:900px;margin:0 auto;height:100vh;min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;padding:calc(var(--header-h) + 16px) 0 56px}
.hero-v2 .hero-eyebrow{text-align:center}
/* 导航：纵向排列，水平居中，间距紧密紧凑 */
.hero-v2 .hero-nav{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:30px}
/* 按钮：精致导航标签，单行展示，不换行 */
.hero-v2 .hero-item{position:relative;display:block;width:auto;font-family:var(--font-title);font-size:clamp(18px,2.4vw,24px);font-weight:500;line-height:1.2;letter-spacing:.12em;color:rgba(243,239,230,.42);padding:4px 10px;cursor:pointer;white-space:nowrap;text-align:center;transition:color .45s ease}
.hero-v2 .hero-item:hover{color:rgba(243,239,230,.85)}
.hero-v2 .hero-item.active{color:var(--bg-cream)}
.hero-v2 .hero-item::after{content:"";position:absolute;left:50%;bottom:2px;width:0;height:1px;background:var(--bg-cream);transform:translateX(-50%);transition:width .5s ease}
.hero-v2 .hero-item.active::after{width:24px}
.hero-v2 .hero-sub{max-width:600px;margin:0 auto 24px;color:rgba(243,239,230,.9)}
.hero-v2 .btn-actions{justify-content:center;margin-bottom:32px}
.hero-v2 .hero-progress{width:64px;height:2px;margin:26px auto 0;background:rgba(243,239,230,.22);border-radius:2px;overflow:hidden;position:relative}
.hero-v2 .hero-progress i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:var(--bg-cream)}
.hero.hero-v2.paused .hero-progress i{animation-play-state:paused}
@keyframes heroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 三大门店 · 手风琴卡片 ---------- */
.accordion-container{display:flex;align-items:stretch;gap:16px;justify-content:center;padding:0 40px;height:70vh;min-height:380px}
.acc-card{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:12px;cursor:pointer;box-shadow:var(--shadow);transition:flex .6s ease,border-radius .6s ease,box-shadow .6s ease}
.acc-card.active,.acc-card:hover{flex:3;border-radius:16px;box-shadow:var(--shadow-lg)}
.acc-bg{position:absolute;inset:0;background-size:cover!important;background-position:center!important;transform:scale(1);transition:opacity .6s ease,transform .9s ease;will-change:transform}
.acc-card.active .acc-bg{transform:scale(1.08)}
.acc-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(22,32,26,.15) 0%,rgba(22,32,26,.05) 42%,rgba(22,32,26,.8) 100%)}
.acc-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 26px 30px;color:var(--bg-cream)}
.acc-top{position:absolute;top:26px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;gap:12px;opacity:1;transition:opacity .5s ease}
.acc-card:not(.active) .acc-top{opacity:0}
.acc-top .tag{background:rgba(22,32,26,.5);border:1px solid rgba(243,239,230,.25);color:var(--bg-cream);letter-spacing:.14em}
.acc-caption{text-align:left}
.acc-title{font-family:var(--font-title);font-size:clamp(20px,2vw,28px);font-weight:600;line-height:1.35;letter-spacing:.05em;margin-bottom:10px;opacity:.5;transform:translateY(4px);transition:opacity .5s ease,transform .5s ease}
.acc-card.active .acc-title{opacity:1;transform:none}
.acc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;opacity:0;transition:opacity .5s ease .08s}
.acc-card.active .acc-tags{opacity:1}
.acc-tags .chip{background:rgba(22,32,26,.45);border-color:rgba(243,239,230,.28);color:var(--bg-cream);font-size:12px}
.acc-text{font-size:14px;line-height:1.9;color:rgba(243,239,230,.94);max-width:44ch;margin-bottom:22px;opacity:0;transform:translateY(12px);transition:opacity .6s ease .16s,transform .6s ease .16s}
.acc-card.active .acc-text{opacity:1;transform:none}
.acc-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--bg-cream);border-bottom:1px solid rgba(243,239,230,.55);padding-bottom:3px;opacity:0;transform:translateY(8px);transition:opacity .5s ease .2s,transform .5s ease .2s,gap .3s}
.acc-card.active .acc-link{opacity:1;transform:none}
.acc-link:hover{gap:12px;border-color:var(--bg-cream)}
.acc-link .arrow{width:14px;height:14px;flex:none}

/* ---------- 手风琴 / Hero 响应式 ---------- */
@media(max-width:900px){
  .hero-v2 .hero-item{font-size:clamp(17px,3vw,22px);padding:3px 8px}
  .hero-v2 .hero-item.active::after{width:20px}
  .hero-v2 .hero-nav{gap:10px;margin-top:24px}
  .hero-v2 .btn-actions{margin-bottom:26px}
  .hero-v2 .hero-progress{margin:20px auto 0}
}
@media(max-width:768px){
  .accordion-container{flex-direction:column;height:640px;gap:12px}
  .acc-card{min-height:118px}
  .acc-card.active{flex-grow:6;min-height:0}
  .acc-overlay{padding:18px 20px 24px}
  .acc-title{font-size:23px;margin-bottom:8px}
  .acc-tags{margin-bottom:10px}
  .acc-text{margin-bottom:16px;max-width:none;font-size:13px}
}
@media(max-width:620px){
  .hero-v2 .hero-sub{margin-bottom:18px}
  .hero-v2 .hero-nav{margin-top:20px}
  .hero-v2 .hero-inner{padding-bottom:48px}
}
/* 矮屏（如横屏手机）防溢出：整体压缩字号 */
@media(max-height:640px){
  .hero-v2 .hero-inner{min-height:560px;padding-bottom:40px}
  .hero-v2 .hero-item{font-size:clamp(15px,2.6vw,20px);padding:2px 8px}
  .hero-v2 .hero-nav{gap:8px;margin-top:16px}
  .hero-v2 .hero-sub{margin-bottom:12px}
  .hero-v2 .btn-actions{margin-bottom:16px}
  .hero-v2 .hero-progress{margin:14px auto 0}
}

/* ============================================================
   视觉升级 v3 —— Hero 视差 / 门店水平画廊 / GSAP Reveal
   ============================================================ */

/* ---------- 三大门店 · 水平画廊舞台 ---------- */
#stores-sec.hs-on{overflow:hidden;padding:0}
.hs-stage{position:relative;min-height:100vh;background-color:var(--bg);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hs-stage .container{padding:calc(var(--header-h) + 32px) 0 26px;flex:none;width:100%}
.hs-stage .section-head{margin-bottom:26px}
.hs-stage .section-head .section-title{font-size:clamp(26px,3.4vw,36px);margin-bottom:12px}
.hs-stage .section-head .section-desc{font-size:15px}
.hs-stage .accordion-container{flex:none;width:100%;height:70vh;min-height:380px;margin:0;padding:0 40px;box-sizing:border-box}

/* ---------- 水平画廊 · 移动端回退纵向 ---------- */
@media(max-width:768px){
  #stores-sec.hs-on{padding:0 0 64px;overflow:visible}
  .hs-stage{height:auto;min-height:0;background:transparent;display:block;overflow:visible}
  .hs-stage .container{padding-top:64px}
  .hs-stage .section-head{margin-bottom:22px}
  .hs-stage .accordion-container{flex:none;height:640px;min-height:0;width:100%;margin:0;padding:0;box-sizing:border-box}
  .hs-stage .accordion-container{flex-direction:column;gap:12px}
  .hs-stage .accordion-container .acc-card{min-height:118px}
  .hs-stage .accordion-container .acc-card.active{flex-grow:6;min-height:0}
  .hs-stage::after{display:none}
}
/* · 减弱动效：关闭钉住平移，直接纵向展示 */
@media (prefers-reduced-motion:reduce){
  #stores-sec.hs-on{padding:0 0 64px;overflow:visible}
  .hs-stage{height:auto;min-height:0;background:transparent;display:block;overflow:visible}
  .hs-stage .container{padding-top:64px}
  .hs-stage .accordion-container{flex:none;height:640px;min-height:0;width:100%;margin:0;padding:0;box-sizing:border-box}
  .hs-stage .accordion-container{flex-direction:column;gap:12px}
  .hs-stage .accordion-container .acc-card{min-height:118px}
  .hs-stage .accordion-container .acc-card.active{flex-grow:6;min-height:0}
  .hs-stage::after{display:none}
}

/* ============================================================
   模块一 · Lenis 平滑滚动
   ============================================================ */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ============================================================
   探索门店 · 滚动驱动横向轮播（stores.html #stores-scroll）
   ============================================================ */
.stores-scroll-sec{position:relative;height:100vh;overflow:hidden;background:var(--bg);padding:0}
.stores-stage{position:relative;width:100%;height:100vh}
.stores-scene{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--header-h) + 40px) 5vw 60px;
}
.store-panel{
  display:flex;align-items:center;gap:5vw;
  width:min(1100px, 90vw);
  max-width:1100px;
  background:var(--card);
  border-radius:24px;
  box-shadow:0 30px 80px rgba(31,41,55,.16);
  overflow:hidden;
  will-change:transform,opacity;
}
.store-panel-img{
  flex:0 0 50%;
  height:60vh;min-height:360px;max-height:560px;
  overflow:hidden;
}
.store-panel-img img{width:100%;height:100%;object-fit:cover;display:block}
.store-panel-body{
  flex:1 1 50%;
  padding:40px 5vw 40px 2vw;
  display:flex;flex-direction:column;gap:18px;
  align-items:flex-start;
}
.store-panel-title{font-family:var(--font-title);font-size:clamp(26px,2.8vw,36px);font-weight:600;line-height:1.3;color:var(--ink);letter-spacing:.04em;margin:0}
.store-panel-tags{display:flex;flex-wrap:wrap;gap:8px}
.store-panel-desc{font-size:15px;color:var(--ink-soft);line-height:1.95;max-width:44ch}
@media (max-width:900px){
  .store-panel{flex-direction:column;width:92vw}
  .store-panel-img{flex:none;width:100%;height:36vh;min-height:220px}
  .store-panel-body{padding:26px 6vw 30px;gap:12px}
}

/* ---------- 探索门店 · 门店对比 CTA（pin 分段右侧弹入） ---------- */
/* ---------- 详情页通用 CTA（深绿底，与页尾同色） ---------- */
.stores-cta-sec{position:relative;height:100vh;overflow:hidden;background:var(--deep-green);padding:0}
.stores-cta-sec .cta-inner{
  width:100%;height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:0 5vw;
}
.stores-cta-sec .contact-band{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;gap:1.4rem;width:100%;max-width:820px;
}
.stores-cta-sec .cta-group{
  display:flex;flex-direction:column;align-items:center;gap:0.6rem;
  width:100%;
}
.stores-cta-sec .contact-band h2{
  font-family:var(--font-title);
  font-size:clamp(30px,3.6vw,48px);
  font-weight:600;letter-spacing:.04em;line-height:1.3;
  color:var(--bg-cream);margin:0;
}
.stores-cta-sec .contact-band .cta-lede{
  font-size:16px;color:rgba(243,239,230,.82);line-height:1.95;
  max-width:52ch;margin:0;
}
.stores-cta-sec .contact-band .btn{
  margin-top:12px;
  background:var(--bg-cream);color:var(--deep-green);border-color:var(--bg-cream);
}
.stores-cta-sec .contact-band .btn:hover{background:var(--bg-cream);color:var(--deep-green);border-color:var(--bg-cream)}

/* ---------- 品牌理念 · story-media 实际图片 ---------- */
.story-media{overflow:hidden}
.story-media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius)}

/* ---------- 关于我们 · 山野地图（深绿底 + SVG 手绘） ---------- */
.map-split-sec{padding:0;background:var(--deep-green);color:var(--bg-cream)}
.map-split{
  display:grid;
  grid-template-columns:minmax(340px,1fr) 1.3fr;
  min-height:100vh;
  align-items:stretch;
}
.map-split-text{
  display:flex;flex-direction:column;justify-content:center;
  gap:1.2rem;
  padding:12vh 5vw 12vh 8vw;
  background:var(--deep-green);
  color:var(--bg-cream);
}
.map-split-text .eyebrow{
  background:rgba(156,190,171,.14);
  color:var(--light-green);
  border:1px solid rgba(156,190,171,.28);
  align-self:flex-start;
}
.map-split-text .section-title{
  font-size:clamp(30px,3.4vw,44px);
  margin-bottom:6px;
  color:var(--bg-cream);
}
.map-split-text .section-desc{
  max-width:44ch;line-height:1.95;margin-bottom:8px;
  color:rgba(243,239,230,.72);
}
.map-legend-inline{
  display:flex;flex-direction:column;gap:8px;
  margin:12px 0 22px;
  font-size:14px;color:rgba(243,239,230,.78);
}
.map-legend-inline div{display:flex;align-items:center;gap:10px}
.map-legend-inline i{
  width:11px;height:11px;border-radius:50% 50% 50% 0;
  background:var(--light-green);transform:rotate(45deg);flex:none;
}
.map-split-text .btn-outline-light{
  align-self:flex-start;
  border-color:rgba(243,239,230,.5);
  color:var(--bg-cream);
}
.map-split-text .btn-outline-light:hover{
  background:var(--bg-cream);color:var(--deep-green);border-color:var(--bg-cream);
}

/* 右侧 SVG 容器 */
.map-split-svg{
  position:relative;
  background:var(--deep-green);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  padding:5vh 4vw;
}
.map-split-svg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 50%,rgba(156,190,171,.08) 0%,transparent 70%);
  pointer-events:none;
}
.map-split-svg svg{
  width:100%;height:auto;
  max-height:90vh;
  display:block;
  position:relative;z-index:1;
}

/* 地图节点脉冲动画 */
.map-node circle:nth-child(2){
  transform-box:fill-box;
  transform-origin:center;
  animation:mapPulse 2.4s ease-out infinite;
}
.map-node[data-node="liangping"] circle:nth-child(2){animation-delay:.6s}
.map-node[data-node="nantianhu"] circle:nth-child(2){animation-delay:1.2s}
@keyframes mapPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.25);opacity:.75}
}
@media (prefers-reduced-motion:reduce){
  .map-node circle:nth-child(2){animation:none}
}

@media (max-width:900px){
  .map-split{grid-template-columns:1fr;min-height:auto}
  .map-split-text{padding:10vh 8vw 6vh}
  .map-split-svg{min-height:60vh;padding:6vh 6vw}
  .map-split-svg svg{max-height:70vh}
}

/* ---------- 关于我们 · 品牌理念渐进入场 ---------- */
#about-intro [data-fade]{will-change:transform,opacity}
#about-intro .stat-row{will-change:transform,opacity}

/* ---------- 关于我们 · 三件事卡片错峰上浮 ---------- */
.belief-card{will-change:transform,opacity}

/* ---------- 热门房型 · 分组卡片左右滑入切换 ---------- */
.rooms-switch-sec{position:relative;height:100vh;overflow:hidden;background:var(--bg);padding:0}
.rooms-stage{position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content:center}
.rooms-group{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  gap:4vw;
  padding:calc(var(--header-h) + 40px) 5vw 60px;
  pointer-events:none;
}
.rooms-group[data-group="0"]{pointer-events:auto}
.rooms-switch-sec .room-card{
  position:relative;
  width:38vw;min-width:360px;max-width:520px;
  height:64vh;
  flex-shrink:0;
  border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  box-shadow:0 30px 60px rgba(0,0,0,.18);
  will-change:transform,opacity;
}
/* rooms.html 卡片内部：图片铺满整卡作背景，文字居中覆盖其上（覆盖首页画卷的"图上文下"结构） */
.rooms-switch-sec .room-card .room-ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.rooms-switch-sec .room-card .room-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rooms-switch-sec .room-card .room-body {
  padding: 30px 40px;   /* 缩小内边距，给内容留出空间 */
}
.rooms-switch-sec .room-name {
  font-size: clamp(24px, 2.8vw, 32px);  /* 略微缩小字号，防止换行过多 */
  margin-bottom: 8px;
}
.rooms-switch-sec .room-meta {
  margin-bottom: 12px;
}
.rooms-switch-sec .room-price {
  margin-bottom: 16px;
}
@media (max-width:900px){
  .rooms-group{flex-direction:column;gap:2rem;padding:calc(var(--header-h) + 20px) 5vw 40px}
  .rooms-switch-sec .room-card{width:82vw;min-width:0;height:38vh}
  .rooms-switch-sec .room-card .room-body{padding:18px 22px}
}

/* ---------- 当季活动 · 错落双卡 + 下方覆盖 ---------- */
.acts-stack-sec{position:relative;height:100vh;overflow:hidden;background:var(--bg);padding:0}
.acts-stage{
  position:relative;width:100%;height:100vh;
}
.acts-slot{
  position:absolute;
  width:min(560px, 42vw);
  will-change:transform;
}
.acts-slot[data-slot="1"]{top:calc(var(--header-h) + 60px);left:6vw}
.acts-slot[data-slot="2"]{bottom:60px;right:6vw}
.acts-slot .act-card{
  position:relative;
  background:var(--card);
  border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(31,41,55,.16);
  display:flex;flex-direction:column;
  will-change:transform;
}
/* 槽位里第 2 张卡叠在第 1 张之上，初始在屏幕下方 */
.acts-slot .act-card[data-pending]{
  position:absolute;inset:0;
  transform:translateY(120vh);
}
.act-card-img{
  width:100%;height:230px;overflow:hidden;flex:none;
}
.act-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.act-card-body{
  padding:22px 26px 26px;
  display:flex;flex-direction:column;gap:10px;
}
.act-card-tagrow{display:flex;flex-wrap:wrap;gap:8px}
.act-card-title{font-family:var(--font-title);font-size:22px;font-weight:600;line-height:1.35;color:var(--ink);margin:0}
.act-card-desc{font-size:14px;color:var(--ink-soft);line-height:1.85;margin:0}
.act-card .link-more{margin-top:4px}

@media (max-width:900px){
  .acts-slot{position:relative;width:auto;margin:0 6vw 40px}
  .acts-slot[data-slot="1"],.acts-slot[data-slot="2"]{top:auto;left:auto;right:auto;bottom:auto}
  .acts-stack-sec{height:auto;padding:calc(var(--header-h) + 40px) 0 60px;overflow:visible}
  .acts-stage{height:auto}
  .acts-slot .act-card[data-pending]{position:relative;transform:none;inset:auto;margin-top:24px}
  .act-card-img{height:200px}
}

/* ---------- 山野餐饮 · 左门店导航 + 右横滑菜品 ---------- */
.dining-split-sec{position:relative;min-height:100vh;background:var(--bg);padding:calc(var(--header-h) + 60px) 0 80px}
.dining-split{
  display:grid;
  grid-template-columns:minmax(280px,320px) 1fr;
  gap:4vw;
  padding:0 6vw;
  align-items:stretch;
  min-height:70vh;
}

/* 左侧导航 */
.dining-store-nav{
  display:flex;flex-direction:column;
  padding-top:8px;
}
.dining-nav-title{
  font-family:var(--font-title);
  font-size:clamp(24px,2.4vw,30px);
  font-weight:600;color:var(--ink);
  margin:8px 0 32px;
}
.dining-store-list{
  position:relative;
  display:flex;flex-direction:column;gap:36px;
  padding-left:26px;
}
/* 竖线 */
.dining-line{
  position:absolute;left:6px;top:10px;bottom:10px;
  width:1.5px;background:var(--line);
}
.dining-line::after{
  content:"";position:absolute;left:0;top:0;
  width:1.5px;height:var(--line-progress,0%);
  background:var(--light-green);
  transition:height .5s cubic-bezier(.4,0,.2,1);
}
.dining-store-item{
  position:relative;
  display:flex;flex-direction:column;gap:4px;
  text-align:left;padding:6px 0;
  border:none;background:none;cursor:pointer;
  color:var(--ink-soft);
  transition:color .3s;
}
.dining-store-item .dot{
  position:absolute;left:-26px;top:14px;
  width:13px;height:13px;border-radius:50%;
  background:var(--card);
  border:1.5px solid var(--line);
  transition:all .35s;
}
.dining-store-item .name{
  font-family:var(--font-title);
  font-size:clamp(17px,1.5vw,20px);
  font-weight:600;letter-spacing:.04em;
  color:inherit;transition:color .3s;
}
.dining-store-item .sub{
  font-size:12.5px;letter-spacing:.08em;
  color:var(--ink-soft);opacity:.8;
}
.dining-store-item:hover{color:var(--ink)}
.dining-store-item:hover .dot{border-color:var(--light-green)}
.dining-store-item.active{color:var(--ink)}
.dining-store-item.active .name{color:var(--deep-green)}
.dining-store-item.active .dot{
  background:var(--light-green);
  border-color:var(--light-green);
  box-shadow:0 0 0 4px rgba(156,190,171,.18);
}

/* 右侧面板 */
.dining-panels{
  position:relative;
  min-height:60vh;
}
.dining-panel{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease,visibility .45s ease;
}
.dining-panel.active{
  opacity:1;visibility:visible;pointer-events:auto;
}
.dining-track{
  padding:8px 4px 22px;
  cursor:grab;
}
.dining-track.dragging{cursor:grabbing}
.dining-track .h-item{width:300px}

@media (max-width:900px){
  .dining-split{grid-template-columns:1fr;gap:24px;padding:0 6vw}
  .dining-store-list{flex-direction:row;flex-wrap:wrap;gap:12px;padding-left:0}
  .dining-line{display:none}
  .dining-store-item{padding:10px 14px;border:1px solid var(--line);border-radius:99px}
  .dining-store-item .dot{position:static;margin-right:8px;width:8px;height:8px;display:inline-block}
  .dining-store-item .sub{display:none}
  .dining-store-item.active{border-color:var(--light-green);background:var(--bg-cream)}
  .dining-panels{min-height:auto}
  .dining-panel{position:relative;inset:auto}
  .dining-panel:not(.active){display:none}
}

/* ============================================================
   视觉升级 · 全局基调 + 背景与纹理系统（追加，不改既有规则）
   ============================================================ */
:root{
  --bg-warm:var(--bg-cream);
  --bg-cool:var(--bg-cream);
  --noise-opacity:0.03;
  --glow-green:rgba(156,190,171,.12);
}

/* 页面背景：暖 → 中 → 冷 的极微妙渐变 */
body{
  background-color:var(--bg);
  background-image:none;
  background-attachment:fixed;
}

/* 全局噪点纹理覆盖层 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:var(--noise-opacity);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n?sharecode=HVYYYDTDM4)'/%3E%3C/svg%3E");
}

/* Hero 深色区域：柔和的绿色径向光晕 */
.hero-v2 .hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 40%, rgba(156,190,171,.18) 0%, transparent 70%);
  pointer-events:none;
  z-index:1;
}

/* 深色板块统一加微光晕：中心稍亮、边缘深绿 */
.stores-cta-sec,
.map-split-sec,
.site-footer{
  background:var(--deep-green)!important;
}

/* ============================================================
   第二批 · 排版重构
   ============================================================ */

/* ---------- 1. HERO 文字层次 ---------- */
.hero-v2 .hero-eyebrow{
  position:relative;
  display:inline-block;
  padding:0 64px;
}
.hero-v2 .hero-eyebrow::before,
.hero-v2 .hero-eyebrow::after{
  content:"";
  position:absolute;
  top:50%;
  width:44px;
  height:1px;
  background:rgba(243,239,230,.4);
}
.hero-v2 .hero-eyebrow::before{left:0}
.hero-v2 .hero-eyebrow::after{right:0}

/* 副标题：首行略微内收，营造编辑式排版节奏 */
.hero-v2 .hero-sub{
  text-indent:2em;
  padding-left:1em;
  padding-right:1em;
}

/* ---------- 2. 三大门店 · 卡片顶部锚点短线（错落已撤销，恢复等高对齐） ---------- */
.acc-card::before{
  content:"";
  position:absolute;
  top:0;left:26px;
  width:36px;height:2px;
  background:var(--light-green);
  z-index:5;
  opacity:.8;
  transition:width .5s ease;
}
.acc-card.active::before{width:80px}

/* ---------- 3. 品牌故事 · 层次与光晕 ---------- */
.split-stage{
  position:relative;
}
/* 图片底部加一层向上渐隐的深色遮罩，让文字浮现更有依托
   注：原方案的 [style*] 相邻兄弟选择器不可达——DOM 中
   .split-stage 在 .story-text 之前，通用兄弟 ~ 只匹配后置兄弟；
   故直接采用规范兜底：常驻可见、低透明度。 */
.split-stage::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:40%;
  background:linear-gradient(180deg, transparent 0%, rgba(22,32,26,.55) 100%);
  pointer-events:none;
  z-index:2;
  opacity:.35;
}

/* 文字卡片加径向光晕，让它在图片上"浮"起来 */
.story-card{
  background:rgba(22,32,26,.72);
  box-shadow:
    0 0 120px 40px rgba(22,32,26,.55),
    0 0 0 1px rgba(243,239,230,.08) inset;
}

/* ---------- 4. 热门房型 · 卡片错落 + 装饰数字 ---------- */
.room-stage{
  align-items:center;   /* 保持居中基线 */
}
/* 奇偶卡错落：奇数上浮，偶数下沉
   注：限定 #room-stage（首页画卷），避免污染 rooms.html 的 .rooms-switch-sec 卡片 */
#room-stage .room-card:nth-child(odd){margin-top:-3vh}
#room-stage .room-card:nth-child(even){margin-top:3vh}

/* 左侧标题区加一个半透明大数字作为背景装饰
   注：因 .room-sec 为非层叠上下文祖先且带背景，z-index:-1
   会画到 .room-sec 背景之下而不可见；改用规范兜底 z-index:0，
   并给直接子项 position:relative;z-index:1 保证文字在上层。 */
.room-side-inner{
  position:relative;
}
.room-side-inner::before{
  content:"01";
  position:absolute;
  left:-4vw;
  top:12vh;
  font-family:var(--font-title);
  font-size:clamp(120px,14vw,220px);
  font-weight:700;
  color:var(--bg-cream);
  opacity:.55;
  line-height:.8;
  z-index:0;
  pointer-events:none;
  letter-spacing:-.05em;
}
.room-side-inner > *{
  position:relative;
  z-index:1;
}
@media (max-width:768px){
  .room-side-inner::before{font-size:120px;left:-8vw;top:8vh}
  #room-stage .room-card:nth-child(odd),
  #room-stage .room-card:nth-child(even){margin-top:0}
}

/* ---------- 5. 当季活动 · 版式强化 ---------- */
.ax-head .section-head{
  position:relative;
  padding-left:32px;
}
/* 左侧竖线装饰 */
.ax-head .section-head::before{
  content:"";
  position:absolute;
  left:0;top:8px;
  width:2px;height:64px;
  background:linear-gradient(180deg, var(--light-green), transparent);
}
/* 活动卡片：图片下方加一条横线分隔 */
.h-scroll-frame .card-img{
  position:relative;
}
.h-scroll-frame .card-img::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:32px;height:2px;
  background:var(--light-green);
  transition:width .5s ease;
}
.h-scroll-frame .h-item:hover .card-img::after{
  width:60px;
}

/* ---------- 6. 山野餐饮 · 导航与细节 ---------- */
.dining-line::after{
  box-shadow:0 0 12px rgba(156,190,171,.6);
}
.dining-store-item.active .dot{
  box-shadow:
    0 0 0 4px rgba(156,190,171,.18),
    0 0 18px rgba(156,190,171,.55);
}
/* 菜品卡片：图片区加一处细微的渐变覆盖，让文字标签更清晰 */
.dining-panel .h-item .ph::after,
.dining-panel .h-item .card-img::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:50%;
  background:linear-gradient(180deg, transparent, rgba(10,15,17,.5));
  pointer-events:none;
}

/* ---------- 7. 页尾 · 品牌署名层次 ---------- */
.footer-brand .brand .b-name{
  position:relative;
  padding-bottom:12px;
}
.footer-brand .brand .b-name::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:36px;height:2px;
  background:var(--light-green);
}
.footer-phone{
  text-shadow:0 0 24px rgba(243,239,230,.15);
}

/* ---------- 顶部导航：滚动隐藏 ---------- */
.site-header{
  transition:
    transform .5s cubic-bezier(.4,0,.2,1),
    background .35s,
    border-color .35s,
    box-shadow .35s;
}
.site-header.header-hidden{
  transform:translateY(-100%);
  pointer-events:none;
}

/* ============================================================
   热门房型 · 画卷式横向滚动（标题 + 中段文字 + 卡片随画卷平移）
   本轮改为图文一体的 .room-track；以下覆盖旧 .room-stage 布局
   ============================================================ */
/* 画卷轨道：JS 对 #room-stage(=此元素) 施加水平位移 */
.room-track{
  position:relative;
  height:100vh;
  width:max-content;
  will-change:transform;
  display:flex;
  align-items:center;
  gap:3vw;
  padding-left:4vw;
  padding-bottom:24vh;   /* 底部留出空白带，供"山野好眠"文字放置 */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}

/* 左：竖排"热门房型" + 挂线 */
.room-title-left{
  flex-shrink:0;
  align-self:center;
  display:flex;
  align-items:center;
  gap:18px;
  padding-right:2vw;
}
.room-hang-line{
  width:1px;
  height:96px;
  background:linear-gradient(180deg,transparent 0%,var(--light-green) 100%);
}
.room-title-left .room-side-title{color:var(--bg-cream);letter-spacing:.22em}

/* 卡片：图片上 + 信息下（覆盖旧 .room-card 的居中覆盖式结构）
   注：仅作用于首页画卷 #room-stage；rooms.html 走 .rooms-switch-sec 的覆盖式结构 */
#room-stage .room-card{
  height:62vh;
  background:var(--card);
  justify-content:flex-start;
  align-items:stretch;
}
#room-stage .room-card .room-ph{
  position:relative;
  height:62%;
  flex:none;
  overflow:hidden;
  border-radius:20px 20px 0 0;
}
.room-info{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:22px 26px;
}
.room-info-en{
  font-size:11px;
  letter-spacing:.3em;
  color:var(--light-green);
  text-transform:uppercase;
}
.room-info-name{
  font-family:var(--font-title);
  font-size:clamp(20px,2.4vw,27px);
  font-weight:600;
  color:var(--ink);
  margin:0;
  line-height:1.25;
}
.room-info-cn{
  font-size:13px;
  color:var(--ink-soft);
  letter-spacing:.12em;
}
.room-info-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.room-info-foot{
  width:100%;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.room-info-price{
  font-family:var(--font-title);
  font-size:22px;
  font-weight:700;
  color:var(--ink);
  line-height:1;
}
.room-info-price .unit{font-size:13px;color:var(--ink-soft);font-weight:500;margin-left:3px;font-family:var(--font-body)}

/* ---------- 热门房型 · 中段文字块（绝对定位，脱离卡片流） ---------- */
.room-mid-text{
  position:absolute;
  left:calc(4vw + 12vw + 44vw + 3vw + 44vw + 3vw);   /* 卡片1+卡片2之后的水平位置 */
  bottom:3vh;                                       /* 贴近画卷底部 */
  width:40vw;
  max-width:520px;
  padding:0;
  margin:0;
  pointer-events:auto;
  z-index:3;
}

.room-mid-inner{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
  border-radius:0;
}
.room-mid-inner .eyebrow{
  background:none;
  padding:0;
  margin:0;
  font-size:.72rem;
  letter-spacing:.4em;
  color:var(--light-green);               /* 浅绿，适配深色背景 */
}
.room-mid-inner .room-intro-title{
  font-family:var(--font-title);
  font-size:clamp(2rem,3.2vw,3.2rem);
  font-weight:600;
  letter-spacing:.05em;
  color:var(--bg-cream);               /* 浅米色，深背景上清晰 */
  margin:0;
  line-height:1.1;
}
.room-mid-inner .room-intro-desc{
  font-size:15px;
  line-height:1.95;
  color:rgba(243,239,230,.75); /* 半透明浅色 */
  margin:0;
  max-width:36ch;
}
.room-mid-inner .room-intro-hint{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-top:8px;
  font-size:.7rem;
  letter-spacing:.42em;
  color:rgba(243,239,230,.7);
  text-transform:uppercase;
}
.room-mid-inner .room-intro-hint::before{
  content:"";
  display:inline-block;
  width:36px;height:1px;
  background:var(--light-green);
  margin-right:.4rem;
}
.room-mid-inner .room-intro-hint .hint-arrow{
  letter-spacing:0;
  font-size:.9rem;
  line-height:1;
}

/* 旧的 .room-title-right 规则如果不再使用，可注释掉 */
/* .room-title-right{ ... } */

@media (max-width:900px){
  .room-mid-text{
    position:static;
    left:auto;
    bottom:auto;
    width:100%;
    max-width:none;
    align-self:center;
    margin:0;
    padding:0;
  }
  .room-mid-inner{max-width:640px}
}

/* ---------- 移动端 · 画卷恢复纵向堆叠 ---------- */
@media (max-width:900px){
  .room-sec{height:auto;min-height:100vh;overflow:visible}
  .room-track{
    flex-direction:column;
    width:100%;
    height:auto;
    align-items:stretch;
    gap:1.6rem;
    padding:12vh 6vw 0;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .room-title-left{align-self:flex-start;padding-right:0;gap:14px}
  .room-hang-line{height:64px}
  #room-stage .room-card{width:100%;min-width:0;height:auto;box-shadow:0 16px 40px rgba(0,0,0,.12)}
  #room-stage .room-card .room-ph{height:52vh;border-radius:16px 16px 0 0}
  #room-stage .room-info{padding:20px 22px}
}

/* ---------- 热门房型 · 挂线改为在文字上方 ---------- */
.room-title-left{
  flex-shrink:0;
  align-self:center;
  display:flex;
  flex-direction:column;        /* 关键：纵向排列 */
  align-items:center;
  gap:18px;
  padding-right:2vw;
}
.room-hang-line{
  width:1px;
  height:16vh;                  /* 从画面上方垂下的长线 */
  background:linear-gradient(180deg, transparent 0%, var(--light-green) 100%);
}
.room-title-left .room-side-title{
  color:var(--bg-cream);
  letter-spacing:.22em;
}

/* ---------- 山野好眠 · 横向排版，位置左移 ---------- */
.room-mid-text{
  position:absolute;
  left:82vw;                    /* 往左移：约卡片2后半段 */
  bottom:3vh;
  width:44vw;
  max-width:640px;
  padding:0;
  margin:0;
  z-index:3;
}

/* 网格布局：左列"山野好眠"，右列描述文字 */
.room-mid-inner{
  display:grid;
  grid-template-columns:max-content 1fr;
  column-gap:2.5rem;
  row-gap:.4rem;
  align-items:end;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
  border-radius:0;
}
.room-mid-inner .eyebrow{
  grid-column:1;
  grid-row:1;
  background:none;
  padding:0;
  margin:0 0 .4rem;
  font-size:.7rem;
  letter-spacing:.4em;
  color:var(--deep-green);
}
.room-mid-inner .room-intro-title{
  grid-column:1;
  grid-row:2;
  font-family:var(--font-title);
  font-size:clamp(2rem,3.2vw,3.2rem);
  font-weight:600;
  letter-spacing:.05em;
  color:var(--bg-cream);
  margin:0;
  line-height:1;
  white-space:nowrap;
}
.room-mid-inner .room-intro-desc{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:end;
  font-size:15px;
  line-height:1.9;
  color:rgba(243,239,230,.78);
  margin:0 0 .4rem;
  max-width:32ch;
}
.room-mid-inner .room-intro-hint{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-top:1rem;
  font-size:.7rem;
  letter-spacing:.42em;
  color:rgba(243,239,230,.65);
  text-transform:uppercase;
}
.room-mid-inner .room-intro-hint::before{
  content:"";
  display:inline-block;
  width:36px;height:1px;
  background:var(--light-green);
  margin-right:.4rem;
}
.room-mid-inner .room-intro-hint .hint-arrow{
  letter-spacing:0;
  font-size:.9rem;
  line-height:1;
}

/* 移动端 ≤900px：抵消上述 absolute/grid 基底的覆盖，恢复纵向堆叠 */
@media (max-width:900px){
  .room-mid-text{
    position:static;
    left:auto;
    bottom:auto;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    align-self:center;
  }
  .room-mid-inner{
    display:flex;
    flex-direction:column;
    gap:.5rem;
    max-width:640px;
  }
  .room-title-left{flex-direction:row;align-items:center}
  .room-hang-line{height:64px}
}

/* ---------- 热门房型 · 标题区（挂线延伸至板块顶部） ---------- */
.room-track{
  padding-top:0;                 /* 去掉上内边距，让挂线能贴到顶 */
  align-items:flex-start;        /* 顶部对齐，方便挂线延伸 */
}

/* 左侧标题区：绝对定位在 track 顶部 */
.room-title-left{
  position:relative;
  flex-shrink:0;
  align-self:stretch;            /* 拉伸到 track 满高 */
  width:14vw;
  min-width:160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:0;                 /* 从顶部开始 */
  padding-right:2vw;
}

/* 挂线：从板块最顶端垂下来，连到"热门房型"上方 */
.room-hang-line{
  width:1px;
  height:22vh;                   /* 线足够长 */
  background:linear-gradient(180deg, rgba(156,190,171,.15) 0%, var(--light-green) 100%);
  margin-bottom:20px;
  flex:none;
}

/* 标题容器：竖排"热门房型" + 竖排 FEATURED ROOMS，两者错开 */
.room-title-stack{
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
}

.room-title-left .room-side-title{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-family:var(--font-title);
  font-size:clamp(1.8rem,2.6vw,2.8rem);
  font-weight:700;
  letter-spacing:.22em;
  color:var(--bg-cream);
  margin:0;
  line-height:1;
}

/* FEATURED ROOMS：竖排，比"热门房型"下沉一截，形成错落 */
.room-title-left .room-eyebrow-vertical{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--font-body);
  font-size:.68rem;
  letter-spacing:.42em;
  color:var(--light-green);
  line-height:1;
  margin-top:8rem;               /* 下沉，与"热门房型"错落 */
  text-transform:uppercase;
}

/* ---------- 中间文字块：只留标题 + 描述，居中组合 ---------- */
.room-mid-text{
  position:absolute;
  left:82vw;
  bottom:3vh;
  width:auto;
  max-width:none;
  padding:0;
  margin:0;
  z-index:3;
}

/* 居中组合：山野好眠 + 描述，垂直堆叠，整体居中 */
.room-mid-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.8rem;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
}
.room-mid-inner .room-intro-title{
  font-family:var(--font-title);
  font-size:clamp(2rem,3.2vw,3.2rem);
  font-weight:600;
  letter-spacing:.05em;
  color:var(--bg-cream);
  margin:0;
  line-height:1;
  white-space:nowrap;
}
.room-mid-inner .room-intro-desc{
  font-size:15px;
  line-height:1.9;
  color:rgba(243,239,230,.78);
  margin:0;
  max-width:32ch;
  text-align:center;
}

/* ---------- 卡片上下错落：距离加大（同样限定首页画卷 #room-stage） ---------- */
#room-stage .room-card:nth-child(1){margin-top:-6vh}
#room-stage .room-card:nth-child(2){margin-top:6vh}
#room-stage .room-card:nth-child(3){margin-top:-6vh}
#room-stage .room-card:nth-child(4){margin-top:6vh}

/* track 高度依旧 100vh，卡片高度保持，错落靠 margin-top */
.room-track{
  align-items:center;             /* 卡片垂直居中，margin 控制错落 */
}

/* ---------- 移动端 ≤900px：标题横排、卡片取消错落 ---------- */
@media (max-width:900px){
  .room-title-left{
    width:auto;
    min-width:0;
    align-self:flex-start;
    padding-right:0;
  }
  .room-hang-line{
    height:8vh;
    margin-bottom:12px;
  }
  .room-title-stack{
    flex-direction:row;
    gap:.6rem;
  }
  .room-title-left .room-eyebrow-vertical{
    writing-mode:horizontal-tb;
    margin-top:0;
    font-size:.65rem;
  }
  .room-mid-text{
    position:static;
    left:auto;
    bottom:auto;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
  }
  .room-mid-inner{
    align-items:center;
    text-align:center;
    max-width:640px;
    margin:0 auto;
  }
  #room-stage .room-card:nth-child(1),
  #room-stage .room-card:nth-child(2),
  #room-stage .room-card:nth-child(3),
  #room-stage .room-card:nth-child(4){
    margin-top:0;
  }
}

/* ---------- 山野好眠 · 横向并排，水平居中对齐 ---------- */
.room-mid-inner{
  display:flex;
  flex-direction:row;            /* 横向并排 */
  align-items:center;            /* 垂直居中对齐 */
  justify-content:flex-start;
  gap:2.4rem;                    /* 标题与描述间距 */
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
  border-radius:0;
  text-align:left;
}

.room-mid-inner .room-intro-title{
  margin:0;
  white-space:nowrap;
  font-size:clamp(2rem,3.2vw,3.2rem);
  line-height:1;
  flex:none;
}

.room-mid-inner .room-intro-desc{
  margin:0;
  max-width:34ch;
  line-height:1.75;
  text-align:left;
  flex:0 1 auto;
}

/* ---------- 热门房型 · 卡片整体下移 ---------- */
.room-track{
  padding-top:8vh;               /* 卡片整体下移 */
}

/* ---------- 移动端 ≤900px：文字块回纵向、track 取消下移 ---------- */
@media (max-width:900px){
  .room-mid-inner{
    flex-direction:column;       /* 小屏改回纵向 */
    align-items:center;
    text-align:center;
    gap:.6rem;
  }
  .room-mid-inner .room-intro-desc{
    text-align:center;
  }
  .room-track{
    padding-top:0;
  }
}

/* ---------- 联系电话 · 深绿底 ---------- */
.cta-sec{
  background:var(--deep-green);
  color:var(--bg-cream);
}

/* 文字：浅色系 */
.cta-sec .contact-band h2,
.cta-sec .contact-band p,
.cta-sec .contact-band .cta-lede{
  color:var(--bg-cream);
}
.cta-sec .contact-band .cta-lede{
  color:rgba(243,239,230,.78);
}
.cta-sec .contact-band .eyebrow{
  background:rgba(156,190,171,.14);
  color:var(--light-green);
  border:1px solid rgba(156,190,171,.28);
}

/* 大号电话号码：浅色 */
.cta-sec .tel-big{
  color:var(--bg-cream);
  text-shadow:0 0 32px rgba(243,239,230,.12);
}

/* 主按钮：浅米底 + 深字，和深背景形成对比 */
.cta-sec .cta-actions .btn-solid{
  background:var(--bg-cream);
  color:var(--deep-green);
  border-color:var(--bg-cream);
}
.cta-sec .cta-actions .btn-solid:hover{
  background:var(--bg-cream);
  color:var(--deep-green);
  border-color:var(--bg-cream);
}

/* 描边按钮：浅色描边 + 浅色文字 */
.cta-sec .cta-actions .btn-outline{
  background:transparent;
  color:var(--bg-cream);
  border-color:rgba(243,239,230,.5);
}
.cta-sec .cta-actions .btn-outline:hover{
  background:var(--bg-cream);
  color:var(--deep-green);
  border-color:var(--bg-cream);
}

/* ---------- 详情页 CTA（store-banan）：深绿底、自然流、与页尾同色无缝衔接 ---------- */
.cta-sec.cta-sec--flow{
  height:auto;                   /* 抵消 .cta-sec 基规则的 100vh */
  overflow:visible;
  padding:clamp(72px,10vw,120px) 0 0;   /* 底部留 0，让深绿直连页尾 */
}
.cta-sec.cta-sec--flow .contact-band{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.2rem;
  margin:0 auto;
}
.cta-sec.cta-sec--flow .contact-band p{
  color:rgba(243,239,230,.78);
}
.cta-sec.cta-sec--flow .tel-big{
  color:var(--bg-cream);
}
.cta-sec.cta-sec--flow .contact-band .btn-solid{
  background:var(--bg-cream);
  color:var(--deep-green);
  border-color:var(--bg-cream);
}
.cta-sec.cta-sec--flow .contact-band .btn-solid:hover{
  background:var(--bg-cream);
  color:var(--deep-green);
  border-color:var(--bg-cream);
}
.cta-sec.cta-sec--flow .contact-band .btn-outline-light{
  background:transparent;
  color:var(--bg-cream);
  border-color:rgba(243,239,230,.5);
}
.cta-sec.cta-sec--flow .contact-band .btn-outline-light:hover{
  background:var(--bg-cream);
  color:var(--deep-green);
  border-color:var(--bg-cream);
}

/* ============================================================
   为什么住这里 · 图片网格背景 + 分段文字叙事
   ============================================================ */
.why-stay-sec{
  position:relative;
  height:100vh;
  min-height:100vh;
  overflow:hidden;
  background:var(--deep-green);
  padding:0;
  display:block;
}

/* ---------- 遮罩 ---------- */
.why-veil{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(22,32,26,.72) 0%,
    rgba(22,32,26,.58) 50%,
    rgba(22,32,26,.78) 100%
  );
  z-index:1;
  pointer-events:none;
}

/* ---------- 文字层 ---------- */
.why-content{
  position:relative;
  z-index:2;
  width:100%;
  height:100vh;
}

/* ---------- 大字标题：绝对居中，占据画面主视觉 ---------- */
.why-big-title{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  font-family:var(--font-title);
  font-size:clamp(4rem,15vw,17rem);
  font-weight:700;
  line-height:1;
  letter-spacing:.06em;
  color:var(--bg-cream);
  text-align:center;
  margin:0;
  padding:0 4vw;
  white-space:nowrap;
  display:flex;
  justify-content:center;
  gap:0;
  will-change:transform,opacity;
}

/* 每个字单独包裹，用于逐字入场 */
.why-big-title span{
  display:inline-block;
  will-change:transform,opacity;
}

/* ---------- 三段描述文字 ---------- */
.why-desc{
  position:absolute;
  font-size:clamp(1rem,1.5vw,1.4rem);
  line-height:1.95;
  color:rgba(243,239,230,.94);
  max-width:38ch;
  margin:0;
  will-change:transform,opacity;
  opacity:0;
  letter-spacing:.02em;
}

/* 第一段：左上方，左对齐 */
.why-desc.d1{
  top:16vh;
  left:8vw;
  text-align:left;
}

/* 第二段：画面正中间，居中对齐 */
.why-desc.d2{
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  max-width:44ch;
}

/* 第三段：右下方，右对齐 */
.why-desc.d3{
  bottom:16vh;
  right:8vw;
  text-align:right;
}

/* ---------- 移动端：取消绝对定位，改为纵向堆叠 ---------- */
@media (max-width:900px){
  .why-grid-bg{opacity:.3}
  .why-big-title{
    font-size:clamp(3rem,18vw,8rem);
    white-space:normal;
    padding:0 5vw;
    flex-wrap:wrap;
    line-height:1.1;
  }
  .why-desc{
    position:relative;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    text-align:left !important;
    max-width:100%;
    font-size:1rem;
    padding:0 6vw;
  }
  .why-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2.4rem;
    height:auto;
    min-height:100vh;
    padding:12vh 0;
  }
}

/* ---------- 为什么住这里 · 背景铺满 + 无缝循环 ---------- */
.why-grid-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100vh;
  display:flex;
  gap:16px;
  padding:0;
  opacity:.55;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.why-grid-col{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:16px;
  will-change:transform;
  animation:gridScrollUp 44s linear infinite;
}
.why-grid-col:nth-child(2){animation:gridScrollDown 50s linear infinite}
.why-grid-col:nth-child(3){animation:gridScrollUp 46s linear infinite}
.why-grid-col:nth-child(4){animation:gridScrollDown 52s linear infinite}

@keyframes gridScrollUp{
  0%{transform:translateY(0)}
  100%{transform:translateY(-50%)}
}
@keyframes gridScrollDown{
  0%{transform:translateY(-50%)}
  100%{transform:translateY(0)}
}

.why-grid-img{
  width:100%;
  aspect-ratio:3/4;
  background-size:cover;
  background-position:center;
  border-radius:8px;
  flex:none;
}

/* ---------- 覆盖层：包裹 banner + arc-intro，限定 banner 的 sticky 范围 ---------- */
.arc-cover{
  position:relative;
  overflow-x:clip;               /* 裁掉 100vw 拱门带来的横向溢出；clip 不打断 sticky */
  overflow-y:visible;
}

/* ---------- Banner 全屏轮播 ---------- */
.page-banner-carousel{
  position:sticky;            /* 作为拱门升起时的底层背景 */
  top:0;
  z-index:0;
  height:100vh;
  min-height:600px;
  padding:0;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.banner-slides{
  position:absolute;
  inset:0;
  z-index:0;
}
.banner-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.2s ease;
}
.banner-slide.active{opacity:1}
.banner-veil{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    180deg,
    rgba(22,32,26,.3) 0%,
    rgba(22,32,26,.1) 40%,
    rgba(22,32,26,.75) 100%
  );
}
.banner-content{
  position:relative;
  z-index:2;
  padding:0 8vw 12vh;
  max-width:900px;
}
.banner-dots{
  position:absolute;
  right:8vw;
  bottom:8vh;
  z-index:3;
  display:flex;
  gap:12px;
}
.banner-dots i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(243,239,230,.4);
  cursor:pointer;
  transition:all .4s ease;
}
.banner-dots i.active{
  background:var(--bg-cream);
  width:28px;
  border-radius:99px;
}

/* ============================================================
   一分钟了解 · 拱门升起 + 弧线文字 + 两个全屏舞台依次呈现
   （舞台一：一分钟了解｜舞台二：全屏线条地图 + 米色卡片）
   ============================================================ */

.arc-intro-sec{
  position:relative;
  z-index:1;
  margin-top:-100vh;             /* 上移一屏，让拱门叠在 banner 之上 */
  height:360vh;                  /* 卡片停留约 1 屏，地图从容渐入；拱门滚出后直接接 why-stay */
  background:transparent;
  padding:0;
}

/* ---------- 拱门舞台（sticky：动画期间固定在视口顶部） ---------- */
.arc-hero{
  position:sticky;
  top:0;
  z-index:2;
  height:100vh;
  min-height:600px;
  overflow:visible;              /* 允许拱门越界：滑动升起/退出时不被裁断 */
  background:transparent;        /* 透明：露出底层 banner */
}

/* ---------- 拱门 ---------- */
.arc-shape{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  /* 半圆 50vw + 方形 100vh：拱门刚好包住半圆与地图卡片，
     不多出任何尾部，滑出后直接露出 why-stay */
  height: calc(50vw + 100vh);
  /* 水平半径 = 垂直半径 = 50vw，顶部两个圆角拼成一个完整半圆，
     剩余部分为纯矩形。 */
  border-radius: 50vw 50vw 0 0 / 50vw 50vw 0 0;
  background: var(--bg-cream);           /* 深米色拱门 #F3EFE6：比大背景 --bg 深一档，滚出时有自然深浅过渡 */
  z-index: 2;
  overflow: hidden;
  will-change: transform;
  display: block;
  /* 注意：绝对不能用 CSS transform，避免与 GSAP 的 y 冲突 */
}

/* ---------- 方形区容器（static：让全屏舞台相对 .arc-shape 定位） ---------- */
.arc-square-content{
  position: static;
  margin: 0;
  padding: 0;
}

/* ---------- 全屏舞台（两屏依次呈现，互相交叠） ---------- */
.arc-stage{
  position: absolute;
  left: 0;
  top: 50vw;                     /* 从半圆下方（方形区顶部）开始 */
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* 舞台一：一分钟了解（透出拱门米色，仅卡片淡入淡出） */
.arc-stage--intro{
  z-index: 4;
}

/* 舞台二：线条地图 + 半透明卡片，尺寸与方形区一致（100vh），
   不含任何尾部背景，拱门滑出后直接露出 why-stay */
.arc-stage--map{
  top: 50vw;
  bottom: 0;              /* 用 bottom 撑满方形区 */
  height: auto;           /* 取消 calc(100% - 50vw) */
  background: transparent;/* 画面由 .arc-location 面板组成 */
  z-index: 5;
}

/* location 面板保留深绿不透明底 */
.arc-stage--map .arc-location{
  z-index: 2;
}

/* ---------- 弧线文字 ---------- */
.arc-text-svg{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 56vw;                  /* 从 50vw 改为 56vw，为弧线两端留出下缘空间 */
  pointer-events: none;
  z-index: 1;
  overflow: visible;             /* 允许文字越界显示，不被 SVG 视口裁切 */
}
.arc-text-svg text{
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .18em;
  fill: rgba(22, 32, 26, .72);
  text-transform: uppercase;
}

/* ---------- 方形区卡片 ---------- */
.arc-card{
  position: relative;
  z-index: 5;
  width: min(580px, 72vw);
  background: var(--card);
  border-radius: 20px;
  padding: 36px 44px;
  text-align: center;
  box-shadow:
    0 30px 70px rgba(22, 32, 26, .18),
    0 0 0 1px rgba(22, 32, 26, .06) inset;
}

.arc-card--fullscreen{
  width: min(680px, 84vw);
  padding: 48px 56px;
}

.arc-eyebrow{
  font-size:.68rem;
  letter-spacing:.5em;
  color:rgba(22,32,26,.55);
  text-transform:uppercase;
  margin-bottom:.8rem;
}

.arc-title{
  font-family:var(--font-title);
  font-size:clamp(1.8rem,3.6vw,2.8rem);
  font-weight:700;
  color:var(--deep-green);
  margin:0 0 .8rem;
  line-height:1.15;
  letter-spacing:.04em;
}

.arc-sub{
  font-size:clamp(.9rem,1.1vw,1rem);
  line-height:1.85;
  color:rgba(22,32,26,.72);
  max-width:38ch;
  margin:0 auto 1.6rem;
}

.arc-stats{
  display:flex;
  justify-content:center;
  gap:2.4rem;
  flex-wrap:wrap;
  padding-top:1.2rem;
  border-top:1px solid rgba(22,32,26,.12);
}

.arc-stats .stat{text-align:center}
.arc-stats .stat b{
  display:block;
  font-family:var(--font-title);
  font-size:clamp(1.2rem,1.8vw,1.7rem);
  font-weight:700;
  color:var(--deep-green);
  line-height:1.2;
  margin-bottom:4px;
}
.arc-stats .stat span{
  font-size:.72rem;
  color:rgba(22,32,26,.6);
  letter-spacing:.08em;
}

/* ---------- 移动端 ---------- */
@media (max-width:900px){
  .arc-hero{height:100vh;min-height:600px}
  .arc-shape{
    width:100vw;
    height:calc(50vw + 100vh);
    left:0;
    border-radius:50vw 50vw 0 0 / 50vw 50vw 0 0;
  }
  .arc-text-svg{height:56vw;}
  .arc-text-svg text{font-size:18px;letter-spacing:.18em}
  .arc-card--fullscreen{width:86vw;padding:32px 24px}
  .arc-stats{gap:1.4rem}
}

/* ---------- 位置与周边（舞台二：全屏深绿 + 线条地图 + 半透明卡片） ---------- */
.arc-location{
  position: absolute;            /* 铺满舞台二的第一屏 */
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--deep-green);
}

.arc-location-map{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.arc-location-map svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* 中心暗角，提升半透明卡片的对比度 */
.arc-location::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 72% 62% at 50% 50%, rgba(22,32,26,0) 0%, rgba(22,32,26,.6) 100%);
  z-index: 1;
  pointer-events: none;
}

.arc-location-card{
  position: relative;
  z-index: 2;
  width: min(620px, 82vw);
  background: rgba(243, 239, 230, .88);   /* 半透明米色 */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px 48px;
  text-align: center;
  color: var(--deep-green);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

.arc-location-title{
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  color: var(--deep-green);
  margin: 0 0 1rem;
  letter-spacing: .04em;
  line-height: 1.2;
}

.arc-location-addr{
  font-size: 15px;
  color: rgba(22, 32, 26, .72);
  line-height: 1.85;
  margin: 0 0 1.2rem;
}

.arc-location-tags{
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.arc-location-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(22, 32, 26, .12);
}

.arc-location-pin{
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translate(-50%, -100%);
  z-index: 3;
  text-align: center;
}
.arc-location-pin i{
  display: block;
  width: 18px; height: 18px;
  border-radius: 50% 50% 50% 0;
  background: var(--light-green);
  transform: rotate(-45deg);
  margin: 0 auto;
  border: 2px solid var(--bg-cream);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.arc-location-pin span{
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--bg-cream);
  background: rgba(22,32,26,.7);
  padding: 4px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

@media (max-width: 900px){
  .arc-location{ min-height: 100vh; }
  .arc-location-card{
    padding: 30px 24px;
    width: 86vw;
  }
  .arc-location-actions{ flex-direction: column; align-items: stretch; }
  .arc-location-actions .btn{ width: 100%; }
}

/* ---------- 合并后消除板块间隙，why-stay 覆盖在 banner 之上 ---------- */
.arc-intro-sec + .why-stay-sec{
  margin-top: 0;
  z-index: 2;
}

/* ---------- 减弱动效：取消 sticky/pin，两个舞台静态叠放、全部可读 ---------- */
@media (prefers-reduced-motion: reduce){
  .arc-intro-sec{
    height: auto;
    margin-top: 0;
    background: var(--bg-cream);
  }
  .arc-hero{
    position: static;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .arc-shape{
    position: static;
    width: 100vw;
    height: auto;
    overflow: visible;
  }
  .arc-text-svg{ display: none; }

  .arc-square-content{
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8vw;
    padding: 10vw 6vw 12vw;
  }
  .arc-stage{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    z-index: 1;
  }
  .arc-stage--intro{ z-index: 1; }
  .arc-stage--map{
    position: relative;
    top: auto;
    height: auto;
    background: transparent;
  }
  .arc-location{
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    min-height: min(88vh, 720px);
  }
  .arc-location-map{ position: absolute; inset: 0; }
}

/* ============================================================
   深色板块与页尾无缝衔接（stores / rooms / dining / 首页 / 门店页）
   GSAP 给 pin 区块生成的占位容器 .pin-spacer 是板块的"父级"，
   会多出一段 padding-bottom 作为滚动距离；它默认透明，露出浅色大背景，
   于是深绿 CTA 与深绿页尾之间出现一条浅色缝。
   这里只给【深色】pin 区块的占位容器上深绿底，浅色 pin 区块保持原样。
   （:has() 用于选中"子级是深色板块"的那个 pin-spacer；
     现代浏览器 Chrome/Edge/Safari/Firefox 均已支持）
   ============================================================ */
.pin-spacer:has(> #stores-cta),
.pin-spacer:has(> #contact),
.pin-spacer:has(> #rooms),
.pin-spacer:has(> #why-stay),
#stores-cta,
#stores-cta .pin-spacer,
#contact,
#rooms,
#why-stay{
  background-color: var(--deep-green) !important;
  margin-bottom: 0 !important;
}
/* 确保页尾紧贴上方板块 */
.site-footer{
  margin-top: 0 !important;
}

/* ============================================================
   用户登录 · 入口 / 弹窗 / 微信扫码
   ============================================================ */
/* ---------- 登录入口与用户状态 ---------- */
.user-profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 99px;
  transition: background .3s;
}
.user-profile:hover { background: rgba(255,255,255,.1); }
.site-header.scrolled .user-profile:hover { background: rgba(22,32,26,.05); }
.up-avatar {
  width: 32px; height: 32px;
  background: var(--deep-green);
  color: var(--bg-cream);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.up-name { font-size: 14px; color: #fff; }
.site-header.scrolled .up-name { color: var(--ink); }
.up-dropdown {
  position: absolute;
  top: 120%; right: 0;
  background: var(--card);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  padding: 8px 0;
  min-width: 120px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .3s;
  z-index: 10;
}
.user-profile:hover .up-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.up-dropdown a {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--ink);
  text-align: center;
}
.up-dropdown a:hover { background: var(--bg); color: var(--deep-green); }

/* 顶部「登录 / 注册」按钮：未滚动时导航为深底，需反白；滚动后为浅底，用描边深色 */
.site-header:not(.scrolled) #login-trigger{
  color: var(--bg-cream);
  border-color: rgba(243,239,230,.55);
}
.site-header:not(.scrolled) #login-trigger:hover{
  background: var(--bg-cream);
  color: var(--deep-green);
  border-color: var(--bg-cream);
}

/* ---------- 登录弹窗遮罩与对话框 ---------- */
.login-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.login-modal.show { opacity: 1; visibility: visible; }
.login-mask {
  position: absolute; inset: 0;
  background: rgba(22,32,26,.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.login-dialog {
  position: relative;
  width: 90%; max-width: 420px;
  background: var(--card);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  transform: translateY(20px) scale(.98);
  transition: transform .3s;
  z-index: 1;
  max-height: 90vh;
  overflow-y: auto;
}
.login-modal.show .login-dialog { transform: translateY(0) scale(1); }
.login-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 20px;
  transition: .3s;
}
.login-close:hover { background: var(--bg-cream); color: var(--deep-green); }
.login-title {
  font-family: var(--font-title);
  font-size: 26px; font-weight: 600;
  text-align: center;
  color: var(--deep-green);
  margin-bottom: 30px;
}

/* ---------- 登录标签页切换 ---------- */
.login-tabs {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.login-tab {
  padding: 10px 0;
  font-size: 15px;
  color: var(--ink-soft);
  position: relative;
  transition: .3s;
}
.login-tab:hover { color: var(--ink); }
.login-tab.active { color: var(--deep-green); font-weight: 600; }
.login-tab.active::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px; background: var(--deep-green); border-radius: 2px;
}

/* ---------- 登录面板与表单 ---------- */
.login-pane { display: none; }
.login-pane.active { display: block; }
.form-group {
  display: flex; align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 48px;
  margin-bottom: 16px;
  padding: 0 16px;
  transition: border-color .3s;
}
.form-group:focus-within { border-color: var(--deep-green); }
.form-group .prefix {
  font-size: 15px; font-weight: 500; color: var(--ink);
  padding-right: 12px; border-right: 1px solid var(--line);
  margin-right: 12px;
}
.form-group input {
  flex: 1; border: none; background: transparent;
  font-size: 15px; color: var(--ink); outline: none;
  min-width: 0;
}
.form-group input::placeholder { color: var(--ph-x); }
.btn-text {
  font-size: 14px; color: var(--deep-green); font-weight: 500;
  white-space: nowrap; padding-left: 12px;
}
.btn-text:hover { opacity: .8; }
.btn-text:disabled { color: var(--ink-soft); cursor: not-allowed; }

.form-agreement {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--ink-soft);
  margin-bottom: 24px; cursor: pointer;
}
.form-agreement input { margin-top: 3px; accent-color: var(--deep-green); }
.form-agreement a { color: var(--deep-green); text-decoration: underline; }

.login-submit {
  height: 48px; border-radius: 8px;
  font-size: 16px; font-weight: 600; letter-spacing: .1em;
}

/* ---------- 微信扫码 ---------- */
.wechat-qr-wrapper {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 0;
}
.wechat-qr {
  position: relative; width: 200px; height: 200px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.qr-placeholder svg { width: 100%; height: 100%; display: block; }
.wechat-qr .qr-mask {
  position: absolute; inset: 0;
  background: rgba(22,32,26,.85);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s;
}
.wechat-qr:hover .qr-mask { opacity: 1; }
.wechat-qr .qr-mask span { color: var(--bg-cream); font-size: 14px; letter-spacing: .1em; }
.wechat-tip { font-size: 14px; color: var(--ink-soft); margin-top: 16px; }

/* ---------- 移动端：头部只留头像，避免拥挤 ---------- */
@media (max-width:768px){
  #login-trigger{ padding:0 12px; font-size:13px; }
  .user-profile .up-name{ display:none; }
}

/* ============================================================
   四时捕光 · 山野小游戏（仅首页 index.html）
   ============================================================ */
/* ---------- 四时捕光小游戏 ---------- */
.game-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: .4s;
}
.game-modal.show { opacity: 1; visibility: visible; }
.game-mask {
  position: absolute; inset: 0;
  background: rgba(10, 15, 12, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.game-dialog {
  position: relative;
  width: 90vw; max-width: 800px;
  height: 80vh; max-height: 600px;
  background: linear-gradient(135deg, #1E2B22 0%, #16201A 100%);
  border-radius: 24px;
  box-shadow: 0 40px 100px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: scale(0.95); transition: .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(156, 190, 171, 0.2);
}
.game-modal.show .game-dialog { transform: scale(1); }

.game-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(243,239,230,0.1);
  z-index: 10;
}
.game-title {
  font-family: var(--font-title); font-size: 20px; color: var(--bg-cream); font-weight: 600;
  letter-spacing: .1em;
}
.game-title span { font-size: 12px; color: var(--light-green); margin-left: 8px; font-family: var(--font-body); letter-spacing: .2em; }
.game-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(243,239,230,.1); color: var(--bg-cream);
  font-size: 20px; display: flex; align-items: center; justify-content: center;
  transition: .3s;
}
.game-close:hover { background: rgba(243,239,230,.2); }

.game-panel {
  flex: 1; display: none; flex-direction: column; position: relative;
}
.game-panel.active { display: flex; }

/* 开始面板 */
.game-start {
  align-items: center; justify-content: center; text-align: center; padding: 40px;
  overflow-y: auto;
}
.gs-icon { font-size: 60px; margin-bottom: 20px; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
.game-start h3 { font-family: var(--font-title); font-size: 28px; color: var(--bg-cream); margin-bottom: 16px; }
.game-start p { color: rgba(243,239,230,.7); line-height: 2; margin-bottom: 32px; font-size: 15px; }
.c-white { color: #FFFFFF; font-weight: 600; }
.c-gold { color: #E6C87C; font-weight: 600; }
.c-red { color: #D98A6C; font-weight: 600; }
.c-blue { color: #8ACAD9; font-weight: 600; }

/* 游戏中面板 */
.game-hud {
  position: relative;                /* 必须定位，否则 z-index 无效、会被 .game-stage 盖住 */
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px; z-index: 5; pointer-events: none;
  flex: none;
}
.hud-item { color: var(--bg-cream); font-size: 14px; letter-spacing: .1em; }
.hud-item b { font-family: var(--font-title); font-size: 32px; font-weight: 700; color: var(--light-green); margin: 0 4px; }
.combo-hide { opacity: 0; transition: opacity .2s; }
.combo-hide.show { opacity: 1; }
#game-combo { color: #E6C87C; font-family: var(--font-title); font-size: 24px; font-weight: 700; text-shadow: 0 0 10px rgba(230,200,124,.5); }

.game-stage {
  position: absolute; inset: 0; overflow: hidden; z-index: 1;
}
/* 飘浮元素的基础样式 */
.game-item {
  position: absolute; width: 64px; height: 64px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%); /* 以自身中心定位 */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* 元素类型 */
.item-mist { background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%); box-shadow: 0 0 20px rgba(255,255,255,0.4); }
.item-sun { background: radial-gradient(circle, #FFF1B8 0%, rgba(230,200,124,0) 70%); box-shadow: 0 0 20px rgba(230,200,124,0.5); transition: box-shadow .3s, transform .3s; }
.item-sun.ready { box-shadow: 0 0 40px 10px rgba(230,200,124,0.8); transform: translate(-50%, -50%) scale(1.2); }
.item-leaf { background: radial-gradient(circle, #F2A68D 0%, rgba(217,138,108,0) 70%); box-shadow: 0 0 15px rgba(217,138,108,0.4); }
.item-firefly { background: radial-gradient(circle, #9AE1F0 0%, rgba(138,202,217,0) 70%); box-shadow: 0 0 10px rgba(138,202,217,0.6); width: 44px; height: 44px; }

/* 飘分提示 */
.score-pop {
  position: absolute; font-family: var(--font-title); font-weight: 700; font-size: 20px;
  transform: translate(-50%, -50%); animation: popUp .8s forwards; pointer-events: none; z-index: 10;
}
@keyframes popUp { 0%{opacity:1; margin-top:0;} 100%{opacity:0; margin-top:-40px;} }

/* 结束面板 */
.game-end {
  align-items: center; justify-content: center; padding: 40px; text-align: center;
  overflow-y: auto;
}
.game-end h3 { font-family: var(--font-title); font-size: 28px; color: var(--bg-cream); margin-bottom: 24px; }
.ge-score-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; }
.ge-score-wrap span { font-size: 14px; color: rgba(243,239,230,.6); letter-spacing: .2em; }
.ge-score-wrap b { font-family: var(--font-title); font-size: 60px; color: var(--light-green); line-height: 1.2; }
.ge-rewards { margin-bottom: 32px; width: 100%; max-width: 400px; }
.ge-rewards h4 { color: var(--bg-cream); font-size: 16px; margin-bottom: 12px; }
.reward-store-card {
  background: rgba(243,239,230,.1); border: 1px solid rgba(243,239,230,.2);
  border-radius: 8px; padding: 12px 20px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; transition: .3s; color: var(--bg-cream); text-decoration: none;
}
.reward-store-card:hover { background: rgba(243,239,230,.15); border-color: var(--light-green); }
.reward-store-card b { font-family: var(--font-title); font-size: 18px; color: var(--light-green); }
.reward-coupon {
  background: linear-gradient(135deg, #E6C87C, #D4B060);
  border-radius: 8px; padding: 16px; color: #16201A; text-align: left;
  position: relative; overflow: hidden; margin-top: 16px;
}
.reward-coupon::before, .reward-coupon::after {
  content: ""; position: absolute; width: 12px; height: 12px; background: #1E2B22; border-radius: 50%; top: 50%; transform: translateY(-50%);
}
.reward-coupon::before { left: -6px; }
.reward-coupon::after { right: -6px; }
.reward-coupon h4 { font-size: 18px; margin-bottom: 4px; }
.reward-coupon p { font-size: 12px; opacity: .8; }
.ge-actions { display: flex; gap: 16px; }
.game-end .btn { background: var(--bg-cream); color: var(--deep-green); border-color: var(--bg-cream); }

/* 顶部「山野捕光」按钮：未滚动时导航为深底，需反白；滚动后为浅底，用描边深色 */
.site-header:not(.scrolled) #game-trigger{
  color: var(--bg-cream);
  border-color: rgba(243,239,230,.55);
}
.site-header:not(.scrolled) #game-trigger:hover{
  background: var(--bg-cream);
  color: var(--deep-green);
  border-color: var(--bg-cream);
}

/* ---------- 移动端 ---------- */
@media (max-width:900px){
  .game-dialog{ height:88vh; max-height:none; width:94vw; }
  .game-hud{ padding:14px 20px; }
  .hud-item{ font-size:12px; }
  .hud-item b{ font-size:24px; }
  #game-combo{ font-size:18px; }
}
@media (max-width:768px){
  #game-trigger{ padding:0 12px; font-size:13px; }
  .game-start{ padding:28px 20px; }
  .game-start h3{ font-size:22px; }
  .game-start p{ font-size:13px; line-height:1.9; }
  .game-end{ padding:28px 20px; }
  .ge-score-wrap b{ font-size:44px; }
  .ge-actions{ flex-direction:column; width:100%; max-width:260px; }
}
@media (max-width:560px){
  .header-right{ gap:8px; }
  #game-trigger{ padding:0 10px; font-size:12px; }
}

/* ---------- 四时捕光 · 面板高度与滚动修正 ----------
   .game-end 内容随分数增长（最高 3 张门店卡 + 优惠券）会超过面板高度：
   靠上对齐 + 内部纵向滚动，overscroll-behavior:contain 阻止滚动穿透到外层网页。
   同时把开始面板的主按钮改为米白，避免深绿按钮压在深绿面板上看不见。 */
.game-dialog{ height:84vh; max-height:660px; }
.game-start .btn{
  background: var(--bg-cream);
  color: var(--deep-green);
  border-color: var(--bg-cream);
}
.game-start .btn:hover{ background:#FFFFFF; border-color:#FFFFFF; color:var(--deep-green); }

/* 结算面板：靠上对齐 + 内部滚动 + 防穿透 */
.game-end{
  align-items: center;
  justify-content: flex-start;   /* 改为靠上对齐，方便滚动 */
  padding: 40px 20px;
  text-align: center;
  overflow-y: auto;              /* 内容过多时允许纵向滚动 */
  overscroll-behavior: contain;  /* 关键：阻止滚动穿透到外层网页 */
}
/* 隐藏滚动条，保持界面干净 */
.game-end::-webkit-scrollbar{ width:0; height:0; }
.game-end{ -ms-overflow-style:none; scrollbar-width:none; }

.game-end h3{ font-size:26px; margin-bottom:14px; }
.ge-score-wrap{ margin-bottom:20px; }
.ge-score-wrap b{ font-size:52px; }
.ge-rewards{ margin-bottom:20px; }
.ge-rewards h4{ margin-bottom:8px; }
.reward-store-card{ padding:10px 18px; margin-bottom:10px; }
.reward-coupon{ padding:12px 16px; margin-top:10px; }
@media (max-width:900px){
  .game-dialog{ height:88vh; max-height:none; }
}
@media (max-width:768px){
  .game-end{ padding:24px 18px; }
  .ge-score-wrap b{ font-size:40px; }
  .ge-rewards{ margin-bottom:16px; }
}

/* ---------- 导航右侧：窄屏收紧，防止挤出屏幕 ----------
   ≤900px 时品牌区(约 300px) + 右侧按钮组会超过视口宽度，
   把间距与按钮内边距收一档，保证 电话→联系我们→登录→山野捕光→汉堡 始终同一行且不溢出。 */
@media (max-width:900px){
  .header-right{ gap:8px; }
  .header-right .btn{ padding:0 10px; font-size:12px; }
  #login-trigger, #game-trigger{ padding:0 10px; font-size:12px; }
}

/* 621~768px 之间品牌副标题（带 .4em 字距，约 178px 宽）仍显示，
   会把右侧按钮组挤出屏幕右边缘；这里提前到 768px 就只留「十一居」主名。 */
@media (max-width:768px){
  .site-header .brand .b-sub{display:none}
}

/* ---------- 联系电话弹窗 ---------- */
.contact-modal {
  position: fixed; inset: 0; z-index: 2500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all .3s ease;
}
.contact-modal.show { opacity: 1; visibility: visible; }
.contact-mask {
  position: absolute; inset: 0;
  background: rgba(22,32,26,.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.contact-dialog {
  position: relative;
  width: 90%; max-width: 440px;
  background: var(--card);
  border-radius: 24px;
  padding: 44px 36px 36px;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
  transform: translateY(20px) scale(.98);
  transition: all .3s;
  text-align: center;
  z-index: 1;
}
.contact-modal.show .contact-dialog { transform: translateY(0) scale(1); }
.contact-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); color: var(--ink-soft);
  font-size: 20px; display: flex; align-items: center; justify-content: center;
  transition: .3s;
}
.contact-close:hover { background: var(--bg-cream); color: var(--deep-green); }
.contact-header .eyebrow {
  margin-bottom: 8px;
  background: var(--bg-cream); color: var(--deep-green);
  border: none;
}
.contact-header h2 {
  font-family: var(--font-title);
  font-size: 26px; color: var(--ink); font-weight: 600;
  margin-bottom: 24px;
}
.contact-content p {
  font-size: 15px; color: var(--ink-soft);
  margin-bottom: 16px;
}
.contact-number {
  font-family: var(--font-title);
  font-size: clamp(36px, 6vw, 48px);
  font-weight: 700; color: var(--deep-green);
  letter-spacing: .05em; line-height: 1.2;
  margin-bottom: 28px;
  text-shadow: 0 4px 20px rgba(22,32,26,.1);
}
.contact-actions {
  display: flex; gap: 12px; justify-content: center;
  margin-bottom: 24px;
}
.contact-actions .btn { flex: 1; max-width: 160px; height: 48px; }
.contact-hint {
  font-size: 12px; color: var(--ink-soft);
  padding-top: 20px; border-top: 1px dashed var(--line);
  letter-spacing: .05em;
}
@media (max-width: 620px) {
  .contact-dialog { padding: 36px 24px 28px; }
  .contact-actions { flex-direction: column; align-items: stretch; }
  .contact-actions .btn { max-width: none; }
}

/* ============================================================
   门店图片插入 —— 巴南1 / 梁平2 / 南天湖3（images/ 目录）
   仅作用于本次新插入的图片元素，不影响任何既有板块
   ============================================================ */

/* 联系我们 · 三店信息卡片顶部门店图 */
.contact-card .store-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* ============================================================
   房型大图 —— 1云隐山舍 / 2竹影庭院 / 3湖山栖院 / 4星野汤院
   图片满铺板块（object-fit:cover 既有规则），并整体下移：
   只保留下半部分内容（object-position 锚定底部）
   ============================================================ */
.room-ph img.fit-bottom{object-position:50% 100%}

/* ============================================================
   门店详情页 Banner 视频背景 —— 巴南田园土房 / 梁平矿咖竹海 / 南天湖云起山晓
   视频铺满 banner（object-fit:cover），位于 banner-slides 容器内（既有定位/z-index），
   banner-veil 遮罩与 banner-content 文字层不变
   ============================================================ */
.banner-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:url("#video-sharpen");
}

/* ============================================================
   高德地图链接（门店地址）
   - 查看位置：https://uri.amap.com/marker?position=经度,纬度&name=...
   - 导航前往：https://www.amap.com/dir?to=经度,纬度
   - 坐标暂用占位符 {{地址N_经度}},{{地址N_纬度}}，需替换
   ============================================================ */

/* 位置卡片 · 主地址（浅色卡片内，反白文字场景不适用） */
.arc-location-addr .addr-map-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(22, 32, 26, .4);
  transition: color .2s, border-color .2s;
}
.arc-location-addr .addr-map-link:hover{
  color: #3f5a44;
  border-bottom-color: #3f5a44;
}

/* 页脚 · 三门店地址（深绿底反白） */
.footer-addr .footer-addr-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(243, 239, 230, .35);
  transition: color .2s, border-color .2s;
}
.footer-addr .footer-addr-link:hover{
  color: var(--bg-cream);
  border-bottom-color: var(--bg-cream);
}

/* ============================================================
   扫码登录 · 真实二维码图片（js/login.js 动态填充）
   ============================================================ */
.wechat-qr .qr-img {
  width: 100%; height: 100%; display: block;
  background: #fff;
}

/* ============================================================
   已登录用户 · 本人信息（下拉里的手机号/登录方式/登录时间）
   ============================================================ */
.up-dropdown .up-info {
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.up-dropdown .up-info span {
  display: block;
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ============================================================
   登录弹窗：验证码提示（演示环境直接显示服务器生成的验证码）
   ============================================================ */
.code-hint {
  font-size: 13px;
  color: var(--deep-green);
  background: rgba(74,124,89,.08);
  border: 1px dashed rgba(74,124,89,.45);
  border-radius: 8px;
  padding: 9px 12px;
  margin: -2px 0 14px;
  line-height: 1.5;
}
.code-hint b { font-size: 17px; letter-spacing: .25em; font-weight: 700; }

/* ============================================================
   登录弹窗：用户名输入 + 头像上传（两条登录路径通用）
   ============================================================ */
.name-group { margin-bottom: 14px; }
.avatar-group {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.avatar-group .avatar-preview {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg); color: var(--ink-soft);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background-size: cover; background-position: center;
}
.avatar-group .avatar-upl { display: flex; flex-direction: column; gap: 5px; }
.avatar-upload-btn {
  align-self: flex-start;
  padding: 7px 16px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink);
  font-size: 13px; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.avatar-upload-btn:hover { border-color: var(--deep-green); color: var(--deep-green); }
.avatar-tip { font-size: 12px; color: var(--ink-soft); }

/* ============================================================
   手机号登录：行内错误提示 + 收不到验证码提示
   ============================================================ */
.login-dialog .err-tip {
  display: none;
  font-size: 12px;
  color: #c0503c;
  margin: -8px 0 12px;
  line-height: 1.5;
}
.login-dialog .err-tip:not(:empty) { display: block; }
.login-dialog .form-group.err input {
  border-color: rgba(192, 80, 60, .7);
}
.login-dialog .sms-no-receive {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: -4px 0 14px;
}

/* ============================================================
   加载页 CSS 兜底（重要）
   即使 JS 被延迟或加载失败，加载页也会在 2.6 秒后自动
   淡出消失，绝不会让用户卡在 loading 页。
   正常情况 JS 会在 1.4 秒提前移除该元素，本动画自动失效，
   两者互不冲突。
   ============================================================ */
#loading-screen { animation: loadingAutoHide .8s ease 2.6s forwards; }
@keyframes loadingAutoHide { to { opacity: 0; visibility: hidden; } }