/* =====================================================================
   gaga 个人工作室 —— 站点样式
   色调：墨底 / 宣纸 / 朱砂（朱砂红作强调色，克制使用）
   ===================================================================== */

:root{
  --paper:#f6f1e5;  --paper-2:#fbf8f0;
  --ink:#2b251c;    --ink-2:#4a4136;
  /* ⚠️ --sub / --faint 受可访问性约束，勿随意调浅。
     宣纸底 #f6f1e5 上需 ≥4.5:1（WCAG AA 正文级）：
       #6f6250 → 5.26:1 ✅   #786a55 → 4.67:1 ✅ */
  --sub:#6f6250;    --faint:#786a55;
  --line:#e2d8c3;   --line-2:#d3c6ac;
  --vermilion:#b03a2e; --vermilion-2:#8f2c22;
  --deep:#0c0a09;   --deep-2:#17120e;  --deep-3:#221a14;

  --serif:"Songti SC","STSong","Noto Serif SC",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  --maxw:1140px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0; padding:0;
  background:var(--paper); color:var(--ink);
  font-family:var(--sans);
  font-size:16px; line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:var(--vermilion); text-decoration:none; }
a:hover{ text-decoration:underline; }
code{
  font-family:var(--mono); font-size:.9em;
  background:rgba(176,58,46,.09); color:var(--vermilion-2);
  padding:.1em .38em; border-radius:4px;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 26px; }
.wrap.narrow{ max-width:760px; }

/* ── 顶部导航 ── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px;
  background:rgba(12,10,9,.5);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(246,241,229,.08);
  transition:background .4s ease, border-color .4s ease;
}
.nav.on-paper{
  background:rgba(246,241,229,.84);
  border-bottom-color:var(--line);
}
.nav-brand{
  font-family:var(--mono); font-size:15px; letter-spacing:.06em;
  color:#f6f1e5; transition:color .4s ease;
  display:flex; align-items:center; gap:9px;
}
.nav-brand .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--vermilion); box-shadow:0 0 10px rgba(176,58,46,.9);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.nav-brand i{ font-style:normal; opacity:.5; font-size:13px; }
.nav.on-paper .nav-brand{ color:var(--ink); }
.nav-links{ display:flex; gap:24px; align-items:center; }
.nav-links a{
  font-size:13.5px; color:rgba(246,241,229,.7);
  letter-spacing:.05em; transition:color .3s ease;
}
.nav.on-paper .nav-links a{ color:var(--sub); }
.nav-links a:hover{ color:var(--vermilion); text-decoration:none; }

/* ── Hero ── */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  /* 兜底：WebGL 不可用时也能看 */
  background:radial-gradient(120% 80% at 50% 15%, #241b15 0%, var(--deep) 55%, #060505 100%);
  overflow:hidden;
}
#ink-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:1;
}
/* 纸纹噪点 */
.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.14; mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.hero-inner{
  position:relative; z-index:3; text-align:center;
  padding:0 26px; max-width:840px;
}
.hero-kicker{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.3em;
  color:rgba(246,241,229,.48); margin:0 0 26px; text-transform:uppercase;
}
.hero h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(36px,7vw,78px);
  line-height:1.2; letter-spacing:.03em;
  color:#f6f1e5; margin:0;
  text-shadow:0 0 70px rgba(176,58,46,.3);
}
.hero h1 .zh{ display:block; }
.hero h1 em{
  font-style:normal; color:var(--vermilion);
  text-shadow:0 0 50px rgba(176,58,46,.8);
}
.hero-sub{
  font-family:var(--mono); font-size:clamp(13px,1.8vw,15px);
  letter-spacing:.18em; color:rgba(246,241,229,.55);
  margin:24px 0 0;
}
.hero-rule{
  width:64px; height:1px; margin:34px auto 0;
  background:linear-gradient(90deg,transparent,rgba(176,58,46,.9),transparent);
}
.hero-lede{
  color:rgba(246,241,229,.62); font-size:15.5px; line-height:2;
  margin:30px auto 0; max-width:600px;
}
.hero-cta{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-top:40px;
}

/* ── 按钮 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:11px; padding:13px 26px;
  font-family:var(--sans); font-size:15px; font-weight:600;
  letter-spacing:.02em; cursor:pointer;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .28s ease, border-color .28s ease;
}
.btn.primary{
  background:#f6f1e5; color:#0c0a09;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.btn.primary:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(176,58,46,.42);
  text-decoration:none;
}
.btn.ghost{
  background:transparent; color:#f6f1e5;
  border:1px solid rgba(246,241,229,.3);
}
.btn.ghost:hover{
  border-color:var(--vermilion); color:#fff;
  background:rgba(176,58,46,.2); text-decoration:none;
}

/* ── HUD 性能读数 ── */
.hud{
  position:absolute; left:50%; bottom:30px; z-index:3;
  transform:translateX(-50%);
  display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:center;
  font-family:var(--mono); font-size:11.5px;
  color:rgba(246,241,229,.42); letter-spacing:.04em;
  padding:8px 16px; border-radius:999px;
  background:rgba(8,7,6,.42); border:1px solid rgba(246,241,229,.09);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hud b{ color:rgba(246,241,229,.82); font-weight:600; }
.hud-tag{ color:rgba(176,58,46,.9); }
@media (max-width:720px){ .hud-tag{ display:none; } }

.hero-scroll{
  position:absolute; left:50%; bottom:30px; z-index:3;
  transform:translateX(-50%);
  font-size:11px; letter-spacing:.3em; color:rgba(246,241,229,.3);
  display:none;                     /* HUD 占了底部，滚动提示让位 */
  flex-direction:column; align-items:center; gap:9px;
}

/* ── 通用 section ── */
.sec{ padding:110px 0; position:relative; }
.sec.paper{ background:var(--paper); }
.sec.paper-2{ background:var(--paper-2); border-block:1px solid var(--line); }
.sec.dark{ background:var(--deep-2); color:#f6f1e5; }

.sec-tag{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.34em;
  color:var(--vermilion); margin:0 0 16px;
}
.sec-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,3.6vw,40px); line-height:1.34;
  margin:0 0 18px; letter-spacing:.02em;
}
.sec-lede{
  color:var(--sub); font-size:16px; max-width:680px; margin:0 0 44px;
}
.sec.dark .sec-lede{ color:rgba(246,241,229,.6); }
.sec.dark .sec-lede code{ background:rgba(176,58,46,.2); color:#e8a89c; }

/* 滚动淡入 */
.rise{ opacity:0; transform:translateY(26px); }
.rise.in{
  opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}

/* ── 实验室 ── */
.lab{
  border:1px solid rgba(246,241,229,.1);
  border-radius:16px; overflow:hidden;
  background:rgba(8,7,6,.5);
  box-shadow:0 30px 90px -40px rgba(176,58,46,.28), 0 0 0 1px rgba(0,0,0,.4);
}
.lab-tabs{
  display:grid; grid-template-columns:repeat(6,1fr);
  border-bottom:1px solid rgba(246,241,229,.1);
}
.lab-tab{
  position:relative;
  background:transparent; border:0; cursor:pointer;
  padding:17px 12px; text-align:left;
  color:rgba(246,241,229,.5); font-family:inherit;
  border-right:1px solid rgba(246,241,229,.07);
  transition:background .3s ease, color .3s ease;
  overflow:hidden;
}
.lab-tab:last-child{ border-right:0; }
.lab-tab::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg,var(--vermilion),#e8a84a);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.lab-tab:hover::after{ transform:scaleX(1); }
.lab-tab b{
  display:block; font-family:var(--mono); font-size:10.5px;
  color:rgba(176,58,46,.75); letter-spacing:.14em; margin-bottom:6px;
}
.lab-tab i{
  display:block; font-style:normal; font-size:11px;
  color:rgba(246,241,229,.34); margin-top:4px; letter-spacing:.03em;
}
.lab-tab:hover{ background:rgba(246,241,229,.05); color:rgba(246,241,229,.9); }
.lab-tab.on{
  background:linear-gradient(180deg,rgba(176,58,46,.20),rgba(176,58,46,.06));
  color:#f6f1e5;
}
.lab-tab.on b{ color:#e8a84a; }
.lab-tab.on::after{ transform:scaleX(1); }

.lab-main{ position:relative; }
.lab-stage{
  position:relative; aspect-ratio:16/8; min-height:300px;
  background:#0a0908; overflow:hidden;
}
.lab-stage canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; touch-action:none; cursor:crosshair;
}
.lab-hint{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-family:var(--mono); font-size:11.5px;
  color:rgba(246,241,229,.45); letter-spacing:.04em;
  pointer-events:none;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.lab-hud{
  position:absolute; right:16px; bottom:14px; z-index:2;
  font-family:var(--mono); font-size:11.5px;
  color:rgba(232,168,74,.95); letter-spacing:.04em;
  pointer-events:none;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}

.lab-foot{
  border-top:1px solid rgba(246,241,229,.08);
}
.lab-extra{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:16px 24px 0;
  min-height:0;
}
.lab-extra:empty{ display:none; }
.lab-xbtn{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em;
  padding:7px 14px; border-radius:999px; cursor:pointer;
  color:rgba(246,241,229,.72);
  background:rgba(246,241,229,.05);
  border:1px solid rgba(246,241,229,.14);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.lab-xbtn:hover{
  background:rgba(176,58,46,.22); color:#fff;
  border-color:rgba(176,58,46,.55); transform:translateY(-1px);
}
.lab-xbtn.flash{
  background:rgba(232,168,74,.24); color:#ffe3ac;
  border-color:rgba(232,168,74,.6);
}
.lab-note{
  padding:16px 24px 20px; font-size:14px; line-height:1.95;
  color:rgba(246,241,229,.52);
  min-height:76px;
}
.lab-note b{ color:rgba(246,241,229,.85); font-weight:600; }
.lab-note code{ background:rgba(176,58,46,.22); color:#e8a89c; }

/* ── 作品 ── */
.works{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
.work{
  display:block; position:relative;
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:16px; padding:32px 30px;
  color:inherit;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.work:hover{
  transform:translateY(-6px); border-color:var(--line-2);
  box-shadow:0 22px 54px rgba(43,37,28,.12);
  text-decoration:none;
}
.work.featured{
  grid-column:1 / -1;
  background:
    radial-gradient(120% 130% at 88% 8%, rgba(176,58,46,.11) 0%, transparent 58%),
    var(--paper-2);
  border-color:var(--line-2);
}
.work-head{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.work-badge{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  padding:4px 10px; border-radius:999px;
}
.work-badge.live{ background:var(--vermilion); color:#fff; }
.work-badge.wip{ background:rgba(176,58,46,.13); color:var(--vermilion-2); }
.work-badge.soon{ background:rgba(111,98,80,.13); color:var(--sub); }
.work-kind{
  font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.08em;
}
.work h3{
  font-family:var(--serif); font-size:22px; font-weight:600;
  margin:0 0 14px; letter-spacing:.01em;
}
.work.featured h3{ font-size:clamp(23px,3.1vw,30px); }
.work p{ color:var(--sub); font-size:15px; margin:0; max-width:640px; }
.work-tags{
  display:flex; flex-wrap:wrap; gap:7px; list-style:none;
  margin:20px 0 0; padding:0;
}
.work-tags li{
  font-family:var(--mono); font-size:11.5px;
  color:var(--sub); background:rgba(111,98,80,.1);
  padding:4px 11px; border-radius:6px;
}
.work-more{
  display:inline-block; margin-top:20px;
  font-size:14px; color:var(--vermilion); font-weight:600;
}
.work-more i{ font-style:normal; transition:transform .3s ease; display:inline-block; }
.work:hover .work-more i{ transform:translateX(5px); }

/* ── 技术栈 ── */
.stack{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--line); border:1px solid var(--line);
  border-radius:16px; overflow:hidden;
}
.stack-col{ background:var(--paper-2); padding:28px 24px; }
.stack-col h4{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  color:var(--vermilion); margin:0 0 18px; font-weight:600;
}
.stack-col ul{ list-style:none; margin:0; padding:0; }
.stack-col li{ margin-bottom:15px; }
.stack-col li:last-child{ margin-bottom:0; }
.stack-col b{
  display:block; font-size:14.5px; font-weight:600; color:var(--ink);
  margin-bottom:2px;
}
.stack-col i{
  display:block; font-style:normal; font-size:12.5px; color:var(--faint);
  line-height:1.6;
}

/* ── 顶部滚动进度条 ── */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:90;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--vermilion),#e8a84a 70%,#f6f1e5);
  box-shadow:0 0 14px rgba(176,58,46,.75), 0 0 30px rgba(232,168,74,.35);
  transition:opacity .4s ease;
  pointer-events:none;
}

/* ── 光标光晕 ── */
.cursor-glow{
  position:fixed; top:0; left:0; z-index:55;
  width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,
    rgba(176,58,46,.13) 0%,
    rgba(232,168,74,.07) 32%,
    transparent 66%);
  filter:blur(8px);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .6s ease;
  will-change:transform;
}
body:hover .cursor-glow{ opacity:1; }
.cursor-glow.on-paper{
  background:radial-gradient(circle,
    rgba(176,58,46,.10) 0%,
    rgba(232,168,74,.05) 34%,
    transparent 68%);
  mix-blend-mode:multiply;
}
@media (pointer:coarse){ .cursor-glow{ display:none; } }

/* ── 滚动跑马灯 ── */
.ticker{
  overflow:hidden; position:relative;
  background:var(--deep); border-block:1px solid rgba(246,241,229,.08);
  padding:13px 0;
}
.ticker::before,.ticker::after{
  content:""; position:absolute; inset:0 auto 0 0; width:120px; z-index:2;
  background:linear-gradient(90deg,var(--deep),transparent);
  pointer-events:none;
}
.ticker::after{ inset:0 0 0 auto; background:linear-gradient(270deg,var(--deep),transparent); }
.ticker-track{
  display:flex; align-items:center; gap:0;
  white-space:nowrap; will-change:transform;
}
.ticker-track span{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  color:rgba(246,241,229,.44); padding:0 4px;
}
.ticker-track i{
  font-style:normal; color:rgba(176,58,46,.6);
  padding:0 14px; font-size:12px;
}

/* ── Hero 提示 ── */
.hero-tap{
  margin:26px 0 0; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.16em; color:rgba(246,241,229,.34);
}

/* ── 关于区数字 ── */
.stats{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  margin:38px 0 30px;
  background:var(--line); border:1px solid var(--line);
  border-radius:12px; overflow:hidden;
}
.stats div{
  background:var(--paper-2); padding:20px 14px; text-align:center;
}
.stats b{
  display:block; font-family:var(--mono);
  font-size:27px; font-weight:600; color:var(--vermilion);
  line-height:1.2; letter-spacing:-.01em;
}
.stats span{
  display:block; margin-top:7px; font-size:11.5px;
  color:var(--faint); letter-spacing:.03em;
}

/* ── 关于 ── */
.about-body p{
  color:var(--sub); font-size:16px; margin:0 0 20px;
}
.about-meta{
  margin-top:34px; border-top:1px solid var(--line); padding-top:24px;
}
.about-meta > div{
  display:flex; gap:16px; padding:9px 0;
  border-bottom:1px solid rgba(226,216,195,.6);
  font-size:14.5px;
}
.about-meta > div:last-child{ border-bottom:0; }
.about-meta b{
  flex:none; width:72px; font-weight:600; color:var(--ink);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em;
}
.about-meta span{ color:var(--sub); }

/* ── 页脚 ── */
footer{
  background:var(--deep); color:rgba(246,241,229,.5);
  padding:54px 0 40px; font-size:13.5px;
}
.foot-grid{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.foot-col h4{
  font-family:var(--mono); color:#f6f1e5; font-size:12px;
  font-weight:600; margin:0 0 14px; letter-spacing:.14em;
}
.foot-col a{ display:block; color:rgba(246,241,229,.5); margin-bottom:9px; font-size:13.5px; }
.foot-col a:hover{ color:var(--vermilion); text-decoration:none; }
/* 备案号：法规要求可点击跳转工信部。底色 --deep #0c0a09 上：
   rgba(246,241,229,.55) ≈5.67:1 ✅   而 .foot-col a 的 .5 只有 4.85:1，
   所以这里要压过列链接的默认色（.foot-col a 是 (0,1,1)，本规则必须同为两段）。 */
.foot-col a.foot-icp,
.foot-icp{ color:rgba(246,241,229,.55); text-decoration:none; }
.foot-icp:hover{ color:var(--vermilion); text-decoration:none; }
.foot-bottom{
  margin-top:42px; padding-top:24px;
  border-top:1px solid rgba(246,241,229,.09);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:rgba(246,241,229,.34);
}
.foot-bottom .foot-icp{ color:rgba(246,241,229,.55); }

/* ── 响应式 ── */
@media (max-width:1000px){
  .stack{ grid-template-columns:repeat(2,1fr); }
  .lab-tabs{ grid-template-columns:repeat(3,1fr); }
  .lab-tab:nth-child(3n){ border-right:0; }
  .stats{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:820px){
  .works{ grid-template-columns:1fr; }
  .lab-tabs{ grid-template-columns:repeat(2,1fr); }
  .lab-tab{ border-right:1px solid rgba(246,241,229,.07); }
  .lab-tab:nth-child(3n){ border-right:1px solid rgba(246,241,229,.07); }
  .lab-tab:nth-child(2n){ border-right:0; }
  .lab-tab:nth-child(n+5){ border-bottom:0; }
  .lab-tab{ border-bottom:1px solid rgba(246,241,229,.07); }
  .lab-stage{ aspect-ratio:4/3; }
  .sec{ padding:78px 0; }
  .nav-links a:not(:last-child){ display:none; }
  .hero-lede{ font-size:14.5px; }
  .sec-lede{ margin-bottom:32px; }
}
@media (max-width:560px){
  .stack{ grid-template-columns:1fr; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .btn{ width:100%; }
  .hud{ font-size:10px; gap:10px; padding:7px 12px; }
  #hud-passes{ display:none; }
  .hud span:nth-child(4){ display:none; }
  .work{ padding:26px 22px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .lab-tabs{ grid-template-columns:repeat(2,1fr); }
  .lab-stage{ aspect-ratio:1/1; min-height:260px; }
  .lab-extra{ padding:14px 16px 0; }
  .lab-note{ padding:14px 16px 18px; font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rise{ opacity:1; transform:none; }
  .nav-brand .dot{ animation:none; }
}