.portal {
  --portal-gutter: clamp(24px, 4.5vw, 80px);
  --portal-progress: 0;
  position: fixed; inset: 0; z-index: 100; overflow: hidden; isolation: isolate;
  color: #f0f3f5; background: transparent;
  font-family: Inter, "Microsoft YaHei", sans-serif; pointer-events: none;
}
.portal[hidden], .portal-replay[hidden], .scene[hidden] { display: none; }
html { scrollbar-gutter: stable; scrollbar-color: #648594 #002c42; background-color: #002c42; }
html.portal-pending .portal { display: block; }
html.portal-pending #root { pointer-events: none; }
#root { position: relative; z-index: 1; }
html.scene-scroll #root { padding-top: var(--camera-distance, 2400px); }
.home-page { background-image: url('./home-scene-reference.jpg'); background-position: center; background-size: cover; }
html.scene-home .home-page { background: transparent; }
html.scene-home .home-page [class*="animate-fade-rise"] { animation: none; }
html.scene-home .home-page > nav, html.scene-home .home-page > .home-hero {
  opacity: var(--home-reveal, 1);
}
.scene, .scene__vignette { inset: 0; }
.scene { position: fixed; z-index: 0; overflow: hidden; background: #003149 url('./scene-sky.png') center top / cover no-repeat; pointer-events: none; }
.scene__vignette { position: absolute; }
.scene__sky {
  position: absolute; top: 0; left: 0; width: 100%; height: 180vh; z-index: 1;
  background: #003149 url('./scene-sky.png') center top / cover no-repeat;
  mask-image: linear-gradient(#000 55%, transparent 86%);
  will-change: transform, opacity;
}
.scene__video {
  position: absolute; left: 50%; top: 0;
  width: var(--video-width); height: var(--video-height); max-width: none;
  object-fit: cover; transform-origin: center top; will-change: transform;
}
.scene__vignette {
  pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at 50% 45%, transparent 35%, #001d2c3b 100%),
    linear-gradient(#001d2c26, transparent 18%, transparent 83%, #00121d55);
}
.scene__star {
  position: absolute; width: var(--size); height: var(--size); border-radius: 50%;
  background: #e1f4ff; box-shadow: 0 0 7px 1px #b4e7ff70;
  animation: star-shimmer var(--duration) ease-in-out var(--delay) infinite;
}
.scene__meteor {
  position: absolute; width: 95px; height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, #d9f5ff);
  transform-origin: right center;
  animation: meteor-drift var(--duration) linear var(--delay) infinite;
}
@keyframes star-shimmer { 0%, 100% { opacity: .16; } 50% { opacity: .9; } }
@keyframes meteor-drift {
  0%, 86% { opacity: 0; transform: rotate(-35deg) translateX(0); }
  87% { opacity: .7; }
  91%, 100% { opacity: 0; transform: rotate(-35deg) translateX(-340px); }
}
.scene--resting .scene__star, .scene--resting .scene__meteor { animation-play-state: paused; }
.portal__wordmark {
  position: absolute; left: 0; right: 0; top: 45%; transform: translateY(-50%);
  font: 400 clamp(25px, 5.2vw, 84px)/1.5 "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
  text-shadow: 0 2px 30px #00151c80; pointer-events: none; text-align: center;
  letter-spacing: .12em; text-indent: .12em; white-space: nowrap; will-change: opacity, transform;
}
.portal__guide {
  position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: max-content; max-width: calc(100% - 48px); color: #d4e6edb5;
  font-size: 11px; letter-spacing: .2em; text-shadow: 0 2px 10px #00151c;
  pointer-events: none;
}
.portal__guide-arrow { font-size: 21px; font-weight: 400; }
.portal__progress { position: absolute; width: 90px; height: 1px; background: #c6e0e340; top: calc(100% + 12px); }
.portal__progress > span { display: block; width: calc(var(--portal-progress) * 100%); height: 100%; margin-inline: auto; background: #d3e7ee; }
.portal__footer {
  position: absolute; bottom: 32px; inset-inline: var(--portal-gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.portal__note { color: #d8e7edab; font-size: 11px; letter-spacing: .2em; text-shadow: 0 2px 10px #00151c; }
.portal__enter {
  pointer-events: auto;
  border: 1px solid #d1e2e852; padding: 12px 20px; border-radius: 999px;
  background: #00314940; backdrop-filter: blur(8px); color: inherit;
  font-size: 12px; letter-spacing: .12em; cursor: pointer;
}
.portal__enter > span:last-child { margin-left: 16px; }
.portal__enter:disabled { pointer-events: none; }
.portal__enter:hover { background: #003149a0; border-color: #d1e2e89c; }
.portal__enter:focus-visible, .portal-replay:focus-visible { outline: 2px solid #e7eef2; outline-offset: 5px; }
.portal-replay {
  position: fixed; right: 28px; bottom: 22px; z-index: 20; padding: 10px 14px;
  border: 1px solid #ffffff24; border-radius: 999px; background: #002c4280;
  backdrop-filter: blur(8px); color: #d4e1e5; font-family: Inter, "Microsoft YaHei", sans-serif;
  font-size: 11px; letter-spacing: .08em; cursor: pointer;
}
.portal-replay span { margin-right: 7px; }
.portal-replay:hover { background: #002c42d9; color: #fff; }
.home-hero { min-height: calc(100svh - 88px); }
.home-reading-cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; color: #e5edf0bd;
  font-size: 11px; letter-spacing: .12em; text-shadow: 0 2px 12px #00151c;
}
.home-journal {
  padding: clamp(64px, 8vw, 110px) clamp(24px, 6.25vw, 96px) 96px;
  background: linear-gradient(#002c429c, #001d2cf5 100px, #001d2cf5);
}
.home-journal__inner { max-width: 1120px; margin-inline: auto; }
.home-journal__header { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 24px; margin-bottom: 40px; }
.home-journal__eyebrow { font-size: 10px; letter-spacing: .24em; color: #a7beca; }
.home-journal__title { margin: 14px 0; font-size: clamp(32px, 4vw, 50px); font-weight: 400; font-family: var(--font-display), "SimSun", serif; }
.home-journal__description { font-size: 14px; line-height: 1.8; color: #b8cbd4; }
.home-journal__all, .home-journal__assistant { color: #dbe7eb; font-size: 12px; padding-block: 10px; }
.home-journal__all:hover, .home-journal__assistant:hover { color: white; }
.home-journal__assistant { margin-left: auto; margin-right: 22px; }
.home-journal__list { border-top: 1px solid #c5dbe62e; }
.home-journal__entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 30px 0 34px; border-bottom: 1px solid #c5dbe62e; }
.home-journal__meta { display: flex; flex-wrap: wrap; gap: 16px; color: #a7beca; font-size: 11px; }
.home-journal__entry h3 { margin: 14px 0 12px; font-size: clamp(24px, 3vw, 34px); font-weight: 400; line-height: 1.4; font-family: var(--font-display), "SimSun", serif; }
.home-journal__entry p { max-width: 800px; color: #b8cbd4; line-height: 1.8; font-size: 14px; }
.home-journal__arrow { align-self: center; color: #a7beca; font-size: 24px; transition: transform 180ms, color 180ms; }
.home-journal__entry:hover h3, .home-journal__entry:hover .home-journal__arrow { color: white; }
.home-journal__entry:hover .home-journal__arrow { transform: translate(3px, -3px); }
html.scene-home { scroll-behavior: smooth; }
@media (max-width: 600px) {
  .portal__wordmark { font-size: clamp(24px, 5.9vw, 35px); }
  .portal__footer { bottom: max(24px, env(safe-area-inset-bottom)); }
  .portal__note { font-size: 10px; letter-spacing: .1em; }
  .portal__enter { padding: 12px 15px; }
  .portal__enter > span:last-child { margin-left: 8px; }
  .portal__guide { bottom: 24%; font-size: 10px; }
  .portal-replay { right: 20px; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene__star, .scene__meteor { animation: none; }
  html.scene-home { scroll-behavior: auto; }
  html.portal-pending .portal { display: none; }
  html.portal-pending { overflow: auto; }
  html.portal-pending #root { pointer-events: auto; }
  html.portal-pending #root [class*="animate-fade-rise"] { animation-play-state: running; }
  .portal-replay { display: none; }
}