/* =========================================================
   Design tokens —— 参考图风格：黑+白+单一青色
   ========================================================= */
:root{
  --bg:        #0a0a0b;
  --bg-2:      #0f0f12;
  --surface:   #141418;
  --surface-2: #1a1a1f;
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.14);
  --text:      #f1f1f3;
  --text-2:    #d8d8de;
  --muted:     #8a8a92;
  --muted-2:   #5e5e66;
  --accent:    #19e3ff;
  --accent-2:  #6ff0ff;
  --accent-soft: rgba(25,227,255,0.14);
  --glow:      rgba(25,227,255,0.35);
  --maxw:      1200px;
  --ease:      cubic-bezier(.2,.7,.2,1);
  /* 字体：已移除 Google Fonts（国内加载超时/失败会拖慢首屏）。
     改用系统字体栈 —— Windows 用微软雅黑，macOS 用苹方，国内外都能秒开、零网络请求。 */
  --serif:     "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  --sans:      "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

/* =========================================================
   NAV —— GlassSurface 毛玻璃横条（React Bits 风格）
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;  /* 钉在最顶层常驻：高于 glow-cursor(900)，常亮拖尾不会糊住玻璃条；全屏视频灯箱 1100 盖在其上 */
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,3rem);
  transition:box-shadow .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent;
}
/* 关键修复：nav 同时挂 .nav 与 .glass-surface 两个类。
   .glass-surface 自带 position:relative（源码顺序在其后），会覆盖上面的 position:fixed，
   使横条变成相对定位、随页面一起滚走——这就是用户反复反馈"滚动后横条消失"的真正根因。
   用更高优先级选择器把固定定位锁死。 */
.nav.glass-surface{ position:fixed; }
/* ====== GlassSurface：外层毛玻璃 ======
   BASE 层即稳定的毛玻璃（blur+saturate）—— 任何支持 backdrop-filter 的浏览器都能正确呈现
   关键：底色用偏亮的蓝灰渐变 + 高不透明度，让 bar 在深色夜空/黑色区背景下也"读得出"是明亮的玻璃。
   即使 SVG 滤镜失效也只丢失色散，不会变黑、不会"退下"。 */
.glass-surface{
  position:relative;
  display:flex;
  overflow:hidden;
  isolation:isolate;
  border-radius:0;        /* 顶部横条无圆角；圆角由 data-glass-border-radius 覆盖 */
  /* 半透明毛玻璃：进一步降低底色不透明度，让背后 360° 全景/页面内容更清晰透出，呈现真正的"玻璃"质感；
     顶部高光 + 青色边线 + 青色外发光仍保证深色背景下读得出是一条发亮的玻璃 */
  background:linear-gradient(180deg, rgba(60,74,100,0.34) 0%, rgba(30,42,62,0.30) 100%);
  backdrop-filter:blur(2px) saturate(var(--glass-saturation, 2)) brightness(1.18);
  -webkit-backdrop-filter:blur(2px) saturate(var(--glass-saturation, 2)) brightness(1.18);
  /* 清晰的玻璃边缘 + 极淡的青色光晕，托住整条 bar */
  border-bottom:1px solid rgba(25,227,255,0.42);
  box-shadow:
    inset 0 1px 0 0 rgba(25,227,255,0.5),     /* 顶部青色边线 */
    inset 0 -1px 0 0 rgba(255,255,255,0.08),  /* 底部反光 */
    0 0 36px rgba(25,227,255,0.24),           /* 青色外发光：把 bar 钉在视口最顶端，深色背景下也显眼 */
    0 12px 40px rgba(0,0,0,0.45),             /* 落下阴影 */
    0 2px 8px rgba(0,0,0,0.25);
  transition:box-shadow .4s var(--ease);
}
/* React Bits 色散滤镜：在 Chrome/Edge 上叠加到 BASE 之上，
   url(#filter) 失效时，blur(6px) 兜底仍然保证磨砂玻璃质感（不会变黑） */
.glass-surface--svg{
  backdrop-filter:blur(1px) var(--glass-filter-id) saturate(var(--glass-saturation, 2)) brightness(1.14);
  -webkit-backdrop-filter:blur(1px) var(--glass-filter-id) saturate(var(--glass-saturation, 2)) brightness(1.14);
}
/* Safari / Firefox：纯 CSS 兜底，底色再亮一档以保证可见性 */
.glass-surface--fallback{
  background:linear-gradient(180deg, rgba(62,78,104,0.44) 0%, rgba(32,44,64,0.40) 100%);
}
/* 滤镜 SVG 作为元素子节点注入，不参与交互、不可见 */
.glass-surface__filter{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:0;z-index:-1;pointer-events:none;
}
/* 在 bar 上盖一道极淡的对角反光，强化"玻璃质感"的可读性（独立于背景亮度） */
.glass-surface::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 64%, rgba(255,255,255,0.06) 100%);
  pointer-events:none;z-index:0;
}
/* 导航内的实际内容必须盖在 ::before 反光之上 */
.nav__links,.nav__lang{position:relative;z-index:1}
/* 滚动后加深阴影 + 强化青色外发光，让 bar 在内容区也清晰"悬浮" */
.nav.is-scrolled{
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 0 rgba(255,255,255,0.06),
    0 0 34px rgba(25,227,255,0.22),
    0 16px 48px rgba(0,0,0,0.50);
}
.nav__brand{
  font-family:var(--serif);
  font-size:1.3rem;
  letter-spacing:.01em;
  color:var(--text);
}
/* ====== 导航胶囊：直接参照右上角 .nav__lang 的动效（描边 → 实心填充 + 深字 + 青色外发光） ======
   关键修复：旧的灰色 pill 在深色玻璃条上完全看不见（用户误以为"横条消失"）。
   改为青色描边 + 青色字，hover 与中/EN 完全一致 —— 横条里的控件始终清晰可辨。 */
.nav__links{
  display:flex;align-items:center;gap:.5rem;
  /* 透明容器：让 3 个 pill 独立呈现，与右侧 .nav__lang 视觉一致 */
}
.nav__links li{display:flex}

.pill{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:.45rem 1.05rem;
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  border-radius:999px;
  font-size:.82rem;letter-spacing:.06em;font-weight:500;
  text-decoration:none;
  cursor:pointer;
  transition:.3s var(--ease);
}
.pill:hover{
  background:var(--accent);
  color:#061012;
  box-shadow:0 0 24px var(--glow);
}
.nav__lang{
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  padding:.45rem 1.05rem;
  border-radius:999px;
  font-size:.82rem;
  letter-spacing:.06em;
  font-weight:500;
  transition:.3s var(--ease);
}
.nav__lang:hover{
  background:var(--accent);
  color:#061012;
  box-shadow:0 0 24px var(--glow);
}

/* =========================================================
   HERO —— 360° 全景图查看器
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:6rem clamp(1.2rem,4vw,3rem);
  overflow:hidden;
  background:#0a0a0b;  /* 全景图加载前的占位色 */
  isolation:isolate;
}
/* 360° 全景图容器（Three.js 渲染到这里） */
.hero__pano{
  position:absolute;inset:0;
  z-index:0;
  cursor:grab;
  background:#0a0a0b;
}
.hero__pano:active{cursor:grabbing}
/* 50% 纯黑色遮罩：压暗背景让前景可读 */
.hero__veil{
  position:absolute;inset:0;
  z-index:1;
  background:rgba(0,0,0,0.50);
  pointer-events:none;
}
/* 方案A：首页尾部渐隐到黑，与关于页开场黑起衔接，形成暗色过渡走廊 */
.hero::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:45vh;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 70%, #000 100%);
}
/* 居中的内容列：名字 + 名字下方的卡片 */
.hero__content{
  position:relative;z-index:3;
  width:100%;max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(1.2rem,4vw,3rem);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.8rem,4vw,3rem);
  text-align:center;
}
/* 右下角拖拽提示 */
.hero__hint{
  position:absolute;right:clamp(1rem,3vw,2rem);bottom:1.4rem;
  z-index:3;
  font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.18);
  padding:.4rem .8rem;border-radius:999px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  pointer-events:none;
  user-select:none;
  animation:hintFade 6s ease-in-out infinite;
}
@keyframes hintFade{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
/* 中央文字组：上方小标 + 下方主标，参考「PERSONAL WEBSITE / TINA SHEN」版式 */
.hero__text{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(0.5rem,1.2vw,0.9rem);
  text-align:center;
}
/* 上方小标：全大写、宽字距、半透明白（参考图 PERSONAL WEBSITE） */
.hero__eyebrow{
  margin:0;
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(0.78rem,1.15vw,0.95rem);
  letter-spacing:0.5em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.78);
  text-indent:0.5em; /* 抵消 letter-spacing 让视觉居中 */
  white-space:nowrap;
  text-shadow:0 2px 18px rgba(0,0,0,0.35);
}
/* 下方主标：渐变流动文字 + 鼠标驱动色相（参考图 TINA SHEN 巨型白字） */
.hero__name{
  position:relative;z-index:3;
  margin:0;
  align-self:center;
  font-family:var(--sans);
  font-weight:900;
  line-height:0.95;
  font-size:clamp(3.6rem,12vw,8.5rem);
  letter-spacing:-0.015em;
  text-align:center;
  padding:0 1rem;
  /* 多彩 baseline：青 → 绿 → 紫 → 青，首尾同色无缝循环 */
  background:linear-gradient(100deg,#19e3ff 0%,#10b981 35%,#a78bfa 65%,#19e3ff 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  /* yoyo 来回流动 + 鼠标驱动色相偏移（由 main.js 设置 --hue） */
  animation:heroNameFlow 5s ease-in-out infinite alternate;
  filter:hue-rotate(calc(var(--hue, 0) * 1deg))
          drop-shadow(0 6px 40px rgba(255,255,255,0.18))
          drop-shadow(0 0 80px rgba(25,227,255,0.15));
  cursor:default;
}
@keyframes heroNameFlow{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}
/* 名字下方的卡片行 */
.hero__cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.4vw,1.6rem);
  width:100%;
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(5rem,12vh,9rem) clamp(1.2rem,4vw,3rem);
}
.section__head{margin-bottom:3.2rem}
.section__label{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem,5.5vw,4.2rem);
  letter-spacing:-.01em;
  line-height:1.1;
  color:var(--text);
  margin-bottom:.8rem;
}
.section__sub{
  color:var(--muted);
  font-size:1rem;
  max-width:56ch;
}
.section__subhead{
  display:flex;align-items:center;gap:1.2rem;
  margin:5rem 0 1.6rem;
}
.section__sublabel{
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--text);
  letter-spacing:.05em;
}
.section__subline{
  color:var(--muted);
  font-size:.9rem;
  flex:1;
  position:relative;
}
.section__subline::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  border-top:1px dashed var(--border);
  z-index:-1;
}

/* =========================================================
   SERIES GRID
   ========================================================= */
.series-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.4rem;
}
.series-card{
  position:relative;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:4/3;
  cursor:pointer;
  perspective:900px;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 12px 44px rgba(0,0,0,0.38);
  transition:box-shadow .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.series-card:hover{
  border-color:rgba(255,255,255,0.42);
  transform:translateY(-4px);
  box-shadow:0 26px 64px rgba(0,0,0,0.5),0 0 32px var(--accent-soft);
}
/* 3D 倾斜内层 */
.series-card__tilt{
  position:absolute;inset:0;z-index:1;
  transform-style:preserve-3d;
  transition:transform .14s var(--ease);
  will-change:transform;
}
.series-card__bg{position:absolute;inset:0;z-index:0}
.series-card__shade{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,0.8) 100%);
}
/* 鼠标跟随表面光晕 */
.series-card__glow{
  position:absolute;inset:0;z-index:2;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(25,227,255,0.22),transparent 55%);
  opacity:0;
  transition:opacity .35s var(--ease);
  mix-blend-mode:screen;
  pointer-events:none;
}
.series-card:hover .series-card__glow{opacity:1}
/* 鼠标跟随边缘光晕 */
.series-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),var(--accent),transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s var(--ease);
  pointer-events:none;z-index:5;
}
.series-card:hover::before{opacity:1}
.series-card__count{
  position:absolute;top:1.1rem;left:1.1rem;
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--text);
  z-index:4;
  background:rgba(0,0,0,0.35);
  padding:.25rem .7rem;
  border-radius:999px;
  backdrop-filter:blur(4px);
}
.series-card__meta{
  position:absolute;left:1.4rem;right:1.4rem;bottom:1.3rem;
  z-index:4;
}
.series-card__title{
  font-family:var(--serif);
  font-size:1.55rem;
  color:var(--text);
  margin-bottom:.3rem;
}
.series-card__desc{
  color:var(--text-2);
  font-size:.9rem;
}
/* 视频提示：居中播放按钮，悬停浮现 */
.series-card__play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:rgba(0,0,0,0.42);
  border:1px solid rgba(255,255,255,0.55);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.15rem;padding-left:.18em;
  z-index:4;opacity:0;
  transition:opacity .3s var(--ease);
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.series-card:hover .series-card__play{opacity:1}

/* =========================================================
   FEATURED GRID
   ========================================================= */
.featured-grid{
  columns:3;
  column-gap:1.2rem;
}
.feat{
  position:relative;
  break-inside:avoid;
  margin-bottom:1.2rem;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  border:1px solid var(--border);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;
  background:var(--surface);
}
.feat:hover{
  transform:translateY(-5px);
  border-color:var(--border-2);
  box-shadow:0 18px 44px rgba(0,0,0,0.5),0 0 22px var(--accent-soft);
}
.feat__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:1rem 1.1rem;
  background:linear-gradient(transparent,rgba(0,0,0,0.85));
  font-size:.9rem;
  color:var(--text);
  opacity:0;
  transition:opacity .3s;
}
.feat:hover .feat__cap{opacity:1}

/* placeholder */
.ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1.2rem;
}
.ph__title{
  font-family:var(--serif);
  font-size:clamp(1.05rem,2.2vw,1.55rem);
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,0.6);
  max-width:90%;
}
.ph__tag{
  margin-top:.7rem;
  font-size:.62rem;
  letter-spacing:.28em;
  color:rgba(255,255,255,0.8);
  border:1px solid rgba(255,255,255,0.3);
  padding:.2rem .6rem;
  border-radius:999px;
}
.feat .ph{position:relative;aspect-ratio:3/4}
.feat .ph--wide{aspect-ratio:4/3}

/* =========================================================
   ABOUT
   ========================================================= */
.about__intro{
  max-width:70ch;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:3.2rem;
  text-align:center;
}
.about__intro p{
  color:var(--text-2);
  font-size:1.05rem;
  margin-bottom:1rem;
  line-height:1.75;
}
.about__tags{
  display:flex;flex-wrap:wrap;gap:.7rem;
  margin-top:1.6rem;
}
.about__tags li{
  font-size:.85rem;
  padding:.45rem 1.1rem;
  border:1px solid var(--border-2);
  border-radius:999px;
  color:var(--text-2);
  transition:.3s var(--ease);
}
.about__tags li:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* 关于页背景视频 —— 随滚动方向擦除播放（向下=正放，向上=倒放）；上覆与首页一致的黑色蒙版 */
#about{
  position:relative; min-height:100vh; width:100%; max-width:none;
}
.about__bg{
  position:absolute; top:0; bottom:0; left:0; right:0;
  z-index:0; pointer-events:none;
}
.about__bg video{
  width:100%; height:100%;
  object-fit:cover; display:block;
  /* 方案A：顶部渐隐到黑，与首页尾部黑起衔接，形成暗色过渡走廊 */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
}
.about__veil{
  position:absolute; top:0; bottom:0; left:0; right:0;
  z-index:1;
  background:rgba(0,0,0,0.50);   /* 与首页 .hero__veil 一致的黑色蒙版 */
  pointer-events:none;
}
/* 关于页内容层级抬到视频/蒙版之上 */
#about > .section__head,
#about > .about__intro,
#about > .process-card{ position:relative; z-index:2; }
/* 关于页：标题水平居中（参考截图里用户期望的样式） */
#about > .section__head{ text-align:center; }
#about > .section__head .section__label{ margin-left:auto; margin-right:auto; }

/* 重新排版的自我介绍 —— 清晰的层级与排版 */
.about__lead{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.6rem);
  line-height:1.25;
  letter-spacing:.01em;
  color:var(--text);
  margin-bottom:.6rem;
}
.about__role{
  font-family:var(--sans);
  font-size:clamp(1.05rem,2vw,1.35rem);
  font-weight:500;
  letter-spacing:.04em;
  color:var(--accent);
  margin-bottom:1.6rem;
}
.about__skills{
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin-bottom:1.6rem;
  justify-content:center;
}
.about__skills li{
  font-size:.9rem;
  padding:.5rem 1.1rem;
  border:1px solid var(--accent);
  border-radius:999px;
  color:var(--accent);
  background:rgba(25,227,255,0.06);
  transition:.3s var(--ease);
}
.about__skills li:hover{
  background:var(--accent);
  color:#061012;
  box-shadow:0 0 22px var(--glow);
}
.about__closing{
  color:var(--text-2);
  font-size:1.02rem;
  line-height:1.8;
  max-width:62ch;
}

/* 创作流程卡片 —— 大号青色描边数字 */
.process-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:22px;
  padding:clamp(1.8rem,4vw,2.6rem);
  max-width:var(--maxw);
  margin-left:auto;
  margin-right:auto;
}
.process-card__label{
  font-family:var(--serif);
  font-size:1.05rem;
  color:#d8dde3;
  margin-bottom:1.6rem;
  letter-spacing:.05em;
  text-align:center;
}
.process{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.4rem;
}
.step{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding:1.2rem 0;
  border-top:1px solid var(--border);
  text-align:center;
}
.step__num{
  font-family:var(--serif);
  font-size:clamp(3rem,6.5vw,5rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.4px var(--accent);
  text-stroke:1.4px var(--accent);
  transition:color .4s,text-shadow .4s;
}
.step:hover .step__num{
  color:var(--accent);
  text-shadow:0 0 28px var(--glow);
}
.step__lbl{
  font-size:.78rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.92);
  font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,0.35);
}

/* 创作流程卡片：套用顶部玻璃横条同款质感（参照 .nav / .glass-surface）——
   data-glass 已让 glass-surface.js 注入 SVG 色散滤镜（与顶栏一致）；
   这里用更高优先级选择器覆盖 .glass-surface 的 flex 布局与圆角为 0，
   并显式给出与顶栏相同的底色 / 青色边线 / 青色外发光，使卡片呈现同款玻璃。 */
.process-card.glass-surface{
  display:block;                 /* 覆盖 .glass-surface 的 flex，保留卡片纵向布局 */
  border-radius:22px;            /* 覆盖 .glass-surface 的圆角为 0，保持卡片圆角 */
  background:linear-gradient(180deg, rgba(60,74,100,0.34) 0%, rgba(30,42,62,0.30) 100%);
  border:1px solid rgba(25,227,255,0.42);
  box-shadow:
    inset 0 1px 0 0 rgba(25,227,255,0.5),     /* 顶部青色边线（与顶栏一致） */
    inset 0 -1px 0 0 rgba(255,255,255,0.08),
    0 0 36px rgba(25,227,255,0.24),           /* 青色外发光 */
    0 12px 40px rgba(0,0,0,0.45),
    0 2px 8px rgba(0,0,0,0.25);
}
/* 内容抬到玻璃反光（.glass-surface::before）之上，避免被淡白渐变压暗 */
.process-card.glass-surface .process-card__label,
.process-card.glass-surface .process{
  position:relative;
  z-index:1;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:22px;
  padding:clamp(1.8rem,4vw,2.8rem);
}

/* 邮箱 + 小红书 —— 相同风格的图标按钮（并排） */
.contact__icons{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  margin-bottom:2.4rem;
}
.contact__icon{
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem 1.3rem;
  background:transparent;
  border:1px solid var(--accent);
  border-radius:16px;
  color:var(--accent);
  text-decoration:none;
  transition:.3s var(--ease);
  min-width:0;
}
.contact__icon:hover{
  background:var(--accent);
  color:#061012;
  box-shadow:0 0 24px var(--glow);
  transform:translateY(-2px);
}
/* SVG 容器：圆角方块，统一两个图标的视觉重量 */
.contact__icon-glyph{
  flex:0 0 auto;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid currentColor;
  border-radius:12px;
  background:rgba(25,227,255,0.06);
  transition:.3s var(--ease);
}
.contact__icon:hover .contact__icon-glyph{
  background:rgba(6,16,18,0.18);
  border-color:rgba(6,16,18,0.35);
}
/* 文字堆：上小标签 + 下值（邮箱 / 主页名），允许邮箱地址正常换行 */
.contact__icon-stack{
  display:flex;flex-direction:column;gap:.15rem;
  min-width:0;flex:1 1 auto;
}
.contact__icon-label{
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  opacity:.85;
}
.contact__icon-value{
  font-family:var(--serif);
  font-size:1.05rem;
  letter-spacing:.01em;
  color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .3s;
}
.contact__icon:hover .contact__icon-value{color:#061012}

/* =========================================================
   COMMENTS —— 留言区（localStorage 持久化，无后端）
   ========================================================= */
.comments{
  border-top:1px solid var(--border);
  padding-top:2rem;
}
.comments__head{
  display:flex;align-items:center;justify-content:center;
  gap:1rem;
  margin-bottom:1.4rem;
  position:relative;
}
.comments__title{
  font-family:var(--serif);
  font-size:1.05rem;
  color:#d8dde3;
  letter-spacing:.05em;
  text-align:center;
}
/* 管理员登录/登出按钮：紧贴标题右侧（绝对定位让标题保持真正居中） */
.comments__admin-btn{
  position:absolute;
  top:50%;right:0;
  transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:.45rem;
  background:transparent;
  border:1px solid var(--border-2);
  border-radius:999px;
  color:var(--muted);
  padding:.35rem .85rem;
  font-size:.72rem;
  letter-spacing:.08em;
  font-family:inherit;
  cursor:pointer;
  transition:.3s var(--ease);
}
.comments__admin-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.comments__admin-btn.is-authed{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-soft);
}
.comments__admin-icon{display:inline-flex;align-items:center}
.comments__form{
  display:flex;flex-direction:column;gap:.9rem;
  margin-bottom:2rem;
}
/* 管理员密码面板：默认隐藏，点击"管理员登录"后展开 */
.comments__admin-panel{
  display:none;
  align-items:center;gap:.7rem;flex-wrap:wrap;
  margin:-1rem 0 1.6rem;
  padding:.9rem 1rem;
  border:1px dashed var(--border-2);
  border-radius:14px;
  background:rgba(25,227,255,0.04);
}
.comments__admin-panel.is-open{display:flex}
.comments__admin-input{
  flex:1 1 220px;
  min-width:160px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border-2);
  color:var(--text);
  font-family:var(--sans);
  font-size:.95rem;
  padding:.55rem .2rem;
  transition:border-color .3s;
}
.comments__admin-input:focus{outline:none;border-bottom-color:var(--accent)}
.comments__admin-input::placeholder{color:var(--muted-2)}
.comments__admin-submit,
.comments__admin-cancel{
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  padding:.45rem 1.1rem;
  border-radius:999px;
  font-size:.78rem;
  letter-spacing:.06em;
  font-family:inherit;
  cursor:pointer;
  transition:.3s var(--ease);
}
.comments__admin-submit:hover,
.comments__admin-cancel:hover{
  background:var(--accent);
  color:#061012;
}
.comments__admin-cancel{border-color:var(--border-2);color:var(--muted)}
.comments__admin-cancel:hover{border-color:var(--accent);color:#061012}
.comments__admin-hint{
  flex-basis:100%;
  margin:0;
  font-size:.74rem;
  color:var(--muted-2);
  letter-spacing:.04em;
}
.comments__admin-hint.is-error{color:#ff6b6b}
.comments__input,
.comments__textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border-2);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  padding:.9rem .2rem;
  transition:border-color .3s;
  resize:vertical;
}
.comments__input:focus,
.comments__textarea:focus{
  outline:none;
  border-bottom-color:var(--accent);
}
.comments__input::placeholder,
.comments__textarea::placeholder{color:var(--muted-2)}
.comments__submit{
  align-self:flex-start;
  margin-top:.4rem;
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  padding:.65rem 1.5rem;
  border-radius:999px;
  font-size:.88rem;
  letter-spacing:.05em;
  font-family:inherit;
  cursor:pointer;
  transition:.3s var(--ease);
}
.comments__submit:hover{
  background:var(--accent);
  color:#061012;
  box-shadow:0 0 24px var(--glow);
}
/* 留言列表 */
.comments__list{
  display:flex;flex-direction:column;gap:1.2rem;
}
.comments__empty{
  color:var(--muted-2);
  font-size:.92rem;
  text-align:center;
  padding:1.6rem 0 .4rem;
}
.comments__empty.is-hidden{display:none}
.comment{
  display:flex;gap:.95rem;
  padding:1rem 1.2rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,0.025);
  transition:border-color .3s,background .3s;
}
.comment:hover{
  border-color:var(--border-2);
  background:rgba(255,255,255,0.045);
}
/* 头像：取留言者名字的首字，做圆形单字 */
.comment__avatar{
  flex:0 0 auto;
  width:38px;height:38px;
  border-radius:50%;
  background:linear-gradient(160deg,var(--accent) 0%, #0a8aa6 100%);
  color:#061012;
  font-family:var(--serif);
  font-weight:700;
  font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:0;
  box-shadow:0 0 16px rgba(25,227,255,0.18);
}
.comment__body{
  flex:1 1 auto;
  min-width:0;
  display:flex;flex-direction:column;gap:.4rem;
}
.comment__meta{
  display:flex;align-items:baseline;gap:.7rem;
  flex-wrap:wrap;
}
.comment__name{
  font-family:var(--serif);
  font-size:.98rem;
  color:var(--text);
}
.comment__time{
  font-size:.74rem;
  color:var(--muted-2);
  letter-spacing:.04em;
}
.comment__text{
  color:var(--text-2);
  font-size:.95rem;
  line-height:1.7;
  white-space:pre-wrap;      /* 保留用户换行 */
  word-break:break-word;
}
/* 管理员已登入时：留言头部右侧加删除按钮；留言加柔和的青色描边 */
.comments.is-authed .comment{
  border-color:rgba(25,227,255,0.32);
  background:rgba(25,227,255,0.04);
}
.comment__delete{
  flex:0 0 auto;
  align-self:flex-start;
  background:transparent;
  border:1px solid rgba(255,107,107,0.45);
  color:#ff6b6b;
  font-size:.72rem;
  letter-spacing:.06em;
  padding:.25rem .7rem;
  border-radius:999px;
  font-family:inherit;
  cursor:pointer;
  transition:.25s var(--ease);
  display:none;  /* 默认隐藏；管理员登入后才显示 */
}
.comments.is-authed .comment__delete{display:inline-flex;align-items:center;gap:.3rem}
.comment__delete:hover{
  background:#ff6b6b;
  color:#1a0505;
  border-color:#ff6b6b;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  max-width:var(--maxw);
  margin:0 auto;
  padding:3rem clamp(1.2rem,4vw,3rem) 3.5rem;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.85rem;
  text-align:center;
}
/* ICP 备案号：独立一行居中，字号略小，hover 提亮为品牌青色 */
.footer__icp{
  display:block;
  margin-top:.65rem;
  color:var(--muted-2);
  font-size:.78rem;
  letter-spacing:.03em;
  transition:color .3s var(--ease);
}
.footer__icp:hover{color:var(--accent)}

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed;inset:0;z-index:1100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,8,0.94);
  backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox__stage{
  position:relative;
  width:min(82vw,900px);
  aspect-ratio:4/3;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
.lightbox__caption{
  position:absolute;bottom:5%;left:50%;
  transform:translateX(-50%);
  font-family:var(--serif);
  color:#fff;
  font-size:1.15rem;
  text-align:center;
  text-shadow:0 2px 18px rgba(0,0,0,0.7);
  max-width:80%;
}
/* 视频灯箱：舞台按视频自然比例，不再强制 4:3 */
.lightbox--video .lightbox__stage{
  aspect-ratio:auto;
  width:auto;height:auto;
  background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
.lb-video{
  display:block;
  width:min(86vw,1000px);
  max-height:82vh;
  aspect-ratio:16/9;
  background:#000;
  border-radius:14px;
  object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
.lightbox__close,.lightbox__nav{
  position:absolute;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border-2);
  color:#fff;
  cursor:pointer;
  z-index:2;
  display:flex;align-items:center;justify-content:center;
  transition:.3s var(--ease);
}
.lightbox__close{
  top:1.6rem;right:1.6rem;
  width:46px;height:46px;
  border-radius:50%;
  font-size:1.6rem;
}
.lightbox__nav{
  top:50%;transform:translateY(-50%);
  width:54px;height:54px;
  border-radius:50%;
  font-size:2rem;
}
.lightbox__nav--prev{left:3%}
.lightbox__nav--next{right:3%}
.lightbox__close:hover,
.lightbox__nav:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#061012;
  box-shadow:0 0 26px var(--glow);
}

/* =========================================================
   GLOW CURSOR —— 鼠标光效拖尾（OGP/WebGL，来自 React Bits 的 GlowCursor）
   全屏固定覆盖层，pointer-events:none 不拦截任何交互；
   mix-blend-mode:screen 让青/紫光晕叠加在暗色背景上。
   ========================================================= */
.glow-cursor{
  position:fixed;
  inset:0;
  z-index:900;            /* 低于导航(1000)与灯箱(1100)，保证玻璃横条与拖尾不会互相覆盖 */
  overflow:hidden;
  pointer-events:none;    /* 关键：不阻挡全景拖拽 / 卡片悬停 / 点击 */
  user-select:none;
}
.glow-cursor__canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  user-select:none;
  mix-blend-mode:screen;  /* 与 React Bits 默认 blendMode 一致 */
}

/* =========================================================
   TOUCH —— 移动端触控光效（点击涟漪，替代桌面 WebGL 拖尾）
   桌面鼠标设备保持 GlowCursor 拖尾不变；
   触摸设备（hover:none + pointer:coarse）下：
     1) 隐藏 WebGL 拖尾层（性能：手机 GPU 扛不住全屏逐像素着色器）
     2) 仅在点击（pointerdown）瞬间从触点迸发一个青色发光扩散环，
        约 0.65s 自动消失；平时无光点、无拖尾、移动不响应。
   ========================================================= */
@media (hover: none) and (pointer: coarse){
  .glow-cursor{display:none}
}
.tap-ripple{
  position:fixed;
  z-index:1050;              /* 高于导航(1000)、低于灯箱(1100) */
  left:0;top:0;
  width:64px;height:64px;
  margin-left:-32px;margin-top:-32px;
  border-radius:50%;
  box-sizing:border-box;
  border:1.5px solid rgba(25,227,255,0.9);
  background:radial-gradient(circle, rgba(25,227,255,0.30) 0%, rgba(25,227,255,0) 62%);
  box-shadow:0 0 18px rgba(25,227,255,0.45), inset 0 0 14px rgba(25,227,255,0.35);
  pointer-events:none;
  opacity:0;
  transform:scale(0.08);
  animation:tapRipple .65s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes tapRipple{
  0%{ transform:scale(0.08); opacity:0.95; }
  100%{ transform:scale(1); opacity:0; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:860px){
  .nav__links{display:none}
  .hero__inner{grid-template-columns:1fr;gap:2.4rem;text-align:center}
  .hero__art{order:1;min-height:300px}
  .hero__text{order:2;display:flex;flex-direction:column;align-items:center}
  .hero__slogan{margin-left:auto;margin-right:auto}
  .hero__stats{grid-template-columns:1fr;gap:1.2rem;text-align:center;margin-top:3rem}
  .stat{align-items:center}
  .stat__line{display:none}
  .process{grid-template-columns:repeat(2,1fr)}
  .featured-grid{columns:2}
  .hero__cards{grid-template-columns:repeat(2,1fr)}
  .contact__icons{grid-template-columns:1fr}
}
@media(max-width:520px){
  .featured-grid{columns:1}
  .process{grid-template-columns:1fr}
  .hero__cards{grid-template-columns:1fr}
  .lightbox__stage{width:92vw}
}