/* 滚动动效独立于页面布局；没有 JS 或关闭动画时，内容仍正常显示。 */
.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 2px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.site-header { transition: box-shadow .3s, background-color .3s; }
.site-header.is-scrolled {
  background-color: rgb(247 246 242 / .98);
  box-shadow: 0 1px 0 rgb(101 84 196 / .1), 0 10px 30px rgb(32 29 43 / .025);
}
.has-scroll-motion .hero-main-art img {
  transform: translate3d(0, var(--wheel-drift, 0px), 0);
}
.has-scroll-motion .hero-detail-art {
  rotate: var(--wheel-tilt, 0deg);
  transform-origin: 70% 85%;
}
.has-scroll-motion .note-inner h2 {
  background: linear-gradient(90deg, var(--ink) 50%, #b4a8c7 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@keyframes page-reading {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes hero-depth {
  from { scale: 1.04; translate: 0 0; }
  to { scale: 1.16; translate: 0 38px; }
}
@keyframes detail-lift {
  from { translate: 0 0; }
  to { translate: 0 -52px; }
}
@keyframes hero-copy-away {
  from { translate: 0 0; opacity: 1; }
  to { translate: 0 -24px; opacity: .55; }
}
@keyframes content-reveal {
  from { opacity: .12; translate: 0 36px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes note-ink {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@supports (animation-timeline: view()) and (animation-timeline: scroll(root block)) {
  .motion-native .reading-progress {
    animation: page-reading 1s linear both;
    animation-timeline: scroll(root block);
  }
  .motion-native .hero { view-timeline: --hero block; }
  .motion-native .hero-main-art img {
    animation: hero-depth 1s linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 100%;
  }
  .motion-native .hero-detail-art {
    animation: detail-lift 1s linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 100%;
  }
  .motion-native .hero-copy {
    animation: hero-copy-away 1s linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 100%;
  }
  .motion-native .motion-reveal {
    animation: content-reveal 1s cubic-bezier(.2,.6,.2,1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
  .motion-native .creative-note { view-timeline: --note block; }
  .motion-native .note-inner h2 {
    animation: note-ink 1s linear both;
    animation-timeline: --note;
    animation-range: entry 10% cover 55%;
  }
}
/* 不支持 CSS Scroll Timeline 时，由 requestAnimationFrame 提供同样的进度。 */
.motion-fallback .reading-progress { transform: scaleX(var(--page-progress, 0)); }
.motion-fallback .hero-main-art img {
  scale: var(--hero-scale, 1.04);
  translate: 0 var(--hero-shift, 0px);
}
.motion-fallback .hero-detail-art { translate: 0 var(--detail-shift, 0px); }
.motion-fallback .hero-copy {
  translate: 0 var(--copy-shift, 0px);
  opacity: var(--copy-opacity, 1);
}
.motion-fallback .motion-reveal {
  transition: opacity .65s ease, translate .75s cubic-bezier(.2,.6,.2,1);
}
.motion-fallback .motion-reveal:not(.is-revealed) { opacity: .12; translate: 0 30px; }
.motion-fallback .motion-reveal:focus-within { opacity: 1; translate: 0 0; }
.motion-fallback .note-inner h2 { background-position: var(--note-fill, 100%) 0; }
@media (max-width: 900px), (pointer: coarse) {
  .has-scroll-motion .hero-main-art img {
    animation: none;
    transform: none;
    translate: none;
    scale: none;
  }
  .has-scroll-motion .hero-detail-art { animation: none; rotate: none; translate: none; }
  .has-scroll-motion .hero-copy { animation: none; opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress { display: none; }
  .has-scroll-motion .motion-reveal,
  .has-scroll-motion .hero-copy,
  .has-scroll-motion .hero-main-art img,
  .has-scroll-motion .hero-detail-art {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transform: none !important;
  }
  .has-scroll-motion .note-inner h2 { background: none; color: var(--ink); }
}