/* ============================================================
   夏虫语彬 · 个人介绍 — 流光渐变玻璃 / Apple 式长滚动
   ============================================================ */

/* ---------- 字体（子集化自托管） ---------- */
@font-face{
  font-family:'XCYB Display';
  src:url('../assets/fonts/display.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'XCYB Sans';
  src:url('../assets/fonts/sans.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'XCYB Latin';
  src:url('../assets/fonts/latin.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}

/* ---------- 设计变量 ---------- */
:root{
  --bg0:#0B0618;
  --bg1:#150A2E;
  --violet:#7C3AED;
  --magenta:#EC4899;
  --cyan:#22D3EE;
  --indigo:#4F46E5;
  --rose:#FB7185;

  --ink:#F4F1FF;
  --muted:#A99FCB;
  --faint:#6E658F;

  --glass-bg:linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 60%);
  --glass-bd:rgba(255,255,255,.16);
  --glass-shadow:0 24px 70px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.22);

  --grad-text:linear-gradient(105deg,#D9C8FF 0%,#F5A9E4 38%,#9BE8FF 78%,#C9B8FF 100%);
  --grad-accent:linear-gradient(100deg,var(--violet),var(--magenta),var(--cyan));

  --f-display:'XCYB Display','XCYB Sans',-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --f-sans:'XCYB Sans',-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --f-latin:'XCYB Latin','XCYB Sans',ui-sans-serif,system-ui,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(22px,5vw,96px);
  --maxw:1180px;
}

/* ---------- 基础 ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:var(--f-sans);
  background:var(--bg0);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(236,72,153,.40);color:#fff}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block}

/* ============================================================
   背景：流光极光
   ============================================================ */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(120% 90% at 50% -10%, var(--bg1), var(--bg0) 60%);}
.blob{
  position:absolute;border-radius:50%;
  filter:blur(70px);
  mix-blend-mode:screen;opacity:.85;
  will-change:transform;
}
.blob--violet { width:46vw;height:46vw;left:-8vw; top:-6vw;
  background:radial-gradient(circle at 30% 30%, var(--violet),transparent 70%);
  animation:drift1 26s var(--ease) infinite;}
.blob--magenta{ width:42vw;height:42vw;right:-6vw;top:8vw;
  background:radial-gradient(circle at 60% 40%, var(--magenta),transparent 70%);
  animation:drift2 32s var(--ease) infinite;}
.blob--cyan   { width:40vw;height:40vw;left:18vw;bottom:-12vw;
  background:radial-gradient(circle at 50% 50%, var(--cyan),transparent 70%);
  animation:drift3 30s var(--ease) infinite;}
.blob--indigo { width:38vw;height:38vw;right:6vw;bottom:2vw;
  background:radial-gradient(circle at 40% 60%, var(--indigo),transparent 72%);
  animation:drift2 36s var(--ease) infinite reverse;}
.blob--rose   { width:26vw;height:26vw;left:40vw;top:34vw;
  background:radial-gradient(circle at 50% 50%, var(--rose),transparent 72%);
  animation:drift1 28s var(--ease) infinite reverse;}

@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(8vw,6vw,0) scale(1.12)}66%{transform:translate3d(-5vw,3vw,0) scale(.94)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(-7vw,5vw,0) scale(1.08)}66%{transform:translate3d(4vw,-6vw,0) scale(1.05)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,-8vw,0) scale(1.16)}}

.bg__veil{position:absolute;inset:0;background:
  radial-gradient(140% 120% at 50% 0%, transparent 40%, rgba(8,4,20,.55) 100%);}
.bg__grain{position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* 跟随光标柔光 */
.cursor-glow{
  position:fixed;top:0;left:0;width:520px;height:520px;z-index:-1;
  margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(168,120,255,.16), transparent 62%);
  transform:translate3d(-1000px,-1000px,0);
  transition:opacity .4s ease;will-change:transform;
}

/* ============================================================
   全局界面元素
   ============================================================ */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:50;background:rgba(255,255,255,.06)}
.progress__bar{display:block;height:100%;width:100%;background:var(--grad-accent);
  box-shadow:0 0 16px rgba(236,72,153,.6);transform:scaleX(0);transform-origin:0 50%}

.dots{position:fixed;right:clamp(14px,2.4vw,34px);top:50%;transform:translateY(-50%);
  z-index:40;display:flex;flex-direction:column;gap:18px}
.dot{position:relative;width:12px;height:12px;display:grid;place-items:center}
.dot span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);
  transition:all .45s var(--ease)}
.dot:hover span{background:rgba(255,255,255,.7);transform:scale(1.25)}
.dot.is-active span{background:transparent;width:12px;height:12px;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 14px rgba(236,72,153,.8);
  background:var(--grad-accent)}
.dot::after{content:attr(data-label);position:absolute;right:24px;top:50%;
  transform:translateY(-50%) translateX(6px);white-space:nowrap;
  font-family:var(--f-sans);font-size:12px;letter-spacing:.04em;color:var(--muted);
  opacity:0;pointer-events:none;transition:all .4s var(--ease)}
.dot:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}

/* ============================================================
   场景通用
   ============================================================ */
main{position:relative;z-index:1}
.scene{position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,14vh,180px) var(--pad);
  width:min(100%,var(--maxw));margin-inline:auto}

.ghost-num{position:absolute;top:clamp(40px,9vh,120px);left:calc(var(--pad) - .06em);
  font-family:var(--f-latin);font-weight:700;font-size:clamp(7rem,26vw,22rem);
  line-height:.8;letter-spacing:-.04em;z-index:-1;pointer-events:none;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);
  will-change:transform}
.ghost-num--warn{-webkit-text-stroke-color:rgba(251,113,133,.12)}

.scene__head{margin-bottom:clamp(30px,5vh,64px)}
.scene__head--center{text-align:center;margin-bottom:clamp(28px,4vh,48px)}
.kicker{display:inline-flex;align-items:center;gap:12px;
  font-size:clamp(12px,1.4vw,14px);letter-spacing:.42em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.kicker i{width:34px;height:2px;border-radius:2px;background:var(--grad-accent);display:inline-block}
.kicker--warn{color:#f9a8c4}
.kicker--warn i{background:linear-gradient(100deg,var(--rose),#f43f5e)}

.scene__title{font-family:var(--f-display);font-weight:700;
  font-size:clamp(3.2rem,12vw,8.5rem);line-height:.96;letter-spacing:-.02em;
  margin-top:14px;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 8px 40px rgba(124,58,237,.35))}

.eyebrow{font-size:clamp(12px,1.5vw,15px);letter-spacing:.5em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:clamp(18px,3vh,30px)}

/* 玻璃拟态 */
.glass{position:relative;background:var(--glass-bg);
  border:1px solid var(--glass-bd);border-radius:24px;
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  overflow:hidden;will-change:transform}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.16), transparent 50%)}
.glass--warn{border-color:rgba(251,113,133,.28);
  background:linear-gradient(150deg, rgba(251,113,133,.12), rgba(244,63,94,.04) 60%)}

/* ============================================================
   00 · 封面
   ============================================================ */
.scene--hero{justify-content:center;align-items:flex-start;text-align:left}
.hero__inner{position:relative;z-index:2}
.hero__title{font-family:var(--f-display);font-weight:700;
  font-size:clamp(4.6rem,21vw,16rem);line-height:.9;letter-spacing:.01em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 16px 60px rgba(124,58,237,.45))}
.hero__title .char{display:inline-block;will-change:transform}
.hero__latin{font-family:var(--f-latin);font-weight:600;
  font-size:clamp(1.2rem,4.5vw,2.6rem);letter-spacing:.34em;text-transform:lowercase;
  color:var(--muted);margin-top:clamp(10px,2vh,22px);padding-left:.3em}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:clamp(22px,4vh,40px);font-family:var(--f-latin);
  font-size:clamp(14px,2vw,19px);letter-spacing:.16em;color:var(--ink)}
.hero__meta .sep{color:var(--faint)}
.hero__meta li:not(.sep){padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}

/* 漂浮几何 */
.hero__deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.shape{position:absolute;will-change:transform;opacity:.9}
.shape--ring{width:clamp(120px,16vw,240px);aspect-ratio:1;right:8%;top:14%;border-radius:50%;
  border:1.5px solid rgba(155,232,255,.5);
  box-shadow:0 0 60px rgba(34,211,238,.25), inset 0 0 30px rgba(34,211,238,.12)}
.shape--square{width:clamp(80px,9vw,150px);aspect-ratio:1;right:24%;bottom:18%;border-radius:18px;
  background:linear-gradient(140deg, rgba(236,72,153,.35), rgba(124,58,237,.18));
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);transform:rotate(18deg)}
.shape--tri{right:14%;bottom:30%;width:0;height:0;
  border-left:46px solid transparent;border-right:46px solid transparent;
  border-bottom:80px solid rgba(124,58,237,.30);filter:drop-shadow(0 10px 30px rgba(124,58,237,.4))}
.shape--pill{width:clamp(60px,7vw,120px);height:clamp(26px,3vw,48px);left:6%;bottom:22%;
  border-radius:999px;background:linear-gradient(100deg,rgba(34,211,238,.4),rgba(124,58,237,.25));
  border:1px solid rgba(255,255,255,.2);transform:rotate(-12deg)}
.shape--dot{width:14px;height:14px;border-radius:50%;left:18%;top:24%;
  background:var(--magenta);box-shadow:0 0 24px 4px rgba(236,72,153,.7)}

.scrollcue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  width:26px;height:42px;border:1.5px solid rgba(255,255,255,.3);border-radius:14px;
  display:flex;justify-content:center;padding-top:7px;z-index:3}
.scrollcue__line{width:3px;height:9px;border-radius:3px;background:var(--ink);
  animation:cue 1.7s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{opacity:1}100%{transform:translateY(13px);opacity:0}}

/* ============================================================
   01 · 基本信息
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.stat{padding:clamp(22px,2.6vw,34px);min-height:clamp(180px,24vh,260px);
  display:flex;flex-direction:column;justify-content:space-between;color:#cdb9ff}
.stat__k{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
.stat__v{font-family:var(--f-display);font-weight:700;color:var(--ink);
  font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;letter-spacing:.01em;align-self:flex-start}
.stat__v small{font-size:.5em;font-weight:600;color:var(--muted);margin-left:2px}
.stat__v i{font-style:normal;color:var(--faint);margin:0 .12em;font-weight:400}
.stat__motif{position:absolute;right:-10px;bottom:-10px;width:clamp(70px,8vw,108px);
  opacity:.5;color:rgba(180,150,255,.6)}

/* ============================================================
   02 · 常点
   ============================================================ */
.games{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.game{display:flex;align-items:center;gap:clamp(18px,3vw,42px);
  padding:clamp(20px,3vw,40px) clamp(22px,3.4vw,52px);cursor:default}
.game__idx{font-family:var(--f-latin);font-weight:700;font-size:clamp(15px,1.8vw,20px);
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4);min-width:2.4ch}
.game__name{font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.4rem,7vw,5rem);line-height:1;letter-spacing:.04em;
  color:var(--ink);transition:transform .5s var(--ease)}
.game__bar{margin-left:auto;width:clamp(40px,8vw,120px);height:4px;border-radius:4px;
  background:var(--grad-accent);opacity:.6;transition:all .5s var(--ease)}
.game:hover .game__name{transform:translateX(10px)}
.game:hover .game__bar{width:clamp(60px,12vw,180px);opacity:1}

/* ============================================================
   03 · 喜点
   ============================================================ */
.likes{display:flex;flex-direction:column;gap:clamp(8px,1.4vh,18px);max-width:920px}
.like{display:flex;align-items:flex-start;gap:18px;
  padding:clamp(12px,1.6vh,18px) 0;border-bottom:1px solid rgba(255,255,255,.08)}
.like__mark{flex:none;width:14px;height:14px;margin-top:.55em;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.3);transition:all .5s var(--ease)}
.like.is-key .like__mark{background:var(--grad-accent);border-color:transparent;
  box-shadow:0 0 16px rgba(236,72,153,.7)}
.like p{font-size:clamp(1.15rem,3vw,1.9rem);font-weight:500;color:var(--ink)}
.like.is-key p{font-weight:700;background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.likes__note{margin-top:clamp(18px,3vh,34px);font-size:clamp(.9rem,2vw,1.05rem);
  color:var(--muted);letter-spacing:.02em;
  padding-left:18px;border-left:2px solid rgba(236,72,153,.5)}

/* ============================================================
   04 · 雷点
   ============================================================ */
.nope{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px)}
.nope__item{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;gap:20px;
  min-height:clamp(190px,26vh,280px);justify-content:space-between}
.nope__item p{font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:600;color:#ffe9ef;line-height:1.5}
.nope__tri{width:42px;height:42px;flex:none;position:relative}
.nope__tri::before{content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,var(--rose),#f43f5e);
  clip-path:polygon(50% 6%,96% 92%,4% 92%);
  box-shadow:0 8px 30px rgba(244,63,94,.5)}
.nope__tri::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-weight:800;font-family:var(--f-latin);font-size:18px;padding-top:6px}

/* ============================================================
   05 · 写在最后
   ============================================================ */
.scene--outro{align-items:center;text-align:center}
.outro__line{font-family:var(--f-sans);font-weight:500;max-width:none;
  font-size:clamp(.95rem,2.2vw,1.3rem);line-height:1.7;letter-spacing:.03em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.signoff{margin-top:clamp(34px,6vh,64px);display:flex;flex-direction:column;align-items:center;gap:10px}
.signoff__badge{width:54px;height:54px;border-radius:16px;background:var(--grad-accent);
  box-shadow:0 12px 40px -8px rgba(236,72,153,.7), inset 0 1px 0 rgba(255,255,255,.5);
  transform:rotate(45deg);position:relative}
.signoff__badge::after{content:"";position:absolute;inset:11px;border-radius:7px;
  border:1.5px solid rgba(255,255,255,.85)}
.signoff__name{font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,4vw,2.2rem);color:var(--ink)}
.signoff__latin{font-family:var(--f-latin);letter-spacing:.34em;color:var(--muted);font-size:clamp(12px,2vw,15px)}

/* 页脚 */
.foot{position:relative;z-index:1;text-align:center;padding:60px var(--pad) 70px}
.foot__rule{display:block;width:min(90%,var(--maxw));height:1px;margin:0 auto 26px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent)}
.foot p{font-family:var(--f-latin);letter-spacing:.22em;color:var(--faint);font-size:13px}

/* ============================================================
   进场动画门控（无 JS 时内容照常可见）
   ============================================================ */
/* 拆分后的单字需自带渐变填充（父级 background-clip:text 不会延伸到子 span） */
.char{display:inline-block;will-change:transform;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
html.js [data-reveal],
html.js [data-split],
html.js [data-card],
html.js [data-line],
html.js .hero__deco .shape{opacity:0}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:900px){
  .stats{grid-template-columns:1fr 1fr}
  .nope{grid-template-columns:1fr}
}
@media (max-width:680px){
  .dots{display:none}
  .cursor-glow{display:none}
  .blob{filter:blur(52px)}
  .scene{padding-top:clamp(110px,16vh,150px)}
  .hero__meta li:not(.sep){padding:5px 12px}
  .game{gap:16px}
  .shape--tri{display:none}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr}
}

/* 降低动态偏好 */
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal],
  html.js [data-split],
  html.js [data-card],
  html.js [data-line],
  html.js .hero__deco .shape{opacity:1!important}
  .blob,.shape,.scrollcue__line{animation:none!important}
  *{scroll-behavior:auto!important}
}