/* ============================================================
   MOTION — 开场 / 章节幕布 / 场景入场 / 降级
   原则：内容不依赖动效；关闭动效后所有元素停在可读终态。
   ============================================================ */

/* ==================== 开场 ==================== */
.intro{
  position:fixed;inset:0;z-index:90;
  display:grid;place-items:center;
  overflow:hidden;
  background:#111517;color:var(--paper);
}
.intro[hidden]{display:none}
.intro.leaving{animation:intro-exit .62s var(--ease) forwards}

.intro-grid{
  position:absolute;inset:-30%;
  background-image:
    linear-gradient(#cad5d911 1px,transparent 1px),
    linear-gradient(90deg,#cad5d911 1px,transparent 1px);
  background-size:56px 56px;
  transform:rotate(-24deg) scale(1.25);
  opacity:0;
}
.intro-struts{position:absolute;inset:0;pointer-events:none}
.intro-struts i{
  position:absolute;left:12%;top:50%;
  width:76vw;height:clamp(10px,2.6vw,30px);
  background:#ccd2c920;
  transform-origin:50% 50%;
  opacity:0;
}
.intro-struts i:nth-child(2){background:#c43b482e;--strut:90deg}
.intro-struts i:nth-child(3){height:1px;background:#cfd8d877;--strut:45deg}
.intro-struts i:nth-child(4){height:1px;background:#cfd8d84d;--strut:-45deg}

.intro-orbit{position:absolute;width:min(62vw,560px);aspect-ratio:1;opacity:0}
.intro-orbit i{position:absolute;inset:0;border:1px solid #d6ded76b;border-radius:50%}
.intro-orbit i:nth-child(2){inset:13%;border-radius:0;border-color:var(--red);transform:rotate(45deg)}
.intro-orbit i:nth-child(3){inset:26%;border-style:dashed;border-color:#c8ab7244}
.intro-orbit i:first-child::after{
  content:'';position:absolute;inset:-9%;
  border:1px solid #c5d1d02e;border-radius:50%;
  border-left:3px solid #d14657;
}

.intro-beam{
  position:absolute;width:100%;height:2px;
  background:var(--red);box-shadow:0 0 30px #ce3c4e66;
  opacity:0;
}

.intro-type{position:relative;z-index:2;text-align:center}
.intro-type strong{
  display:block;
  font:italic 700 clamp(50px,11.5vw,180px)/1 Georgia,var(--serif);
  letter-spacing:-6px;
  white-space:nowrap;
}
.intro-type strong>span{display:inline-block;transform-origin:50% 100%;opacity:0}
.intro-label{display:block;font:10px var(--mono);letter-spacing:5px;color:#b9c4c2;opacity:0}
.intro-caption{display:block;font-size:12px;letter-spacing:11px;color:#c7d1cb;opacity:0}

.intro-shutters{position:absolute;inset:0;z-index:3;display:flex;pointer-events:none}
.intro-shutters i{
  width:16.6667%;height:100%;background:var(--paper);
  transform:translateY(-101%);
}
.intro-shutters i:nth-child(2){--n:1}
.intro-shutters i:nth-child(3){--n:2}
.intro-shutters i:nth-child(4){--n:3}
.intro-shutters i:nth-child(5){--n:4}
.intro-shutters i:nth-child(6){--n:5}

.intro-foot{
  position:absolute;left:38px;right:38px;bottom:32px;z-index:4;
  display:flex;align-items:center;gap:22px;
  font:11px var(--mono);letter-spacing:2px;color:#c6cdc9;
  opacity:0;
}
.intro-progress{flex:1;height:1px;background:#ffffff25}
.intro-progress i{
  display:block;width:100%;height:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left;
}
#skip-intro{
  padding:5px 0;font-size:11px;
  border-bottom:1px solid #ffffff33;
  transition:color .3s,border-color .3s;
}
#skip-intro:hover{color:#fff;border-color:var(--red)}

/* 播放时序 */
.intro.playing .intro-grid{animation:intro-grid 3.4s var(--ease) both}
.intro.playing .intro-struts i{animation:intro-strut 3.4s var(--ease) both;animation-delay:calc(var(--n,0) * 80ms)}
.intro.playing .intro-struts i:nth-child(2){--n:1}
.intro.playing .intro-struts i:nth-child(3){--n:2}
.intro.playing .intro-struts i:nth-child(4){--n:3}
.intro.playing .intro-orbit{animation:intro-orbit 3.2s var(--ease) both}
.intro.playing .intro-orbit i:first-child::after{animation:intro-arm 3.2s var(--ease) both}
.intro.playing .intro-beam{animation:intro-beam 2.6s var(--ease) both}
.intro.playing .intro-label{animation:intro-fade 3.2s var(--ease) both}
.intro.playing .intro-caption{animation:intro-fade 3.2s .12s var(--ease) both}
.intro.playing .intro-type strong{
  animation:intro-type 3.2s var(--ease) both;
}
.intro.playing .intro-type strong>span{
  animation:intro-letter 3.4s var(--ease) both;
  animation-delay:calc(var(--letter,0) * 46ms);
}
.intro.playing .intro-foot{animation:intro-fade 3.2s .5s var(--ease) both}
.intro.playing .intro-progress i{animation:intro-progress 3.3s linear both}
.intro.playing .intro-shutters i{animation:intro-shutter 3.4s var(--ease) both;animation-delay:calc(var(--n,0) * 26ms)}

@keyframes intro-grid{
  0%{opacity:0;transform:rotate(-24deg) scale(1.25)}
  26%,78%{opacity:1;transform:rotate(-16deg) scale(1)}
  100%{opacity:0;transform:rotate(-6deg) scale(.86)}
}
@keyframes intro-strut{
  0%{opacity:0;transform:rotate(var(--strut,0deg)) scaleX(0)}
  22%,56%{opacity:1;transform:rotate(var(--strut,0deg)) scaleX(1)}
  86%,100%{opacity:0;transform:rotate(calc(var(--strut,0deg) + 90deg)) scaleX(.3)}
}
@keyframes intro-orbit{
  0%{opacity:0;transform:scale(.08) rotate(-110deg)}
  22%{opacity:1}
  46%{transform:scale(1) rotate(0)}
  74%{opacity:1;transform:scale(1.06) rotate(22deg)}
  100%{opacity:0;transform:scale(2.1) rotate(96deg)}
}
@keyframes intro-arm{to{transform:rotate(-330deg)}}
@keyframes intro-beam{
  0%{top:50%;opacity:0;transform:scaleX(0)}
  16%{opacity:1;transform:scaleX(1)}
  50%{top:20%}
  76%{top:82%;opacity:1}
  100%{top:100%;opacity:0}
}
@keyframes intro-fade{
  0%,10%{opacity:0}
  32%,80%{opacity:1}
  100%{opacity:0}
}
@keyframes intro-type{
  0%,10%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-26px)}
  34%,80%{opacity:1;clip-path:inset(0);transform:none}
  100%{opacity:0;transform:scale(1.1)}
}
@keyframes intro-letter{
  0%,6%{opacity:0;transform:translateY(105%) rotateY(72deg)}
  26%,82%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-18%)}
}
@keyframes intro-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes intro-shutter{
  0%,70%{transform:translateY(-101%)}
  86%{transform:translateY(0)}
  100%{transform:translateY(101%)}
}
@keyframes intro-exit{to{opacity:0;visibility:hidden}}

/* ==================== 章节幕布 ==================== */
.veil{
  --veil-d:920ms;
  --veil-rot:-7deg;
  --plate-bg:#e4e5dd;
  --plate-fg:#101719;
  --plate-accent:#ce3c4e;
  position:fixed;
  inset:var(--top) 0 var(--foot) var(--side);
  z-index:50;
  overflow:hidden;
  visibility:hidden;
  pointer-events:none;
  isolation:isolate;
}
.veil.active{visibility:visible}

.veil-commit{position:absolute;inset:-2px;z-index:0;background:#111719;opacity:0}

.veil-panels{position:absolute;inset:0;z-index:1;display:flex}
.veil-panels i{
  display:block;flex:1;height:100%;
  background:#dce0d9;transform:scaleY(0);transform-origin:top;
}
.veil-panels i:nth-child(2){background:var(--plate-accent);transform-origin:bottom}
.veil-panels i:nth-child(3){background:#101719}

.veil-bars{position:absolute;inset:0;z-index:2;display:flex;justify-content:space-evenly;overflow:hidden}
.veil-bars i{display:block;width:2px;height:100%;background:#10171955;transform:scaleY(0);transform-origin:top}
.veil-bars i:nth-child(2n){width:6px;transform-origin:bottom}

.veil-ring{
  position:absolute;left:50%;top:50%;z-index:3;
  width:min(60%,540px);aspect-ratio:1;
  transform:translate(-50%,-50%);opacity:0;
}
.veil-ring svg{width:100%;height:100%;overflow:visible;fill:none}
.veil-ring path{
  stroke:#e5e6dd99;stroke-width:.6;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:0;
}
.veil-ring .veil-ring-red{stroke:var(--red);stroke-width:1.6}

.veil-plate{
  position:absolute;z-index:6;
  left:-6%;right:-6%;top:34%;height:28%;
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--plate-bg);color:var(--plate-fg);
  border-top:2px solid #101719;border-bottom:2px solid #101719;
  transform:rotate(var(--veil-rot)) translateX(-118%);
}
.veil-plate::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:8px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
}
.veil-plate span{
  position:relative;margin-left:8%;
  font:800 clamp(38px,7.6vw,124px)/.86 var(--sans);
  letter-spacing:-.055em;text-transform:uppercase;white-space:nowrap;
}

.veil-index{
  position:absolute;left:7%;right:7%;bottom:8%;z-index:8;
  display:flex;justify-content:space-between;gap:20px;
  font:10px var(--mono);letter-spacing:3px;color:#e5e6dd;
  opacity:0;
}
.veil-index b{font-weight:400}

/* 每章一套过场配色与构图 */
.veil[data-to="home"]{--plate-bg:#101719;--plate-fg:#e5e6dd;--veil-rot:-4deg;--plate-accent:#1c3542}
.veil[data-to="works"]{--plate-bg:#e4e5dd;--plate-fg:#101719;--veil-rot:-7deg;--plate-accent:#ce3c4e}
.veil[data-to="studies"]{--plate-bg:#ce3c4e;--plate-fg:#f6ece7;--veil-rot:4deg;--plate-accent:#101719}
.veil[data-to="about"]{--plate-bg:#141715;--plate-fg:#e5e6dd;--veil-rot:0deg;--plate-accent:#c6a86f}
.veil[data-to="about"] .veil-plate span{font-family:var(--serif);font-style:italic;letter-spacing:-.02em}
.veil[data-to="studies"] .veil-ring,
.veil[data-to="works"] .veil-ring{display:none}
.veil[data-to="works"] .veil-bars i{background:#10171933}
.veil[data-to="about"] .veil-bars{display:none}

.veil.active .veil-commit{animation:veil-commit var(--veil-d) linear both}
.veil.active .veil-panels i{animation:veil-panel var(--veil-d) var(--ease) both}
.veil.active .veil-panels i:nth-child(2){animation-delay:40ms}
.veil.active .veil-panels i:nth-child(3){animation-delay:80ms}
.veil.active .veil-bars i{animation:veil-bar var(--veil-d) var(--ease) both;animation-delay:calc(var(--n,0) * 18ms)}
.veil.active .veil-bars i:nth-child(2){--n:1}
.veil.active .veil-bars i:nth-child(3){--n:2}
.veil.active .veil-bars i:nth-child(4){--n:3}
.veil.active .veil-bars i:nth-child(5){--n:4}
.veil.active .veil-bars i:nth-child(6){--n:5}
.veil.active .veil-bars i:nth-child(7){--n:6}
.veil.active .veil-plate{animation:veil-plate var(--veil-d) cubic-bezier(.7,0,.2,1) both}
.veil.active .veil-plate::after{animation:veil-plate-bar var(--veil-d) var(--ease) both}
.veil.active .veil-ring{animation:veil-ring var(--veil-d) var(--ease) both}
.veil.active .veil-ring path{animation:veil-trace var(--veil-d) linear both}
.veil.active .veil-index{animation:veil-index var(--veil-d) steps(1,end) both}

@keyframes veil-commit{0%,12%,90%,100%{opacity:0}32%,68%{opacity:1}}
@keyframes veil-panel{0%{transform:scaleY(0)}26%,54%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes veil-bar{
  0%{transform:scaleY(0);opacity:0}
  30%{opacity:.8}
  54%,74%{transform:scaleY(1);opacity:.8}
  100%{transform:scaleY(1);opacity:0}
}
@keyframes veil-plate{
  0%,14%{transform:rotate(var(--veil-rot)) translateX(-118%)}
  38%,62%{transform:rotate(var(--veil-rot)) translateX(0)}
  92%,100%{transform:rotate(var(--veil-rot)) translateX(118%)}
}
@keyframes veil-plate-bar{0%,34%{transform:scaleX(0)}52%,100%{transform:scaleX(1)}}
@keyframes veil-ring{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-60deg)}
  40%,66%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.45) rotate(30deg)}
}
@keyframes veil-trace{0%,16%{stroke-dasharray:1;stroke-dashoffset:1}58%,100%{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes veil-index{0%,25%,80%,100%{opacity:0}30%,76%{opacity:1}}

/* ==================== 场景入场 ==================== */
.chapter-enter .home-title .title-line>span{animation:title-reveal 1.2s var(--ease) both;animation-delay:120ms}
.chapter-enter .home-title .title-line:nth-child(2)>span{animation-delay:250ms}
.chapter-enter .home-eyebrow{animation:rise-in .9s var(--ease) both;animation-delay:.06s}
.chapter-enter .home-caption,
.chapter-enter .home-body .cut-button,
.chapter-enter .home-coordinate,
.chapter-enter .home-side-label{animation:rise-in .9s var(--ease) both;animation-delay:.36s}
.chapter-enter .home-bottom{animation:rise-in .9s .46s var(--ease) both}
.chapter-enter .home-orbits{animation:orbit-in 1.4s var(--ease) both}
.chapter-enter .home-watermark{animation:watermark-unfold 1.5s .2s var(--ease) both}

.chapter-enter .project-card{animation:project-assemble .85s var(--ease) both}
.chapter-enter .project-card:nth-child(2){animation-delay:.08s}
.chapter-enter .project-card:nth-child(3){animation-delay:.16s}
.chapter-enter .project-card:nth-child(4){animation-delay:.24s}
.chapter-enter .project-card:nth-child(5){animation-delay:.32s}
.chapter-enter .scene-works .scene-head,
.chapter-enter .scene-studies .scene-head{animation:rise-in .8s var(--ease) both}
.chapter-enter .works-foot,
.chapter-enter .study-foot{animation:rise-in .9s .3s var(--ease) both}

.chapter-enter .study-tabs button{animation:nav-stamp .8s var(--ease) both}
.chapter-enter .study-tabs button:nth-child(2){animation-delay:.1s}
.chapter-enter .study-tabs button:nth-child(3){animation-delay:.2s}
.chapter-enter .study-board{animation:rise-in .9s .18s var(--ease) both}
.chapter-enter .study-backdrop{animation:rise-in 1.2s var(--ease) both}

.chapter-enter .about-heading{animation:rise-in .9s var(--ease) both}
.chapter-enter .about-field{animation:profile-stamp .8s var(--ease) both}
.chapter-enter .about-field:nth-child(1){animation-delay:.1s}
.chapter-enter .about-field:nth-child(2){animation-delay:.19s}
.chapter-enter .about-field:nth-child(3){animation-delay:.28s}
.chapter-enter .about-field:nth-child(4){animation-delay:.37s}
.chapter-enter .about-intro{animation:rise-in .9s .12s var(--ease) both}
.chapter-enter .about-name{animation:watermark-unfold 1.4s var(--ease) both}
.chapter-enter .about-watermark{animation:watermark-unfold 1.8s .3s var(--ease) both}
.chapter-enter .about-connectors path{
  animation:connector-draw 1.35s calc(.3s + var(--line,0) * 130ms) cubic-bezier(.4,0,.2,1) both;
}
.chapter-enter .about-content .cut-button{animation:rise-in .9s .5s var(--ease) both}

/* 观测切换 */
.study-board.study-switching .study-art{animation:study-art-in .55s var(--ease) both}
.study-board.study-switching .study-content{animation:study-copy-in .5s .04s var(--ease) both}

@keyframes rise-in{
  from{opacity:0;transform:translateY(26px);clip-path:inset(0 0 100% 0)}
  to{opacity:1;transform:none;clip-path:inset(0)}
}
@keyframes title-reveal{from{transform:translateY(112%) skewY(4deg)}to{transform:none}}
@keyframes project-assemble{
  from{opacity:0;transform:translateX(44px) skewY(2deg);clip-path:inset(0 0 0 100%)}
  to{opacity:1;transform:none;clip-path:inset(0)}
}
@keyframes profile-stamp{
  from{opacity:0;transform:translateY(16px);clip-path:inset(0 100% 0 0)}
  to{opacity:1;transform:none;clip-path:inset(0)}
}
@keyframes watermark-unfold{
  from{clip-path:inset(0 100% 0 0);transform:translateX(-40px)}
  to{clip-path:inset(0);transform:none}
}
@keyframes orbit-in{
  from{opacity:0;transform:rotate(-40deg) scale(.72)}
  to{opacity:.7;transform:rotate(-20deg) scale(1)}
}
@keyframes connector-draw{
  0%{stroke-dashoffset:1;opacity:0}
  20%{opacity:.7}
  76%{stroke-dashoffset:0;opacity:.42}
  100%{stroke-dashoffset:0;opacity:.14}
}
@keyframes study-art-in{from{opacity:.15;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes study-copy-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes dialog-enter{
  from{opacity:0;transform:translateY(40px) scale(.97);clip-path:inset(0 0 100% 0)}
  to{opacity:1;transform:none;clip-path:inset(0)}
}

/* ==================== 暂停与降级 ==================== */
body.page-hidden *,
body.page-hidden *::before,
body.page-hidden *::after{animation-play-state:paused!important}

body.motion-off *,
body.motion-off *::before,
body.motion-off *::after{animation:none!important;transition:none!important}
body.motion-off .intro,
body.motion-off .veil{display:none!important}
body.motion-off .nav-traveller{transition:none!important}
body.motion-off .title-line>span,
body.motion-off .home-title,
body.motion-off .home-eyebrow,
body.motion-off .home-caption,
body.motion-off .home-bottom,
body.motion-off .home-coordinate,
body.motion-off .home-side-label,
body.motion-off .home-orbits,
body.motion-off .home-watermark,
body.motion-off .project-card,
body.motion-off .study-board,
body.motion-off .study-tabs button,
body.motion-off .about-field,
body.motion-off .about-heading,
body.motion-off .about-intro,
body.motion-off .about-name,
body.motion-off .about-watermark,
body.motion-off .about-connectors path{
  opacity:1;transform:none;clip-path:none;stroke-dashoffset:0;
}
body.motion-off .ambient,
body.motion-off .cursor-ring,
body.motion-off .cursor-dot{display:none}
body.motion-off .motion-glyph i{height:2px}
body.motion-off .scroll-trace{transition:none}
body.motion-off .project-view{transform:none}
body.motion-off .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root:not([data-motion="on"]) .intro,
  :root:not([data-motion="on"]) .veil{display:none!important}
  :root:not([data-motion="on"]) *,
  :root:not([data-motion="on"]) *::before,
  :root:not([data-motion="on"]) *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ==================== 转场响应式 ==================== */
@media (max-width:980px){
  .intro-type strong{letter-spacing:-4px}
  .intro-foot{left:26px;right:26px}
}
@media (max-width:680px){
  .veil{inset:116px 0 var(--foot) 0}
  .veil-plate{left:-14%;right:-14%;top:38%;height:21%;min-height:100px}
  .veil-plate span{font-size:clamp(34px,10.5vw,66px);white-space:normal;max-width:88%;line-height:.92;margin-left:10%}
  .veil-ring{width:92%}
  .veil-index{left:7%;right:7%;bottom:6%;font-size:8px;letter-spacing:1.2px}
  .veil-index b:last-child{max-width:46%;text-align:right}
  .intro-orbit{width:84vw}
  .intro-type strong{font-size:clamp(40px,15vw,84px);letter-spacing:-3px}
  .intro-label{font-size:8px;letter-spacing:2px}
  .intro-caption{font-size:10px;letter-spacing:6px}
  .intro-foot{left:20px;right:20px;bottom:22px;gap:13px;font-size:9px}
  #skip-intro{font-size:9px}
  .intro-struts i{width:130vw;left:-15%;height:14px}
  .intro-struts i:nth-child(3),
  .intro-struts i:nth-child(4){height:1px}
}