/* 设计变量与全局样式。
   分三层：原始色阶 → 语义变量 → 组件。业务代码只用语义变量，改主题时只动这一处。 */
:root{
  /* ---- 原始色阶 ---- */
  /* 品牌：取自松柏与园林的深绿，避开通用科技蓝，更贴近灵山的自然与人文气质 */
  --brand-50:#EDF5F1; --brand-100:#D9EAE3; --brand-200:#B7D4C8;
  --brand-400:#5A8F7B; --brand-500:#39715F; --brand-600:#245C4D; --brand-700:#1A493D;
  --brand-900:#102E27;
  /* 强调：克制的朱砂色，用于状态、选中提示和少量行动入口 */
  --accent-50:#F8EFEB; --accent-300:#D7A08B; --accent-500:#A64B35; --accent-600:#843A2A;
  /* 铜色在深底上要提亮一档才够清晰，浅底上仍用 accent-500 */
  --brass:#C9A468; --brass-dim:#8C6E42;
  /* 第二自然色，用于生态/园林类内容，避免所有分类都染成品牌蓝 */
  --jade-500:#4F776B; --jade-50:#EAF1EE;
  /* 中性：微暖灰，避免纯灰的冷硬感 */
  --n-0:#FFFFFF;  --n-50:#F5F7F5; --n-100:#ECEFED; --n-200:#DEE3E0;
  --n-300:#C8D0CC; --n-400:#929E98; --n-500:#68746E; --n-600:#4C5752;
  --n-700:#343D39; --n-800:#202724; --n-900:#131816; --n-950:#0B100E;

  /* ---- 语义变量 ---- */
  --color-primary:var(--brand-600); --color-primary-hover:var(--brand-700); --color-primary-soft:var(--brand-50);
  --color-accent:var(--accent-500); --color-accent-soft:var(--accent-50);
  --color-ink:var(--n-800);    /* 正文 */
  --color-ink-2:var(--n-500);  /* 次要说明 */
  --color-ink-3:var(--n-400);  /* 占位、禁用 */
  --color-bg:var(--n-50); --color-surface:var(--n-0); --color-surface-2:var(--n-100);
  --color-border:var(--n-200); --color-border-strong:var(--n-300);
  --color-success:#2F855A; --color-warning:#B7791F; --color-danger:#C53030; --color-like:#E0475B;

  /* 旧变量名保留为别名：历史样式仍在引用，语义等同「强调色」 */
  --color-gold:var(--color-accent); --color-gold-soft:var(--color-accent-soft);
  --color-jade:var(--color-primary);

  /* ---- 字体 ----
     不依赖需要下载的字体：缺字时 serif 会回落到宋体，正文观感明显变差。
     标题与正文同族，靠字重和字距拉开层级。 */
  --font-body:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-display:var(--font-body);
  --font-number:"SF Mono","DIN Alternate",ui-monospace,Consolas,monospace;
  /* 只给 24px 以上的大标题用：这个尺寸下宋体的横细竖粗是加分项，小字号会糊 */
  --font-serif:"Songti SC","Source Han Serif SC","Noto Serif SC","STSong","SimSun",serif;

  /* ---- 字号：1.25 倍步进 ---- */
  --t-xs:12px; --t-sm:13px; --t-md:15px; --t-lg:17px; --t-xl:20px; --t-2xl:25px;
  --t-3xl:31px; --t-4xl:39px;

  /* ---- 间距：4pt 栅格 ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ---- 圆角 / 阴影 / 动效 ---- */
  /* 一套圆角规则，全站照做：输入框 8、卡片 14、大容器 20、交互控件全胶囊。
     原来 --r-md 和 --r-lg 都是 8px，等于没有层级，卡片和输入框长得一样重。 */
  --r-sm:8px; --r-md:8px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(20,23,26,.04), 0 2px 8px rgba(20,23,26,.05);
  --shadow-lift:0 2px 6px rgba(20,23,26,.06), 0 12px 28px rgba(20,23,26,.10);
  --shadow-pop:0 8px 28px rgba(20,23,26,.14);
  --shadow-glass:0 8px 30px rgba(6,10,14,.38);
  --m-fast:150ms; --m-base:220ms; --m-slow:420ms; --ease:cubic-bezier(.2,0,0,1);

  /* ---- 图像与遮罩 ----
     宣传性区块统一用「照片 + 压暗渐变」，文字压在渐变最深的一侧才保证可读。 */
  --hero-image:url('/assets/images/lingshan-buddha-close.jpg');
  --scrim-bottom:linear-gradient(180deg,rgba(8,12,16,0) 30%,rgba(8,12,16,.42) 62%,rgba(8,12,16,.86));
  --scrim-top:linear-gradient(180deg,rgba(8,12,16,.55),rgba(8,12,16,0) 55%);
  /* 极淡的颗粒。压暗后的大图容易出现色带，铺一层噪点能盖掉，顺带让照片不那么"数码"。
     用内联 SVG 而不是位图：不多一次请求，也不用管分辨率。 */
  /* 去色后用 overlay 混合：中灰不产生变化，只有噪点的起伏会显出来，
     所以画面整体明暗不受影响，加的纯粹是质感。 */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  /* 悬浮控件的统一材质。透明度压得比常见的玻璃拟态高一些：
     底下是浅绿的地图底图，太透会把控件染成偏绿的灰，字也压不住。 */
  --glass:rgba(14,18,24,.74); --glass-line:rgba(255,255,255,.14);
  /* 毛玻璃条（tabbar、吸顶栏）的底色。不能直接用 --color-surface：
     它是不透明的，铺上去就把下面的地图整片盖住了。 */
  --color-surface-blur:rgba(252,252,253,.92);

  color-scheme:light dark;
}

/* ---- 暗色模式 ----
   景区不是只有白天：傍晚的梵宫、夜场的灯光秀都是真实使用场景，
   天黑后满屏白底在户外相当刺眼，而且会拖低手机续航（游客一天下来最怕没电）。

   只翻转语义层，不动原始色阶——品牌绿在暗底上要提亮一档才认得出来，
   直接把 --brand-600 铺到深色背景上会糊成一团黑。
   底色用带绿味的深灰而不是纯黑：纯黑会让上面的照片显得发灰、失去层次。 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --color-primary:var(--brand-400); --color-primary-hover:#6BA48F;
    --color-primary-soft:rgba(90,143,123,.16);
    --color-accent:var(--accent-300); --color-accent-soft:rgba(215,160,139,.14);
    --color-ink:#E6EBE8; --color-ink-2:#9BA8A2; --color-ink-3:#6C7873;
    --color-bg:#0E1412; --color-surface:#161D1A; --color-surface-2:#1E2724;
    --color-border:#28322E; --color-border-strong:#3A4641;
    --color-success:#5BAE83; --color-warning:#D6A44A; --color-danger:#E2726B;
    /* 暗底上铜色要更亮才够清晰，这是 --brass-dim 存在的原因反过来用 */
    --brass:#D9B87C;
    /* 阴影在暗底上几乎看不见，改用更深的黑加大扩散，靠明度差立层次 */
    --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
    --shadow-lift:0 2px 8px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.4);
    --shadow-pop:0 10px 34px rgba(0,0,0,.55);
    /* 压暗渐变本来就是深色，暗色模式下要减弱，否则照片下半部分全黑成一片 */
    --scrim-bottom:linear-gradient(180deg,rgba(4,7,6,0) 34%,rgba(4,7,6,.38) 64%,rgba(4,7,6,.78));
    --color-surface-blur:rgba(18,24,21,.92);
    --glass:rgba(8,12,10,.82);
  }
}

/* 手动指定时忽略系统偏好。景区终端机常年固定一种模式，不能跟着系统跑。 */
:root[data-theme="dark"]{
  --color-primary:var(--brand-400); --color-primary-hover:#6BA48F;
  --color-primary-soft:rgba(90,143,123,.16);
  --color-accent:var(--accent-300); --color-accent-soft:rgba(215,160,139,.14);
  --color-ink:#E6EBE8; --color-ink-2:#9BA8A2; --color-ink-3:#6C7873;
  --color-bg:#0E1412; --color-surface:#161D1A; --color-surface-2:#1E2724;
  --color-border:#28322E; --color-border-strong:#3A4641;
  --color-success:#5BAE83; --color-warning:#D6A44A; --color-danger:#E2726B;
  --brass:#D9B87C;
  --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
  --shadow-lift:0 2px 8px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.4);
  --shadow-pop:0 10px 34px rgba(0,0,0,.55);
  --scrim-bottom:linear-gradient(180deg,rgba(4,7,6,0) 34%,rgba(4,7,6,.38) 64%,rgba(4,7,6,.78));
  --color-surface-blur:rgba(18,24,21,.92);
  --glass:rgba(8,12,10,.82);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body); font-size:var(--t-md); color:var(--color-ink); background:var(--color-bg);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:600;letter-spacing:.01em;line-height:1.35}
a{color:var(--color-primary);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%}
::selection{background:var(--color-primary-soft)}

/* 通用按钮 */
.btn{display:inline-flex;align-items:center;gap:var(--s-2);padding:10px 18px;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:500;transition:background var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease),transform var(--m-fast) var(--ease);white-space:nowrap}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-ghost{background:var(--color-surface);color:var(--color-ink-2);border:1px solid var(--color-border)}
.btn-ghost:hover{border-color:var(--color-border-strong);color:var(--color-ink)}
.btn-sm{padding:6px 12px;font-size:var(--t-xs)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:active:not(:disabled){transform:scale(.97)}

.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card)}
.gold-rule{height:1px;background:var(--color-border)}

.tag{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);font-size:var(--t-xs);
  background:var(--color-surface-2);color:var(--color-ink-2);border:1px solid var(--color-border)}
.tag-red{background:var(--color-primary-soft);color:var(--color-primary);border-color:transparent}
.tag-jade{background:var(--color-accent-soft);color:var(--color-accent);border-color:transparent}

input,textarea,select{font-family:inherit;font-size:var(--t-sm);color:var(--color-ink);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-md);
  padding:10px 12px;outline:none;transition:border-color var(--m-fast)}
input:focus,textarea:focus,select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}

/* ---- 版式部件 ----
   内容页统一用「引题 + 主标题 + 说明」三段式，靠字距和一根铜色短线立层级，
   不靠加粗和放大堆出来，避免每个区块都在抢注意力。 */
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-xs);letter-spacing:.22em;color:var(--color-accent);text-transform:uppercase}
.eyebrow::before{content:'';width:22px;height:1px;background:currentColor;opacity:.6}
.display-title{font-family:var(--font-serif);font-weight:600;letter-spacing:.06em;line-height:1.28}
.sec-head{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-4)}
/* 区块标题走宋体：这个字号下横细竖粗的对比很明显，和正文黑体拉开层级，
   也是文旅印刷品里最常见的一种版面语言。 */
.sec-head .t{font-family:var(--font-serif);font-size:var(--t-xl);font-weight:600;
  color:var(--color-ink);letter-spacing:.08em}
.sec-head .more{margin-left:auto;font-size:var(--t-xs);color:var(--color-ink-3)}
/* 标题右侧的收尾线，替代整行分隔线：不切断内容，只做视觉收口 */
.sec-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--color-border),transparent)}

/* ---- 入场动效 ----
   整页只做一次有编排的入场：区块自上而下依次浮起，之后界面就安静下来。
   比每个元素各自挂一堆 hover 动效更有秩序，也更像成品而不是演示。
   （prefers-reduced-motion 已在文件末尾统一关掉。） */
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.view.active .reveal{animation:riseIn .5s var(--ease) both}
.view.active .reveal:nth-child(2){animation-delay:.06s}
.view.active .reveal:nth-child(3){animation-delay:.12s}
.view.active .reveal:nth-child(4){animation-delay:.18s}
.view.active .reveal:nth-child(n+5){animation-delay:.24s}

/* 图片容器：统一比例 + 裁切，避免不同尺寸的运营图把卡片撑歪 */
.media{position:relative;overflow:hidden;background:var(--color-surface-2)}
.media>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--m-slow) var(--ease)}
.media::after{content:'';position:absolute;inset:0;background:var(--scrim-bottom);opacity:.9;pointer-events:none}
.media.plain::after{display:none}
.lift{transition:transform var(--m-base) var(--ease),box-shadow var(--m-base) var(--ease)}
@media (hover:hover){
  .lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
  .lift:hover .media>img{transform:scale(1.05)}
}

/* 滚动条 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--color-ink-3)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---- 路线里的交通段 ----
   夹在两个景点之间，视觉上要比景点条目轻，但接驳段必须跳出来——
   那是「这段走不过去」的警示，不是普通说明。 */
.route-leg{display:flex;align-items:center;gap:8px;padding:6px 0 6px 42px;
  font-size:var(--t-xs);color:var(--color-ink-3);position:relative}
.route-leg::before{content:'';position:absolute;left:19px;top:0;bottom:0;width:1px;
  background:repeating-linear-gradient(180deg,var(--color-border) 0 4px,transparent 4px 8px)}
.route-leg i{font-style:normal;color:var(--color-ink-3);opacity:.8}
.route-leg.is-shuttle{color:var(--color-accent);font-weight:500}
.route-leg.is-shuttle::before{background:repeating-linear-gradient(180deg,var(--color-accent) 0 4px,transparent 4px 8px);opacity:.5}
.route-leg.is-shuttle i{color:var(--color-ink-3);font-weight:400}
.route-sum{margin-top:10px;padding-top:10px;border-top:1px solid var(--color-border);
  font-size:var(--t-xs);color:var(--color-ink-2)}