.hero.hero-has-image { color: #f5f5ed; background: #13160f; }
/* Theme and saved layout are ready before any page content is painted. */
body[data-page="home"] { --entry-background: #100c14; background: #100c14; }
body[data-page="about"] { --entry-background: #100c14; }
.site-entry-pending body > :is(.site-header, main, .site-footer) { opacity: 0 !important; pointer-events: none; }
.site-header { transition: opacity 180ms ease, background-color 220ms ease, border-color 220ms ease; }
.hero-has-image::before { z-index: 1; background: linear-gradient(180deg, #070a084f 0%, #070a0866 45%, #070a089e 100%); }
.hero-has-image .hero-center, .hero-has-image .hero-topline, .hero-has-image .hero-bottomline { z-index: 2; }
.hero-has-image .placeholder-tag { color: #f4f5e6a8; }
.hero-has-image h1 { text-shadow: 0 2px 18px #00000026; }
body.has-hero-image .site-header.over-hero { color: #f5f5ed; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* 背景留在首屏，后续不透明内容沿原生滚动从下方覆盖它。 */
.has-hero-transition .hero { position: sticky; top: var(--hero-sticky-top, 0px); z-index: 0; }
.has-hero-transition .intro-section,
.has-hero-transition .works-section,
.has-hero-transition .outro-section { position: relative; z-index: 1; }
.has-hero-transition .intro-section { border-radius: calc((1 - var(--cover-progress, 0)) * 24px) calc((1 - var(--cover-progress, 0)) * 24px) 0 0; box-shadow: 0 -28px 70px rgb(0 0 0 / calc(var(--cover-progress, 0) * .16)); }
.has-scroll-motion .motion-reveal { opacity: var(--reveal-progress, 1); transform: translate3d(0, var(--reveal-offset, 0px), 0); }
.has-scroll-motion .motion-preview { transform: none; }
.page-entry-pending .page-hero,
.page-entry-pending .project-head,
.page-entry-pending .project-missing,
.page-entry-pending .hero-center,
.page-entry-pending .hero-bottomline { visibility: hidden; }
.has-scroll-motion .motion-page-entry {
  opacity: calc(var(--reveal-progress, 1) * var(--entry-progress, 1));
  translate: 0 var(--entry-offset, 0px);
  clip-path: inset(0 0 calc((1 - var(--entry-progress, 1)) * 100%) 0);
  will-change: translate, opacity, clip-path;
}
.has-scroll-motion .motion-compositor-entry { will-change: transform, opacity; }
.has-scroll-motion .motion-credit-entry { clip-path: none; will-change: transform, opacity; }
.has-scroll-motion .case-credit.motion-page-entry { clip-path: none; will-change: translate, opacity; }
.has-scroll-motion .motion-media, .has-scroll-motion .motion-preview { clip-path: inset(0 0 calc((1 - var(--reveal-progress, 1)) * 12%) 0); }
.has-scroll-motion .motion-media .media-object, .has-scroll-motion .motion-media > img { transform: none; }
.has-scroll-motion .motion-ink > .editable-text { display: block; background: linear-gradient(180deg, var(--ink) 0%, var(--ink) calc(var(--reveal-progress, 1) * 100%), #93998e calc(var(--reveal-progress, 1) * 100% + 12%), #93998e 100%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.has-scroll-motion .hero-has-image .custom-background-image :is(img, video) { transform: none; }
.has-scroll-motion .hero-center { transform: translate3d(0, calc(var(--hero-scroll, 0) * -48px), 0); opacity: calc(1 - var(--hero-scroll, 0) * .72); }
.has-scroll-motion .hero-topline, .has-scroll-motion .hero-bottomline { opacity: calc(1 - var(--hero-scroll, 0) * .65); }
.has-scroll-motion .motion-reveal:focus-within { opacity: 1; transform: none; clip-path: none; }
/* 返回首页时以同一底色衔接文档，文字沿用统一的入场时间线。 */
body::after {
  content: "";
  position: fixed;
  z-index: 90;
  inset: 0;
  background: var(--navigation-background, var(--entry-background, var(--paper)));
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(.22, 1, .36, 1);
}
body.is-navigation-leaving::after { opacity: 1; pointer-events: auto; transition-duration: 220ms; }
body.is-home-arriving::after { opacity: 1; transition: none; }
@media (max-width: 760px) { .hero-has-image::before { background: linear-gradient(180deg, #070a0866 0%, #070a087d 45%, #070a08ad 100%); } }
@media (prefers-reduced-motion: reduce) { .has-hero-transition .hero { position: relative; } .has-scroll-motion .motion-reveal { opacity: 1; transform: none; clip-path: none; } .has-scroll-motion .motion-ink > .editable-text { background: none; color: inherit; } .has-scroll-motion .custom-background-image :is(img, video), .has-scroll-motion .hero-center { transform: none; opacity: 1; } }