/* ===== v4 首页视觉（designer 2026-10-14）：大字 · 流光 · 聚光 · 滚动显现。仅作用于 #S0，无 3D ===== */
#S0{--mx:70%;--my:30%;--px:0;--py:0;isolation:isolate;overflow:clip}
/* 动态渐变光：两团慢速漂移的金/朱光晕 + 跟随鼠标的聚光 */
#S0::before,#S0::after{content:"";position:absolute;pointer-events:none;z-index:0}
#S0::before{inset:-20% -10%;background:
  radial-gradient(38% 42% at 72% 28%,rgba(212,162,78,.20),transparent 70%),
  radial-gradient(30% 36% at 18% 78%,rgba(200,64,42,.16),transparent 70%),
  radial-gradient(26% 30% at 90% 85%,rgba(62,107,138,.14),transparent 70%);
  filter:blur(20px);animation:hx-drift 18s ease-in-out infinite alternate;
  transform:translate3d(calc(var(--px) * -18px),calc(var(--py) * -14px),0)}
#S0::after{inset:0;position:fixed;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(232,207,150,.10),transparent 60%);transition:opacity .6s;opacity:var(--spot,0)}
@keyframes hx-drift{0%{translate:0 0;scale:1}50%{translate:-4% 3%;scale:1.08}100%{translate:3% -2%;scale:1.02}}
#S0 .hero-grid,#S0 .brand{z-index:2}
/* 细网格 + 地平线，参考 Linear/Vercel 的精确感 */
#S0 .hero-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(242,234,216,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(242,234,216,.035) 1px,transparent 1px);
  background-size:72px 72px;-webkit-mask:radial-gradient(70% 60% at 40% 40%,#000,transparent 80%);mask:radial-gradient(70% 60% at 40% 40%,#000,transparent 80%)}
/* 品牌条：玻璃胶囊 */
#S0 .brand{padding:8px 16px;border-radius:999px;border:1px solid rgba(201,164,92,.18);background:rgba(13,13,18,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#S0 .brand i{letter-spacing:.32em}
/* kicker：英文感 mono 标签 + 呼吸点 */
#S0 .kicker{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 10px;border-radius:999px;border:1px solid rgba(201,164,92,.25);background:linear-gradient(90deg,rgba(201,164,92,.10),rgba(201,164,92,0));letter-spacing:.22em}
/* 大字标题：更大、更紧，带视差 */
#S0 .hero .ln{white-space:nowrap}
#S0 .hero{font-size:clamp(68px,11vw,190px);line-height:.96;letter-spacing:-.045em;transform:translate3d(calc(var(--px) * 10px),calc(var(--py) * 6px),0);transition:transform .8s var(--e-cine)}
#S0 .hero .ln:nth-child(2){padding-left:.6em}
#S0 .hero em{position:relative;background:linear-gradient(100deg,#7d5d25 0%,#c9a45c 22%,#fff1cc 40%,#e06a4a 58%,#c9a45c 76%,#7d5d25 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:sheen 7s var(--e-cine) infinite;filter:drop-shadow(0 0 40px rgba(212,162,78,.28))}
#S0 .sub{font-size:clamp(16px,1.5vw,22px);letter-spacing:.04em;max-width:30em}
/* 地层样本柱：轻微视差 + 光边 */
#S0 .core{transform:translate3d(calc(var(--px) * -14px),calc(var(--py) * -10px),0);transition:transform .9s var(--e-cine)}
#S0 .core::after{content:"";position:absolute;inset:-1px;border-radius:4px;pointer-events:none;box-shadow:0 0 0 1px rgba(201,164,92,.18),0 0 80px -10px rgba(212,162,78,.35)}
/* 区标签：磁吸 + 渐变描边 */
#S0 .picker{max-width:820px}
#S0 .picker-tab{position:relative;transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .35s var(--e-cine),color var(--d-tap),border-color var(--d-tap),background var(--d-tap),box-shadow .3s;background:rgba(22,22,29,.55)}
#S0 .picker-tab[aria-selected="true"]{color:#14110b;background:linear-gradient(120deg,var(--c-gilt-hi),var(--c-gilt));border-color:transparent;box-shadow:0 8px 30px -8px rgba(212,162,78,.55)}
/* 地标卡：卡内聚光 + 滚动显现 */
#S0 .picker-item{position:relative;overflow:hidden;border-radius:10px;border-left-width:1px;background:linear-gradient(180deg,rgba(31,28,23,.75),rgba(22,22,29,.75));transition:transform .35s var(--e-cine),border-color .25s,box-shadow .35s}
#S0 .picker-item::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(180px circle at var(--ix,50%) var(--iy,50%),rgba(232,207,150,.16),transparent 70%)}
#S0 .picker-item:hover{transform:translateY(-3px);border-color:rgba(201,164,92,.55);box-shadow:0 14px 34px -18px rgba(212,162,78,.6)}
#S0 .picker-item:hover::before{opacity:1}
#S0 .picker-item>*{position:relative}
.hx-in{opacity:0;transform:translateY(18px)}
.hx-in.hx-on{opacity:1;transform:none;transition:opacity .7s var(--e-cine),transform .7s var(--e-cine);transition-delay:calc(var(--hi,0) * 35ms)}
@media (max-width:767px){
  #S0 .hero{font-size:clamp(60px,19vw,92px);transform:none}
  #S0 .hero .ln:nth-child(2){padding-left:.5em}
  #S0 .brand{left:16px;top:16px;padding:6px 12px;gap:8px}
  #S0::before{animation-duration:26s}
}
@media (pointer:coarse){#S0::after{display:none}#S0 .brand{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(13,13,18,.8)}}
@media (prefers-reduced-motion:reduce){#S0::before{animation:none;transform:none}#S0 .hero,#S0 .core,#S0 .picker-tab{transform:none;transition:none}#S0 .hero em{animation:none}.hx-in{opacity:1;transform:none}}

/* ===== v6 远光（designer 2026-10-14）：深处的一束光——地平线辉光 + 光晕 + 光芒，缓慢呼吸，随鼠标轻移 ===== */
.hx-far{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen;
  transform:translate3d(calc(var(--px) * -24px),calc(var(--py) * -16px),0);transition:transform 1.2s var(--e-cine)}
.hx-far>i{position:absolute;left:var(--fx,68%);top:var(--fy,48vh);display:block;translate:-50% -50%;border-radius:50%}
.hx-far .core-l{width:clamp(90px,10vw,160px);aspect-ratio:1;background:radial-gradient(circle,#fffaf0 0%,#ffe6b0 18%,rgba(240,190,100,.55) 40%,rgba(224,106,74,0) 70%);animation:hx-pulse 5.5s ease-in-out infinite}
.hx-far .bloom{width:clamp(520px,70vw,1200px);aspect-ratio:1;background:radial-gradient(circle,rgba(255,214,140,.38) 0%,rgba(232,150,70,.16) 28%,rgba(200,64,42,.06) 50%,transparent 68%);animation:hx-pulse 5.5s ease-in-out infinite .4s}
.hx-far .hz{width:180vw;height:clamp(60px,9vh,110px);border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,226,170,.55),rgba(240,160,80,.18) 45%,transparent 75%);filter:blur(6px)}
.hx-far .rays{width:clamp(700px,110vw,1800px);aspect-ratio:1;border-radius:0;opacity:.55;
  background:repeating-conic-gradient(from 0deg,rgba(255,228,170,.16) 0deg 2.2deg,transparent 2.2deg 11deg);
  -webkit-mask:radial-gradient(circle,#000 4%,rgba(0,0,0,.5) 22%,transparent 55%);mask:radial-gradient(circle,#000 4%,rgba(0,0,0,.5) 22%,transparent 55%);
  animation:hx-rays 90s linear infinite}
@keyframes hx-pulse{0%,100%{opacity:.85;scale:1}50%{opacity:1;scale:1.08}}
@keyframes hx-rays{to{rotate:360deg}}
@media (max-width:900px){.hx-far{--fx:86%;--fy:150px}.hx-far .rays{opacity:.4}}
@media (pointer:coarse){.hx-far{transform:none}}
@media (prefers-reduced-motion:reduce){.hx-far,.hx-far>i{animation:none!important;transform:none}}