/* =========================================================
   作品集 · 深蓝星空拟态
   深蓝星空 · 玻璃拟态 / 纯 CSS，无外部依赖
   ---------------------------------------------------------
   目录
   0. 设计令牌（深色 / 浅色）
   1. 基础重置
   2. 背景层（星云、噪点、星点画布、光标光晕）
   3. 导航
   4. 按钮 / 标签 / 小元件
   5. Hero
   6. 作品网格 + 卡片
   7. 关于
   8. 联络 / 页脚
   9. 作品舞台（内嵌 iframe）
   10. 动效与响应式
   ========================================================= */

/* ---------- 0. 设计令牌 ---------- */
:root{
  --bg-0:#04060f;
  --bg-1:#070b18;
  --bg-2:#0a1024;

  --ink:#eaf2ff;
  --ink-2:rgba(234,242,255,.72);
  --ink-3:rgba(234,242,255,.48);

  --line:rgba(150,190,255,.14);
  --line-2:rgba(150,190,255,.24);

  --glass-1:rgba(255,255,255,.085);
  --glass-2:rgba(255,255,255,.028);
  --glass-3:rgba(122,162,255,.07);

  --accent:#7fb6ff;
  --accent-2:#a78bfa;
  --accent-3:#6fe6ff;
  --warm:#ffd9a0;

  --shadow-lg:0 30px 80px -40px rgba(0,0,0,.95);
  --shadow-card:0 28px 64px -34px rgba(2,6,18,.9), 0 2px 10px -4px rgba(0,0,0,.5);

  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;

  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;

  --ease:cubic-bezier(.22,.68,0,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --star-opacity:.9;
  --nebula-opacity:.85;
  color-scheme:dark;
}

/* 浅色主题：把星空换成晨雾里的蓝纸 */
[data-theme="light"]{
  --bg-0:#eef3fb;
  --bg-1:#e7eef9;
  --bg-2:#dde7f5;

  --ink:#0c1a2e;
  --ink-2:rgba(12,26,46,.8);
  --ink-3:rgba(12,26,46,.58);

  --line:rgba(18,52,96,.14);
  --line-2:rgba(18,52,96,.26);

  --glass-1:rgba(255,255,255,.95);
  --glass-2:rgba(252,254,255,.88);
  --glass-3:rgba(232,243,252,.82);

  --accent:#2b62a8;
  --accent-2:#6b4fc4;
  --accent-3:#0d7d94;

  --shadow-lg:0 30px 70px -44px rgba(20,50,90,.5);
  --shadow-card:0 24px 50px -32px rgba(20,50,90,.45), 0 2px 8px -4px rgba(20,50,90,.16);

  --star-opacity:.34;
  --nebula-opacity:.5;
  color-scheme:light;
}

/* ---------- 1. 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color:rgba(150,190,255,.28) transparent;
}

body{
  min-height:100svh;
  background:var(--bg-0);
  color:var(--ink);
  font-family:"PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .5s var(--ease-soft), color .5s var(--ease-soft);
}

body.is-locked{overflow:hidden}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
code,kbd{font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace}

::selection{background:rgba(127,182,255,.28);color:#fff}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(150,190,255,.22);
  border:2px solid transparent;
  background-clip:content-box;
  border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{background:rgba(150,190,255,.4);background-clip:content-box}

/* ---------- 2. 背景层 ---------- */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.bg__deep{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 80% at 50% -18%, var(--bg-2) 0%, transparent 62%),
    radial-gradient(80% 60% at 92% 108%, rgba(84,58,140,.22) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 68%);
}

.nebula{
  position:absolute;
  border-radius:50%;
  opacity:var(--nebula-opacity);
  filter:blur(72px);
  mix-blend-mode:screen;
  will-change:transform;
}
[data-theme="light"] .nebula{mix-blend-mode:multiply;filter:blur(90px)}

.nebula--1{
  width:52vmax;height:52vmax;
  left:-14vmax;top:-16vmax;
  background:radial-gradient(circle at 40% 40%, rgba(58,110,220,.42), transparent 66%);
  animation:drift 34s var(--ease-soft) infinite alternate;
}
.nebula--2{
  width:46vmax;height:46vmax;
  right:-16vmax;top:8vmax;
  background:radial-gradient(circle at 50% 50%, rgba(120,72,200,.30), transparent 68%);
  animation:drift 46s var(--ease-soft) infinite alternate-reverse;
}
.nebula--3{
  width:60vmax;height:38vmax;
  left:26%;bottom:-24vmax;
  background:radial-gradient(circle at 50% 50%, rgba(38,150,190,.22), transparent 70%);
  animation:drift 58s var(--ease-soft) infinite alternate;
}

@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(4vmax,-3vmax,0) scale(1.12)}
}

.bg__grain{
  position:absolute;
  inset:0;
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* ---------- 2.1 海：浅色主题下的水下光景（夜晚完全不可见） ---------- */
.sea{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  transition:opacity 1.1s var(--ease-soft);
}
[data-theme="light"] .sea{opacity:1}

/* 水色：上方透亮，越往下越沉 */
.sea__water{
  position:absolute;
  inset:0;
  background:
    radial-gradient(48% 40% at 64% 21%, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 20%, rgba(230,248,255,.66) 36%, rgba(188,224,242,.3) 54%, rgba(150,200,226,0) 72%),
    radial-gradient(130% 90% at 46% 118%, rgba(40,104,144,.55) 0%, rgba(40,104,144,0) 58%),
    linear-gradient(178deg, #dcf0fb 0%, #bee1f2 24%, #9cc8de 56%, #86b8d1 100%);
}
.sea__water::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(196deg, rgba(8,58,86,0) 34%, rgba(8,58,86,.1) 66%, rgba(8,58,86,.26) 100%),
    radial-gradient(46% 42% at 64% 19%, rgba(10,66,100,0) 0%, rgba(10,66,100,.05) 62%, rgba(10,66,100,.14) 100%);
}

/* 水面透下来的光洞 */
.sea__beam{
  position:absolute;
  left:64%;
  top:21%;
  width:min(660px,64vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,.96) 0%,
    rgba(247,254,255,.88) 15%,
    rgba(216,243,252,.62) 32%,
    rgba(172,221,239,.28) 50%,
    rgba(150,200,226,0) 70%);
  filter:blur(12px);
  mix-blend-mode:screen;
  animation:beam-breathe 21s ease-in-out infinite;
}
.sea__core{
  position:absolute;
  left:64%;
  top:21%;
  width:min(230px,24vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,.72) 30%, rgba(255,255,255,.22) 58%, rgba(255,255,255,0) 78%);
  filter:blur(14px);
  mix-blend-mode:screen;
}
@keyframes beam-breathe{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.92}
  50%{transform:translate(-50%,-50%) scale(1.07);opacity:1}
}

/* 波光：一张无缝的水下光网，缓慢漂移。
   原先用 SVG 噪声平铺，模糊把 tile 边缘吃掉，铺开后会露出格子接缝，
   而且形状是斑块不是光网——改用预生成的无缝光网图。 */
.sea__caustics{
  position:absolute;
  inset:-16%;
  background-image:url("../img/caustics.png");
  background-size:86vmax 86vmax;
  background-repeat:repeat;
  opacity:.14;
  -webkit-mask-image:radial-gradient(74% 66% at 62% 26%, rgba(0,0,0,.14) 0%, rgba(0,0,0,.4) 34%, #000 54%, rgba(0,0,0,.46) 76%, rgba(0,0,0,.14) 93%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(74% 66% at 62% 26%, rgba(0,0,0,.14) 0%, rgba(0,0,0,.4) 34%, #000 54%, rgba(0,0,0,.46) 76%, rgba(0,0,0,.14) 93%, rgba(0,0,0,0) 100%);
  animation:caustics-flow 96s ease-in-out infinite;
  will-change:transform;
}
/* 第二层：换个尺度、转个角度，把平铺的重复感打散 */
.sea__caustics::after{
  content:"";
  position:absolute;
  inset:-30%;
  background-image:url("../img/caustics.png");
  background-size:139vmax 139vmax;
  opacity:.07;
  transform:rotate(23deg);
  animation:caustics-drift 128s linear infinite;
}
@keyframes caustics-flow{
  0%,100%{transform:translate3d(0,0,0) scale(1.02)}
  50%{transform:translate3d(-3.2%,2.2%,0) scale(1.05)}
}
@keyframes caustics-drift{
  0%{transform:rotate(23deg) translate3d(0,0,0)}
  50%{transform:rotate(23deg) translate3d(2.4%,-1.8%,0)}
  100%{transform:rotate(23deg) translate3d(0,0,0)}
}

.sea__grain{
  position:absolute;
  inset:0;
  opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* 鱼群 */
.school{
  position:absolute;
  left:0;
  top:var(--top,40%);
  width:0;
  height:0;
  will-change:transform;
}
.school--1{--top:30%;animation:school-swim 68s linear infinite;animation-delay:-14s}
.school--2{--top:57%;animation:school-swim 51s linear infinite;animation-delay:-34s}
.school--3{--top:75%;animation:school-swim 92s linear infinite;animation-delay:-62s}

@keyframes school-swim{
  0%{transform:translate3d(-32vw,0,0)}
  27%{transform:translate3d(8vw,-4.5vh,0)}
  56%{transform:translate3d(56vw,3vh,0)}
  81%{transform:translate3d(96vw,-3.2vh,0)}
  100%{transform:translate3d(144vw,0,0)}
}

.fish{
  position:absolute;
  left:var(--x,0);
  top:var(--y,0);
  width:var(--s,22px);
  opacity:var(--o,.55);
  color:#062b45;
}
.fish svg{
  display:block;
  width:100%;
  height:auto;
  fill:currentColor;
  animation:fish-bob var(--bob,5.6s) ease-in-out infinite;
  animation-delay:var(--bd,0s);
}
@keyframes fish-bob{
  0%,100%{transform:translate3d(0,0,0) rotate(-3.5deg)}
  50%{transform:translate3d(0,-5px,0) rotate(3.5deg)}
}

/* 绕着光洞打转的一小群 */
.school--ring{
  left:64%;
  top:21%;
  animation:ring-spin 130s linear infinite;
}
@keyframes ring-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.fish--r1{--x:19vmax;--y:-4vmax;--s:44px;--o:.64;transform:rotate(-16deg);--bd:-1.1s}
.fish--r2{--x:-16vmax;--y:6vmax;--s:36px;--o:.56;transform:rotate(14deg);--bd:-2.6s}
.fish--r3{--x:5vmax;--y:18vmax;--s:29px;--o:.48;transform:rotate(-26deg);--bd:-.4s}
.fish--r4{--x:-13vmax;--y:-13vmax;--s:40px;--o:.46;transform:rotate(22deg);--bd:-3.4s}

/* 横穿的三群 */
.school--1 .fish:nth-child(1){--x:0px;--y:0px;--s:48px;--o:.7;--bd:-.6s}
.school--1 .fish:nth-child(2){--x:52px;--y:24px;--s:34px;--o:.64;--bd:-2.1s}
.school--1 .fish:nth-child(3){--x:96px;--y:-16px;--s:27px;--o:.58;--bd:-1.4s}
.school--1 .fish:nth-child(4){--x:30px;--y:46px;--s:21px;--o:.5;--bd:-3.2s}
.school--1 .fish:nth-child(5){--x:132px;--y:6px;--s:31px;--o:.62;--bd:-2.7s}

.school--2 .fish:nth-child(1){--x:0px;--y:0px;--s:24px;--o:.68;--bd:-.3s}
.school--2 .fish:nth-child(2){--x:30px;--y:16px;--s:19px;--o:.6;--bd:-1.8s}
.school--2 .fish:nth-child(3){--x:58px;--y:-10px;--s:16px;--o:.54;--bd:-2.9s}
.school--2 .fish:nth-child(4){--x:18px;--y:-22px;--s:14px;--o:.5;--bd:-1.1s}
.school--2 .fish:nth-child(5){--x:82px;--y:12px;--s:20px;--o:.58;--bd:-2.2s}
.school--2 .fish:nth-child(6){--x:46px;--y:30px;--s:15px;--o:.46;--bd:-3.6s}

.school--3 .fish:nth-child(1){--x:0px;--y:0px;--s:32px;--o:.44;--bd:-.8s}
.school--3 .fish:nth-child(2){--x:40px;--y:20px;--s:24px;--o:.38;--bd:-2.4s}
.school--3 .fish:nth-child(3){--x:76px;--y:-12px;--s:19px;--o:.34;--bd:-1.6s}


.stars{
  position:fixed;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:var(--star-opacity);
  transition:opacity .6s var(--ease-soft);
}

.cursor-glow{
  position:fixed;
  z-index:1;
  width:520px;height:520px;
  left:0;top:0;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(110,170,255,.13), rgba(110,170,255,.05) 42%, transparent 70%);
  transform:translate3d(-50%,-50%,0);
  opacity:0;
  transition:opacity .5s var(--ease-soft);
  will-change:transform;
}
[data-theme="light"] .cursor-glow{background:radial-gradient(circle, rgba(80,140,220,.16), transparent 70%)}

.progress{
  position:fixed;
  left:0;top:0;
  z-index:60;
  width:100%;height:2px;
  background:transparent;
  pointer-events:none;
}
.progress i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--accent-3));
  box-shadow:0 0 14px rgba(127,182,255,.7);
  transition:width .1s linear;
}

/* 玻璃通用 */
.glass{
  background:linear-gradient(155deg, var(--glass-1), var(--glass-2) 46%, var(--glass-3));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  /* 不用 backdrop-filter：Chrome 在圆角元素上做背景模糊时，
     会把采样区扩到元素外，留下一块边缘笔直的矩形残影（浅色水面上非常明显）。
     这里用不透明度更高的底色替代，视觉几乎一致，也少一层 GPU 开销。 */
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.10);
}
[data-theme="light"] .glass{box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.9)}

/* ---------- 3. 导航 ---------- */
.nav-wrap{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  display:flex;
  justify-content:center;
  padding:clamp(12px,2vw,20px) var(--pad) 0;
  pointer-events:none;
}

.nav{
  pointer-events:auto;
  width:min(var(--maxw),100%);
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,28px);
  padding:10px 12px 10px 18px;
  border-radius:999px;
  transition:padding .4s var(--ease), background-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft), transform .4s var(--ease);
}
.nav.is-stuck{
  padding:8px 10px 8px 14px;
  background-color:rgba(8,13,26,.66);
  box-shadow:0 22px 50px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.12);
}
[data-theme="light"] .nav.is-stuck{background-color:rgba(255,255,255,.7)}

.nav__brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:600;
  letter-spacing:.01em;
  flex:0 0 auto;
}
.nav__mark{width:20px;height:20px;color:var(--accent);flex:0 0 auto}
.nav__mark svg{width:100%;height:100%}
.nav__name{font-size:15px}
.nav__en{
  font-size:10.5px;
  letter-spacing:.24em;
  color:var(--ink-3);
  transform:translateY(1px);
}

.nav__links{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  font-size:14px;
}
.nav__links a{
  position:relative;
  padding:7px 13px;
  border-radius:999px;
  color:var(--ink-2);
  transition:color .3s var(--ease-soft), background-color .3s var(--ease-soft);
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:50%;bottom:3px;
  width:0;height:1px;
  background:var(--accent);
  transform:translateX(-50%);
  transition:width .3s var(--ease);
  opacity:.9;
}
.nav__links a:hover{color:var(--ink);background:rgba(127,182,255,.08)}
.nav__links a:hover::after,.nav__links a.is-active::after{width:16px}
.nav__links a.is-active{color:var(--ink)}

.nav__right{display:flex;align-items:center;gap:8px;flex:0 0 auto}

.icon-btn{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid transparent;
  color:var(--ink-2);
  transition:color .3s, background-color .3s, border-color .3s, transform .3s var(--ease);
}
.icon-btn svg{width:17px;height:17px}
.icon-btn:hover{
  color:var(--ink);
  background:rgba(127,182,255,.12);
  border-color:var(--line);
  transform:translateY(-1px);
}
.icon-btn .i-sun{display:none}

/* 预览容器里开不了新标签时，按钮压暗但仍可点（点了给说明，不是无声失败） */
.icon-btn.is-blocked{opacity:.42}
.icon-btn.is-blocked:hover{transform:none;background:transparent;color:var(--ink-3)}
[data-theme="light"] .icon-btn .i-moon{display:none}
[data-theme="light"] .icon-btn .i-sun{display:block}

.nav__toggle{
  display:none;
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  place-items:center;
  position:relative;
}
.nav__toggle span{
  position:absolute;
  left:11px;
  width:16px;height:1.4px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .35s var(--ease), opacity .2s;
}
.nav__toggle span:first-child{transform:translateY(-3.5px)}
.nav__toggle span:last-child{transform:translateY(3.5px)}
.nav__toggle[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}

.nav__mobile{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:var(--pad);
  right:var(--pad);
  padding:10px;
  border-radius:var(--r-md);
  flex-direction:column;
}
.nav__mobile a{
  padding:11px 14px;
  border-radius:var(--r-sm);
  font-size:15px;
  color:var(--ink-2);
}
.nav__mobile a:hover{background:rgba(127,182,255,.1);color:var(--ink)}
.nav__mobile.is-open{display:flex}

/* ---------- 4. 按钮 ---------- */
.btn{
  --btn-bg:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:.02em;
  white-space:nowrap;
  border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, border-color .3s, color .3s;
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn:active{transform:scale(.975)}

.btn--primary{
  color:#08111f;
  background:linear-gradient(135deg,#cfe6ff,#8ec2ff 46%,#a9a2ff);
  box-shadow:0 14px 34px -16px rgba(127,182,255,.75), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn--primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.55) 46%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn--primary:hover::after{transform:translateX(120%)}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 44px -18px rgba(127,182,255,.85), inset 0 1px 0 rgba(255,255,255,.7);
}
[data-theme="light"] .btn--primary{color:#fff;background:linear-gradient(135deg,#3f78bd,#2b62a8 55%,#5b4bb5)}

.btn--ghost{
  color:var(--ink-2);
  border-color:var(--line);
  background:rgba(255,255,255,.04);
}
.btn--ghost:hover{
  color:var(--ink);
  border-color:var(--line-2);
  background:rgba(127,182,255,.1);
  transform:translateY(-2px);
}

.btn--sm{padding:9px 16px;font-size:13.5px}
.btn--sm svg{width:14px;height:14px}

.link-btn{
  color:var(--accent);
  border-bottom:1px solid rgba(127,182,255,.35);
  padding:0 1px;
  transition:color .25s, border-color .25s;
}
.link-btn:hover{color:var(--accent-3);border-color:var(--accent-3)}

kbd{
  display:inline-block;
  min-width:19px;
  padding:1px 5px;
  margin:0 1px;
  font-size:11px;
  line-height:1.6;
  text-align:center;
  color:var(--ink-2);
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:5px;
}

/* ---------- 5. Hero ---------- */
main{position:relative;z-index:2}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(18px,2.4vw,28px);
  width:min(var(--maxw),100%);
  margin-inline:auto;
  padding:clamp(120px,16vh,190px) var(--pad) clamp(70px,10vh,110px);
}

/* 右侧轨道装饰：让首屏右上不那么空 */
.hero__orb{
  position:absolute;
  z-index:-1;
  right:-6%;
  top:47%;
  width:min(46vw,560px);
  aspect-ratio:1;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.9;
  animation:orbFloat 16s ease-in-out infinite alternate;
}
@keyframes orbFloat{
  from{transform:translateY(-50%) translateY(-8px)}
  to{transform:translateY(-50%) translateY(10px)}
}

.orb-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(150,190,255,.16);
  transform-origin:50% 50%;
}
.orb-ring--1{inset:14%;border-color:rgba(150,190,255,.20);animation:spinSlow 60s linear infinite}
.orb-ring--2{inset:28%;border-style:dashed;border-color:rgba(167,139,250,.20);animation:spinSlow 90s linear infinite reverse}
.orb-ring--3{inset:4%;border-color:rgba(111,230,255,.10)}
@keyframes spinSlow{to{transform:rotate(360deg)}}

.orb-core{
  position:absolute;
  left:50%;top:50%;
  width:52%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(150,200,255,.30), rgba(120,120,255,.12) 44%, transparent 70%);
  filter:blur(26px);
  mix-blend-mode:screen;
}
.orb-core::after{
  content:none;
}
.orb-star{
  position:absolute;
  left:50%;top:50%;
  width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;
  border-radius:50%;
  background:#eef6ff;
  box-shadow:0 0 18px rgba(210,235,255,.95), 0 0 44px rgba(127,182,255,.65);
  animation:orbPulse 4.4s ease-in-out infinite;
}
@keyframes orbPulse{
  0%,100%{opacity:.75;transform:scale(.92)}
  50%{opacity:1;transform:scale(1.12)}
}

.orb-sat{
  position:absolute;
  left:50%;top:50%;
  width:100%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  animation:spinSlow 26s linear infinite;
}
.orb-sat::after{
  content:"";
  position:absolute;
  left:50%;top:0;
  width:7px;height:7px;
  margin-left:-3.5px;
  border-radius:50%;
  background:#cfe6ff;
  box-shadow:0 0 16px rgba(160,210,255,.95), 0 0 34px rgba(127,182,255,.55);
}
.orb-sat--2{
  width:72%;
  animation:spinSlow 17s linear infinite reverse;
}
.orb-sat--2::after{
  width:5px;height:5px;
  background:#d9c8ff;
  box-shadow:0 0 14px rgba(190,160,255,.9);
}

[data-theme="light"] .orb-ring{border-color:rgba(30,70,120,.14)}
[data-theme="light"] .orb-ring--1{border-color:rgba(30,70,120,.2)}
[data-theme="light"] .orb-sat::after{background:#2b62a8;box-shadow:0 0 14px rgba(43,98,168,.6)}

.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.pulse{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent-3);
  box-shadow:0 0 0 0 rgba(111,230,255,.6);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(111,230,255,.55)}
  70%{box-shadow:0 0 0 11px rgba(111,230,255,0)}
  100%{box-shadow:0 0 0 0 rgba(111,230,255,0)}
}

.hero__title{
  font-size:clamp(40px,8.4vw,104px);
  line-height:1.02;
  font-weight:600;
  letter-spacing:-.025em;
  display:flex;
  flex-direction:column;
  gap:.06em;
}
.hero__line{display:block}
.hero__line--accent{
  background:linear-gradient(96deg,#dbeaff 0%,#8ec2ff 30%,#a9a2ff 62%,#6fe6ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 6px 30px rgba(120,160,255,.28));
}
[data-theme="light"] .hero__line--accent{
  background:linear-gradient(96deg,#1f4c86 0%,#2b62a8 34%,#5b4bb5 68%,#0d7d94 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.hero__desc{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:46ch;
  font-size:clamp(14.5px,1.15vw,17px);
  color:var(--ink-2);
  line-height:1.85;
}
.hero__desc-hint{
  color:var(--ink-3);
  font-size:.92em;
}

.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}

.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);
  width:min(720px,100%);
  margin-top:clamp(16px,2.4vw,30px);
}
.stat{
  padding:16px 18px 15px;
  border-radius:var(--r-md);
  transition:transform .5s var(--ease), border-color .4s;
}
.stat:hover{transform:translateY(-3px);border-color:var(--line-2)}
.stat dt{
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.stat dd{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-top:2px;
}
.stat b{
  font-size:clamp(19px,2vw,25px);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}
.stat span{font-size:11.5px;color:var(--ink-3)}

.scroll-cue{
  position:absolute;
  left:var(--pad);
  bottom:clamp(22px,4vh,44px);
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  letter-spacing:.28em;
  color:var(--ink-3);
  transition:color .3s;
}
.scroll-cue:hover{color:var(--ink-2)}
.scroll-cue i{
  width:1px;height:40px;
  background:linear-gradient(180deg,var(--line-2),transparent);
  position:relative;
  overflow:hidden;
}
.scroll-cue i::after{
  content:"";
  position:absolute;
  left:0;top:-40%;
  width:1px;height:40%;
  background:linear-gradient(180deg,transparent,var(--accent));
  animation:cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue{
  0%{top:-40%;opacity:0}
  30%{opacity:1}
  100%{top:100%;opacity:0}
}

/* ---------- 6. 作品 ---------- */
.section{
  position:relative;
  width:min(var(--maxw),100%);
  margin-inline:auto;
  padding:clamp(60px,9vh,120px) var(--pad);
}

.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(20px,4vw,60px);
  margin-bottom:clamp(28px,4vw,48px);
}
.section__eyebrow{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  opacity:.85;
  margin-bottom:10px;
}
.section__title{
  font-size:clamp(26px,3.6vw,42px);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.15;
}
.dot-accent{color:var(--accent-2)}
.section__note{
  max-width:36ch;
  font-size:13.5px;
  color:var(--ink-3);
  line-height:1.85;
  padding-bottom:6px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}

.card{
  --mx:50%;
  --my:0%;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:var(--r-lg);
  transition:transform .55s var(--ease), border-color .45s, box-shadow .55s var(--ease);
  transform-style:preserve-3d;
  will-change:transform;
}
.card::before{
  /* 跟随指针的玻璃高光 */
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx) var(--my), rgba(150,200,255,.16), transparent 62%);
  opacity:0;
  transition:opacity .45s var(--ease-soft);
  pointer-events:none;
  z-index:3;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--line-2);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(150,190,255,.1), inset 0 1px 0 rgba(255,255,255,.14);
}
.card:hover::before{opacity:1}

.card__cover{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  color:#bcd8ff;
  isolation:isolate;
}
.card__cover::after{
  /* 底部渐隐，让图与文字衔接 */
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:46%;
  background:linear-gradient(180deg,transparent,rgba(4,6,15,.55));
  z-index:2;
  pointer-events:none;
}
[data-theme="light"] .card__cover::after{background:linear-gradient(180deg,transparent,rgba(230,238,250,.6))}

.cover__art{
  position:absolute;
  left:50%;top:50%;
  width:min(84%,340px);
  transform:translate(-50%,-50%);
  color:currentColor;
  opacity:.92;
  transition:transform .8s var(--ease), opacity .5s;
  z-index:1;
}
.card:hover .cover__art{transform:translate(-50%,-52%) scale(1.04)}

.card__no{
  position:absolute;
  left:16px;top:13px;
  z-index:3;
  font-size:11px;
  letter-spacing:.2em;
  color:rgba(234,242,255,.55);
  font-variant-numeric:tabular-nums;
}
[data-theme="light"] .card__no{color:rgba(12,26,46,.5)}

.card__glowbar{
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  z-index:3;
  background:linear-gradient(90deg,transparent,rgba(150,200,255,.5),transparent);
  opacity:0;
  transition:opacity .5s;
}
.card:hover .card__glowbar{opacity:1}

/* 六种封面底色（同一套蓝，各自偏一点） */
.cover--card{
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(126,182,255,.30), transparent 58%),
    radial-gradient(100% 90% at 88% 96%, rgba(167,139,250,.22), transparent 60%),
    linear-gradient(150deg,#0b1226,#080d1b);
}
.cover--weather{
  background:
    radial-gradient(100% 80% at 76% 16%, rgba(111,230,255,.26), transparent 56%),
    radial-gradient(120% 100% at 12% 100%, rgba(88,132,220,.34), transparent 60%),
    linear-gradient(150deg,#081226,#060a16);
}
.cover--particle{
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(146,120,255,.34), transparent 62%),
    radial-gradient(120% 90% at 14% 8%, rgba(72,144,255,.28), transparent 58%),
    linear-gradient(150deg,#0a0d20,#05070f);
}
.cover--games{
  background:
    radial-gradient(90% 80% at 24% 20%, rgba(90,200,255,.26), transparent 56%),
    radial-gradient(100% 90% at 86% 92%, rgba(255,150,190,.16), transparent 58%),
    linear-gradient(150deg,#091322,#060a14);
}
.cover--book{
  background:
    radial-gradient(110% 90% at 78% 22%, rgba(180,200,235,.22), transparent 58%),
    radial-gradient(100% 90% at 10% 96%, rgba(96,120,200,.3), transparent 60%),
    linear-gradient(150deg,#0a1020,#070a13);
}
.cover--film{
  background:linear-gradient(150deg,#0a1020,#05070f);
}

/* 浅色主题：封面也跟着换成白天，线稿转深蓝 */
[data-theme="light"] .card__cover{color:#1f4a7d}
[data-theme="light"] .cover--card{
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(116,168,236,.34), transparent 58%),
    radial-gradient(100% 90% at 88% 96%, rgba(150,130,222,.20), transparent 60%),
    linear-gradient(150deg,#f2f7ff,#e3ecf9);
}
[data-theme="light"] .cover--weather{
  background:
    radial-gradient(100% 80% at 76% 16%, rgba(96,196,214,.30), transparent 56%),
    radial-gradient(120% 100% at 12% 100%, rgba(102,150,224,.28), transparent 60%),
    linear-gradient(150deg,#eff6ff,#e1ecfa);
}
[data-theme="light"] .cover--particle{
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(132,116,232,.28), transparent 62%),
    radial-gradient(120% 90% at 14% 8%, rgba(84,144,232,.26), transparent 58%),
    linear-gradient(150deg,#f3f0ff,#e6e9fb);
}
[data-theme="light"] .cover--games{
  background:
    radial-gradient(90% 80% at 24% 20%, rgba(78,178,222,.26), transparent 56%),
    radial-gradient(100% 90% at 86% 92%, rgba(228,140,178,.18), transparent 58%),
    linear-gradient(150deg,#eef7ff,#e4edf8);
}
[data-theme="light"] .cover--book{
  background:
    radial-gradient(110% 90% at 78% 22%, rgba(150,176,214,.26), transparent 58%),
    radial-gradient(100% 90% at 10% 96%, rgba(104,132,206,.24), transparent 60%),
    linear-gradient(150deg,#f2f6fc,#e5ebf5);
}
[data-theme="light"] .cover--film{
  background:linear-gradient(150deg,#f6f1e8,#e9e2d6);
}
[data-theme="light"] .card__glowbar{
  background:linear-gradient(90deg,transparent,rgba(60,110,180,.35),transparent);
}

.cover__img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.88;
  transform:scale(1.02);
  transition:transform 1.1s var(--ease), opacity .6s;
  z-index:1;
}
.card:hover .cover__img{transform:scale(1.07);opacity:1}

.cover__play{
  position:absolute;
  left:50%;top:50%;
  z-index:3;
  width:54px;height:54px;
  display:grid;place-items:center;
  border-radius:50%;
  color:#08111f;
  background:rgba(240,247,255,.94);
  transform:translate(-50%,-50%);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6);
  transition:transform .5s var(--ease), background-color .3s;
}
.cover__play svg{width:22px;height:22px;margin-left:2px}
.card:hover .cover__play{transform:translate(-50%,-50%) scale(1.08);background:#fff}

.card__body{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:18px 20px 20px;
  flex:1;
}

.card__kicker{
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.card__title{
  font-size:clamp(18px,1.6vw,21px);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.32;
}
.card__desc{
  font-size:13.5px;
  line-height:1.8;
  color:var(--ink-2);
  flex:1;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:2px;
}
.tags li{
  font-size:11px;
  letter-spacing:.03em;
  color:var(--ink-3);
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.card__links{
  display:flex;
  gap:8px;
  margin-top:auto;
  padding-top:8px;
}

.card__sub{
  font-size:11.5px;
  color:var(--ink-3);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
}

.grid__foot{
  margin-top:clamp(22px,3vw,34px);
  font-size:12.5px;
  color:var(--ink-3);
  text-align:center;
}

/* ---------- 7. 关于 ---------- */
.about{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(14px,2vw,22px);
  align-items:start;
}

.about__text{
  padding:clamp(24px,3vw,40px);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.about__lead{
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.75;
  color:var(--ink);
  letter-spacing:-.005em;
}
.about__text > p{
  font-size:14px;
  line-height:1.9;
  color:var(--ink-2);
}

.about__meta{
  display:grid;
  gap:12px;
  margin-top:8px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.about__meta div{
  display:flex;
  gap:14px;
  font-size:13px;
}
.about__meta span{
  flex:0 0 46px;
  color:var(--ink-3);
  letter-spacing:.12em;
  font-size:11px;
  padding-top:3px;
}
.about__meta b{font-weight:500;color:var(--ink-2)}

.about__cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.2vw,14px);
}
.mini{
  padding:20px 18px;
  border-radius:var(--r-md);
  transition:transform .5s var(--ease), border-color .4s;
}
.mini:hover{transform:translateY(-4px);border-color:var(--line-2)}
.mini__no{
  font-size:10.5px;
  letter-spacing:.2em;
  color:var(--accent);
  opacity:.8;
}
.mini h3{
  font-size:15px;
  font-weight:600;
  margin:8px 0 6px;
}
.mini p{
  font-size:12.5px;
  line-height:1.8;
  color:var(--ink-3);
}

/* ---------- 8. 联络 ---------- */
.section--contact{padding-bottom:clamp(40px,6vh,80px)}

.contact{
  position:relative;
  padding:clamp(30px,5vw,64px);
  overflow:hidden;
  border-radius:var(--r-xl);
}
.contact::before{
  content:"";
  position:absolute;
  right:-12%;top:-40%;
  width:60%;aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(127,182,255,.20), transparent 66%);
  filter:blur(30px);
  pointer-events:none;
}
/* 联络区右侧的轨道装饰 */
.contact__orb{
  position:absolute;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  width:clamp(190px,22vw,300px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid var(--line);
  pointer-events:none;
}
.contact__orb::before{
  content:"";
  position:absolute;
  inset:19%;
  border-radius:50%;
  border:1px dashed var(--line);
}
.contact__orb i{
  position:absolute;
  inset:0;
  border-radius:50%;
  animation:spinSlow 38s linear infinite;
}
.contact__orb i::after{
  content:"";
  position:absolute;
  left:50%;top:0;
  width:6px;height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  background:#cfe6ff;
  box-shadow:0 0 16px rgba(170,215,255,.95);
}
.contact__orb b{
  position:absolute;
  left:50%;top:50%;
  width:46%;aspect-ratio:1;
  margin:-23% 0 0 -23%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(140,190,255,.22), rgba(150,130,255,.10) 46%, transparent 70%);
  filter:blur(18px);
  opacity:.75;
  mix-blend-mode:screen;
}

.contact__title{
  position:relative;
  z-index:1;
  font-size:clamp(30px,5vw,58px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.03em;
  margin:6px 0 16px;
}
.contact__desc{
  font-size:14px;
  color:var(--ink-2);
  line-height:1.9;
}
.contact__todo{
  display:inline-block;
  margin-top:6px;
  font-size:11.5px;
  color:var(--ink-3);
  border-bottom:1px dashed var(--line-2);
}
.contact__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 26px;
}
.contact__links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.contact__links li{display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.contact__links span{
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.contact__links a{color:var(--ink);border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.contact__links a:hover{border-color:var(--accent);color:var(--accent)}
.contact__links b{font-weight:500;color:var(--ink-2)}
.ok{color:#7ef0c0 !important}
.ok::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  margin-right:6px;
  border-radius:50%;
  background:#4ee6a5;
  box-shadow:0 0 10px rgba(78,230,165,.8);
  vertical-align:middle;
}

.foot{
  position:relative;
  z-index:2;
  padding:0 var(--pad) clamp(24px,4vh,40px);
}
.foot__inner{
  width:min(var(--maxw),100%);
  margin-inline:auto;
  padding-top:26px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--ink-3);
}
.foot__top{transition:color .3s}
.foot__top:hover{color:var(--ink-2)}

/* ---------- 9. 作品舞台 ---------- */
.stage{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:clamp(8px,2vw,22px);
}
.stage[hidden]{display:none}

.stage__backdrop{
  position:absolute;
  inset:0;
  background:radial-gradient(80% 70% at 50% 30%, rgba(10,18,38,.88), rgba(2,4,10,.95));
  opacity:0;
  transition:opacity .4s var(--ease-soft);
}
.stage.is-open .stage__backdrop{opacity:1}

.stage__panel{
  position:relative;
  width:min(1500px,100%);
  height:min(100%,1000px);
  display:flex;
  flex-direction:column;
  gap:10px;
  opacity:0;
  transform:translateY(14px) scale(.985);
  transition:opacity .45s var(--ease-soft), transform .55s var(--ease);
}
.stage.is-open .stage__panel{opacity:1;transform:none}

.stage__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px 8px 14px;
  border-radius:var(--r-md);
  flex:0 0 auto;
}
.stage__id{display:flex;align-items:center;gap:10px;min-width:0}
.stage__live{
  width:7px;height:7px;
  border-radius:50%;
  background:#4ee6a5;
  box-shadow:0 0 12px rgba(78,230,165,.9);
  flex:0 0 auto;
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:.4}50%{opacity:1}}
.stage__id > div{min-width:0}
.stage__bar b{
  display:block;
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stage__bar code{
  display:block;
  font-size:10.5px;
  color:var(--ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stage__tools{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.stage__tools .btn{margin-left:4px}

.stage__screen{
  position:relative;
  flex:1;
  min-height:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-2);
  background:#05070f;
  box-shadow:var(--shadow-lg);
}
.stage__screen iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#05070f;
}

.stage__loading{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#05070f;
  color:rgba(234,242,255,.6);
  font-size:13px;
  letter-spacing:.06em;
  transition:opacity .45s var(--ease-soft);
}
.stage__loading.is-done{opacity:0;pointer-events:none}
.spinner{
  width:22px;height:22px;
  border-radius:50%;
  border:1.6px solid rgba(150,190,255,.2);
  border-top-color:var(--accent);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.stage__hint{
  flex:0 0 auto;
  font-size:11.5px;
  color:rgba(234,242,255,.4);
  text-align:center;
  letter-spacing:.02em;
}

/* ---------- 10. 动效 ---------- */
/* 进场：默认可见（JS 挂了也不会白屏），加 .is-in 才播放动画 */
.reveal{opacity:1}
.reveal.is-in{
  animation:revealIn .85s var(--ease) both;
  animation-delay:var(--d,0ms);
}
@keyframes revealIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about{grid-template-columns:1fr}
  .about__cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .section__head{flex-direction:column;align-items:flex-start;gap:14px}
  .section__note{max-width:52ch}
}

@media (max-width:860px){
  .nav__links{display:none}
  .nav__toggle{display:grid}
  .nav{padding:8px 10px 8px 14px}
  .hero__orb{display:none}
  .contact__orb{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact__links{grid-template-columns:1fr 1fr}
  .stage__hint{display:none}
}

@media (max-width:720px){
  .grid{grid-template-columns:1fr}
  .card__cover{aspect-ratio:16/9}
  .hero{padding-top:clamp(100px,14vh,140px)}
  .scroll-cue{display:none}
  .stage{padding:0}
  .stage__panel{height:100%;gap:0}
  .stage__bar{border-radius:0;padding:8px 10px}
  .stage__screen{border-radius:0;border-left:0;border-right:0}
  .stage__tools .icon-btn[data-act="full"]{display:none}
  .nav__en{display:none}
  .contact__links{grid-template-columns:1fr}
  .foot__inner{flex-direction:column;align-items:flex-start;gap:6px}

  /* 小屏：海面元素收一点，别抢正文 */
  .sea__beam{left:58%;top:15%;width:min(520px,104vw)}
  .sea__core{left:58%;top:15%;width:132px}
  .sea__caustics{opacity:.12;background-size:132vmax 132vmax}
  .sea__caustics::after{opacity:.06;background-size:205vmax 205vmax}
  .school--ring{display:none}
  .school--3{display:none}
  .school--2 .fish:nth-child(n+4){display:none}
  .school--1 .fish:nth-child(n+4){display:none}
  .school--1 .fish:nth-child(1){--s:28px}
  .school--1 .fish:nth-child(2){--s:21px}
  .school--1 .fish:nth-child(3){--s:16px}
}

@media (max-width:420px){
  .card__links{flex-wrap:wrap}
  .stats{gap:8px}
  .stat{padding:12px 13px}
}

/* 触摸设备取消 hover 位移，避免“卡住” */
@media (hover:none){
  .card:hover{transform:none}
  .mini:hover,.stat:hover{transform:none}
}

/* 减少动态 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .stars{display:none}
  .school{display:none}
}

/* 打印：干净一点 */
@media print{
  .bg,.stars,.cursor-glow,.progress,.nav-wrap,.stage,.scroll-cue{display:none !important}
  body{background:#fff;color:#000}
  .glass{border:1px solid #ddd;box-shadow:none;background:#fff}
  .card{break-inside:avoid}
}