/* ==========================================================================
   520公寓官网 · main.css
   设计语言:暖玻夜景(深色玻璃 + 品牌橙点睛)—— tokens 真源见 BRIEF §3.1
   分区:① tokens/基础 ② 导航 ③ Hero ④ 数据带 ⑤ 项目 ⑦ sticky-steps
        ⑧ 小程序 ⑨ 关于 ⑩ 页脚 ⑪ 移动端吸底条 ⑫ 弹层 ⑬ 动画/降级 ⑭ 响应式
   ========================================================================== */

/* ---------- ① 设计 tokens(BRIEF §3.1 逐字采用,勿改) ---------- */
:root{
  /* 品牌 */
  --brand:#E8722C; --brand-2:#ff8a3d; --brand-d:#c85f1f;
  --brand-grad:linear-gradient(135deg,#ff8a3d,#E8722C);
  --brand-soft:rgba(232,114,44,.12); --brand-soft-2:rgba(232,114,44,.22);
  /* 背景 */
  --bg:#0a0b11;
  --bg-glow:radial-gradient(560px 360px at 12% -8%,rgba(232,114,44,.13),transparent 60%),
            radial-gradient(640px 440px at 108% 118%,rgba(58,120,214,.11),transparent 60%);
  /* 玻璃面板 */
  --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.065);
  --panel:rgba(8,9,14,.72); --panel-2:rgba(8,9,14,.55);
  --surface-solid:#141620;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.13);
  /* 文字 */
  --ink:#e9ebf2; --ink-2:#c7c9d4; --muted:#8a8ea1; --dim:#6c7085;
  /* 语义色 */
  --ok:#4ade80; --warn:#f5b73d; --info:#3aa0ff; --danger:#ff5f4c;
  /* 圆角/阴影/光 */
  --r-sm:8px; --r:11px; --r-lg:14px; --r-xl:18px;
  --sh-2:0 18px 40px -22px rgba(0,0,0,.85);
  --glow-brand:0 6px 16px rgba(232,114,44,.42);
  --edge:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.02);
  /* 字体(只用系统字体栈,禁 webfont) */
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.7;
  background-image:var(--bg-glow); background-attachment:fixed;
  overflow-x:hidden; /* 防装饰元素造成横向滚动 */
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{line-height:1.25; margin:0 0 .5em; font-weight:700}
p{margin:0 0 1em}
.container{width:min(1200px,92vw); margin:0 auto}
.section{padding:clamp(72px,10vw,128px) 0; position:relative}

.skip-link{
  position:fixed; top:-48px; left:16px; z-index:300;
  background:var(--brand); color:#fff; padding:10px 18px; border-radius:var(--r-sm);
  transition:top .2s;
}
.skip-link:focus{top:12px}

/* 玻璃面板通用质感 */
.glass{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh-2),var(--edge);
}

/* 编辑级 mini-title:小号大写字距标签 + 60px 品牌橙横线 */
.mini-title{
  display:flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin:0 0 18px; font-weight:600;
}
.mini-line{width:60px; height:2px; background:var(--brand); flex:none; border-radius:2px; box-shadow:var(--glow-brand)}
.section-title{font-size:clamp(26px,3.6vw,42px); letter-spacing:.01em}
.section-sub{color:var(--muted); max-width:56ch; font-size:15px}

/* 按钮 */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 26px; border-radius:var(--r); font-size:15px; font-weight:600;
  border:1px solid transparent; cursor:pointer; font-family:inherit;
  transition:transform .25s,box-shadow .25s,background .25s,border-color .25s;
}
.btn-brand{background:var(--brand-grad); color:#fff; box-shadow:var(--glow-brand)}
.btn-brand:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(232,114,44,.5)}
.btn-ghost{background:var(--surface); border-color:var(--line-2); color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2); transform:translateY(-2px)}
.btn-sm{padding:9px 18px; font-size:14px}
.link-btn{
  background:none; border:none; color:var(--brand-2); cursor:pointer;
  font:inherit; padding:0; text-decoration:underline; text-underline-offset:3px;
}

/* 标签 chip */
.chip{
  display:inline-block; padding:4px 12px; font-size:12.5px; color:var(--ink-2);
  background:var(--brand-soft); border:1px solid rgba(232,114,44,.25); border-radius:999px;
}

/* ---------- ② 导航 ---------- */
.site-header{
  position:fixed; inset:0 0 auto; z-index:100;
  background:var(--panel-2); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.nav-logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{font-size:14.5px; color:var(--ink-2); transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-login{color:#fff!important; padding:8px 20px; font-size:14px}
.nav-toggle{
  display:none; background:none; border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--ink); padding:8px; cursor:pointer;
}

/* ---------- ③ Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; background:var(--bg);
}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1}
/* CSS 兜底夜景:JS 挂掉时仍有渐变 + SVG 天际线剪影,内容完整可读 */
.hero-fallback{
  position:absolute; inset:0; z-index:0;
  background:
    var(--bg-glow),
    linear-gradient(180deg,#0a0b11 0%,#12141f 55%,#1c1410 100%);
}
.hero-fallback::after{
  content:""; position:absolute; inset:auto 0 0; height:38%;
  background:
    /* 纯 CSS 楼群剪影:两层 repeating 渐变矩形 */
    repeating-linear-gradient(90deg,#07080d 0 70px,transparent 70px 86px,#07080d 86px 150px,transparent 150px 168px,#07080d 168px 220px,transparent 220px 240px),
    repeating-linear-gradient(90deg,#0b0d15 0 110px,transparent 110px 128px,#0b0d15 128px 210px,transparent 210px 236px);
  background-size:240px 100%,236px 78%;
  background-position:bottom left,bottom left;
  background-repeat:repeat-x;
  opacity:.9;
}
/* JS 正常时兜底层退场(hero.js 给 body 加 .js-hero) */
body.js-hero .hero-fallback{display:none}

/* 分层 SVG 光束 */
.hero-beams{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden}
.beam{position:absolute; mix-blend-mode:screen; will-change:transform,opacity}
.beam-1{width:220px; height:130%; left:8%; top:-15%; animation:beam-sway 14s ease-in-out infinite alternate}
.beam-2{width:150px; height:120%; left:38%; top:-10%; animation:beam-sway 18s ease-in-out infinite alternate-reverse}
.beam-3{width:260px; height:140%; right:14%; top:-20%; animation:beam-drift 22s ease-in-out infinite alternate}
.beam-4{width:110px; height:110%; right:36%; top:-8%; animation:beam-drift 16s ease-in-out infinite alternate-reverse}
@keyframes beam-sway{from{transform:rotate(-14deg) translateX(-3%); opacity:.7}to{transform:rotate(-6deg) translateX(3%); opacity:1}}
@keyframes beam-drift{from{transform:rotate(10deg) translateX(4%)}to{transform:rotate(16deg) translateX(-4%)}}

.hero-inner{position:relative; z-index:3; padding:120px 0 80px}
.hero-title{
  font-size:clamp(34px,6vw,68px); letter-spacing:.02em; font-weight:800;
  max-width:14em;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.hero-slogan{color:var(--ink-2); max-width:52ch; font-size:clamp(15px,1.4vw,17px)}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.hero-hint{
  margin-top:64px; color:var(--dim); font-size:12px; letter-spacing:.18em;
  display:flex; align-items:center; gap:10px;
}
.hero-hint span{width:1px; height:34px; background:linear-gradient(180deg,var(--brand),transparent); animation:hint-drop 1.8s ease-in-out infinite}
@keyframes hint-drop{0%{transform:scaleY(.2); transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(.2); transform-origin:bottom}}

/* ---------- ④ 数据带 ---------- */
.stats{padding:clamp(48px,6vw,72px) 0; border-block:1px solid var(--line); background:rgba(255,255,255,.015)}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.stat{padding:26px 22px; text-align:left}
.stat-num{font-size:clamp(30px,3.4vw,44px); font-weight:800; font-variant-numeric:tabular-nums; background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-num em{font-style:normal; font-size:.6em; margin-left:2px}
.stat p{color:var(--muted); font-size:13.5px; margin:6px 0 0}

/* ---------- ⑤ 项目 ---------- */
/* 非对称栅格:首卡跨 7 列,其余 5 列,避免模板感等宽三卡 */
.project-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:20px; margin-top:36px}
.project-card{grid-column:span 5; overflow:hidden; cursor:pointer; transition:transform .35s,box-shadow .35s,border-color .35s}
.project-card:first-child{grid-column:span 7}
.project-card:hover{transform:translateY(-6px); box-shadow:var(--sh-2),var(--glow-brand),var(--edge); border-color:var(--brand-soft-2)}
.project-card img{width:100%; aspect-ratio:16/10; object-fit:cover}
.project-card-body{padding:20px 22px 24px}
.project-card-body h3{font-size:20px; margin-bottom:4px}
.project-loc{color:var(--muted); font-size:14px}
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}

/* ---------- ⑦ sticky-steps 服务优势 ---------- */
.sticky-steps{display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px,5vw,72px); margin-top:36px; align-items:start}
.steps-visual{position:sticky; top:96px}
.steps-visual-inner{
  aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.steps-visual-inner::before{
  content:""; position:absolute; inset:-30%;
  background:radial-gradient(50% 50% at 50% 45%,rgba(232,114,44,.14),transparent 70%);
}
.sv-icon{
  position:absolute; width:34%; height:auto; color:var(--brand-2);
  opacity:0; transform:scale(.8); transition:opacity .5s,transform .5s;
  filter:drop-shadow(0 0 18px rgba(232,114,44,.35));
}
.sv-icon.active{opacity:1; transform:scale(1)}
.steps-list{display:grid; gap:22px; padding:12vh 0}
.step{padding:28px 30px; opacity:.25; transition:opacity .5s,border-color .5s; }
.step.active{opacity:1; border-color:var(--brand-soft-2)}
.step h3{font-size:20px; color:var(--ink)}
.step p{color:var(--muted); font-size:15px; margin:0}
/* 无 JS / 小屏降级:全部激活可见 */
.no-js .step, body:not(.js) .step{opacity:1}

/* ---------- ⑧ 小程序 ---------- */
.miniapp-grid{display:grid; grid-template-columns:6fr 5fr; gap:clamp(28px,6vw,80px); align-items:center}
.qr-wrap{display:inline-flex; flex-direction:column; align-items:center; gap:10px; padding:20px 24px; margin-top:8px}
.qr-wrap img{border-radius:var(--r-sm)}
.qr-wrap p{color:var(--muted); font-size:13px; margin:0}
.phone-mock{display:flex; justify-content:center}
.phone-frame{
  width:min(300px,72vw); border-radius:36px; padding:12px;
  background:#0d0e15; border:1px solid var(--line-2);
  box-shadow:var(--sh-2),var(--edge),0 30px 80px -30px rgba(232,114,44,.25);
}
.phone-frame img{border-radius:26px}

/* ---------- ⑨ 关于 ---------- */
.about{border-top:1px solid var(--line)}
.about-grid{display:grid; grid-template-columns:7fr 5fr; gap:clamp(28px,5vw,72px); align-items:center}
.contact-list{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:18px}
.contact-list li{display:flex; gap:14px; align-items:flex-start}
.contact-list svg{width:22px; height:22px; color:var(--brand); flex:none; margin-top:4px}
.contact-list span{display:block; font-size:12.5px; color:var(--dim); letter-spacing:.08em}
.contact-list a,.contact-list address,.contact-list button{font-style:normal; color:var(--ink); font-size:15.5px}
.contact-list a:hover{color:var(--brand-2)}
.about-card{
  min-height:340px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:34px; position:relative; overflow:hidden;
}
.about-card::before{
  content:""; position:absolute; inset:0;
  background:var(--bg-glow); opacity:.9;
}
.about-big{position:relative; font-size:clamp(24px,2.6vw,32px); font-weight:800; line-height:1.4; margin-bottom:8px}
.about-small{position:relative; color:var(--muted); font-size:13px; margin:0}

/* ---------- ⑩ 页脚 ---------- */
.site-footer{border-top:1px solid var(--line); padding:40px 0 calc(40px + 72px); /* 底部为吸底条留白(桌面端可忽略) */}
.footer-grid{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center}
.footer-brand{font-weight:800; font-size:18px; margin:0 0 6px}
.footer-co{color:var(--dim); font-size:13px; margin:0}
.footer-links{display:flex; gap:22px}
.footer-links a{color:var(--muted); font-size:13.5px}
.footer-links a:hover{color:var(--brand-2)}

/* ---------- ⑪ 移动端吸底联系条(仅 ≤768px) ---------- */
.mobile-bar{
  display:none; position:fixed; inset:auto 0 0; z-index:120;
  background:var(--panel); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-2);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
}
.mobile-bar a,.mobile-bar button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color:var(--ink-2); font:inherit; font-size:11.5px;
  padding:6px 0; cursor:pointer;
}
.mobile-bar svg{width:21px; height:21px; color:var(--brand-2)}
.mobile-bar a:active,.mobile-bar button:active{color:var(--ink)}

/* toast 复制提示 */
.toast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%,20px);
  background:var(--surface-solid); border:1px solid var(--line-2); color:var(--ink);
  padding:10px 20px; border-radius:999px; font-size:14px; z-index:200;
  opacity:0; pointer-events:none; transition:opacity .3s,transform .3s;
  box-shadow:var(--sh-2),var(--edge);
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ---------- ⑫ 项目弹层 ---------- */
.modal{position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; padding:4vh 4vw}
.modal[hidden]{display:none}
.modal-mask{position:absolute; inset:0; background:rgba(4,5,9,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.modal-panel{
  position:relative; width:min(920px,100%); max-height:92vh; overflow:auto;
  background:var(--panel); display:grid; grid-template-columns:7fr 5fr;
}
.modal-close{
  position:absolute; top:12px; right:12px; z-index:5;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--panel-2); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modal-close svg{width:18px; height:18px}
.modal-close:hover{border-color:var(--brand)}
.modal-media{position:relative; min-height:280px; background:#07080d}
.carousel{position:relative; height:100%}
.carousel img{width:100%; height:100%; object-fit:cover; min-height:280px}
.car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--panel-2); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.car-btn svg{width:18px; height:18px}
.car-prev{left:10px}.car-next{right:10px}
.car-btn:hover{border-color:var(--brand)}
.car-dots{position:absolute; bottom:10px; left:0; right:0; display:flex; gap:6px; justify-content:center}
.car-dots i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.3)}
.car-dots i.on{background:var(--brand)}
.pano-wrap{position:absolute; inset:0}
#pano{width:100%; height:100%; min-height:280px}
.modal-body{padding:26px 28px}
.modal-body h3{font-size:22px}
.hl-list{margin:16px 0 20px; padding-left:18px; color:var(--ink-2); font-size:14.5px; display:grid; gap:8px}
.hl-list li::marker{color:var(--brand)}

/* ---------- ⑬ 入场动画初始态(JS 加 .js 后才启用,无 JS 内容直接可见) ---------- */
body.js .reveal{opacity:0; transform:translateY(36px)}
body.js .reveal.reveal-in{opacity:1; transform:none; transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}

/* ---------- prefers-reduced-motion:全面降级为静态 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  body.js .reveal{opacity:1; transform:none}
  .step{opacity:1}
  .sv-icon{opacity:1; transform:none; position:relative; width:18%; margin:2%}
  .steps-visual-inner{flex-wrap:wrap}
}

/* ---------- ⑭ 响应式断点(375 / 768 / 1440 三档覆盖) ---------- */
@media (max-width:1024px){
  .about-grid{grid-template-columns:1fr}
  .about-visual{order:-1}
  .sticky-steps{grid-template-columns:1fr}
  .steps-visual{position:relative; top:0}
  .steps-visual-inner{aspect-ratio:16/9}
  .steps-list{padding:0}
  .step{opacity:1} /* 非 pinned 布局下全部可见 */
}
@media (max-width:768px){
  /* 移动端导航:汉堡抽屉 */
  .nav-toggle{display:block}
  .nav-links{
    position:fixed; top:64px; right:0; left:0; z-index:99;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--panel); border-bottom:1px solid var(--line);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    padding:8px 4vw 16px; display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 6px; border-bottom:1px solid var(--line)}
  .nav-login{margin-top:12px; text-align:center; border-bottom:none!important}
  /* 项目栅格单列 */
  .project-card,.project-card:first-child{grid-column:span 12}
  /* 数据带 2x2 */
  .stats-grid{grid-template-columns:1fr 1fr; gap:12px}
  .stat{padding:18px 16px}
  /* 小程序区单列 */
  .miniapp-grid{grid-template-columns:1fr}
  /* 弹层单列 */
  .modal{padding:2vh 3vw}
  .modal-panel{grid-template-columns:1fr; max-height:94vh}
  .carousel img{min-height:220px}
  /* 吸底条出现,页脚让位 */
  .mobile-bar{display:flex}
  .site-footer{padding-bottom:calc(32px + 76px + env(safe-area-inset-bottom))}
  body{padding-bottom:0} /* 吸底条 fixed,页脚 padding 已兜底,不额外撑 body */
  .hero-hint{display:none}
}
@media (min-width:1440px){
  .container{width:min(1280px,90vw)}
  .hero-title{font-size:72px}
}

/* ==========================================================================
   ⑮ 设计升级 V2(甲方反馈:更张扬、更有实力感)
   巨数字层 / 光标手电 / 入场编排 / 打字机状态行 / 氛围加重 / 区块提气
   原则不变:全部为增强,无 JS / reduced-motion 一律直出终态
   ========================================================================== */

/* ---- 真 logo 引用尺寸 ---- */
.nav-logo img{width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 2px 10px rgba(232,114,44,.35))}
.footer-logo{width:86px; height:auto; display:block}

/* ---- Hero 层级重排:fallback 0 / canvas 1 / 巨数字 2 / 光束 3 / 噪点 4 / 光斑 5 / 扫光 6 / 内容 10 ---- */
.hero-beams{z-index:3}
.hero-inner{z-index:10}

/* Hero 局部 glow 加重(在 tokens 色板内,不新增色相) */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(720px 480px at 10% -6%,rgba(232,114,44,.20),transparent 62%),
    radial-gradient(560px 420px at 88% 108%,rgba(232,114,44,.10),transparent 60%),
    radial-gradient(700px 480px at 104% 112%,rgba(58,120,214,.12),transparent 62%);
}

/* ---- ① 巨号展示字体层:超大 520,极暗填充 + 低透明描边,径向渐变随光标增亮 ---- */
.hero-giant{
  position:absolute; z-index:2; right:-2vw; bottom:2vh; left:auto;
  font-weight:800; font-size:clamp(160px,20vw,420px); line-height:.9; letter-spacing:-.06em;
  pointer-events:none; user-select:none;
  color:rgba(232,114,44,.045);
  -webkit-text-stroke:1.5px rgba(232,114,44,.14);
  /* 光标光源轻微增亮:--mx/--my 由 JS 以百分比写入,默认停在静态高亮点 */
  background:radial-gradient(560px 560px at var(--mx,72%) var(--my,60%),rgba(255,138,61,.30),rgba(232,114,44,.05) 68%);
  -webkit-background-clip:text; background-clip:text;
}
@supports not (-webkit-background-clip:text){
  .hero-giant{background:none}
}

/* ---- ② 光标手电光斑:screen 混合,lerp 跟随(transform-only) ---- */
.hero-light{
  position:absolute; z-index:5; width:520px; height:520px; border-radius:50%;
  pointer-events:none; mix-blend-mode:screen; opacity:0;
  background:radial-gradient(circle,rgba(255,166,77,.20),rgba(232,114,44,.07) 42%,transparent 68%);
  transform:translate3d(-50%,-50%,0);
  transition:opacity .6s;
  will-change:transform;
}
.hero-light.on{opacity:1}

/* ---- ③ 极轻噪点颗粒层 ---- */
.hero-noise{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:url(../img/noise.png); background-size:128px;
  opacity:.045; mix-blend-mode:overlay;
}

/* ---- ④ 入场一次性扫光(一道光束从左扫过) ---- */
.hero-sweep{
  position:absolute; top:-20%; bottom:-20%; left:0; width:22vw; z-index:6;
  pointer-events:none; transform:translateX(-40vw) rotate(14deg); opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,166,77,.16),rgba(255,214,140,.10),transparent);
}
body.js .hero-sweep{animation:hero-sweep 1.15s cubic-bezier(.6,.1,.2,1) .95s both}
@keyframes hero-sweep{
  0%{transform:translateX(-40vw) rotate(14deg); opacity:0}
  25%{opacity:1}
  100%{transform:translateX(140vw) rotate(14deg); opacity:0}
}

/* ---- ⑤ 入场编排:logo 弹簧入场 → 标题逐字切片 → slogan/状态行 → CTA ---- */
.hero-logo{position:relative; display:block; width:72px; height:72px; margin-bottom:22px}
/* 禁在 img 上挂 filter(blur/drop-shadow):iOS WebKit 会把带滤镜链的 img
   光栅化成纯白块(2026-07-21 甲方真机实撞);光晕一律走 ::before 径向光 */
.hero-logo img{ display:block; width:72px; height:72px; }
/* 极淡径向光晕托底 */
.hero-logo::before{
  content:""; position:absolute; inset:-30px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(232,114,44,.22) 0%, rgba(232,114,44,.06) 45%, transparent 68%);
}
body.js .hero-logo img{
  opacity:0; transform:scale(.7);
  animation:hero-logo-in .8s var(--spring) .12s forwards;
}
@keyframes hero-logo-in{
  to{ opacity:1; transform:scale(1); }
}

/* 标题逐字切片(每片 delay 由 --d 控制,0.05s 量级 stagger) */
.ht-line{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.ht-ch{display:inline-block}
body.js .ht-ch{transform:translateY(112%); animation:ht-rise .72s cubic-bezier(.2,.75,.2,1) var(--d,0s) forwards}
@keyframes ht-rise{to{transform:translateY(0)}}

/* mini-title / slogan / 状态行 / CTA 依次淡入 */
body.js .hero .mini-title,body.js .hero-slogan,body.js .hero-status,body.js .hero-cta,body.js .hero-hint{
  opacity:0; transform:translateY(18px);
  animation:hero-fade .8s cubic-bezier(.2,.7,.2,1) forwards;
}
body.js .hero .mini-title{animation-delay:.28s}
body.js .hero-slogan{animation-delay:1.15s}
body.js .hero-status{animation-delay:1.35s}
body.js .hero-cta{animation-delay:1.55s}
body.js .hero-hint{animation-delay:1.9s}
@keyframes hero-fade{to{opacity:1; transform:none}}

/* ---- ⑥ 打字机状态行:等宽风格小字 + 闪烁光标 ---- */
.hero-status{
  margin-top:18px; font-size:13px; letter-spacing:.12em; color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
}
.hs-prompt{color:var(--brand); font-weight:700}
.tw-caret{
  display:inline-block; width:8px; height:1.05em; margin-left:3px; vertical-align:-2px;
  background:var(--brand-2); animation:tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink{0%,55%{opacity:1}56%,100%{opacity:0}}

/* ---- ⑦ 区块提气 ---- */
/* 数据带:数字放大加粗 + 小号大写标签 */
.stat-num{font-size:clamp(38px,4.6vw,58px); letter-spacing:-.02em}
.stat p{text-transform:uppercase; letter-spacing:.1em; font-size:12px}
/* 入场 stagger 节奏(nth-child 递增 delay,配合 .reveal 体系) */
body.js .stats-grid .stat:nth-child(2){transition-delay:.08s}
body.js .stats-grid .stat:nth-child(3){transition-delay:.16s}
body.js .stats-grid .stat:nth-child(4){transition-delay:.24s}
body.js .steps-list .step:nth-child(2){transition-delay:.07s}
body.js .steps-list .step:nth-child(3){transition-delay:.14s}
body.js .steps-list .step:nth-child(4){transition-delay:.21s}
body.js .steps-list .step:nth-child(5){transition-delay:.28s}
/* 项目卡:hover 封面轻微 scale + 一道光束扫过 */
.project-card{position:relative}
.project-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.project-card:hover img{transform:scale(1.03)}
.project-card::after{
  content:""; position:absolute; top:-10%; bottom:-10%; left:0; width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);
  transform:translateX(-140%) skewX(-14deg); pointer-events:none;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
.project-card:hover::after{transform:translateX(420%) skewX(-14deg)}

/* ---- ⑧ 新增动效的 reduced-motion 降级:全部直出终态 ---- */
@media (prefers-reduced-motion:reduce){
  .hero-light{display:none}
  .hero-sweep{display:none}
  body.js .hero-logo img{opacity:1; transform:none}
  body.js .ht-ch{transform:none}
  /* 入场编排的淡入组:reduced-motion 下直接终态可见 */
  body.js .hero .mini-title,body.js .hero-slogan,body.js .hero-status,body.js .hero-cta,body.js .hero-hint{
    opacity:1; transform:none;
  }
  .hero-giant{
    background:radial-gradient(560px 560px at 72% 60%,rgba(255,138,61,.22),rgba(232,114,44,.05) 68%);
    -webkit-background-clip:text; background-clip:text;
  }
}

/* ---- ⑨ 升级件的响应式 ---- */
@media (max-width:768px){
  .hero-giant{font-size:clamp(120px,34vw,220px); right:-4vw; bottom:10vh}
  .hero-logo{width:56px; height:56px; margin-bottom:16px}
  .hero-logo img{width:56px; height:56px}
  .hero-status{font-size:11.5px}
  .nav-logo img{width:30px; height:30px}
}
@media (max-width:1024px){
  .hero-giant{font-size:clamp(140px,26vw,300px)}
}

/* ==========================================================================
   ⑯ V3 体验层:弹簧物理 + iOS 手感 + Awwwards 排版胆色
   分区:曲线常量 / vibrancy 材质 / 自定义光标 / 闲置淡出 / 预载层 /
        iOS 叠卡 / 超大排版 / 沉浸画廊 / reduced-motion 降级 / 响应式
   ========================================================================== */

/* ---- 动效曲线全站弹簧化 ---- */
:root{
  --spring:cubic-bezier(.34,1.4,.64,1);      /* 轻 overshoot,按钮/卡片 hover */
  --spring-out:cubic-bezier(.32,.72,0,1);    /* 出场/入场,脆而稳 */
}
.btn{transition:transform .5s var(--spring),box-shadow .5s var(--spring),background .3s,border-color .3s}
.project-card{transition:transform .55s var(--spring),box-shadow .55s var(--spring),border-color .35s; will-change:transform}
body.js .reveal.reveal-in{transition:opacity .65s var(--spring-out),transform .65s var(--spring-out)}
.step{transition:opacity .5s var(--spring-out),border-color .5s}
/* 入场 stagger 重排:更快更脆(100ms 间隔) */
body.js .stats-grid .stat:nth-child(2){transition-delay:.1s}
body.js .stats-grid .stat:nth-child(3){transition-delay:.2s}
body.js .stats-grid .stat:nth-child(4){transition-delay:.3s}
body.js .steps-list .step:nth-child(2){transition-delay:.1s}
body.js .steps-list .step:nth-child(3){transition-delay:.2s}
body.js .steps-list .step:nth-child(4){transition-delay:.3s}
body.js .steps-list .step:nth-child(5){transition-delay:.4s}

/* ---- ④ vibrancy 玻璃材质(iOS 感:blur 17px + saturate 1.6 + 0.5px 高光描边) ---- */
.site-header{
  background:rgba(8,9,14,.5);
  backdrop-filter:blur(17px) saturate(1.6); -webkit-backdrop-filter:blur(17px) saturate(1.6);
  box-shadow:inset 0 -0.5px 0 rgba(255,255,255,.1);
}
.modal-panel{
  background:rgba(10,11,17,.62);
  backdrop-filter:blur(17px) saturate(1.6); -webkit-backdrop-filter:blur(17px) saturate(1.6);
  box-shadow:var(--sh-2),inset 0 0.5px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.03);
}
.mobile-bar{
  background:rgba(8,9,14,.55);
  backdrop-filter:blur(17px) saturate(1.6); -webkit-backdrop-filter:blur(17px) saturate(1.6);
  box-shadow:inset 0 0.5px 0 rgba(255,255,255,.1);
}
.toast{
  backdrop-filter:blur(17px) saturate(1.6); -webkit-backdrop-filter:blur(17px) saturate(1.6);
  box-shadow:var(--sh-2),inset 0 0.5px 0 rgba(255,255,255,.12);
}

/* ---- ③ 自定义光标系统(64×64 多状态;JS 启用时 html.has-cursor 才显示) ---- */
#cursor{display:none}
html.has-cursor #cursor{display:block; position:fixed; inset:0; z-index:500; pointer-events:none}
html.has-cursor, html.has-cursor *{cursor:none!important}
.cur-dot,.cur-ring,.cur-label{position:absolute; top:0; left:0; will-change:transform}
.cur-dot{
  width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:var(--brand-2); box-shadow:0 0 10px rgba(232,114,44,.7);
  transition:width .3s var(--spring),height .3s var(--spring),margin .3s var(--spring),opacity .3s;
}
.cur-ring{
  width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%;
  border:1.5px solid rgba(255,138,61,.55);
  transition:width .35s var(--spring),height .35s var(--spring),margin .35s var(--spring),
             border-color .3s,background .3s,opacity .3s;
}
.cur-label{
  width:64px; height:64px; margin:-32px 0 0 -32px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; letter-spacing:.08em; color:#fff;
  opacity:0; transition:opacity .25s;
}
/* 状态机:hover 可点 → 环收缩变实心 */
#cursor[data-state="hover"] .cur-ring{width:52px; height:52px; margin:-26px 0 0 -26px; background:rgba(232,114,44,.18); border-color:rgba(255,138,61,.9)}
#cursor[data-state="hover"] .cur-dot{width:5px; height:5px; margin:-2.5px 0 0 -2.5px}
/* 弹层左右半区 → 箭头;全景 → 拖拽 */
#cursor[data-state="prev"] .cur-label,
#cursor[data-state="next"] .cur-label,
#cursor[data-state="drag"] .cur-label{opacity:1}
#cursor[data-state="prev"] .cur-label,
#cursor[data-state="next"] .cur-label{font-size:26px}
#cursor[data-state="prev"] .cur-ring,
#cursor[data-state="next"] .cur-ring,
#cursor[data-state="drag"] .cur-ring{width:56px; height:56px; margin:-28px 0 0 -28px; background:rgba(8,9,14,.55); border-color:rgba(255,255,255,.25)}
#cursor[data-state="prev"] .cur-dot,
#cursor[data-state="next"] .cur-dot,
#cursor[data-state="drag"] .cur-dot{opacity:0}
/* 文字输入 → 隐藏 */
#cursor[data-state="text"] .cur-dot,#cursor[data-state="text"] .cur-ring,#cursor[data-state="text"] .cur-label{opacity:0}
/* 光标自身出现/闲置淡出 */
#cursor{opacity:0; transition:opacity .4s}
#cursor.on{opacity:1}
body.is-idle #cursor{opacity:0}

/* ---- ⑥ 闲置 4s:UI 整体淡出(导航/提示),动一下立即回现 ---- */
.site-header,.hero-hint{transition:opacity .6s ease}
body.is-idle .site-header{opacity:.25}
body.is-idle .hero-hint{opacity:0}

/* ---- ⑦ logo 弹簧入场覆盖层(≤700ms,内容同时已可读) ---- */
#preloader{
  position:fixed; inset:0; z-index:600; display:flex; align-items:center; justify-content:center;
  background:var(--bg); transition:opacity .25s ease;
  /* JS 兜底:脚本失效/早退时 2.4s 后强制放行(全屏遮罩卡死=整站不可进,2026-07-21 手机端实撞) */
  animation:pre-expire .35s ease 2.4s forwards;
}
@keyframes pre-expire{to{opacity:0; visibility:hidden}}
#preloader img{
  width:96px; height:96px; object-fit:contain;
  animation:pre-spring .55s var(--spring) both;
  filter:drop-shadow(0 8px 30px rgba(232,114,44,.4));
}
@keyframes pre-spring{from{transform:scale(.4); opacity:0}to{transform:scale(1); opacity:1}}
#preloader.done{opacity:0; pointer-events:none}

/* ---- ⑤ iOS 卡片叠层滚动(sticky 堆叠 + z-index 分层) ---- */
.stack{position:relative; margin-top:36px}
.stack-item{
  position:sticky; top:calc(10vh + var(--i,0) * 18px);
  z-index:calc(var(--i,0) + 1);
  margin-bottom:20vh;
}
.stack-item:last-child{margin-bottom:6vh}
.stack .project-card{
  max-width:880px; margin:0 auto; overflow:hidden;
  /* ScrollTrigger 驱动 scale/brightness/blur 退场(见 motion.js ⑤) */
}
.stack .project-card img{aspect-ratio:16/9}
.card-cta{
  display:inline-block; margin-top:14px; font-size:13.5px; font-weight:600; color:var(--brand-2);
  letter-spacing:.06em;
}

/* ---- 获奖站排版胆色 ---- */
.hero-giant{
  font-size:clamp(200px,22vw,470px);
  transform:rotate(-1.5deg); /* 刻意微旋转,制造"人味" */
}
.mega-title{
  font-size:clamp(52px,9.5vw,150px);
  letter-spacing:-.03em; line-height:1.02;
  margin-left:-.04em; /* 允许溢出边界的排版 */
  transform:rotate(.6deg); transform-origin:left bottom;
}

/* ---- ⑦ 沉浸画廊弹层(近全屏 + crossfade + 半区光标 + 闲置 UI 淡出) ---- */
.modal{padding:2.5vh 2vw}
.modal-panel{width:min(1180px,96vw); max-height:95vh; grid-template-columns:8fr 4fr}
.carousel{overflow:hidden; position:absolute; inset:0} /* 双层 absolute img crossfade,自身不再撑高 */
.car-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .45s ease; /* 450ms crossfade */
}
.car-img.on{opacity:1}
.car-zone{position:absolute; top:0; bottom:0; width:50%; z-index:2}
.car-zone-prev{left:0}
.car-zone-next{right:0}
.car-btn{z-index:3}
.car-dots{z-index:3}
.modal-ui{transition:opacity .5s ease}
.modal.ui-idle .modal-ui{opacity:0}
.pano-toggle{transition:opacity .5s ease,background .25s,transform .5s var(--spring)}
.modal.ui-idle .pano-toggle{opacity:0}

/* ---- V3 reduced-motion 降级:弹簧/光标/叠层/预载全关,内容完整 ---- */
@media (prefers-reduced-motion:reduce){
  #preloader{display:none}
  #cursor{display:none!important}
  .stack-item{position:static; margin-bottom:24px; z-index:auto}
  .stack .project-card{transform:none!important; filter:none!important; opacity:1!important}
  .modal.ui-idle .modal-ui,.modal.ui-idle .pano-toggle{opacity:1}
  body.is-idle .site-header{opacity:1}
  body.is-idle .hero-hint{opacity:1}
}

/* ---- V3 响应式 ---- */
@media (max-width:1024px){
  .stack-item{position:static; margin-bottom:24px; z-index:auto}
  .modal-panel{grid-template-columns:1fr}
  .mega-title{font-size:clamp(44px,11vw,90px)}
}
@media (max-width:768px){
  .hero-giant{font-size:clamp(130px,36vw,240px); transform:rotate(-1deg)}
  .stack .project-card img{aspect-ratio:16/10}
  .car-zone{display:none} /* 触屏无自定义光标,半区无需占位(按钮仍可点) */
  .modal-media{min-height:230px}
}

/* ==========================================================================
   V5「光河之城」CSS 渐进层
   ① GL hero 画布定位 ② 溶解轮播画布 ③ 活体标题滤镜
   ④ scroll-driven reveal(CSS 支持时接管 JS reveal,二选一)
   ⑤ color-mix() 派生交互色 ⑥ :has() 叠卡聚焦 ⑦ reduced-motion 补丁
   ========================================================================== */

/* ① WebGL2 hero 画布:与 2D 回退画布同位;激活时 2D 画布隐藏(由 JS 控制 display) */
.hero-canvas-gl{position:absolute; inset:0; width:100%; height:100%; z-index:1}

/* ② 弹层位移溶解画布:盖在双层 img 之上、点击半区之下,不拦截指针 */
.gl-dissolve-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; display:none}
.carousel.gl-dissolving .car-img{opacity:0!important; transition:none!important}

/* ③ 活体标题:filter 由 motion.js 驱动 scale;挂 filter 前不影响任何渲染 */
body.living .hero-title{filter:url(#living-title)}

/* ④ scroll-driven animations:支持时由 CSS 接管区块入场(JS 只加 .sd-reveal 标记) */
@supports (animation-timeline: view()) {
  @keyframes sd-reveal-kf{
    from{opacity:0; transform:translateY(36px)}
    to{opacity:1; transform:none}
  }
  body.js .sd-reveal{
    animation:sd-reveal-kf both;
    animation-timeline:view();
    animation-range:entry 5% entry 45%;
  }
}

/* ⑤ color-mix():交互态颜色从品牌橙派生,不再手写第二套色值 */
.chip:hover{border-color:color-mix(in srgb, var(--brand) 55%, transparent); color:color-mix(in srgb, var(--brand) 70%, #fff)}
.btn-ghost:hover{border-color:color-mix(in srgb, var(--brand) 65%, transparent); background:color-mix(in srgb, var(--brand) 12%, transparent)}
.nav-login:hover{box-shadow:0 6px 24px color-mix(in srgb, var(--brand) 38%, transparent)}
.car-btn:hover{background:color-mix(in srgb, var(--brand) 22%, rgba(10,12,18,.55))}

/* ⑥ :has() 叠卡聚焦:任一卡片悬停时,兄弟卡片退到 55% 不透明度 */
@supports (selector(:has(*))) {
  .stack:has(.project-card:hover) .project-card:not(:hover){opacity:.55; transition:opacity .35s ease}
}

/* ⑦ V5 reduced-motion 补丁:活体滤镜摘除,sd-reveal 直接可见 */
@media (prefers-reduced-motion:reduce){
  .hero-title{filter:none!important}
  body.js .sd-reveal{animation:none!important; opacity:1; transform:none}
  .gl-dissolve-canvas{display:none!important}
}


/* ==========================================================================
   V6 双主题:深色(默认,:root tokens 不动)+ 浅色「暖纸晨光」
   ① 浅色 tokens 全覆写 ② 硬编码色浅色分支 ③ 切换钮 ④ 0.3s 颜色过渡
   浅色设计:暖白纸底 #F7F3EC / 深棕黑文字 #2A241E(非纯黑)/
            白瓷玻璃面板(rgba(255,255,255,.55-.7) + blur + 细描边)/ 品牌橙 #E8722C 不变做 CTA
   切换:theme.js 读写 <html data-theme>,localStorage 持久化,首访跟随系统
   ========================================================================== */

/* ---- ① 浅色 tokens(:root 保持深色默认,此块全覆写) ---- */
:root{color-scheme:dark}
[data-theme="light"]{
  color-scheme:light;
  /* 品牌:橙不变;brand-2 加深保浅底文字/图标对比(4.6:1 达 AA) */
  --brand:#E8722C; --brand-2:#b54f12; --brand-d:#a84c12;
  --brand-soft:rgba(232,114,44,.14); --brand-soft-2:rgba(232,114,44,.30);
  /* 背景:暖纸 */
  --bg:#F7F3EC;
  --bg-glow:radial-gradient(560px 360px at 12% -8%,rgba(232,114,44,.12),transparent 60%),
            radial-gradient(640px 440px at 108% 118%,rgba(214,164,96,.18),transparent 60%);
  /* 白瓷玻璃 */
  --surface:rgba(255,255,255,.55); --surface-2:rgba(255,255,255,.7);
  --panel:rgba(253,251,247,.78); --panel-2:rgba(247,243,236,.62);
  --surface-solid:#FDFBF7;
  --line:rgba(42,36,30,.10); --line-2:rgba(42,36,30,.17);
  /* 文字:深棕黑(非纯黑);muted 5.5:1 / dim 5.1:1,正文 AA 达标 */
  --ink:#2A241E; --ink-2:#4A4238; --muted:#6B6156; --dim:#6F6659;
  /* 语义色浅底版 */
  --ok:#1e9e50; --warn:#b57a0a; --info:#1f6fd6; --danger:#d63c28;
  /* 阴影/光:暖灰柔和 */
  --sh-2:0 18px 40px -22px rgba(90,70,50,.35);
  --glow-brand:0 6px 16px rgba(232,114,44,.30);
  --edge:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(42,36,30,.03);
}

/* ---- ② 硬编码色的浅色分支(深色行原样保留,逐点覆盖) ---- */
/* CSS 兜底夜景 → 暖纸晨光 */
[data-theme="light"] .hero-fallback{
  background:
    var(--bg-glow),
    linear-gradient(180deg,#F7F3EC 0%,#F2EAE0 55%,#EADFD0 100%);
}
[data-theme="light"] .hero-fallback::after{
  background:
    repeating-linear-gradient(90deg,#E0D6C6 0 70px,transparent 70px 86px,#E0D6C6 86px 150px,transparent 150px 168px,#E0D6C6 168px 220px,transparent 220px 240px),
    repeating-linear-gradient(90deg,#D5CAB8 0 110px,transparent 110px 128px,#D5CAB8 128px 210px,transparent 210px 236px);
}
/* 标题深色投影 → 柔光晕 */
[data-theme="light"] .hero-title{text-shadow:0 2px 22px rgba(247,243,236,.85)}
/* 数据带微染 */
[data-theme="light"] .stats{background:rgba(42,36,30,.03)}
/* 手机壳 */
[data-theme="light"] .phone-frame{
  background:#EFE9DF;
  box-shadow:var(--sh-2),var(--edge),0 30px 80px -30px rgba(232,114,44,.22);
}
/* 弹层 */
[data-theme="light"] .modal-mask{background:rgba(60,48,36,.45)}
[data-theme="light"] .modal-media{background:#E9E2D6}
[data-theme="light"] .car-dots i{background:rgba(42,36,30,.3)}
/* 卡片扫光:浅底改亮白扫 */
[data-theme="light"] .project-card::after{
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
}
/* 分层光束:screen 在浅底会洗掉 → multiply 淡橙 */
[data-theme="light"] .beam{mix-blend-mode:multiply; opacity:.8}
/* 光标手电:浅底加性失效 → 暖色晕染 */
[data-theme="light"] .hero-light{
  mix-blend-mode:multiply;
  background:radial-gradient(circle,rgba(232,114,44,.14),rgba(232,114,44,.05) 42%,transparent 68%);
}
/* hero 局部 glow:蓝光换暖金,贴合暖纸调 */
[data-theme="light"] .hero::before{
  background:
    radial-gradient(720px 480px at 10% -6%,rgba(232,114,44,.16),transparent 62%),
    radial-gradient(560px 420px at 88% 108%,rgba(232,114,44,.08),transparent 60%),
    radial-gradient(700px 480px at 104% 112%,rgba(214,164,96,.14),transparent 62%);
}
/* 噪点:浅底降 opacity 防脏 */
[data-theme="light"] .hero-noise{opacity:.03; mix-blend-mode:multiply}
/* 统计数字渐变文字:浅底加深保 AA 大字(3:1+);--brand-grad 不动,CTA 按钮两主题一致 */
[data-theme="light"] .stat-num{
  background:linear-gradient(135deg,#d96a1f,#b54f12);
  -webkit-background-clip:text; background-clip:text;
}
/* vibrancy 玻璃材质浅色:白瓷底 + 暗色细描边 */
[data-theme="light"] .site-header{
  background:rgba(247,243,236,.62);
  box-shadow:inset 0 -0.5px 0 rgba(42,36,30,.08);
}
[data-theme="light"] .modal-panel{
  background:rgba(253,251,247,.8);
  box-shadow:var(--sh-2),inset 0 0.5px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(42,36,30,.04);
}
[data-theme="light"] .mobile-bar{
  background:rgba(247,243,236,.74);
  box-shadow:inset 0 0.5px 0 rgba(42,36,30,.07);
}
[data-theme="light"] .toast{box-shadow:var(--sh-2),inset 0 0.5px 0 rgba(255,255,255,.7)}
/* 自定义光标浅色:深色底环 → 白瓷环 + 深棕字 */
[data-theme="light"] .cur-label{color:#2A241E}
[data-theme="light"] #cursor[data-state="prev"] .cur-ring,
[data-theme="light"] #cursor[data-state="next"] .cur-ring,
[data-theme="light"] #cursor[data-state="drag"] .cur-ring{
  background:rgba(255,255,255,.82); border-color:rgba(42,36,30,.28);
}
/* color-mix 交互色的浅色第二色 */
[data-theme="light"] .chip{border-color:rgba(232,114,44,.35)}
[data-theme="light"] .chip:hover{color:color-mix(in srgb, var(--brand) 62%, #2A241E)}
[data-theme="light"] .car-btn:hover{background:color-mix(in srgb, var(--brand) 20%, rgba(255,255,255,.75))}
[data-theme="light"] .btn-brand:hover{box-shadow:0 10px 24px rgba(232,114,44,.38)}
/* 页脚 logo:反白整标深底专用,浅色换纯橙房子标 */
.logo-for-light{display:none}
[data-theme="light"] .logo-for-dark{display:none}
[data-theme="light"] .logo-for-light{display:block; width:64px}

/* ---- ③ 导航切换钮:日/月 SVG 弹簧变形(scale/rotate + overshoot) ---- */
.theme-toggle{
  width:38px; height:38px; padding:0; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-2); border-radius:50%;
  color:var(--ink-2); cursor:pointer;
  transition:border-color .3s,color .3s,transform .5s var(--spring);
}
.theme-toggle:hover{border-color:var(--brand); color:var(--brand-2); transform:rotate(15deg)}
.theme-toggle svg{overflow:visible}
.tt-sun,.tt-moon{
  transform-origin:50% 50%;
  transition:transform .55s var(--spring),opacity .3s;
}
/* 深色:显示太阳(点我变亮),月亮收起;浅色反之 */
.tt-moon{transform:scale(0) rotate(90deg); opacity:0}
[data-theme="light"] .tt-sun{transform:scale(0) rotate(-90deg); opacity:0}
[data-theme="light"] .tt-moon{transform:scale(1) rotate(0deg); opacity:1}
@media (max-width:768px){
  .theme-toggle{margin:12px 6px 0; align-self:flex-start}
}

/* ---- ④ 主题切换 0.3s:仅颜色类属性;theme.js 点击时加 .theming,340ms 后移除。
       reduced-motion 下 JS 不加 class,且全局 transition:none 兜底,瞬时切换 ---- */
@media (prefers-reduced-motion:no-preference){
  html.theming, html.theming *, html.theming *::before, html.theming *::after{
    transition:background-color .3s ease,color .3s ease,border-color .3s ease,
               box-shadow .3s ease,text-shadow .3s ease,fill .3s ease,stroke .3s ease !important;
  }
}


/* ==========================================================================
   V7 关于区·品牌风自绘矢量地图(零外链手写 SVG,双主题适配)
   街区块面用 brand-soft 橙调 / 道路 muted>dim 层级 / 地铁品牌橙虚线 /
   玻璃徽标圆牌(var(--panel) 深玻↔白瓷随主题)+ 脉冲光环 + 弹簧 hover
   ========================================================================== */
/* grid item 默认 min-width:auto 会被 SVG 的 min-content 撑出视口(375 下单列),
   显式归零让轨道按 fr 正常收缩 */
.about-copy,.about-visual{min-width:0}
.map-card{margin-top:26px; padding:16px 16px 12px; overflow:hidden}
.map-link{display:block; border-radius:var(--r)}
.map-svg{display:block; width:100%; height:auto}
.map-svg text{font-family:var(--font-sans)}
/* 街区/公园 */
.map-block{fill:var(--brand-soft)}
.map-park{fill:var(--ok); opacity:.16}
.map-park-name{fill:var(--ok); font-size:12px; font-weight:600; opacity:.9}
/* 道路层级:主干道 > 次干道 */
.map-road-major{stroke:var(--muted); stroke-width:5; stroke-linecap:round; fill:none; opacity:.55}
.map-road-minor{stroke:var(--dim); stroke-width:3; stroke-linecap:round; fill:none; opacity:.5}
.map-road-name{fill:var(--muted); font-size:12px; paint-order:stroke; stroke:var(--surface-solid); stroke-width:3}
/* 地铁 9 号线:品牌橙虚线 + 站点圆点 */
.map-metro-line{stroke:var(--brand); stroke-width:3; stroke-dasharray:8 6; stroke-linecap:round; fill:none; opacity:.85}
.map-metro-tag{fill:var(--brand-2); font-size:11px; font-weight:600; paint-order:stroke; stroke:var(--surface-solid); stroke-width:3}
.map-metro-station{fill:var(--brand); stroke:var(--surface-solid); stroke-width:2.5}
.map-metro-name{fill:var(--ink-2); font-size:12px; font-weight:600; paint-order:stroke; stroke:var(--surface-solid); stroke-width:3}
/* 品牌标记点:玻璃徽标圆牌(主题面板色)+ logo */
.map-badge-bg{
  fill:var(--panel); stroke:var(--line-2);
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.28));
}
[data-theme="light"] .map-badge-bg{filter:drop-shadow(0 4px 12px rgba(90,70,50,.32))}
.map-pin-label{fill:var(--brand-2); font-size:13px; font-weight:700; paint-order:stroke; stroke:var(--surface-solid); stroke-width:3}
/* 徽标弹簧 hover 放大(transform-box 使 scale 以自身中心为准,不动定位) */
.map-badge{transform-box:fill-box; transform-origin:center; transition:transform .5s var(--spring)}
.map-card:hover .map-badge{transform:scale(1.14)}
/* 脉冲光环扩散(reduced-motion:全局 animation:none,初始 opacity 0 静止隐藏) */
.map-pulse{
  fill:none; stroke:var(--brand); stroke-width:2; opacity:0;
  transform-box:fill-box; transform-origin:center;
  animation:map-pulse 2.6s ease-out infinite;
}
.map-pulse.p2{animation-delay:1.3s}
@keyframes map-pulse{
  0%{transform:scale(.6); opacity:.5}
  70%{opacity:0}
  100%{transform:scale(2); opacity:0}
}
/* 图注:地铁提示 + 高德文字链 */
.map-caption{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:4px 16px; padding:10px 4px 2px;
}
.map-metro{margin:0; color:var(--muted); font-size:13px}
.map-open{flex:none; color:var(--brand-2); font-size:13.5px; font-weight:600}
.map-open:hover{text-decoration:underline; text-underline-offset:3px}


/* ==========================================================================
   V8 入住流程(#how):横向流程轨 + 发光连接线点亮 + 四步弹簧逐个激活
   桌面:四列横轨,连接线从左到右 scaleX 点亮;移动(≤768px):左竖向时间轨
   激活:JS 只加 .on(main.js IO 一次性),逐步延迟全走 CSS calc(.2s + var(--i)*.18s)
   隐藏初始态只挂 body.js(与 reveal 体系一致):无 JS 直出完整内容
   连接线独立 absolute 于轨内(z-0),玻璃卡 blur 掉穿卡段,视觉上呈"卡间跳接"
   ========================================================================== */
.how-track{
  list-style:none; margin:34px 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
/* 发光连接线(桌面横轨,top:60 ≈ 卡 padding 26 + node 半径 34,穿 node 中心) */
.how-line{
  position:absolute; top:60px; left:12.5%; right:12.5%; height:2px; z-index:0;
  display:block; padding:0; border-radius:2px; overflow:hidden;
  background:var(--line-2);
}
.how-line-fill{
  display:block; width:100%; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 0 12px rgba(232,114,44,.55);
  transform-origin:left center;
  transition:transform 1.2s var(--spring-out) .2s;
}
body.js .how-line-fill{transform:scaleX(0)}
.how-track.on .how-line-fill{transform:scaleX(1)}
/* 步卡:入场 translateY+淡入;border-color/box-shadow 不带延迟,hover 反馈即时 */
.how-step{
  position:relative; z-index:1; padding:26px 22px 24px;
  transition:opacity .6s var(--spring-out) calc(.2s + var(--i)*.18s),
             transform .6s var(--spring-out) calc(.2s + var(--i)*.18s),
             border-color .4s, box-shadow .5s;
}
body.js .how-step{opacity:0; transform:translateY(24px)}
.how-track.on .how-step{opacity:1; transform:none}
.how-head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px}
/* 节点:64px 玻璃圆牌 + 细线图标;激活=弹簧落位 + 品牌橙描边/发光 */
.how-node{
  width:64px; height:64px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line-2);
  color:var(--dim); box-shadow:var(--edge);
  transition:transform .55s var(--spring) calc(.3s + var(--i)*.18s),
             opacity .45s ease calc(.3s + var(--i)*.18s),
             color .5s ease calc(.45s + var(--i)*.18s),
             border-color .5s ease calc(.45s + var(--i)*.18s),
             box-shadow .5s ease calc(.45s + var(--i)*.18s);
}
.how-node svg{width:28px; height:28px}
body.js .how-node{transform:scale(.6); opacity:0}
.how-track.on .how-node{
  transform:scale(1); opacity:1;
  color:var(--brand-2); border-color:var(--brand-soft-2);
  box-shadow:var(--edge),var(--glow-brand);
}
/* 序号大字:激活后点亮品牌橙 + 克制光晕(浅色压到 .28) */
.how-num{
  font-size:44px; font-weight:700; line-height:1; letter-spacing:.02em;
  color:var(--dim);
  transition:opacity .5s ease calc(.35s + var(--i)*.18s),
             transform .5s var(--spring-out) calc(.35s + var(--i)*.18s),
             color .5s ease calc(.5s + var(--i)*.18s),
             text-shadow .5s ease calc(.5s + var(--i)*.18s);
}
body.js .how-num{opacity:0; transform:translateY(10px)}
.how-track.on .how-num{
  opacity:1; transform:none;
  color:var(--brand-2); text-shadow:0 0 18px rgba(232,114,44,.45);
}
[data-theme="light"] .how-track.on .how-num{text-shadow:0 0 18px rgba(232,114,44,.28)}
.how-step h3{margin:0 0 8px; font-size:19px}
.how-step p{margin:0; color:var(--muted); font-size:14px; line-height:1.75}
/* 收尾轻 CTA:轨道点亮后随兄弟选择器淡入(JS 不管) */
.how-cta{
  margin:34px 0 0; text-align:center;
  transition:opacity .6s ease 1.15s, transform .6s var(--spring-out) 1.15s;
}
body.js .how-cta{opacity:0; transform:translateY(12px)}
.how-track.on + .how-cta{opacity:1; transform:none}
.how-cta a{
  color:var(--brand-2); font-weight:600; font-size:15.5px; text-decoration:none;
  border-bottom:1px solid var(--brand-soft-2); padding-bottom:2px;
  transition:border-color .3s, color .3s;
}
.how-cta a:hover{border-color:var(--brand-2)}

/* ---- V8 移动端:左竖向时间轨(连接线 scaleY 自上而下点亮) ---- */
@media (max-width:768px){
  .how-track{grid-template-columns:1fr; gap:14px}
  .how-line{
    top:20px; bottom:20px; left:47px; right:auto; width:2px; height:auto;
  }
  .how-line-fill{
    background:linear-gradient(180deg,var(--brand),var(--brand-2));
    transform-origin:center top;
  }
  body.js .how-line-fill{transform:scaleY(0)}
  .how-track.on .how-line-fill{transform:scaleY(1)}
  .how-step{padding:18px 18px 18px 84px}
  /* node 摘出 flex 流钉到卡左:中心 x = 14+32 = 46 ≈ 竖轨 47 */
  .how-node{position:absolute; left:14px; top:16px}
  .how-head{justify-content:flex-end; margin-bottom:10px}
  .how-num{font-size:34px}
}

/* ---- V8 reduced-motion:全局 transition/animation 已禁,直出激活终态 ----
   (JS 侧 REDUCED 亦直接加 .on 双保险;此处再压一遍保证纯 CSS 也完整) */
@media (prefers-reduced-motion:reduce){
  body.js .how-step,body.js .how-node,body.js .how-num,body.js .how-cta,
  .how-step,.how-node,.how-num,.how-cta{opacity:1; transform:none}
  body.js .how-line-fill,.how-line-fill{transform:none}
  .how-node{
    color:var(--brand-2); border-color:var(--brand-soft-2);
    box-shadow:var(--edge),var(--glow-brand);
  }
  .how-num{color:var(--brand-2); text-shadow:0 0 18px rgba(232,114,44,.45)}
  [data-theme="light"] .how-num{text-shadow:0 0 18px rgba(232,114,44,.28)}
}

/* hidden 属性兜底:.btn 等设置了 display 的元素会盖过 UA 的 [hidden]{display:none},
   导致无 pano 的项目也显示「进入 360°」按钮——全局强制 hidden 生效 */
[hidden]{display:none !important}