/* 分屏：每个 .screen 至少一屏高，滚动吸附；进入视口时播放过场 */
html {
  scroll-snap-type: y proximity;
}

.screen {
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-margin-top: 0;
}

/* 过场 1：屏顶一条光谱线从左扫到右 */
.screen::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 2px;
  background: var(--color-text-default);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.screen.is-active::after {
  animation: screen-sweep 900ms var(--ease-out) forwards;
}

.hero.screen::after {
  display: none;
}

@keyframes screen-sweep {
  0% { opacity: 1; transform: scaleX(0); }
  70% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

/* 过场 2：标题区上浮淡入，正文区跟随 */
.js .screen .hero-copy,
.js .screen .section-intro,
.js .screen .about-block-head,
.js .screen .contact-lead,
.js .screen .case-head,
.js .screen .case-rel,
.js .screen .case-proj {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.js .screen .trait-meters,
.js .screen .sg-list,
.js .screen .trait-hero,
.js .screen .sg-gaps,
.js .screen .project-list,
.js .screen .project-module,
.js .screen .experience-list,
.js .screen .contact-cards {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out) 180ms, transform 700ms var(--ease-out) 180ms;
}

.js .screen.is-active .hero-copy,
.js .screen.is-active .section-intro,
.js .screen.is-active .about-block-head,
.js .screen.is-active .contact-lead,
.js .screen.is-active .case-head,
.js .screen.is-active .case-rel,
.js .screen.is-active .case-proj,
.js .screen.is-active .trait-meters,
.js .screen.is-active .sg-list,
.js .screen.is-active .trait-hero,
.js .screen.is-active .sg-gaps,
.js .screen.is-active .project-list,
.js .screen.is-active .project-module,
.js .screen.is-active .experience-list,
.js .screen.is-active .contact-cards {
  opacity: 1;
  transform: none;
}

/* 分屏内的卡片 reveal 交给屏级过场统一控制，避免双重动画 */
.screen .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-snap-type: none;
  }

  .screen::after {
    display: none;
  }

  .screen .hero-copy,
  .screen .section-intro,
  .screen .about-block-head,
  .screen .contact-lead,
  .screen .trait-meters,
  .screen .sg-list,
  .screen .trait-hero,
  .screen .sg-gaps,
  .screen .project-list,
  .screen .project-module,
  .screen .experience-list,
  .screen .contact-cards {
    opacity: 1;
    transform: none;
    transition: none;
  }
}