:root{
  /* 参考 Field Day Sound：温和浅底 + 高对比黑字 + 霓虹强调色 */
  /* 稍微更“白”一点 */
  --bg: #ffffff;
  --fg: rgba(19,19,19,.96);
  --muted: rgba(19,19,19,.72);
  --dim: rgba(19,19,19,.46);
  --hair: rgba(19,19,19,.12);
  --accent: #e851ec;
  --shadow: rgba(0,0,0,.18);
  --radius: 18px;
  --max: 1200px;
  --pad: 28px;
  --display: "Bebas Neue";
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color: var(--fg);
  background: var(--bg);
  font-family: Inter, "Noto Sans SC", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
  overflow-x:hidden;
}
@media (pointer: fine){
  /* 使用自定义光标时隐藏系统光标 */
  body{ cursor: none; }
}

/* Home：从 Hero 滑到 Projects 的“桥接”交互（轻量） */
body.hasBridge{ --bridge: 0; }
body.hasBridge .hero{
  transform: translateY(calc(var(--bridge) * -52px));
  opacity: calc(1 - (var(--bridge) * 0.38));
}
body.hasBridge .hero .nameCapsule{
  transform: translateZ(0) scale(calc(1 - (var(--bridge) * 0.075)));
  filter: blur(calc(var(--bridge) * 2.2px));
  transition: filter .12s ease;
}
body.hasBridge #projects{
  /* 越接近 Projects 越“抬起来” */
  transform: translateY(calc((1 - var(--bridge)) * 56px));
}
body.hasBridge #projects .sectionTitle{
  opacity: calc(0.35 + (var(--bridge) * 0.65));
}
body.hasBridge #projects .hr{
  transform-origin: center;
  transform: scaleX(calc(0.7 + (var(--bridge) * 0.3)));
}

/* 接近 Projects 时增加一点主题粉色“能量感” */
body.hasBridge #projects{
  position: relative;
}
body.hasBridge #projects::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 22px;
  width: min(920px, 92vw);
  height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,73,246,.18), rgba(255,73,246,0) 70%);
  filter: blur(14px);
  opacity: calc(var(--bridge) * 0.9);
  pointer-events:none;
  z-index: 0;
}
body.hasBridge #projects > *{
  position: relative;
  z-index: 1;
}

/* 纯白背景：去掉弥散/噪点效果 */
body::before{ content:none; }
body::after{ content:none; }

/* 首页：按你的最新需求，移除底层细边框与前层人脸（保留胶囊名字主视觉） */

.shell{
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(18px, 2.8vw, var(--pad));
  min-height: 100vh;
  display:flex;
  flex-direction:column;
}

.top{
  padding-top: 10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 18px;
}

.brandLink{
  color: var(--fg);
  text-decoration:none;
  display:inline-flex;
  gap: 12px;
  align-items:baseline;
  border-bottom: 1px solid transparent;
  padding-bottom: 6px;
  transition: border-color .25s ease;
}
.brandLink:hover{ border-color: var(--hair); }
.brandEn{
  font-weight: 600;
  letter-spacing:-0.03em;
}
.brandZh{
  font-weight: 500;
  color: var(--muted);
}

.topNav{
  display:flex;
  gap: 18px;
  align-items:baseline;
  flex-wrap:wrap;
  justify-content:flex-end;
  padding-top: 4px;
}
.topNav a{
  color: var(--dim);
  text-decoration:none;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.topNav a:hover{
  color: var(--muted);
  border-bottom-color: var(--hair);
}
.topNav a[aria-current="page"]{
  color: var(--fg);
  border-bottom-color: rgba(19,19,19,.22);
}

.hero{ padding: clamp(34px, 7vw, 82px) 0 26px; }
.hero{
  min-height: 92vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  position: relative;
  overflow: hidden;
}

/* WebGL Fluid Background for Hero */
.hero-webgl-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
}
.hero-webgl-bg canvas{
  width: 100% !important;
  height: 100% !important;
}
.hero > *:not(.hero-webgl-bg){
  position: relative;
  z-index: 1;
}
.feed{ padding-top: 12px; }
.feedSection{
  padding: clamp(26px, 5vw, 64px) 0;
}
.embeddedProjects .workList{
  margin-top: 18px;
}
.embeddedProjects .catWall{
  padding-top: 6px;
}

/* Projects：左侧大类别，右侧项目入口（hover 出现） */
.projectsSplit{
  display:grid;
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 520px);
  /* 让右侧列表能够“和某个类别行对齐” */
  grid-auto-rows: min-content;
  gap: clamp(18px, 3vw, 36px);
  align-items:start;
}
.projectsSplit .workList{ margin-top: 0; }
.projectsSplit .catWall{ display: contents; }
.projectsSplit .catBtn{ grid-column: 1; }
.projectsSplit .workList{
  grid-column: 2;
  grid-row-start: 1;
  padding-top: 10px; /* 让右侧列表更像“跟在大标题后面” */
  /* 默认隐藏时不占高度，避免 Projects 与 About 之间出现大段空白 */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(14px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, max-height .28s ease;
}
.projectsSplit.isListOn .workList{
  max-height: 2000px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
@media (max-width: 980px){
  .projectsSplit{ grid-template-columns: 1fr; }
  .projectsSplit .catWall{ display:block; }
  .projectsSplit .workList{
    grid-column: 1;
    grid-row: auto !important;
    margin-top: 26px;
    padding-top: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Home Projects: hover 即出现图片预览的“版块卡片” */
.projCards{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.projCard{
  grid-column: span 6;
  display:block;
  text-decoration:none;
  color: var(--fg);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: #fff;
  overflow:hidden;
  transition: transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.projCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 80px rgba(0,0,0,.14);
  border-color: rgba(19,19,19,.18);
}
.projMedia{
  height: 220px;
  background: linear-gradient(135deg, rgba(255,73,246,.14), rgba(40,120,255,.10));
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .22s ease, transform .5s cubic-bezier(.2,.9,.2,1);
}
.projCard:hover .projMedia{
  opacity: 1;
  transform: scale(1);
}
.projBody{
  padding: 14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.projTitle{
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.projMeta{
  color: var(--dim);
  font-size: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.projPill{
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(19,19,19,.02);
}
@media (max-width: 860px){
  .projCard{ grid-column: span 12; }
  .projMedia{ height: 200px; }
}
.slogan{
  color: var(--dim);
  margin-bottom: 20px;
  max-width: 86ch;
}
.sloganEn{
  font-size: 12px;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sloganZh{
  margin-top: 8px;
  font-size: 12px;
  font-family: "Space Grotesk", Inter, "Noto Sans SC", system-ui, sans-serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: .06em;
}
.sectionTitle{
  display:flex;
  gap: 12px;
  align-items:baseline;
  font-size: 18px;
  color: var(--muted);
  letter-spacing: -0.02em;
}
.sectionHint{
  color: var(--dim);
  font-size: 12px;
}
.homeLinks{
  display:flex;
  flex-wrap:wrap;
  gap: 16px 18px;
  margin-top: 24px;
}
.heroTitle{
  margin:0;
  font-family: "Space Grotesk", Inter, "Noto Sans SC", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1;
}
.heroTitle .line{
  display:block;
  opacity:0;
  transform: translateY(10px);
}
.nameCapsule{
  width: min(1240px, 94vw);
  aspect-ratio: 3.9 / 1;
  border: 1px solid rgba(19,19,19,.55);
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.96);
  position: relative;
  box-shadow: 0 22px 70px rgba(0,0,0,.06);
  transform: translate3d(calc(var(--nameX, 0) * 1px), calc(var(--nameY, 0) * 1px), 0) scale(calc(1 + (var(--nameS, 0) * .001)));
  transition: box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
  /* 左右边缘淡出（参考图那种“更高级”的边缘虚化） */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.nameCapsule::after{
  content:"";
  position:absolute;
  inset: 9px;
  border: 1px solid rgba(19,19,19,.12);
  border-radius: 999px;
  pointer-events:none;
}
.nameMarquee{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 0;
  white-space: nowrap;
  /* 默认不播放：等页面进入后再慢慢开始 */
}
.nameInner{
  display:inline-flex;
  align-items:baseline;
  width: max-content;
  will-change: transform;
  /* 更慢的滚动速度 */
  animation: nameMarquee 58s linear infinite;
  animation-play-state: paused;
}
.nameTrack{
  display:inline-flex;
  align-items:baseline;
  gap: 28px;
  padding-left: 28px;
}
.nameTrack .w{
  font-family: "Space Grotesk", Inter, "Noto Sans SC", system-ui, sans-serif;
  font-weight: 300; /* 更细 */
  /* 小约五分之一（≈0.8x），避免过大 */
  font-size: clamp(166px, 26vw, 344px);
  text-transform: uppercase;
  letter-spacing: -0.11em;
  line-height: .8;
  color: rgba(19,19,19,.92);
  position: relative;
  display: inline-block;
}

.nameTrack .sep{
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(34px, 4vw, 52px);
  color: rgba(19,19,19,.30);
  transform: translateY(-.08em);
}
.nameTrack.clone{ }

/* 进入页面后才开始播放（慢慢触发） */
body.isMarqueeOn .nameInner{
  animation-play-state: running;
}

@keyframes nameMarquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
.heroNameZh{
  /* 往下放一点，避免被上方滚动主视觉遮挡 */
  margin-top: 34px;
  font-family: "Space Grotesk", Inter, "Noto Sans SC", system-ui, sans-serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.06em;
  line-height: 1.0;
  font-size: clamp(22px, 3.4vw, 34px);
  color: var(--muted);
}
.heroSub{
  margin: 18px 0 0;
  max-width: 66ch;
  color: var(--muted);
  line-height: 1.6;
  font-size: 16px;
  font-family: "Space Grotesk", Inter, "Noto Sans SC", system-ui, sans-serif;
  font-weight: 300;
  font-style: italic;
}
.accent{ color: var(--fg); }

.nav{
  display:flex;
  flex-direction:column;
  gap: 14px;
  margin-top: 26px;
}
.navItem{
  color: var(--fg);
  text-decoration:none;
  font-size: 15px;
  width: fit-content;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.navItem:hover{
  border-color: var(--hair);
  color: rgba(19,19,19,.98);
}

.footer{
  margin-top:auto;
  padding: 26px 0 10px;
  color: var(--dim);
  font-size: 12px;
}

/* Shared page bits */
.pageTitle{
  margin: 44px 0 10px;
  font-size: 20px;
  font-weight: 500;
  color: var(--muted);
}
.hr{
  height:1px;
  background: var(--hair);
  margin: 18px 0 26px;
}

/* Work page */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap: 14px 16px;
  align-items:flex-end;
}
.filter{
  border: 0;
  background: transparent;
  color: var(--dim);
  padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
  display:flex;
  gap: 10px;
  align-items:flex-end;
  transition: background .2s ease, color .2s ease;
}
.filter:hover{ background: rgba(19,19,19,.04); color: var(--muted); }
.filter[aria-pressed="true"]{
  background: rgba(19,19,19,.05);
  color: var(--fg);
}
.filters.asLinks .filter{
  text-decoration:none;
}
.filters.asLinks a.filter{
  display:inline-flex;
}
.stacked{
  display:flex;
  flex-direction:column;
  line-height: .9;
  font-weight: 600;
  letter-spacing: -0.06em;
  text-transform: lowercase;
  font-size: 12px;
}
.stacked span{ display:block; }
.count{
  font-size: 12px;
  color: var(--dim);
}

/* Field Day 风格：大字号分类入口（Projects 页） */
.catWall{
  display:flex;
  flex-direction:column;
  gap: clamp(22px, 3.2vw, 44px);
  padding: clamp(16px, 2.4vw, 28px) 0 0;
}
.catBtn{
  border:0;
  background:transparent;
  padding:0;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:baseline;
  gap: 14px;
  width: fit-content;
}
.catWord{
  font-family: var(--display), Inter, "Noto Sans SC", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: .8;
  /* 更强的视觉冲击 */
  font-size: clamp(110px, 18vw, 320px);
  color: rgba(19,19,19,.92);
  display: inline-block;
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), color .18s ease, letter-spacing .28s ease;
}
.catBtn[aria-pressed="true"] .catWord{ color: var(--accent); }
.catCount{ font-size: 12px; color: var(--dim); }
.catBtn:hover .catWord{
  transform: translateX(12px) scale(1.12);
  color: var(--accent);
}
.catBtn:hover .catCount{
  color: var(--muted);
}

.workList{
  margin-top: 44px;
  display:flex;
  flex-direction:column;
  transition: opacity .18s ease, transform .18s ease;
}
.workList.isSwitching{
  opacity: 0;
  transform: translateY(12px);
}
.workItem{
  padding: 12px 0;
  border-bottom: 0;
  display:flex;
  justify-content:space-between;
  gap: 24px;
  align-items:baseline;
}
.workLink{
  text-decoration:none;
  color: var(--fg);
  display:flex;
  flex-direction:column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.workTitle{
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.workSub{
  display:none; /* 小标题不再常驻显示 */
}
.workRight{
  display:flex;
  align-items:baseline;
  gap: 12px;
  justify-content:flex-end;
  flex: 0 0 auto;
}
.workMeta{
  font-size: 13px;
  color: var(--dim);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}
.workItem.isHoveringItem .workMeta{
  opacity: 1;
  transform: translateX(0);
}
.workArrow{
  color: var(--dim);
  white-space:nowrap;
  padding-top: 0;
}

/* Hover preview（模拟 Field Day Work 列表 hover 出图的感觉） */
.hoverPreview{
  position: fixed;
  width: 320px;
  height: 220px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: rgba(237,236,232,.75);
  overflow:hidden;
  pointer-events:none;
  z-index: 45;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
}
.hoverPreview.isOn{
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}
.hoverPreview .img{
  width:100%;
  height:100%;
  display:block;
  background: linear-gradient(135deg, rgba(255,73,246,.16), rgba(40,120,255,.10));
  background-size: cover;
  background-position: center;
}
.hoverPreview .cap{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  font-size: 11px;
  color: rgba(19,19,19,.72);
  background: rgba(237,236,232,.78);
  border: 1px solid rgba(19,19,19,.12);
  border-radius: 999px;
  padding: 6px 10px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 不在浮层底部显示标题 */
  display:none;
}

/* Home gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.tile{
  grid-column: span 6;
  height: 240px;
  border-radius: var(--radius);
  border: 1px solid var(--hair);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  position:relative;
  text-decoration:none;
  color: var(--fg);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
}
.tileBg{
  position:absolute;
  inset:0;
  filter: saturate(1.1);
  transform: scale(1.02);
  transition: transform .55s cubic-bezier(.2,.9,.2,1);
}
.tile:hover .tileBg{ transform: scale(1.08); }
.tileMeta{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.tileTitle{
  font-size: 22px;
  letter-spacing: -0.04em;
}
.tileSub{
  color: var(--muted);
  font-size: 13px;
}
.g1{ background: radial-gradient(900px 520px at 20% 30%, rgba(255,73,246,.22), transparent 60%), linear-gradient(135deg, rgba(19,19,19,.04), rgba(19,19,19,.00)); }
.g2{ background: radial-gradient(760px 520px at 70% 35%, rgba(40,120,255,.18), transparent 60%), linear-gradient(135deg, rgba(19,19,19,.04), rgba(19,19,19,.00)); }
.g3{ background: radial-gradient(800px 520px at 35% 35%, rgba(255,180,120,.16), transparent 62%), linear-gradient(135deg, rgba(19,19,19,.04), rgba(19,19,19,.00)); }
.g4{ background: radial-gradient(900px 520px at 60% 30%, rgba(255,230,120,.16), transparent 62%), linear-gradient(135deg, rgba(19,19,19,.04), rgba(19,19,19,.00)); }
@media (max-width: 860px){
  .tile{ grid-column: span 12; height: 220px; }
}

.infoGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 860px){
  .infoGrid{ grid-template-columns: 1fr; }
}

/* Home about row */
.aboutRow{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 860px){
  .aboutRow{ grid-template-columns: 1fr; }
}
.avatarWrap{
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  box-shadow: none;
  display:flex;
  flex-direction:column;
  perspective: 900px;
}
.avatarTilt{
  display:flex;
  flex-direction:column;
  transform: rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .25s ease;
}
.avatarWrap.isTilting .avatarTilt{
  transition: transform .08s linear;
}
.avatarImg{
  width: 100%;
  /* 不裁剪：完整显示图片 */
  object-fit: contain;
  display:block;
  background: transparent;
  backface-visibility: hidden;
}
.avatarWrap .avatarImg + .avatarImg{
  border-top: 0;
}
/* 高度将由 JS 动态匹配右侧文字高度（两张图总高=右侧文字高） */
.aboutText.card{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.bioCopy{
  font-family: "Space Grotesk", Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC",
    "Microsoft YaHei", sans-serif;
  font-weight: 300;
  letter-spacing: -0.01em;
}
.bioEn{
  font-style: italic;
}
.bioZh{
  font-style: italic;
}
.bioQuote{
  font-style: italic;
  letter-spacing: -0.02em;
}

/* About：中文段落右对齐（英文仍保持原样） */
#about .aboutText{
  text-align: right;
}
#about .bioZh{
  display:block;
  text-align:right;
}

/* Home > Information：CONTACT 卡片居中、英文、非斜体 */
.contactCard{
  grid-column: 1 / -1;
  justify-self: center;
  text-align: center;
  max-width: 560px;
  background: transparent;
}
.contactCard .bioCopy{
  font-style: normal;
}

/* 音波跳跃（Information 上方） */
.contactWave{
  width: min(520px, 86vw);
  height: 44px;
  margin: 6px auto 18px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap: 6px;
}
.waveBar{
  width: 6px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,73,246,.34);
  border: 1px solid rgba(255,73,246,.72);
  box-shadow:
    0 0 10px rgba(255,73,246,.26),
    0 0 22px rgba(255,73,246,.14);
  transform-origin: center bottom;
  animation: waveJump 1.05s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.06s);
}
@keyframes waveJump{
  0%, 100%{ transform: scaleY(.35); opacity: .65; }
  35%{ transform: scaleY(1.65); opacity: 1; }
  60%{ transform: scaleY(.75); opacity: .85; }
}
@media (prefers-reduced-motion: reduce){
  .waveBar{ animation: none; transform: scaleY(.8); opacity: .75; }
}

/* Project page */
.projectHeader{
  margin-top: 30px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.projectName{
  font-size: clamp(34px, 5.8vw, 70px);
  letter-spacing: -0.06em;
  line-height: 1.02;
  margin:0;
}
.projectDeck{
  color: var(--muted);
  line-height: 1.7;
  max-width: 70ch;
  margin:0;
}
.projectCover{
  margin-top: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--hair);
  background: linear-gradient(135deg, rgba(255,73,246,.14), rgba(40,120,255,.10));
  height: auto;
  max-height: 520px;
  box-shadow: 0 30px 80px var(--shadow);
  position:relative;
  overflow:hidden;
}
.projectCover::after{
  content:"";
  position:absolute;
  inset:-20%;
  background: radial-gradient(600px 360px at 30% 30%, rgba(255,255,255,.10), transparent 60%);
  transform: rotate(-8deg);
}
.projectGrid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px 26px;
}
@media (max-width: 860px){
  .projectGrid{ grid-template-columns: 1fr; }
}
.card{
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: rgba(19,19,19,.03);
  padding: 16px 16px;
}
.resumeTopCard{
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.resumeFull{
  margin-top: 22px;
  width: 100%;
  /* 尽量撑满可视区域：减去上方 header/title/卡片占用 */
  height: clamp(680px, calc(100vh - 240px), 1400px);
}
.resumeFull embed{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.cardTitle{
  margin:0 0 10px;
  font-size: 12px;
  color: var(--dim);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.card p{ margin:0; color: var(--muted); line-height: 1.7; }
.card a{ color: var(--fg); text-decoration:none; border-bottom: 1px solid var(--hair); }
.card a:hover{ border-bottom-color: rgba(19,19,19,.34); }

/* Cursor + page fade */
.cursor{
  position:fixed;
  top:0; left:0;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: rgba(255,73,246,.14);
  border: 1px solid rgba(255,73,246,.88);
  box-shadow:
    0 0 14px rgba(255,73,246,.28),
    0 0 28px rgba(255,73,246,.16);
  mix-blend-mode: normal;
  transform: translate(-50%, -50%);
  pointer-events:none;
  z-index: 50;
  opacity:0;
  transition: width .18s ease, height .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cursor::after{
  content:"";
  position:absolute;
  inset: -18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,73,246,.26), rgba(255,73,246,0) 62%);
  filter: blur(6px);
  opacity: .65;
  pointer-events:none;
}
.cursor.isHover{
  width: 34px; height: 34px;
  background: rgba(255,73,246,.10);
  border-color: rgba(255,73,246,.72);
  box-shadow:
    0 0 18px rgba(255,73,246,.30),
    0 0 44px rgba(255,73,246,.18);
}
.pageFade{
  position:fixed;
  inset:0;
  background: #000;
  opacity:0;
  pointer-events:none;
  transition: opacity .35s ease;
  z-index: 40;
}
.pageFade.isOn{ opacity:1; }

@media (pointer: coarse){
  .cursor{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
  body::after{ opacity: .12; }
}

/* Scroll-triggered reveals */
[data-animate="fade"]{
  opacity: 0;
  transform: translateY(30px) scale(0.96);
}
[data-animate].isIn{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .75s cubic-bezier(.2,.9,.2,1), transform .75s cubic-bezier(.2,.9,.2,1);
}

/* 滚动视差效果 - Projects 到 About 之间 */
.feedSection{
  transform-style: preserve-3d;
  perspective: 1200px;
}

/* Projects 板块视差 */
.embeddedProjects{
  transform: translateZ(0);
  transition: transform .1s linear;
}

/* About 板块视差 - 稍微慢一点 */
#about{
  transform: translateZ(0);
  transition: transform .1s linear;
}

/* 3D 卡片翻转效果 */
.workItem{
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.9,.2,1), background .3s ease;
}

.workItem:hover{
  transform: translateX(8px) translateZ(20px);
  background: rgba(255,73,246,.03);
}

.workItem::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform .35s cubic-bezier(.2,.9,.2,1);
}

.workItem:hover::before{
  transform: scaleY(1);
}

/* 分类按钮 3D 效果 */
.catBtn{
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.9,.2,1);
}

.catBtn:hover{
  transform: translateX(12px) scale(1.12) translateZ(30px);
}

.catBtn[aria-pressed="true"]{
  transform: translateX(20px) scale(1.15) translateZ(40px);
}

/* 文字逐字动画 */
.sectionTitle span:first-child{
  display: inline-block;
  overflow: hidden;
}

.sectionTitle span:first-child .char{
  display: inline-block;
  opacity: 0;
  transform: translateY(100%) rotateX(-90deg);
  animation: charReveal .6s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes charReveal{
  to{
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

/* Gallery 瓷砖悬停 3D 效果 */
.tile{
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.9,.2,1), box-shadow .5s ease;
}

.tile:hover{
  transform: translateY(-8px) rotateX(5deg) rotateY(-5deg) scale(1.02);
  box-shadow: 
    0 30px 60px rgba(0,0,0,.2),
    0 0 40px rgba(255,73,246,.15);
}

.tileBg{
  transition: transform .8s cubic-bezier(.2,.9,.2,1), filter .5s ease;
}

.tile:hover .tileBg{
  transform: scale(1.15) translateZ(20px);
  filter: saturate(1.3);
}

/* 图片缩放与模糊过渡 */
.avatarTilt{
  transition: transform .4s cubic-bezier(.2,.9,.2,1), filter .4s ease;
}

.avatarTilt:hover{
  filter: brightness(1.05) contrast(1.02);
}

/* 光晕脉冲效果 */
@keyframes glowPulse{
  0%, 100%{
    box-shadow: 
      0 0 20px rgba(255,73,246,.3),
      0 0 40px rgba(255,73,246,.2),
      0 0 60px rgba(255,73,246,.1);
  }
  50%{
    box-shadow: 
      0 0 30px rgba(255,73,246,.5),
      0 0 60px rgba(255,73,246,.3),
      0 0 90px rgba(255,73,246,.2);
  }
}

/* 项目列表容器光晕 */
.projectsSplit.isListOn .workList{
  animation: glowPulse 3s ease-in-out infinite;
  border-radius: 12px;
  padding: 16px;
}

/* 分割线动画 */
.hr{
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .8s cubic-bezier(.2,.9,.2,1);
}

.feedSection.isIn .hr{
  transform: scaleX(1);
}

/* 增强的磁性吸附 */
.magnetic{
  transition: transform .15s cubic-bezier(.2,.9,.2,1);
}

/* 滚动进度指示器 */
.scrollProgress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(255,73,246,.5));
  z-index: 100;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .1s linear;
}

/* 视差背景层 */
.parallaxBg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity .5s ease;
}

body.hasParallax .parallaxBg{
  opacity: 1;
}

/* 文字高亮动画 */
.bioQuote{
  position: relative;
  display: inline;
}

.bioQuote::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30%;
  background: rgba(255,73,246,.15);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.2,.9,.2,1);
  z-index: -1;
}

.feedSection.isIn .bioQuote::after{
  transform: scaleX(1);
}

/* 项目卡片悬停图片预览增强 */
.hoverPreview{
  transform-style: preserve-3d;
  transition: 
    opacity .25s ease, 
    transform .25s cubic-bezier(.2,.9,.2,1),
    box-shadow .25s ease;
}

.hoverPreview.isOn{
  box-shadow: 
    0 25px 80px rgba(0,0,0,.25),
    0 0 50px rgba(255,73,246,.2);
}

/* 滚动触发的 3D 倾斜效果 */
.tiltOnScroll{
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.2,.9,.2,1);
}

/* 脉冲光点装饰 */
.pulseDot{
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse{
  0%, 100%{
    transform: scale(1);
    opacity: .6;
  }
  50%{
    transform: scale(1.5);
    opacity: 1;
  }
}