/**
 * Theme Name: Kestrel
 * Theme URI: https://kestrelchem.example
 * Author: Kestrel Chemical Corporation
 * Description: An aerial-descent smart-park theme for a chemical manufacturer — open on a blue sky, descend through real clouds into a real industrial-complex aerial photo, with six centers marked by clickable neon hotspots. Standard header and footer.
 * Version: 1.0.0
 * License: GPL-2.0+
 * Text Domain: kestrel
 */

:root{
  --bg-0:#071c35;
  --bg-1:#0d2b4d;
  --surface:rgba(20,52,96,0.55);
  --surface-2:rgba(28,68,120,0.55);
  --line:rgba(120,160,255,0.16);
  --line-strong:rgba(120,200,255,0.34);
  --text:#e9f0ff;
  --text-2:#9fb0d0;
  --text-3:#62708f;
  --cyan:#2fd4e8;
  --violet:#8f9dff;
  --mint:#3fd9c0;
  --pink:#6d8cff;
  /* 统一到蓝-青近似色系(analogous),不再横跨青/紫/品红整个色环 */
  --grad-neon:linear-gradient(135deg,#2fd4e8 0%,#4da3ff 55%,#8f9dff 100%);
  --glow-cyan:0 0 24px rgba(0,229,255,.45);
  --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --blur:saturate(180%) blur(16px);
  /* 航拍图上悬浮的玻璃面板(品牌带/信息面板/图例/热点标牌)统一走这一套 ——
     比原先 rgba(7,11,22,.7-.78) 那种近黑实底透明得多, 靠更强的模糊+饱和度
     撑质感而不是靠深色底色, 文字再配一点阴影兜底可读性. */
  /* 水晶玻璃 —— 不是"半透明色块", 目标是晶莹剔透的实体玻璃片:
     底色压到很淡(靠 backdrop-filter 提亮/增饱和撑质感, 而不是靠涂一层色),
     边缘四条 inset 模拟光打在玻璃厚度上的高光与背面折射暗边,
     再加一圈冷调 inner glow 做内发光. 文字仍走深色阶, 靠亮底托深字. */
  --glass-bg:rgba(230,244,255,.42);
  --glass-bg-strong:rgba(240,249,255,.62);
  --glass-border:rgba(255,255,255,.72);
  --glass-blur:saturate(190%) brightness(1.14) blur(26px);
  /* 亮玻璃上的文字色阶(深→浅) */
  --gt-1:#0c2340;
  --gt-2:#2b4763;
  --gt-3:#5d7791;
  --text-shadow-soft:none;
  /* 水晶边缘 + 内发光. 四条 inset 边分别是: 顶部强高光(光从上方来)、
     左侧次高光、右侧弱反光、底部冷调折射暗边 —— 四边不同才有"玻璃有厚度"
     的立体感, 四边一样只会像描边. 最后两条是冷白内发光与顶部光晕溢散. */
  --glass-edge:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.58),
    inset -1px 0 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(96,164,220,.42),
    inset 0 0 32px rgba(150,214,255,.42),
    inset 0 10px 26px rgba(255,255,255,.26),
    0 12px 34px rgba(4,20,44,.30);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
  background:transparent;
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1240px,92vw);margin-inline:auto}

/* ===================== Top navigation (常规) ===================== */
.neo-top{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(180deg,rgba(7,28,53,.92),rgba(7,28,53,.55) 70%,transparent);
  backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.neo-top.scrolled{background:rgba(7,28,53,.92);border-bottom-color:var(--line-strong)}
.neo-top .container{display:flex;align-items:center;justify-content:space-between;height:68px}
/* Brand mark = self-authored Kestrel SVG (assets/img/logo-kestrel.svg), not
   derived from any real company's logo.

   The wordmark is dark text, which would be unreadable straight on the dark
   navy header, so it sits on a glass plate. It must NOT be an opaque white
   plate — that reads as a sticker slapped on the page, clashing with the
   site's crystal-glass language. Uses the same crystal glass as the banner
   panels: translucent + backdrop blur/brighten + four-edge highlight/
   refraction + cool inner glow, so the water/aerial photo underneath still
   shows through faintly — reads as "a glass plate set into the page", not
   "a decal stuck on top". */
.neo-logo{
  display:flex;align-items:center;
  padding:8px 18px;border-radius:14px;
  position:relative;overflow:hidden;
  /* Slightly more opaque than the general panels: the wordmark is dark text
     and goes soft if too translucent. .72 still clearly shows the water/
     aerial photo behind it, without turning back into a sticker. */
  background:rgba(240,249,255,.72);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-edge);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
/* 与其它水晶面板同款的斜向反射高光 */
.neo-logo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;mix-blend-mode:screen;
  background:linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,.00) 34%,
    rgba(255,255,255,.30) 46%,
    rgba(206,238,255,.20) 53%,
    rgba(255,255,255,.00) 66%,
    transparent 100%);
}
.neo-logo img{height:34px;width:auto;display:block;position:relative}
.neo-footer .neo-logo{align-self:flex-start}
.neo-footer .neo-logo img{height:38px}
.neo-menu{display:flex;align-items:center;gap:6px;list-style:none}
.neo-menu a{
  padding:9px 15px;border-radius:9px;font-size:.92rem;color:var(--text-2);
  transition:.25s var(--ease);position:relative;
}
.neo-menu a:hover{color:var(--text);background:var(--surface-2)}
.neo-cta{display:flex;align-items:center;gap:10px}
.menu-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);width:40px;height:40px;border-radius:9px;cursor:pointer}

/* ===================== Park stage (cloud-descent aerial panorama) ===================== */
.park-stage{
  position:relative;width:100%;height:100vh;min-height:720px;overflow:hidden;
  /* 仅作 shader 首帧绘制前的底色, 取云层暗部灰蓝, 避免亮蓝闪一下 */
  background:linear-gradient(180deg,#8fa6bd 0%,#aebecd 45%,#c9d5e0 100%);
}
.park-layer{position:absolute;inset:0;background-size:cover;background-position:center}

/* 鸟瞰图: 从第一帧起就完整可见, 不做 opacity/filter/transform 过渡.
   —— 曾经这里挂着一条 2.5s 的 filter(brightness/saturate/contrast) 渐变,
   在整屏 2200px 背景图上逐帧重新栅格化, 与 WebGL 主循环抢资源, 造成
   "落地后厂区慢慢才显示出来"的卡顿. 揭示交给云层散开完成, 图片本身保持静止,
   既无卡顿可能, 也更贴近下降的物理直觉(是云在让路, 不是地面在淡入).
   全程 scale(1.0) 保证热点与真实设施精准对齐. */
.park-aerial{
  opacity:1;
  background-position:50% 48%;
  filter:saturate(1.04) contrast(1.03);
}

/* 云雾层: WebGL 体积云主层(canvas) + CSS div fallback.
   canvas 的不透明度完全由 shader 自己的 uFade / uGroundVis 决定 ——
   这里不再叠加相位级的 opacity, 否则会与 shader 的淡出打架、把云提前抹平.
   飞行结束时由 JS 一次性把 canvas opacity 置 0 并停掉渲染循环. */
.park-clouds{
  opacity:1;
  pointer-events:none;
  z-index:4;
}
.park-cloudcanvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
  transition:opacity 1.1s var(--ease);
}

/* WebGL 可用时隐藏 CSS div 云; 不可用时(cloud-fallback)隐藏 canvas 显示增强 div 云 */
.park-stage:not(.cloud-fallback) .cloud{display:none}
.park-stage.cloud-fallback .park-cloudcanvas{display:none}
.cloud{
  position:absolute;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.95) 0%,rgba(255,255,255,.6) 35%,transparent 70%);
  filter:blur(8px);
  will-change:transform;
}
.cloud-1{width:60vw;height:30vh;left:-10vw;top:5vh;animation:drift1 24s linear infinite}
.cloud-2{width:50vw;height:24vh;right:-15vw;top:18vh;animation:drift2 30s linear infinite}
.cloud-3{width:70vw;height:32vh;left:-20vw;top:38vh;animation:drift1 28s linear infinite -8s}
.cloud-4{width:45vw;height:22vh;right:-10vw;top:48vh;animation:drift2 26s linear infinite -12s}
@keyframes drift1{0%{transform:translateX(0)}100%{transform:translateX(120vw)}}
@keyframes drift2{0%{transform:translateX(0)}100%{transform:translateX(-120vw)}}
.park-stage.phase-pierce .cloud{animation-duration:10s}
.park-stage.phase-descend .cloud{animation-duration:14s}
.park-stage.phase-revealed .cloud{animation-play-state:paused}

/* fallback 增强: 不规则云团轮廓 + 多层渐变, 比纯椭圆真实 */
.park-stage.cloud-fallback .cloud{
  border-radius:50% 40% 60% 35% / 40% 55% 45% 60%;
  filter:blur(20px);
  background:
    radial-gradient(ellipse at 30% 40%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.6) 30%,transparent 65%),
    radial-gradient(ellipse at 70% 60%,rgba(255,255,255,.85) 0%,transparent 55%);
}

/* 暗角 + 电影感青橙色调叠层(增强大厂气派) */
.park-scrim{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:
    linear-gradient(115deg,rgba(0,90,140,.18) 0%,transparent 35%,transparent 65%,rgba(255,110,40,.12) 100%),
    radial-gradient(120% 90% at 50% 35%,transparent 40%,rgba(7,28,53,.24) 100%),
    linear-gradient(180deg,rgba(7,28,53,.42) 0%,transparent 20%,transparent 62%,rgba(7,28,53,.62) 100%);
  transition:opacity 1.4s var(--ease);
}
.park-stage.phase-descend .park-scrim{opacity:.6}
.park-stage.phase-revealed .park-scrim{opacity:1}

/* 科技网格叠层(数字孪生质感) */
.park-techgrid{
  position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
  background-image:
    linear-gradient(rgba(0,229,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 75%);
  transition:opacity 1.2s var(--ease);
}
.park-stage.phase-revealed .park-techgrid{opacity:.55}

/* 扫描线(顶部一道霓虹扫过,强化"指挥中心"感) */
.park-scanline{
  position:absolute;left:0;right:0;top:0;height:140px;z-index:7;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(0,229,255,.12),transparent);
  animation:scanline 6s linear infinite;
  transition:opacity 1s var(--ease);
}
.park-stage.phase-revealed .park-scanline{opacity:.7}
@keyframes scanline{0%{transform:translateY(-140px)}100%{transform:translateY(100vh)}}

/* 环绕画面四边缓慢漂移的柔化云雾光斑 —— 落地后常驻(不像穿云 shader 那样为省电
   而停渲染): 全是 CSS transform/opacity 动画, GPU 合成、零逐帧重绘开销, 所以
   "一直有一圈云雾感"在这里是免费的. 每一坨都故意探出舞台边界一截再被
   .park-stage 的 overflow:hidden 裁掉, 效果是雾从画框外"渗"进来, 而不是
   贴着一条生硬的边线. */
/* 常驻云雾 canvas —— 域扭曲 fbm 体积云(见 edge-mist.js), 落地后一直翻涌.
   故意做到 112% 并靠 .park-stage 的 overflow:hidden 裁掉, 让云从画框外
   "渗"进来, 不出现贴着边的硬直线. */
.park-mist{position:absolute;inset:-6% -6%;width:112%;height:112%;z-index:8;
  pointer-events:none;opacity:0;filter:blur(1px);transition:opacity 1.6s var(--ease)}
.park-stage.phase-revealed .park-mist{opacity:1}

/* loading / intro veil — 仅在 JS 未启动时短暂显示,phase-sky 立即淡出 */
.park-veil{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,#0d2a4d,#071c35);
  transition:opacity .35s var(--ease);
}
.park-veil.hidden,.park-stage.phase-sky .park-veil,.park-stage.phase-descend .park-veil,.park-stage.phase-revealed .park-veil,.park-stage.phase-dive .park-veil,.park-stage.phase-arrive .park-veil{opacity:0;pointer-events:none}
.veil-inner{text-align:center}
.veil-orb{
  width:90px;height:90px;margin:0 auto 26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(0,229,255,.5),rgba(123,108,255,.2) 60%,transparent);
  border:1px solid var(--line-strong);
  animation:pulse 1.6s var(--ease) infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,229,255,.4)}50%{transform:scale(1.08);box-shadow:0 0 0 24px rgba(0,229,255,0)}}
.veil-text{color:var(--text-2);font-size:.95rem;letter-spacing:.1em}
.veil-text b{color:var(--cyan)}

/* flight HUD — earth/aerial 阶段可见, revealed 后隐藏 */
.flight-hud{
  position:absolute;top:88px;left:50%;transform:translateX(-50%);z-index:15;
  display:flex;align-items:center;gap:14px;padding:10px 20px;
  background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-edge);border-radius:30px;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  opacity:0;transition:opacity .5s var(--ease);
  pointer-events:none;
}
.park-stage.phase-sky .flight-hud,.park-stage.phase-pierce .flight-hud,.park-stage.phase-descend .flight-hud,.park-stage.phase-dive .flight-hud,.park-stage.phase-arrive .flight-hud{opacity:1}
.flight-hud .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:var(--glow-cyan);animation:pulse 1.2s infinite}
.flight-hud .txt{text-shadow:var(--text-shadow-soft)}
.flight-hud .txt{font-size:.86rem;color:var(--gt-1);letter-spacing:.04em}
.flight-hud .stage{color:var(--cyan);font-weight:600}

/* 顶部品牌带(大厂气派:Logo + 4 项关键指标) */
.park-brandbar{
  position:absolute;left:0;right:0;top:96px;z-index:14;
  display:flex;justify-content:center;pointer-events:none;
  opacity:0;transform:translateY(-12px);
  transition:opacity .8s var(--ease) .2s,transform .8s var(--ease) .2s;
}
.park-stage.phase-revealed .park-brandbar{opacity:1;transform:translateY(0)}
.bb-inner{
  pointer-events:auto;display:flex;align-items:center;gap:36px;
  padding:14px 24px;border-radius:16px;
  background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-edge);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 12px 32px rgba(0,0,0,.22),0 0 0 1px rgba(0,229,255,.06) inset;
}
.bb-logo{display:flex;align-items:center;gap:12px;padding-right:24px;border-right:1px solid rgba(12,35,64,.14)}
.bb-mark{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--grad-neon);color:#04060c;font-size:20px;
  box-shadow:var(--glow-cyan);
}
.bb-name{font-size:1.06rem;font-weight:800;letter-spacing:.02em;line-height:1.1;color:var(--gt-1);
  background:linear-gradient(135deg,#fff,#9fd5ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.bb-en{font-size:.7rem;color:var(--gt-3);letter-spacing:.16em;text-transform:uppercase;margin-top:2px}
.bb-stats{display:flex;align-items:center;gap:28px}
.bb-stat{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.bb-stat b{font-size:1.18rem;font-weight:800;color:var(--gt-1);font-family:ui-monospace,"SF Mono",Consolas,monospace}
.bb-stat span{font-size:.66rem;color:var(--gt-3);letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
@media (max-width:1100px){
  .bb-stats{gap:18px}
  .bb-stat b{font-size:1rem}
}
@media (max-width:760px){
  .park-brandbar{top:auto;bottom:120px}
  .bb-inner{flex-direction:column;gap:14px;padding:12px 16px}
  .bb-logo{border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:12px}
  .bb-stats{gap:18px}
}

/* park info panel (bottom-left) */
.park-panel{
  position:absolute;left:24px;bottom:28px;z-index:15;max-width:340px;
  background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-edge);border-radius:var(--radius);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  padding:20px 22px;opacity:0;transform:translateY(16px);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.park-stage.phase-revealed .park-panel{opacity:1;transform:translateY(0)}
.park-panel .eyebrow{font-size:.72rem;color:var(--cyan);letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-shadow:var(--text-shadow-soft)}
.park-panel h3{font-size:1.2rem;margin:6px 0 4px;color:var(--gt-1);text-shadow:var(--text-shadow-soft)}
.park-panel p{font-size:.84rem;color:var(--gt-2);margin:0;text-shadow:var(--text-shadow-soft)}
.park-panel .coords{margin-top:12px;font-size:.74rem;color:var(--gt-3);font-family:ui-monospace,Consolas,monospace;text-shadow:var(--text-shadow-soft)}

/* centers legend (bottom-right) */
.centers-legend{
  position:absolute;right:24px;bottom:28px;z-index:15;
  background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-edge);border-radius:var(--radius);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  padding:16px 18px;opacity:0;transform:translateY(16px);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  transition:opacity .6s var(--ease) .1s,transform .6s var(--ease) .1s;
}
.park-stage.phase-revealed .centers-legend{opacity:1;transform:translateY(0)}
.centers-legend .lh{font-size:.72rem;color:var(--gt-3);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;text-shadow:var(--text-shadow-soft)}
.centers-legend ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.centers-legend li{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--gt-2);cursor:pointer;transition:color .2s,background .2s;padding:4px 6px;border-radius:8px;text-shadow:var(--text-shadow-soft)}
.centers-legend li:hover,.centers-legend li.active{color:var(--gt-1);background:rgba(12,35,64,.09)}
.centers-legend li i{font-size:1rem;color:var(--cyan);width:18px;text-align:center}
.centers-legend li .nm{flex:1}

/* replay button */
.replay-btn{
  position:absolute;right:24px;top:88px;z-index:15;
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-edge);border-radius:30px;
  color:var(--text);font-size:.84rem;cursor:pointer;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  text-shadow:var(--text-shadow-soft);
  opacity:0;transition:opacity .5s var(--ease),border-color .2s;
}
.park-stage.phase-revealed .replay-btn{opacity:1}
.replay-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.replay-btn i{font-size:1rem}

/* ===================== Hotspots (六大中心热点) ===================== */
.hotspots{position:absolute;inset:0;z-index:12}
.hotspot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:0;
  background:none;border:none;padding:0;cursor:pointer;
  opacity:0;transition:opacity .6s var(--ease);
}
.park-stage.phase-revealed .hotspot,.park-stage.phase-clear .hotspot{opacity:1}
.park-stage.phase-revealed .hotspot:nth-child(1){transition-delay:.15s}
.park-stage.phase-revealed .hotspot:nth-child(2){transition-delay:.25s}
.park-stage.phase-revealed .hotspot:nth-child(3){transition-delay:.35s}
.park-stage.phase-revealed .hotspot:nth-child(4){transition-delay:.45s}
.park-stage.phase-revealed .hotspot:nth-child(5){transition-delay:.55s}
.park-stage.phase-revealed .hotspot:nth-child(6){transition-delay:.65s}
/* 右半侧热点: 卡片翻到左侧, 避免溢出 */
.hotspot.hs-flip{flex-direction:row-reverse}

.hs-dot{
  position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--hc) 16%,rgba(250,253,255,.86));border:2px solid var(--hc);color:color-mix(in srgb,var(--hc) 62%,#0c2340);
  box-shadow:0 0 22px var(--hc),0 0 48px color-mix(in srgb,var(--hc) 45%,transparent),inset 0 0 10px rgba(255,255,255,.18);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
}
.hs-dot i{font-size:20px}
.hs-ping{
  position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--hc);
  animation:hsping 2.6s var(--ease) infinite;pointer-events:none;
}
@keyframes hsping{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.8);opacity:0}}
/* 雷达扫描扇形(更强的指挥中心感) */
.hs-radar{
  position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--hc) 0deg,transparent 60deg,transparent 360deg);
  opacity:.22;mix-blend-mode:screen;pointer-events:none;
  animation:hsradar 4s linear infinite;
}
@keyframes hsradar{to{transform:rotate(360deg)}}

.hs-card{
  margin-left:14px;padding:8px 15px;border-radius:11px;
  background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-edge);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  white-space:nowrap;transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.hotspot.hs-flip .hs-card{margin-left:0;margin-right:14px}
.hs-card .hs-en{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gt-3);text-shadow:var(--text-shadow-soft)}
.hs-card .hs-name{display:block;font-size:.92rem;font-weight:700;color:var(--gt-1);line-height:1.2;text-shadow:var(--text-shadow-soft)}
.hotspot:hover .hs-dot,.hotspot.active .hs-dot{
  transform:scale(1.22);background:var(--hc);color:#ffffff;
  box-shadow:0 0 32px var(--hc),0 0 80px color-mix(in srgb,var(--hc) 55%,transparent);
}
.hotspot:hover .hs-card,.hotspot.active .hs-card{border-color:var(--hc);transform:scale(1.06);background:var(--glass-bg-strong)}

/* ===================== Regular bottom section ===================== */
.neo-bottom{position:relative;background:linear-gradient(180deg,#071c35,#0d2b4d 40%,#071c35)}
.section{padding:90px 0}
.section-head{text-align:center;max-width:720px;margin:0 auto 56px}
.section-head .eyebrow{display:inline-block;font-size:.74rem;color:var(--cyan);letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:14px}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:800;line-height:1.2}
.section-head p{color:var(--text-2);margin-top:14px;font-size:1.02rem}

/* center cards grid (regular listing of the 6 centers) */
.centers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.center-card{
  position:relative;padding:28px 26px;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(20,28,54,.55),rgba(11,17,36,.5));
  border:1px solid var(--line);backdrop-filter:var(--blur);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.center-card:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.center-card .ic{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(0,229,255,.22),rgba(123,108,255,.18));border:1px solid var(--line-strong)}
.center-card .ic i{font-size:24px;color:var(--cyan);text-shadow:var(--glow-cyan)}
.center-card h3{font-size:1.18rem;margin-bottom:6px}
.center-card p{color:var(--text-2);font-size:.92rem;margin:0 0 16px}
.center-card .go{display:inline-flex;align-items:center;gap:6px;color:var(--cyan);font-size:.86rem;font-weight:600}
.center-card .go i{transition:transform .3s var(--ease)}
.center-card:hover .go i{transform:translateX(4px)}
.center-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(0,229,255,.14),transparent 45%);
  opacity:0;transition:opacity .4s var(--ease)}
.center-card:hover::after{opacity:1}

/* CTA band */
.cta-band{
  position:relative;border-radius:20px;padding:54px 48px;overflow:hidden;
  background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(123,108,255,.1) 50%,rgba(255,77,200,.1));
  border:1px solid var(--line-strong);
}
.cta-band .row{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800}
.cta-band p{color:var(--text-2);margin-top:10px;max-width:560px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:30px;font-weight:600;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:.3s var(--ease);text-decoration:none}
.btn-primary{background:var(--grad-neon);color:#04060c;box-shadow:var(--glow-cyan)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,229,255,.55)}
.btn-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-lg{padding:16px 32px;font-size:1.02rem}

/* ===================== Footer (常规) ===================== */
.neo-footer{background:linear-gradient(180deg,#0d2b4d 0%,#071c35 100%);border-top:1px solid var(--line);padding:64px 0 30px}
.neo-footer .grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.neo-footer .brand p{color:var(--text-2);font-size:.9rem;margin-top:14px;max-width:340px}
.neo-footer h4{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}
.neo-footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.neo-footer ul a{color:var(--text-2);font-size:.9rem;transition:color .2s}
.neo-footer ul a:hover{color:var(--cyan)}
.neo-footer .socials{display:flex;gap:12px;margin-top:16px}
.neo-footer .socials a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);color:var(--text-2);transition:.25s}
.neo-footer .socials a:hover{border-color:var(--cyan);color:var(--cyan)}
.footer-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--text-3);font-size:.82rem}

/* ===================== Generic page / single (常规) ===================== */
.page-hero{padding:130px 0 40px;background:radial-gradient(120% 80% at 50% 0%,rgba(0,229,255,.08),transparent 60%)}
.breadcrumb{color:var(--text-3);font-size:.84rem;margin-bottom:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--cyan)}
.page-hero h1{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:800;line-height:1.2;max-width:860px}
.page-hero .lead{color:var(--text-2);margin-top:14px;max-width:680px;font-size:1.05rem}
.single-layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.entry-content{color:var(--text);font-size:1.02rem;line-height:1.85}
.entry-content h2{font-size:1.5rem;margin:1.6em 0 .6em;color:var(--text)}
.entry-content h3{font-size:1.2rem;margin:1.3em 0 .5em}
.entry-content p{margin:0 0 1.1em;color:var(--text-2)}
.entry-content ul{margin:0 0 1.1em 1.2em;color:var(--text-2)}
.entry-content li{margin-bottom:.5em}
.entry-content strong{color:var(--text)}
.article-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--text-3);font-size:.86rem;margin-top:18px}
.article-meta i{margin-right:.3em}
.widget{padding:22px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);margin-bottom:18px}
.widget h3{font-size:1rem;margin-bottom:12px}
.widget ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.widget ul a{color:var(--text-2);font-size:.9rem}
.widget ul a:hover{color:var(--cyan)}
.center-detail-hero{padding:130px 0 50px}
.center-detail-hero .ctag,
.page-hero .ctag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:30px;background:var(--surface-2);border:1px solid var(--line-strong);color:var(--cyan);font-size:.8rem;margin-bottom:18px}
.center-detail-hero .ctag i,
.page-hero .ctag i{font-size:1.05rem}
.center-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;margin-top:34px}
.center-stats .st{padding:20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.center-stats .st .n{font-size:1.8rem;font-weight:800;background:var(--grad-neon);-webkit-background-clip:text;background-clip:text;color:transparent}
.center-stats .st .l{color:var(--text-3);font-size:.8rem;margin-top:4px}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}

/* toast */
.neo-toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(20px);z-index:200;
  padding:12px 22px;background:var(--surface);border:1px solid var(--line-strong);border-radius:30px;
  color:var(--text);font-size:.9rem;backdrop-filter:var(--blur);opacity:0;transition:.4s var(--ease);pointer-events:none}
.neo-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===================== Center popup (info card) ===================== */
.center-popup{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%) translateY(16px);z-index:18;
  width:min(440px,calc(100vw - 48px));
  background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;
  backdrop-filter:var(--blur);padding:22px 22px 20px;opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.center-popup.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.center-popup .cp-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.center-popup .cp-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(0,229,255,.25),rgba(123,108,255,.15));border:1px solid var(--line-strong);color:var(--cyan)}
.center-popup .cp-ic i{font-size:22px}
.center-popup .cp-en{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.center-popup .cp-name{font-size:1.2rem;font-weight:800;color:var(--text)}
.center-popup .cp-close{margin-left:auto;background:none;border:none;color:var(--text-3);font-size:1.2rem;cursor:pointer;width:32px;height:32px;border-radius:8px}
.center-popup .cp-close:hover{color:var(--text);background:var(--surface-2)}
.center-popup .cp-desc{color:var(--text-2);font-size:.92rem;margin:0 0 14px}
.center-popup .cp-stats{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.center-popup .cp-stats li{display:flex;align-items:center;gap:8px;color:var(--text);font-size:.86rem}
.center-popup .cp-stats li i{color:var(--cyan)}
.center-popup .cp-go{width:100%;justify-content:center}

/* ===================== Scroll cue ===================== */
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:14;
  display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-3);
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transition:opacity .6s var(--ease) .3s;pointer-events:auto;cursor:pointer;text-decoration:none}
.park-stage.phase-revealed .scroll-cue{opacity:.85}
.scroll-cue:hover{color:var(--cyan)}
.scroll-cue .mouse{width:22px;height:34px;border:1.5px solid currentColor;border-radius:12px;position:relative}
.scroll-cue .mouse::before{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);
  width:3px;height:7px;border-radius:2px;background:currentColor;animation:wheel 1.6s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

.sidebar .widget ul a{display:inline-flex;align-items:center;gap:6px}
.pagination{display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{padding:8px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--text-2)}
.pagination .page-numbers.current,.pagination .page-numbers:hover{color:#fff;border-color:var(--cyan);background:var(--surface-2)}

/* responsive */
@media(max-width:980px){
  .neo-footer .grid{grid-template-columns:1fr 1fr}
  .single-layout{grid-template-columns:1fr}
  .neo-menu{display:none}
  .menu-toggle{display:grid;place-items:center}
  .neo-top.nav-open .neo-menu{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:rgba(7,28,53,.96);padding:14px;border-bottom:1px solid var(--line)}
  .park-panel{max-width:calc(100vw - 48px)}
  .centers-legend{display:none}
  .hs-card .hs-en{display:none}
  .hs-card{padding:5px 10px}
  .hs-card .hs-name{font-size:.78rem}
  .hs-dot{width:30px;height:30px}
  .hs-dot i{font-size:13px}
}
@media(max-width:600px){
  .park-panel{left:12px;right:12px;bottom:14px;max-width:none}
  .replay-btn{right:12px;top:80px}
  .neo-footer .grid{grid-template-columns:1fr}
  .cta-band{padding:36px 24px}
  .hs-card{display:none}
  .hotspot:hover .hs-card{display:block}
  .neo-cta .btn{white-space:nowrap;padding:8px 12px;font-size:.82rem}
}

/* ===================== Homepage split layout (Camper-style minimal) ===================== */
/* 简约大气:大图 + 简短文字 + 充分留白, 详情移至内页 */
.park-bottom{
  position:relative;
  background:linear-gradient(180deg,rgba(7,28,53,0.9) 0%,rgba(13,43,77,0.85) 40%,rgba(7,28,53,0.9) 100%);
  overflow:hidden;
}
/* 顶部柔和大气辉光,衔接 hero 舞台与常规区 */
.park-bottom::before{
  content:"";position:absolute;left:0;right:0;top:0;height:280px;pointer-events:none;
  background:radial-gradient(80% 100% at 50% 0%,rgba(0,229,255,.06),transparent 70%);
}

.lead-strip{
  text-align:center;
  padding:140px 0 96px;
  max-width:780px;
  margin:0 auto;
  position:relative;z-index:1;
}
.lead-strip .eyebrow{
  display:inline-block;
  font-size:.74rem;color:var(--cyan);
  letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  margin-bottom:18px;
}
.lead-strip h2{
  font-size:clamp(2rem,4.2vw,3.4rem);
  font-weight:800;line-height:1.18;letter-spacing:-.01em;
  margin-bottom:18px;
}
.lead-strip .ls-sub{
  color:var(--text-2);font-size:1.02rem;
  max-width:560px;margin:0 auto;
}

/* 全宽大图嵌套文字 (Camper & Nicholsons 风格 · 交替左右 · 大气磅礴) */
.fw-banner{
  position:relative;
  width:100%;
  min-height:82vh;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  /* 不用 background-attachment:fixed — fixed 视差会锁定图片中段,
     若主体不在正中(如炼厂在图底)则永远看不到主体. scroll 让图片随
     滚动移动, 全幅可见. */
  overflow:hidden;
}
/* 文字侧渐变遮罩(白字可读性). 另一侧保持图像通透 */
.fw-scrim{ position:absolute;inset:0;z-index:1;pointer-events:none; }
.fw-left .fw-scrim{
  background:linear-gradient(90deg, rgba(4,12,28,.84) 0%, rgba(4,12,28,.56) 34%, rgba(4,12,28,.08) 60%, transparent 78%);
}
.fw-right .fw-scrim{
  background:linear-gradient(270deg, rgba(4,12,28,.84) 0%, rgba(4,12,28,.56) 34%, rgba(4,12,28,.08) 60%, transparent 78%);
}
/* 顶底轻微暗化, 增加电影感与纵深 */
.fw-banner::before{
  content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.32), transparent);
}
.fw-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.34));
}

.fw-inner{
  position:relative;z-index:2;
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding:90px 6vw;
}
.fw-left .fw-inner{ text-align:left; }
.fw-right .fw-inner{ text-align:right; }
.fw-inner > *{ max-width:560px; }
.fw-left .fw-inner > *{ margin-right:auto; }
.fw-right .fw-inner > *{ margin-left:auto; }

.fw-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:#fff;
  padding:8px 16px;border-radius:30px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  margin-bottom:24px;
}
.fw-eyebrow i{ font-size:1.02rem; color:var(--hc); text-shadow:0 0 12px var(--hc); }
.fw-title{
  font-size:clamp(2.2rem,4.6vw,3.8rem);
  font-weight:800;line-height:1.1;letter-spacing:-.015em;
  color:#fff;
  text-shadow:0 2px 28px rgba(0,0,0,.42);
  margin-bottom:16px;
}
.fw-tag{
  font-size:clamp(1.05rem,1.7vw,1.32rem);
  color:rgba(255,255,255,.94);font-weight:500;
  margin-bottom:12px;
  text-shadow:0 1px 14px rgba(0,0,0,.35);
}
.fw-sub{
  font-size:1.0rem;line-height:1.75;
  color:rgba(255,255,255,.82);
  margin-bottom:34px;
}
.fw-cta{
  display:inline-flex;align-items:center;gap:11px;
  color:#fff;font-weight:600;font-size:.96rem;letter-spacing:.04em;
  padding:13px 0;position:relative;text-decoration:none;
}
.fw-cta::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:2px;background:#fff;opacity:.55;
  transition:opacity .35s var(--ease);
}
.fw-cta:hover::after{ opacity:1; }
.fw-cta i{ transition:transform .35s var(--ease); }
.fw-cta:hover i{ transform:translateX(8px); }

.fw-num{
  position:absolute;top:38px;z-index:2;
  font-size:.84rem;font-weight:700;letter-spacing:.1em;
  color:rgba(255,255,255,.62);
  font-family:ui-monospace,"SF Mono",Consolas,monospace;
}
.fw-left .fw-num{ right:5vw; }
.fw-right .fw-num{ left:5vw; }
.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--cyan);font-weight:600;font-size:.92rem;letter-spacing:.04em;
  padding-top:18px;position:relative;text-decoration:none;
}
.link-arrow::after{
  content:"";position:absolute;left:0;bottom:-4px;
  width:0;height:2px;background:var(--cyan);
  transition:width .45s var(--ease);
}
.link-arrow:hover::after{width:100%}
.link-arrow i{transition:transform .35s var(--ease)}
.link-arrow:hover i{transform:translateX(7px)}

.cta-minimal{
  text-align:center;
  padding:150px 0 130px;
  max-width:700px;margin-inline:auto;
  position:relative;z-index:1;
}
.cta-minimal h2{
  font-size:clamp(2rem,3.6vw,2.9rem);
  font-weight:800;letter-spacing:-.01em;
  margin-bottom:16px;
}
.cta-minimal p{
  color:var(--text-2);font-size:1.04rem;
  margin-bottom:32px;
}

@media (max-width:860px){
  .fw-banner{ background-attachment:scroll; min-height:66vh; }
  .fw-left .fw-inner,.fw-right .fw-inner{ text-align:center; padding:72px 6vw; }
  .fw-left .fw-inner > *,.fw-right .fw-inner > *{ margin-inline:auto; }
  .fw-num{ left:50%; right:auto; transform:translateX(-50%); }
  .lead-strip{padding:96px 0 64px}
  .cta-minimal{padding:96px 0 90px}
}
/* 触屏设备关闭 fixed 视差(移动端卡顿) */
@media (hover:none) and (pointer:coarse){
  .fw-banner{ background-attachment:scroll; }
}

/* ===================== 左右图文混排 (.split) — 浅色版,与 fw-banner 全宽大图交替 ===================== */
.split{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:80px;
  align-items:center;
  max-width:1240px;
  margin-inline:auto;
  padding:110px 6vw;
  position:relative;z-index:1;
}
.split.split-r .split-media{order:2}
.split-media{
  position:relative;
  aspect-ratio:4/3;
  border-radius:18px;
  background-size:cover;background-position:center;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(15,30,60,.18);
  transition:transform .8s var(--ease);
}
.split-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(15,30,60,.14) 100%);
}
.split-media:hover{transform:scale(1.025)}
.split-num{
  position:absolute;top:20px;left:20px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  font-size:.86rem;font-weight:700;
  color:#152238;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(30,90,170,.22);
  backdrop-filter:blur(8px);
  font-family:ui-monospace,"SF Mono",Consolas,monospace;
}
.split-text{max-width:440px}
.split:not(.split-r) .split-text{justify-self:end}
.split-r .split-text{justify-self:start}
.split-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px;border-radius:30px;
  background:rgba(230,240,250,.85);
  border:1px solid rgba(30,90,170,.22);
  color:var(--hc,#0a82c4);
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  margin-bottom:20px;
}
.split-eyebrow i{font-size:1.0rem;color:var(--hc,#0a82c4)}
.split-title{
  font-size:clamp(1.8rem,2.8vw,2.5rem);
  font-weight:800;line-height:1.2;letter-spacing:-.01em;
  color:#152238;margin-bottom:12px;
}
.split-tag{
  font-size:1.08rem;color:#0a82c4;font-weight:500;margin-bottom:10px;
}
.split-sub{
  color:#5a6a85;font-size:1.0rem;line-height:1.75;margin-bottom:28px;
}
.split-cta{
  display:inline-flex;align-items:center;gap:10px;
  color:#0a82c4;font-weight:600;font-size:.95rem;letter-spacing:.04em;
  padding:13px 0;position:relative;text-decoration:none;
}
.split-cta::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:#0a82c4;opacity:.5;transition:opacity .35s var(--ease);
}
.split-cta:hover::after{opacity:1}
.split-cta i{transition:transform .35s var(--ease)}
.split-cta:hover i{transform:translateX(7px)}

/* ===================== 底部水流动态区块 (.water-flow) — 精致动态水流 ===================== */
.water-flow{
  position:relative;
  width:100%;
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#0a3a5a;
}
.wf-bg{
  position:absolute;inset:0;z-index:1;
  background-size:cover;background-position:center;
  animation:wfZoom 20s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes wfZoom{0%{transform:scale(1.0) translateY(0)}100%{transform:scale(1.09) translateY(-1.5%) }}
.wf-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,28,56,.55) 0%,rgba(4,28,56,.28) 38%,rgba(4,28,56,.62) 100%);
}
/* 动态水流波浪:3 层 SVG 水平平移,营造水流涌动 */
.wf-waves{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;height:150px;overflow:hidden}
.wf-wave{position:absolute;left:0;bottom:0;width:200%;height:130px;will-change:transform}
.wf-wave-1{animation:wfFlow 16s linear infinite;opacity:.85}
.wf-wave-2{animation:wfFlow 24s linear infinite reverse;opacity:.75}
.wf-wave-3{animation:wfFlow 32s linear infinite;opacity:.65}
@keyframes wfFlow{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.wf-inner{
  position:relative;z-index:4;
  text-align:center;
  max-width:780px;
  padding:90px 6vw 150px;
  color:#fff;
}
.wf-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:#fff;
  padding:8px 16px;border-radius:30px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  margin-bottom:24px;
}
.wf-eyebrow i{font-size:1.05rem;color:#7fd0ff}
.wf-title{
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:800;line-height:1.15;letter-spacing:-.01em;
  color:#fff;text-shadow:0 2px 24px rgba(0,40,80,.5);
  margin-bottom:18px;
}
.wf-sub{
  font-size:1.05rem;line-height:1.8;
  color:rgba(255,255,255,.88);
  margin-bottom:40px;
}
.wf-stats{
  display:flex;justify-content:center;gap:56px;flex-wrap:wrap;
}
.wf-stat{display:flex;flex-direction:column;align-items:center}
.wf-stat b{
  font-size:1.7rem;font-weight:800;color:#fff;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;
  text-shadow:0 0 18px rgba(127,208,255,.55);
  display:inline-flex;align-items:baseline;gap:3px;
}
.wf-stat b .u{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.78);margin-left:2px}
.wf-stat span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:8px}

/* ===================== Center detail inner page ===================== */
/* 全宽图片横幅 */
.cd-banner{
  position:relative;
  height:440px;
  background-size:cover;
  background-position:center;
  /* scroll (非 fixed) — 避免主体不在图正中时只看到天空/空白 */
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.cd-banner-overlay{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;
  padding:0 0 64px;
  background:linear-gradient(180deg,rgba(7,28,53,.25) 0%,rgba(7,28,53,.55) 55%,rgba(7,28,53,.92) 100%);
}
.cd-banner-overlay .container{position:relative;z-index:1;max-width:1240px}
.cd-banner-eyebrow{
  display:block;
  font-size:.76rem;color:var(--cyan);
  letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  margin-bottom:14px;
}
.cd-banner-tag{
  font-size:clamp(2rem,4.4vw,3.4rem);
  font-weight:800;line-height:1.18;letter-spacing:-.01em;
  margin-bottom:14px;
  max-width:760px;
}
.cd-banner-sub{
  color:var(--text-2);font-size:1.04rem;
  max-width:640px;margin:0;
}

/* 核心能力 2x2 网格 */
.cd-cap-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.cd-cap{
  padding:34px 32px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(20,28,54,.5),rgba(11,17,36,.45));
  border:1px solid var(--line);
  backdrop-filter:var(--blur);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.cd-cap:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.cap-icon{
  width:56px;height:56px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--hc) 22%,transparent),color-mix(in srgb,var(--hc) 10%,transparent));
  border:1px solid color-mix(in srgb,var(--hc) 40%,var(--line));
  color:var(--hc);
  box-shadow:0 0 20px color-mix(in srgb,var(--hc) 25%,transparent);
}
.cap-icon i{font-size:26px;text-shadow:0 0 12px var(--hc)}
.cd-cap h3{font-size:1.22rem;font-weight:700;margin-bottom:10px}
.cd-cap p{color:var(--text-2);font-size:.95rem;line-height:1.7;margin:0}

/* 工艺流程 竖向时间线 */
.cd-step-list{
  position:relative;
  display:flex;flex-direction:column;gap:0;
  max-width:820px;margin:0 auto;
}
.cd-step-list::before{
  content:"";position:absolute;left:31px;top:18px;bottom:18px;width:2px;
  background:linear-gradient(180deg,var(--line-strong),var(--line),transparent);
}
.cd-step{
  position:relative;
  display:grid;grid-template-columns:64px 1fr;gap:24px;
  padding:22px 0;
  align-items:flex-start;
}
.step-num{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  font-size:1.4rem;font-weight:800;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;
  color:var(--hc);
  background:rgba(7,28,53,.7);
  border:2px solid var(--hc);
  box-shadow:0 0 22px color-mix(in srgb,var(--hc) 40%,transparent);
  position:relative;z-index:1;
}
.step-content{padding-top:8px}
.step-content h3{font-size:1.18rem;font-weight:700;margin-bottom:8px}
.step-content p{color:var(--text-2);font-size:.96rem;line-height:1.7;margin:0}

/* 内页 CTA */
.cd-cta{
  text-align:center;
  padding:120px 0 130px;
  position:relative;
  background:radial-gradient(80% 100% at 50% 50%,rgba(0,229,255,.05),transparent 70%);
}
.cd-cta h2{
  font-size:clamp(2rem,3.6vw,2.8rem);
  font-weight:800;letter-spacing:-.01em;
  margin-bottom:14px;
}
.cd-cta p{color:var(--text-2);font-size:1.04rem;margin-bottom:30px}
.cd-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media (max-width:760px){
  .cd-banner{height:340px;background-attachment:scroll}
  .cd-banner-overlay{padding-bottom:40px}
  .cd-cap-grid{grid-template-columns:1fr}
  .cd-step{grid-template-columns:48px 1fr;gap:16px}
  .cd-step-list::before{left:23px}
  .step-num{width:48px;height:48px;font-size:1.1rem}
  .cd-cta{padding:80px 0 90px}
}

/* ===================== Light theme (首页 banner 下方 + 内页) v1.7.1 ===================== */
/* 白色为主, 明亮舒适. 顶部 hero/nav/footer 保持深色作框架. */
/* 通过局部重定义 CSS 变量, 让所有用 var() 的子元素自动翻转为浅色; */
/* 硬编码深色元素再单独覆盖. */
.park-bottom,
.center-detail-hero,
.cd-capabilities,
.cd-process,
.cd-cta,
.page-hero{
  --bg-0:#ffffff;
  --bg-1:#f4f8fc;
  --surface:#ffffff;
  --surface-2:rgba(230,240,250,0.85);
  --line:rgba(30,60,110,0.10);
  --line-strong:rgba(30,90,170,0.22);
  --text:#152238;
  --text-2:#5a6a85;
  --text-3:#8b99b0;
  --cyan:#0a82c4;
}

/* --- 首页 banner 下方 --- */
.park-bottom{
  background:linear-gradient(180deg,rgba(255,255,255,0.95) 0%,rgba(244,248,252,0.92) 45%,rgba(255,255,255,0.95) 100%);
  color:#152238;
}
.park-bottom::before{
  background:radial-gradient(80% 100% at 50% 0%,rgba(10,130,196,.07),transparent 70%);
}
.lead-strip .eyebrow{color:#0a82c4}
.lead-strip h2{color:#152238}
.lead-strip .ls-sub{color:#5a6a85}

/* .fw-banner 自带白字+暗遮罩, 无需浅色覆盖; 间隔条用浅色背景过渡 */
.fw-banner + .fw-banner{ box-shadow:0 -1px 0 rgba(30,60,110,0.06); }
.link-arrow{color:#0a82c4}
.link-arrow::after{background:#0a82c4}
.cta-minimal h2{color:#152238}
.cta-minimal p{color:#5a6a85}

/* --- 内页(中心详情 + 常规页) --- */
.center-detail-hero{
  background:linear-gradient(180deg,#f4f8fc 0%,#ffffff 100%);
  color:#152238;
}
.center-detail-hero .breadcrumb{color:#8b99b0}
.center-detail-hero .breadcrumb a:hover{color:#0a82c4}
.center-detail-hero .ctag,
.page-hero .ctag{
  background:rgba(230,240,250,.85);
  border-color:rgba(30,90,170,.22);
  color:#0a82c4;
}
.center-detail-hero h1{color:#152238}
.center-detail-hero .lead{color:#5a6a85}
.page-hero .lead{color:#5a6a85}
.center-stats .st{
  background:#ffffff;
  border-color:rgba(30,60,110,.12);
  box-shadow:0 4px 18px rgba(30,60,110,.06);
}

.cd-capabilities,.cd-process{background:#ffffff}
.section-head .eyebrow{color:#0a82c4}
.section-head h2{color:#152238}
.section-head p{color:#5a6a85}

.cd-cap{
  background:linear-gradient(180deg,#ffffff 0%,#f4f8fc 100%);
  border-color:rgba(30,60,110,.10);
  box-shadow:0 6px 22px rgba(30,60,110,.05);
}
.cd-cap:hover{
  border-color:rgba(30,90,170,.25);
  box-shadow:0 12px 32px rgba(30,60,110,.10);
}
.cd-cap h3{color:#152238}
.cd-cap p{color:#5a6a85}

.cd-step-list::before{
  background:linear-gradient(180deg,rgba(30,90,170,.30),rgba(30,60,110,.10),transparent);
}
.step-num{
  background:#ffffff;
  box-shadow:0 0 18px color-mix(in srgb,var(--hc) 25%,transparent);
}
.step-content h3{color:#152238}
.step-content p{color:#5a6a85}

.cd-cta{background:linear-gradient(180deg,#ffffff 0%,#f4f8fc 100%)}
.cd-cta h2{color:#152238}
.cd-cta p{color:#5a6a85}
.cd-cta .btn-ghost{
  background:rgba(230,240,250,.85);
  border-color:rgba(30,90,170,.22);
  color:#152238;
}
.cd-cta .btn-ghost:hover{border-color:#0a82c4;color:#0a82c4}

.page-hero{background:linear-gradient(180deg,#f4f8fc 0%,#ffffff 100%)}
.page-hero h1{color:#152238}
.page-hero .breadcrumb{color:#8b99b0}
.page-hero .breadcrumb a:hover{color:#0a82c4}
.entry-content{color:#152238}
.entry-content h2,.entry-content h3{color:#152238}
.entry-content p,.entry-content ul,.entry-content li{color:#5a6a85}
.entry-content strong{color:#152238}
.widget{
  background:#ffffff;
  border-color:rgba(30,60,110,.12);
  box-shadow:0 4px 18px rgba(30,60,110,.05);
}
.widget ul a{color:#5a6a85}
.widget ul a:hover{color:#0a82c4}

/* ===================== v1.9.0 顶级奢华视觉特效 ===================== */

/* ---- Custom Cursor (Luxury) ---- */
#cursor-dot{
  position:fixed;top:0;left:0;z-index:9999;
  width:8px;height:8px;border-radius:50%;
  background:var(--cyan);
  pointer-events:none;
  mix-blend-mode:difference;
  will-change:transform;
  opacity:1;
  transition:opacity .2s;
}
#cursor-ring{
  position:fixed;top:0;left:0;z-index:9998;
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid rgba(0,229,255,.55);
  pointer-events:none;
  will-change:transform,width,height,border-color;
  transition:border-color .3s var(--ease),width .3s var(--ease),height .3s var(--ease);
  opacity:1;
}
#cursor-ring.hover{
  width:68px;height:68px;
  border-color:var(--cyan);
  background:rgba(0,229,255,.06);
}
@media (hover:none) and (pointer:coarse){
  #cursor-dot,#cursor-ring{display:none}
}

/* ---- Ambient Glow Orbs (CSS-only) ---- */
.fx-glow-orb{
  position:absolute;z-index:0;pointer-events:none;
  border-radius:50%;filter:blur(90px);opacity:.45;
  will-change:transform;
}
.fx-glow-orb-1{
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(0,229,255,.12),transparent 70%);
  top:5%;left:-12%;
  animation:orbFloat 14s ease-in-out infinite alternate;
}
.fx-glow-orb-2{
  width:440px;height:440px;
  background:radial-gradient(circle,rgba(123,108,255,.10),transparent 70%);
  bottom:25%;right:-10%;
  animation:orbFloat 17s ease-in-out infinite alternate-reverse;
}
.fx-glow-orb-3{
  width:380px;height:380px;
  background:radial-gradient(circle,rgba(255,77,200,.06),transparent 70%);
  top:50%;left:55%;
  animation:orbFloat 20s ease-in-out infinite alternate;
}
@keyframes orbFloat{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(45px,-35px) scale(1.18)}
}

/* ---- Gradient Border Shine (fw-banner hover) ---- */
.fw-banner .fx-shine{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg,transparent 35%,rgba(0,229,255,.05) 50%,transparent 65%);
  opacity:0;transition:opacity .7s var(--ease);
}
.fw-banner:hover .fx-shine{opacity:1}

/* ---- Image Reveal via clip-path ---- */
.fw-banner.fx-img-reveal{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.3s cubic-bezier(.25,.46,.45,.94);
}
.fw-banner.fx-img-reveal.fx-revealed{
  clip-path:inset(0 0 0% 0);
}

/* ---- 3D Tilt Enhancement ---- */
.split-media.fx-tilt{
  perspective:1000px;
  transform-style:preserve-3d;
}
.split-media.fx-tilt::after{
  opacity:0;
  transition:opacity .35s var(--ease);
}
.split-media.tilt-active::after{
  opacity:1;
  background:radial-gradient(
    circle at var(--tx,50%) var(--ty,50%),
    rgba(0,229,255,.14) 0%,
    transparent 60%
  );
}

/* ---- Magnetic Button Glow ---- */
.fw-cta.fx-magnetic,
.split-cta.fx-magnetic,
.btn-primary.fx-magnetic{
  position:relative;
  overflow:visible;
  transition:transform .2s var(--ease);
}
.fw-cta.fx-magnetic::before,
.split-cta.fx-magnetic::before,
.btn-primary.fx-magnetic::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  width:220%;height:220%;top:-60%;left:-60%;
  background:radial-gradient(
    circle at var(--mx,50%) var(--my,50%),
    rgba(0,229,255,.2) 0%,
    transparent 50%
  );
  opacity:0;transition:opacity .35s var(--ease);
}
.fw-cta.fx-magnetic:hover::before,
.split-cta.fx-magnetic:hover::before,
.btn-primary.fx-magnetic:hover::before{
  opacity:1;
}

/* ---- Enhanced Water Flow: extra waves ---- */
.wf-wave-4{
  animation:wfFlow 40s linear infinite reverse;
  opacity:.5;
}
.wf-wave-5{
  animation:wfFlow 22s linear infinite;
  opacity:.4;
}

/* ---- Water Flow Bubbles ---- */
.wf-bubbles{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  overflow:hidden;
}
.wf-bubble{
  position:absolute;bottom:-24px;
  width:var(--bs,6px);height:var(--bs,6px);
  border-radius:50%;
  background:rgba(255,255,255,.18);
  animation:bubbleRise var(--bd,6s) linear infinite;
  animation-delay:var(--bdl,0s);
  left:var(--bl,50%);
}
@keyframes bubbleRise{
  0%{transform:translateY(0) scale(1);opacity:.55}
  100%{transform:translateY(-420px) scale(.25);opacity:0}
}

/* ---- Counter done glow ---- */
.wf-stat b.counter-done{
  text-shadow:0 0 28px rgba(127,208,255,.75),0 0 56px rgba(127,208,255,.35);
  transition:text-shadow .9s var(--ease);
}

/* ---- Section Dividers ---- */
.fx-divider{
  position:relative;width:100%;height:70px;overflow:hidden;
  z-index:1;pointer-events:none;
  margin-top:-1px;
}
.fx-divider svg{
  position:absolute;bottom:0;width:100%;height:100%;
}

/* ---- Enhanced Reveal (no-JS fallback) ---- */
.reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.25,.46,.45,.94),
             transform .8s cubic-bezier(.25,.46,.45,.94);
}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}

/* ---- Subtle text glow on hover for fw-title ---- */
.fw-title{
  transition:text-shadow .5s var(--ease);
}
.fw-banner:hover .fw-title{
  text-shadow:0 0 40px rgba(0,229,255,.12);
}

/* ===================== v1.9.1 巨大变化特效 ===================== */

/* ---- ScrollTrigger Pinned 3D Transform Support ---- */
.park-bottom{
  perspective:1200px;
  transform-style:preserve-3d;
}
.fw-banner, .split, .water-flow{
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform,opacity;
}
.fw-inner, .split-media, .split-text, .wf-inner{
  transform-style:preserve-3d;
  backface-visibility:hidden;
}

/* ===================== v1.13 内页:关于我们/产品中心/应用案例/联系我们 =====================
   这些内页跟随 .page-hero/.entry-content 的浅色内页配色(见上方 v1.7.1 浅色主题说明),
   在此处直接使用同一套硬编码浅色调色板,而非 dark-mode 的 --text/--surface 等变量
   (那套变量只在 .page-hero/.center-detail-hero 等指定容器内被局部重定义,不会级联到
   同级的 .section)。 */

/* ---- About ---- */
.about-grid{
  display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start;
}
.about-text p{color:#5a6a85;font-size:1.02rem;line-height:1.85;margin-bottom:20px}
.about-text a{color:#0a82c4}
.about-text .btn{margin-top:8px}
.about-stats .center-stats .st .l{color:#8b99b0}
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr}
}

/* ---- Products ---- */
.product-group{margin-bottom:56px}
.product-group:last-of-type{margin-bottom:0}
.pg-head{
  display:flex;align-items:flex-start;gap:16px;margin-bottom:24px;
  padding-bottom:18px;border-bottom:1px solid rgba(30,60,110,.10);
}
.pg-icon{
  flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:rgba(230,240,250,.85);border:1px solid rgba(30,90,170,.22);color:#0a82c4;font-size:22px;
}
.pg-head h2{font-size:1.4rem;font-weight:800;margin-bottom:4px;color:#152238}
.pg-head p{color:#5a6a85;font-size:.92rem;line-height:1.6;max-width:640px}
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;
}
.product-card{
  padding:22px;border-radius:var(--radius);background:#ffffff;border:1px solid rgba(30,60,110,.10);
  box-shadow:0 8px 24px rgba(15,30,60,.05);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.product-card:hover{transform:translateY(-4px);border-color:rgba(30,90,170,.22);box-shadow:0 16px 36px rgba(15,30,60,.08)}
.pc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.pc-head h3{font-size:1.02rem;font-weight:700;line-height:1.4;color:#152238}
.pc-star{color:#e2a400;font-size:16px;flex:none}
.pc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.pc-tag{
  font-size:.72rem;padding:4px 10px;border-radius:20px;letter-spacing:.02em;
  background:rgba(230,240,250,.85);border:1px solid rgba(30,60,110,.10);color:#5a6a85;
}
.pc-tag--cas{color:#0f8a5f;border-color:rgba(15,138,95,.25);background:rgba(15,138,95,.08)}
.pc-desc{color:#5a6a85;font-size:.88rem;line-height:1.7;margin-bottom:14px}
.pc-uses{list-style:none;display:flex;flex-direction:column;gap:6px}
.pc-uses li{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#8b99b0}
.pc-uses li i{color:#0a82c4;font-size:14px}

/* ---- Contact ---- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.contact-info h2{font-size:1.3rem;font-weight:800;margin-bottom:22px;color:#152238}
.contact-list{list-style:none;display:flex;flex-direction:column;gap:20px}
.contact-list li{display:flex;align-items:flex-start;gap:14px}
.contact-list li i{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(230,240,250,.85);border:1px solid rgba(30,90,170,.22);color:#0a82c4;font-size:18px}
.contact-list li b{display:block;font-size:.82rem;color:#8b99b0;margin-bottom:3px;font-weight:600}
.contact-list li span{color:#152238;font-size:.98rem}
.contact-list li a{color:#0a82c4}

.contact-form-wrap{padding:32px;border-radius:var(--radius);background:#ffffff;border:1px solid rgba(30,60,110,.10);box-shadow:0 8px 24px rgba(15,30,60,.05)}
.n3d-hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.n3d-field{margin-bottom:18px}
.n3d-field label{display:block;font-size:.85rem;color:#5a6a85;margin-bottom:8px}
.n3d-field label span{color:#d1356b}
.n3d-field input,.n3d-field textarea{
  width:100%;padding:12px 14px;border-radius:10px;background:rgba(230,240,250,.5);
  border:1px solid rgba(30,60,110,.14);color:#152238;font-size:.95rem;font-family:inherit;
  transition:border-color .25s var(--ease);resize:vertical;
}
.n3d-field input:focus,.n3d-field textarea:focus{outline:none;border-color:#0a82c4}
.n3d-form-status{margin-top:14px;font-size:.88rem;min-height:1.2em}
.n3d-form-status.ok{color:#0f8a5f}
.n3d-form-status.err{color:#d1356b}
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr}
}

/* ===================== 底部通栏水面 =====================
   真 WebGL Gerstner 波水体(water-band.js): 相机架在水面上方微微俯视,
   逐像素投射视线与被波位移的水面求交 —— 所以近处浪大、远处自然收拢到
   地平线, 是真透视水面而不是横向滚动的波浪贴图.
   canvas 绝对铺满整条带子, CTA 文案浮在水面之上. */
.water-band{
  position:relative;
  overflow:hidden;
  /* 无 WebGL / reduced-motion 时的兜底底色, 与页脚顶端同色以便无缝衔接 */
  background:linear-gradient(180deg,#0a2340 0%,#0d2b4d 55%,#0d2b4d 100%);
}
.water-band > canvas{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;
}
/* 文案区柔化压暗: 水面粼光是动的, 不加这层某些帧会正好把标题冲掉 */
.water-band::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 48%,rgba(4,18,38,.52) 0%,rgba(4,18,38,.22) 55%,transparent 78%);
}
/* CTA 浮在水面上 —— 水是深蓝, 这里必须走浅色字(覆盖亮色主题下的深色字) */
.water-band .cta-minimal{position:relative;z-index:2}
.water-band .cta-minimal h2{color:#ffffff;text-shadow:0 2px 18px rgba(3,14,30,.55)}
.water-band .cta-minimal p{color:#cfe2f4;text-shadow:0 1px 10px rgba(3,14,30,.5)}

/* 页脚也坐在同一片水面上(全站生效) —— data-yoff 让它接着 CTA 那块继续
   往下看, 读作"同一片海更近的一段", 而不是各画各的两块水. */
.neo-footer.water-band{position:relative;overflow:hidden}
.neo-footer.water-band > canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;
}
/* 水面上再压一层, 保证页脚那么多小字始终读得清 */
.neo-footer.water-band::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,24,48,.62) 0%,rgba(6,22,44,.78) 55%,rgba(5,20,40,.88) 100%);
}
.neo-footer.water-band > .container{position:relative;z-index:2}

/* ===================== 水晶玻璃:斜向高光条 =====================
   光滑玻璃面会有一道斜切的反射高光 —— 只靠 background+box-shadow 出不来,
   必须再叠一层. 用 ::before 铺一条 105° 的窄高光带, screen 混合只提亮不压暗,
   这是"水晶"区别于"磨砂塑料片"的关键一笔.

   ⚠ 这里**不能**统一写 position:relative —— .park-panel/.centers-legend/
   .flight-hud/.replay-btn 本身是 position:absolute 定位在舞台上的, 一旦被
   改成 relative, 它们会掉回文档流、铺满整行, 整个 banner 版式就塌了(踩过).
   绝对定位元素本身就是 ::before 的包含块, 只有静态定位的那两个才需要补. */
.bb-inner,.hs-card{position:relative}

.bb-inner,.park-panel,.centers-legend,.flight-hud,.replay-btn,.hs-card{
  overflow:hidden;
}
.bb-inner::before,.park-panel::before,.centers-legend::before,
.flight-hud::before,.replay-btn::before,.hs-card::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  border-radius:inherit;
  mix-blend-mode:screen;
  /* 不设 z-index: ::before 天然画在父级背景之上、内容之下, 正是要的层序 */
  background:linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,.00) 34%,
    rgba(255,255,255,.26) 46%,
    rgba(206,238,255,.17) 53%,
    rgba(255,255,255,.00) 66%,
    transparent 100%);
}
/* 悬停时高光带缓缓扫过 —— 只在能 hover 的设备上, 且尊重 reduced-motion */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .centers-legend::before,.replay-btn::before,.hs-card::before{
    transition:transform .7s var(--ease);
  }
  .centers-legend:hover::before,.replay-btn:hover::before,.hotspot:hover .hs-card::before{
    transform:translateX(26%);
  }
}