/* =========================================================
   苟玲锋 · 作品集
   风格：深空 / 极简 / 影像感
   ========================================================= */

:root{
  --bg:            #05060a;
  --bg-soft:       #0a0c15;
  --bg-card:       #0c0f18;
  --line:          rgba(233, 238, 248, 0.10);
  --line-soft:     rgba(233, 238, 248, 0.055);
  --text:          #e9eef8;
  --text-soft:     #b9c2d4;
  --muted:         #7f8aa0;
  --accent:        #8ba6ff;
  --accent-2:      #67e8f9;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34, 1.42, .44, 1);
  --spring-soft: cubic-bezier(.24, 1.16, .38, 1);
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1280px;
}

*,*::before,*::after{ box-sizing: border-box; }

/* 保证 hidden 属性不被 display 声明覆盖 */
[hidden]{ display: none !important; }

html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }

::selection{ background: rgba(139,166,255,.32); }

/* ---------- 背景星尘 ---------- */
.starfield{
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.starfield__bg{
  width:100%; height:100%; object-fit: cover;
  opacity: .42;
  transform: scale(1.04);
}
.starfield::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(118% 88% at 50% 28%,
      rgba(5,6,10,0) 32%,
      rgba(5,6,10,.50) 74%,
      rgba(5,6,10,.88) 100%);
}
#starCanvas{ position:absolute; inset:0; z-index:2; width:100%; height:100%; opacity:.62; }

.cursor-glow{
  position: fixed; top:0; left:0; z-index: 1;
  width: 720px; height: 720px; margin:-360px 0 0 -360px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,194,120,.065) 0%,
      rgba(139,166,255,.045) 30%,
      rgba(103,232,249,.018) 54%,
      rgba(103,232,249,0) 72%);
  will-change: transform;
  pointer-events: none; opacity: 0;
  transition: opacity .8s var(--ease);
}
body.has-pointer .cursor-glow{ opacity: 1; }
body.modal-open .cursor-glow{ opacity: 0; }

main, .site-header, .site-footer{ position: relative; z-index: 2; }

/* ---------- 背景音乐按钮 ---------- */
.music-dock{
  position: fixed; z-index: 35;
  right: clamp(16px, 3vw, 34px); bottom: clamp(18px, 3vw, 30px);
  display: flex; align-items: center; gap: 8px;
}
.music{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 17px 10px 14px; border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(8,11,20,.6);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--text-soft);
  font-size: 11.5px; letter-spacing:.16em;
  transition: border-color .45s var(--ease), color .45s var(--ease),
              background .45s var(--ease), transform .6s var(--spring),
              box-shadow .6s var(--ease);
}
.music:hover{
  transform: translateY(-2px);
  border-color: rgba(139,166,255,.5);
  color: var(--text);
  box-shadow: 0 14px 40px -22px rgba(120,150,255,.7);
}
.music:active{ transform: translateY(0) scale(.97); }
.music.is-on{
  color: var(--text);
  border-color: rgba(139,166,255,.45);
  background: rgba(14,20,38,.68);
}

.music__switch{
  width: 42px; height: 42px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line);
  background: rgba(8,11,20,.6);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--text-soft);
  font-size: 17px; line-height: 1;
  transition: border-color .45s var(--ease), color .45s var(--ease),
              background .45s var(--ease), transform .6s var(--spring),
              box-shadow .6s var(--ease);
}
.music__switch:hover{
  transform: translateY(-2px) rotate(18deg);
  border-color: rgba(139,166,255,.5);
  color: var(--text);
  box-shadow: 0 14px 40px -22px rgba(120,150,255,.7);
}
.music__switch:active{ transform: translateY(0) scale(.94); }

.music__icon{ display:flex; align-items:flex-end; gap:3px; height:15px; flex:none; }
.music__icon i{
  display:block; width:2px; height:5px; border-radius:2px;
  background: currentColor; opacity:.7;
  transition: height .45s var(--spring), opacity .45s var(--ease);
}
.music.is-on .music__icon i{ opacity:1; animation: eqBar .95s ease-in-out infinite; }
.music.is-on .music__icon i:nth-child(1){ animation-delay:-.15s; }
.music.is-on .music__icon i:nth-child(2){ animation-delay:-.45s; }
.music.is-on .music__icon i:nth-child(3){ animation-delay:-.75s; }
@keyframes eqBar{
  0%,100%{ height:4px; }
  50%{ height:15px; }
}

@media (max-width: 820px){
  .music-dock{ right: 14px; bottom: 16px; gap: 6px; }
  .music{ padding: 11px 13px 11px 12px; font-size: 10.5px; letter-spacing:.10em; }
  .music__text{ max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .music__switch{ width: 38px; height: 38px; font-size: 15px; }
}


/* ---------- 通用排版 ---------- */
.eyebrow{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}

.section{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(96px, 13vw, 180px) var(--pad);
}
.section__head{
  display: flex; gap: clamp(18px, 4vw, 48px);
  padding-bottom: 40px; margin-bottom: clamp(44px, 6vw, 76px);
  border-bottom: 1px solid var(--line-soft);
}
.section__num{
  font-family: var(--mono); font-size: 12px; letter-spacing:.18em;
  color: var(--accent); padding-top: 10px; flex: none;
}
.section__title{
  margin: 0; font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 300; letter-spacing: .06em; line-height: 1.25;
}
.section__desc{
  margin: 14px 0 0; max-width: 560px;
  color: var(--text-soft); font-size: 15px; line-height: 1.9;
}

/* ---------- 顶栏 ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease),
              border-color .5s var(--ease), padding .6s var(--spring-soft);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck{
  padding: 14px var(--pad);
  background: rgba(5,6,10,.94);
  border-bottom-color: var(--line-soft);
}
.brand{ display:flex; align-items:baseline; gap:12px; }
.brand__name{ font-size: 15px; letter-spacing:.24em; }
.brand__en{
  font-family: var(--mono); font-size: 9.5px; letter-spacing:.3em;
  color: var(--muted);
}
.nav{ display:flex; gap: clamp(20px, 3vw, 42px); }
.nav a{
  position: relative; font-size: 13.5px; letter-spacing:.16em;
  color: var(--text-soft); transition: color .35s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px;
  background: var(--accent); transition: right .45s var(--ease);
}
.nav a:hover{ color: var(--text); }
.nav a:hover::after{ right:0; }

.nav-toggle{ display:none; width:26px; height:18px; position:relative; }
.nav-toggle span{
  position:absolute; left:0; right:0; height:1px; background: var(--text);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:first-child{ top:4px; }
.nav-toggle span:last-child{ bottom:4px; }
body.nav-open .nav-toggle span:first-child{ transform: translateY(5px) rotate(45deg); }
body.nav-open .nav-toggle span:last-child{ transform: translateY(-5px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px var(--pad) 0;
  max-width: var(--maxw); margin: 0 auto;
}
.hero__bh{
  position: absolute; inset: -4% 0 -8%; z-index: 0;
  width: 100%; height: 112%;
  pointer-events: none;
}
.hero__inner{ position: relative; z-index: 2; max-width: 900px; }

.hero__title{
  margin: 26px 0 0;
  font-size: clamp(52px, 10.5vw, 132px);
  font-weight: 200; line-height: 1.06; letter-spacing: .1em;
  text-indent: .1em;
  text-shadow: 0 5px 34px rgba(0,0,0,.72), 0 1px 2px rgba(0,0,0,.55);
}
.hero__lead{
  margin: 30px 0 0; max-width: 620px;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.95;
  color: var(--text-soft); font-weight: 300;
  text-shadow: 0 3px 20px rgba(0,0,0,.62);
}
.hero__meta{
  display: flex; flex-wrap: wrap; gap: 10px 0;
  margin: 36px 0 0;
  font-family: var(--mono); font-size: 11px; letter-spacing:.24em;
  color: var(--muted); text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
.hero__meta li + li::before{ content:"—"; margin: 0 16px; opacity:.5; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin: 44px 0 0; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 148px; padding: 13px 28px;
  border: 1px solid var(--line); border-radius: 100px;
  font-size: 13px; letter-spacing:.2em;
  color: var(--text-soft);
  transition: color .4s var(--ease), border-color .4s var(--ease),
              background .45s var(--ease), box-shadow .5s var(--ease),
              transform .55s var(--spring);
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0) scale(.975); }
.btn:hover{ color: var(--text); border-color: rgba(139,166,255,.55); }
.btn--primary{
  background: rgba(139,166,255,.10);
  border-color: rgba(139,166,255,.42);
  color: var(--text);
}
.btn--primary:hover{
  background: rgba(139,166,255,.20);
  box-shadow: 0 0 34px rgba(120,150,255,.22);
}

.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:34vh;
  background: linear-gradient(180deg, rgba(5,6,10,0), var(--bg) 88%);
  pointer-events:none;
}
.hero__foot{ position: relative; z-index: 2; }

.hero__foot{
  display:flex; align-items:center; justify-content: space-between;
  padding: 60px 0 34px;
  font-family: var(--mono); font-size: 10px; letter-spacing:.3em;
  color: var(--muted);
}
.scroll-hint{ display:inline-flex; align-items:center; gap:12px; }
.scroll-hint i{
  display:block; width:1px; height:34px;
  background: linear-gradient(180deg, rgba(139,166,255,0), var(--accent));
  animation: drop 2.4s var(--ease) infinite;
}
@keyframes drop{
  0%{ transform: scaleY(.2); opacity:0; }
  40%{ opacity:1; }
  100%{ transform: scaleY(1); opacity:0; }
}

/* ---------- 作品 ---------- */
.filters{
  display:flex; flex-wrap:wrap; gap: 8px 26px; margin-bottom: 42px;
}
.filter{
  position: relative; padding: 6px 0;
  font-size: 13.5px; letter-spacing:.14em; color: var(--muted);
  transition: color .35s var(--ease), transform .5s var(--spring);
}
.filter:hover{ transform: translateY(-1px); }
.filter:active{ transform: scale(.97); }
.filter::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--accent); transition: right .45s var(--ease);
}
.filter:hover{ color: var(--text-soft); }
.filter.is-active{ color: var(--text); }
.filter.is-active::after{ right:0; }

.work-grid{
  display:grid; gap: clamp(26px, 3.2vw, 52px) clamp(20px, 2.6vw, 38px);
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.card{
  position: relative; cursor: pointer; text-align: left;
  opacity: 0; transform: translateY(22px);
  animation: cardIn .9s var(--ease) forwards;
}
@keyframes cardIn{ to{ opacity:1; transform:none; } }

.card__media{
  position: relative; overflow: hidden; border-radius: 4px;
  border: 1px solid var(--line-soft);
  background: var(--bg-card);
  aspect-ratio: 16 / 9;
  transition: border-color .5s var(--ease),
              box-shadow .7s var(--spring-soft),
              transform .7s var(--spring);
}
.card:hover .card__media{ transform: translateY(-5px); }
.card__media img{
  width:100%; height:100%; object-fit: cover;
  transition: transform 1.2s var(--spring-soft);
}
.card__media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(118% 92% at 50% 38%, rgba(5,6,10,0) 42%, rgba(5,6,10,.5) 100%),
    linear-gradient(180deg, rgba(8,14,32,.14) 0%, rgba(5,6,10,.05) 45%, rgba(5,6,10,.66) 100%);
  opacity:.92;
  transition: opacity .7s var(--ease);
}
.card:hover .card__media::after{ opacity:.7; }
.card:hover .card__media{ border-color: rgba(139,166,255,.42); box-shadow: 0 26px 70px -34px rgba(120,150,255,.6); }
.card:hover .card__media img{ transform: scale(1.05); }
.card:active .card__media{ transform: translateY(-1px) scale(.994); }

.card__play{
  position:absolute; z-index:2; right: 18px; bottom: 16px;
  width: 42px; height: 42px; border-radius:50%;
  border: 1px solid rgba(233,238,248,.35);
  display:flex; align-items:center; justify-content:center;
  font-size: 11px; color: var(--text);
  backdrop-filter: blur(6px);
  background: rgba(10,12,20,.35);
  opacity:0; transform: translateY(8px) scale(.9);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.card:hover .card__play{ opacity:1; transform:none; }

.card__meta{ display:flex; justify-content:space-between; gap:18px; padding-top: 18px; }
.card__title{ margin:0; font-size: clamp(16px,1.4vw,19px); font-weight:400; letter-spacing:.05em; }
.card__role{
  margin: 6px 0 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing:.2em; color: var(--muted); text-transform: uppercase;
}
.card__year{
  font-family: var(--mono); font-size: 11px; letter-spacing:.18em;
  color: var(--muted); flex:none; padding-top: 4px;
}
.card__award{
  display:inline-block; margin-top:10px; padding: 2px 10px;
  border:1px solid rgba(139,166,255,.4); border-radius:100px;
  font-size: 10px; letter-spacing:.16em; color: var(--accent);
}

/* ---------- 关于 ---------- */
.about{
  display:grid; gap: clamp(48px, 7vw, 96px);
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
}
.about__body p{
  margin: 0 0 22px; color: var(--text-soft); font-size: 15.5px; line-height: 2.05;
}
.about__body p:first-child{ color: var(--text); font-size: 17px; }

.partners{ margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line-soft); }
.partners__label{
  display:block; margin-bottom: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing:.3em; color: var(--muted);
}
.partners li{
  position: relative; padding-left: 18px; margin-bottom: 10px;
  font-size: 14px; color: var(--text-soft);
}
.partners li::before{
  content:""; position:absolute; left:0; top: .72em;
  width: 6px; height:1px; background: var(--accent);
}

.block + .block{ margin-top: 56px; }
.block__title{
  margin: 0 0 26px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing:.3em; font-weight: 400;
  color: var(--muted); text-transform: uppercase;
}

.timeline li{
  position: relative; padding: 0 0 26px 26px;
  border-left: 1px solid var(--line);
}
.timeline li:last-child{ padding-bottom: 0; border-left-color: transparent; }
.timeline li::before{
  content:""; position:absolute; left:-3.5px; top: 9px;
  width: 7px; height: 7px; border-radius:50%;
  background: var(--bg); border: 1px solid var(--accent);
}
.timeline li:last-child::before{ background: var(--accent); box-shadow: 0 0 14px rgba(139,166,255,.7); }
.timeline__year{
  display:block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing:.18em; color: var(--accent); margin-bottom: 5px;
}
.timeline__text{ font-size: 14.5px; color: var(--text-soft); line-height: 1.7; }

.skills{ display:grid; gap: 18px; }
.skills dt{
  font-size: 12px; letter-spacing:.2em; color: var(--muted);
  font-family: var(--mono); margin-bottom: 6px;
}
.skills dd{ font-size: 14.5px; color: var(--text-soft); }

/* ---------- 联系 ---------- */
.section--contact{ padding-bottom: clamp(80px, 10vw, 140px); }
.mailto{
  display:flex; align-items:center; justify-content: space-between; gap: 24px;
  padding: clamp(26px, 4vw, 42px) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  transition: padding .5s var(--ease);
}
.mailto__text{
  font-size: clamp(20px, 3.6vw, 44px); font-weight: 200;
  letter-spacing: .03em; color: var(--text-soft);
  transition: color .45s var(--ease);
  word-break: break-all;
}
.mailto__arrow{
  font-size: clamp(20px, 2.4vw, 30px); color: var(--muted);
  transition: transform .5s var(--ease), color .45s var(--ease);
}
.mailto:hover .mailto__text{ color: var(--text); }
.mailto:hover .mailto__arrow{ transform: translate(6px,-6px); color: var(--accent); }

.contact__meta{
  display:grid; gap: 22px; margin-top: 52px;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  font-size: 14px; color: var(--text-soft);
}
.contact__meta span{
  display:block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing:.3em; color: var(--muted);
}
.contact__meta a{ border-bottom: 1px solid var(--line); transition: border-color .4s var(--ease); }
.contact__meta a:hover{ border-color: var(--accent); }

.site-footer{
  max-width: var(--maxw); margin: 0 auto;
  padding: 30px var(--pad) 46px;
  display:flex; justify-content:space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.16em;
  color: var(--muted);
}

/* ---------- 作品详情 ---------- */
.modal{
  position: fixed; inset: 0; z-index: 60;
  background: rgba(3,4,8,.96);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.modal.is-open{ opacity:1; visibility:visible; }
.modal__scroll{
  max-width: 1260px; margin: 0 auto; min-width: 0;
  padding: clamp(54px,6vw,90px) var(--pad) 72px;
  overflow-y: auto; height: 100%;
  display:grid; gap: clamp(30px,4.5vw,64px);
  grid-template-columns: minmax(0,1.45fr) minmax(0,.68fr);
  align-content: center;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal__media{
  position: relative; min-width: 0; border-radius: 6px; overflow:hidden;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 0 50px 130px -60px rgba(110,145,255,.55);
  transform: translateY(26px) scale(.965); opacity:0;
  transition: transform .85s var(--spring), opacity .55s var(--ease);
}
.modal.is-open .modal__media{ transform:none; opacity:1; }
.modal__media img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  /* 与卡片封面保持同一套调性，弹层里稍轻 */
  filter: saturate(.92) contrast(1.05) brightness(.96);
}
/* ---------- 影片播放器 ---------- */
.player{
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; overflow: hidden;
}
.player[hidden]{ display: none; }
.player__poster{ width:100%; height:100%; object-fit: cover; opacity:.72; }
.player__btn{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background: linear-gradient(180deg, rgba(5,6,10,.22), rgba(5,6,10,.58));
  transition: background .45s var(--ease);
}
.player__btn:hover{ background: linear-gradient(180deg, rgba(5,6,10,.12), rgba(5,6,10,.44)); }
.player__icon{
  width: 68px; height: 68px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding-left:5px;
  border:1px solid rgba(233,238,248,.5);
  background: rgba(10,12,20,.38);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 16px; color: var(--text);
  transition: transform .6s var(--spring), border-color .4s var(--ease),
              background .4s var(--ease);
}
.player__btn:hover .player__icon{ background: rgba(20,28,52,.55); }
.player__btn:hover .player__icon{ transform: scale(1.12); border-color: var(--accent); }
.player__btn:active .player__icon{ transform: scale(.96); }
.player__label{ font-size: 12.5px; letter-spacing:.28em; color: var(--text-soft); }
.player__stage{ position:relative; width:100%; height:100%; }
.player__video{ width:100%; height:100%; display:block; background:#000;
  animation: videoIn .7s var(--ease) both; }
@keyframes videoIn{ from{ opacity:0; } to{ opacity:1; } }

.player__quality{
  position:absolute; left:14px; top:14px; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  padding: 9px 15px; border-radius: 100px;
  border:1px solid rgba(233,238,248,.26);
  background: rgba(6,8,14,.52);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text-soft); font-size: 11px; letter-spacing:.18em;
  opacity:.82; transform:none;
  transition: opacity .35s var(--ease), transform .6s var(--spring),
              border-color .35s var(--ease), color .35s var(--ease),
              background .35s var(--ease);
  animation: fsIn .6s var(--spring) backwards;
}
.player__stage:hover .player__quality,
.player__quality:focus-visible{ opacity:1; }
.player__quality:hover{ border-color: rgba(139,166,255,.6); color: var(--text); background: rgba(10,16,34,.7); }
.player__quality:active{ transform: scale(.95); }

.player__fs{
  position:absolute; right:14px; top:14px; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 15px; border-radius: 100px;
  border:1px solid rgba(233,238,248,.26);
  background: rgba(6,8,14,.52);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text-soft); font-size: 11px; letter-spacing:.18em;
  opacity:.82; transform:none;
  transition: opacity .35s var(--ease), transform .6s var(--spring),
              border-color .35s var(--ease), color .35s var(--ease),
              background .35s var(--ease);
  animation: fsIn .6s var(--spring) backwards;
}
@keyframes fsIn{ from{ opacity:0; transform: translateY(-8px) scale(.9); } to{ opacity:.82; transform:none; } }
.player__stage:hover .player__fs,
.player__fs:focus-visible{ opacity:1; }
.player__fs:hover{ border-color: rgba(139,166,255,.6); color: var(--text); background: rgba(10,16,34,.7); }
.player__fs:active{ transform: scale(.95); }
.player__fs-text{ font-size:11px; }
.modal__media.is-playing .modal__badge{ opacity:0 !important; }
.player:fullscreen, .player__stage:fullscreen{ background:#000; }
.player__stage:fullscreen .player__video{ height:100%; }
.player__stage:fullscreen .player__fs{ opacity:1; transform:none; }
@media (hover: none){ .player__fs, .player__quality{ opacity:1; transform:none; } }
.player__fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color: var(--muted); font-size:13px; letter-spacing:.2em;
}

.modal__badge{
  position:absolute; z-index:4; left:16px; top:16px; padding: 5px 12px;
  transition: opacity .35s var(--ease);
  border:1px solid rgba(233,238,248,.28); border-radius:100px;
  background: rgba(6,8,14,.55); backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 10px; letter-spacing:.2em;
  color: var(--text-soft);
}
.modal__body{ min-width: 0; transform: translateY(26px); opacity:0; transition: transform .85s .06s var(--spring), opacity .55s .06s var(--ease); }
.modal.is-open .modal__body{ transform:none; opacity:1; }
.modal__kicker{
  margin:0 0 14px; font-family: var(--mono); font-size: 10px;
  letter-spacing:.3em; color: var(--accent); text-transform: uppercase;
}
.modal__title{ margin:0; font-size: clamp(22px,2.6vw,34px); font-weight:300; letter-spacing:.05em; line-height:1.35; }
.modal__sub{ margin: 12px 0 0; color: var(--muted); font-size: 13.5px;
  letter-spacing:.04em; overflow-wrap: anywhere; }
.modal__text{ margin: 24px 0 0; color: var(--text-soft); font-size: 15px;
  line-height: 2; overflow-wrap: anywhere; }
.modal__facts{
  margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line-soft);
  display:grid; gap: 14px;
}
.modal__facts div{ display:flex; justify-content:space-between; gap:20px;
  font-size: 13.5px; min-width: 0; }
.modal__facts dt{ color: var(--muted); font-family: var(--mono); font-size: 10.5px;
  letter-spacing:.2em; flex: none; }
.modal__facts dd{ color: var(--text-soft); text-align:right; min-width: 0; overflow-wrap: anywhere; }

.modal__close{
  position: fixed; top: 22px; right: var(--pad); z-index: 2;
  width: 44px; height: 44px; border-radius:50%;
  border: 1px solid var(--line); color: var(--text-soft);
  transition: border-color .4s var(--ease), color .4s var(--ease),
              transform .7s var(--spring), background .4s var(--ease);
}
.modal__close:hover{ border-color: var(--accent); color: var(--text); transform: rotate(90deg); }

body.modal-open{ overflow: hidden; }

/* ---------- 入场 ---------- */
.reveal{ opacity:0; transform: translateY(26px); }
.reveal.is-in{ animation: reveal 1.05s var(--spring-soft) forwards; }
@keyframes reveal{ to{ opacity:1; transform:none; } }

.observe{ opacity:0; transform: translateY(30px); }
.observe.is-in{ animation: reveal 1.05s var(--spring-soft) forwards; }

/* ---------- 响应式 ---------- */
@media (max-width: 1020px){
  .about{ grid-template-columns: minmax(0,1fr); gap: 56px; }
  .modal__scroll{ grid-template-columns: minmax(0,1fr); align-content: start; }
}

@media (max-width: 820px){
  .nav{
    position: fixed; inset: 0; z-index: 39;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 26px; padding: 0 var(--pad);
    background: rgba(5,6,10,.97);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .62s var(--spring-soft), visibility .62s var(--ease);
  }
  body.nav-open .nav{ transform: none; visibility: visible; pointer-events: auto; }
  /* 菜单展开时淡出品牌名，避免与菜单项在视觉上叠字 */
  .brand{ transition: opacity .3s var(--ease); }
  body.nav-open .brand,
  body.nav-open .nav-toggle span{ opacity: 0; }
  .nav a{ font-size: 22px; letter-spacing:.18em; }
  .nav-toggle{ display: block; z-index: 41; }

  .work-grid{ grid-template-columns: minmax(0,1fr); }
  .hero{ min-height: 92svh; padding-top: 120px; }
  .hero__title{ letter-spacing: .06em; }
  .hero__foot{ position: relative; z-index: 2; padding-top: 44px;
    font-size: 9px; letter-spacing: .16em; }
  .hero__coord{ display: none; }
  .hero__meta{ font-size: 10px; letter-spacing: .16em; }
  .hero__meta li + li::before{ margin: 0 10px; }
  .section__head{ flex-direction: column; gap: 10px; }
  .section__num{ padding-top: 0; }
  .card__meta{ flex-direction: column; gap: 2px; }
  .card__year{ padding-top: 0; }
  .mailto{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .modal__scroll{ padding-left: 16px; padding-right: 16px; }
  .modal__facts div{ flex-direction: column; gap: 3px; }
  .modal__facts dd{ text-align: left; }
  .modal__close{ right: 14px; top: 14px; width: 40px; height: 40px; }
  .player__fs, .player__quality{ top: 10px; padding: 7px 11px; font-size: 10px; }
  .player__fs{ right: 10px; }
  .player__quality{ left: 10px; }
  .site-footer{ flex-direction: column; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .reveal, .observe, .card{ opacity:1 !important; transform:none !important; animation:none !important; }
  .scroll-hint i{ animation: none; }
}