/* 琉星羽开屏：深空底、右侧琉羽、左侧品牌；线稿完成后依次显现立绘与文字。 */
.welcome-screen {
  --pearl: #f1edf8;
  --lilac: #c5b3f4;
  --mauve: #b79dcc;
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  grid-template-columns: minmax(340px,.86fr) 1.14fr;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(34px,6vw,88px) clamp(28px,8vw,132px);
  box-sizing: border-box;
  color: var(--pearl);
  background:
    radial-gradient(ellipse 38% 82% at 82% 45%, rgba(126,106,184,.17), transparent 72%),
    radial-gradient(ellipse 28% 62% at 97% 88%, rgba(145,111,141,.10), transparent 74%),
    linear-gradient(112deg,#0b0b17 0%,#11101f 54%,#19182c 100%);
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transition: opacity 780ms cubic-bezier(.22,.72,.18,1), filter 780ms cubic-bezier(.22,.72,.18,1), visibility 0s linear 780ms;
}
.welcome-screen.is-exiting { opacity: 0; filter: blur(8px); visibility: hidden; pointer-events: none; }
.welcome-screen > *:not(.welcome-filters) { position: relative; z-index: 1; }
html.splash-active body > :not(#splash):not(script) {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 720ms cubic-bezier(.22,.72,.18,1), visibility 0s linear 720ms;
}
html.splash-active #scrollProgress,
html.splash-active #cursorGlow { display: none !important; }
body > :not(#splash):not(script) { transition: opacity 720ms cubic-bezier(.22,.72,.18,1); }
.welcome-atmosphere {
  position: absolute !important; z-index: 0 !important; inset: -20%; pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(1px 1px at 18% 27%,rgba(238,235,255,.7) 50%,transparent 100%),
    radial-gradient(1px 1px at 67% 18%,rgba(216,207,255,.55) 50%,transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 62%,rgba(232,229,255,.65) 50%,transparent 100%),
    radial-gradient(1px 1px at 42% 74%,rgba(201,194,246,.55) 50%,transparent 100%),
    radial-gradient(1px 1px at 92% 34%,rgba(220,199,215,.48) 50%,transparent 100%);
}

.welcome-brand {
  position: absolute !important; top: clamp(38px,6vw,80px); left: clamp(44px,8vw,132px);
  display: flex; align-items: center; gap: 12px; opacity: 0;
  color: rgba(239,237,252,.78); font-size: .77rem; letter-spacing: .16em;
}

.welcome-brand img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(185,164,244,.25)); }
.welcome-brand-dot { padding: 0 .55em; color: rgba(194,183,235,.8); }
.welcome-art {
  position: absolute !important; z-index: 0 !important; inset: 0 0 0 40%; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 14%,#000 88%,rgba(0,0,0,.82) 100%);
  mask-image: linear-gradient(90deg,transparent 0%,#000 14%,#000 88%,rgba(0,0,0,.82) 100%);
}
.welcome-art img {
  position: absolute; right: clamp(24px,4.5vw,86px); bottom: -10vh; height: min(88vh,900px); width: auto; aspect-ratio: 1670 / 942; max-width: none;
  object-fit: contain; object-position: center; user-select: none; transform-origin: 55% 48%;
}
.welcome-line-svg {
  position: absolute; right: clamp(24px,4.5vw,86px); bottom: -10vh; height: min(88vh,900px); width: auto; aspect-ratio: 1670 / 942; max-width: none;
  overflow: visible; opacity: 0; pointer-events: none; mix-blend-mode: screen;
}
.welcome-line-svg .welcome-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-opacity: .92; }




.welcome-depth { opacity: 0; filter: blur(18px) saturate(.8); transform: scale(1.035) translate3d(-7px,3px,0); mix-blend-mode: screen; }
.welcome-color { opacity: 0; filter: drop-shadow(0 0 22px rgba(163,146,218,.10)); }



.welcome-copy {
  z-index: 2 !important; grid-column: 1; width: min(100%,520px); margin-top: 4vh;
  opacity: 0; transform: translateY(8px);
}

.welcome-overline,.welcome-copy .welcome-title,.welcome-system,.welcome-greeting,.welcome-enter,.welcome-skip,.welcome-intro { opacity: 0; transform: translateY(8px); }
.welcome-overline { margin: 0 0 20px; color: rgba(205,198,239,.75); font: 500 .66rem/1.4 var(--font-mono,"JetBrains Mono",monospace); letter-spacing: .24em; }

.welcome-overline span { padding: 0 .45em; color: rgba(203,194,238,.76); }
.welcome-copy .welcome-title {
  margin: 0; color: #f4f2ff;
  background: linear-gradient(105deg,#f3eff9 3%,#c4b0ff 52%,#d4b9ca 82%,#c8ac83 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 28px rgba(170,151,218,.18));
  font-family: var(--font-display,"Noto Serif SC","Songti SC",serif);
  font-size: clamp(3.35rem,6.2vw,6.2rem); font-weight: 500; line-height: .98; letter-spacing: .035em;
}

.welcome-copy .welcome-title span {
  display: block; margin-top: 12px; color: #d6caef; -webkit-text-fill-color: #d6caef;
  font: 300 clamp(1.25rem,2vw,2rem)/1.2 var(--font-serif,Georgia,serif); letter-spacing: .42em;
}
.welcome-system { margin: 26px 0 0; color: rgba(214,211,235,.86); font-size: clamp(.94rem,1.2vw,1.1rem); letter-spacing: .16em; }

.welcome-greeting {
  margin: 13px 0 0; color: rgba(244,242,255,.93); font-family: var(--font-display,"Noto Serif SC","Songti SC",serif);
  font-size: clamp(1.02rem,1.45vw,1.3rem); letter-spacing: .055em; line-height: 1.9;
}

.welcome-mobile-break { display: none; }
.welcome-enter {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-width: 178px;
  margin-top: 28px; padding: 13px 16px 13px 21px; border: 1px solid rgba(207,190,236,.38); border-radius: 4px;
  color: #f5f2ff; background: linear-gradient(110deg,rgba(177,157,235,.16),rgba(141,135,190,.07) 62%,rgba(173,145,162,.07));
  box-shadow: inset 0 1px rgba(255,255,255,.08),0 10px 38px rgba(7,8,19,.13);
  font-family: inherit; font-size: .8rem; font-weight: 500; line-height: 1.2; letter-spacing: .15em;
  cursor: pointer; transition: border-color 220ms ease,background 220ms ease,transform 220ms ease,opacity 220ms ease;
  backdrop-filter: blur(8px);
}

.welcome-enter:hover:not(:disabled) { border-color: rgba(222,217,255,.68); background-color: rgba(172,161,255,.15); transform: translateY(-2px); }
.welcome-enter:focus-visible,.welcome-skip:focus-visible { outline: 2px solid #d8cfff; outline-offset: 4px; }
.welcome-enter:disabled { opacity: .4; cursor: wait; }
.welcome-enter-arrow { color: rgba(224,209,249,.88); font-size: 1rem; transition: transform 180ms ease; }
.welcome-enter:hover:not(:disabled) .welcome-enter-arrow { transform: translate(2px,-2px); }
.welcome-skip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 14px; padding: 10px 0; border: 0;
  color: rgba(227,224,244,.62); background: transparent; font-family: inherit; font-size: .69rem; letter-spacing: .06em;
  cursor: pointer; transition: color 180ms ease;
}

.welcome-skip span { color: rgba(214,212,235,.42); font: 500 .57rem/1 var(--font-mono,monospace); letter-spacing: .12em; }
.welcome-skip:hover { color: rgba(239,237,252,.9); }
.welcome-loading { display: none; }
.welcome-screen.is-fallback .welcome-line-svg { display: none; }
.welcome-screen.is-fallback .welcome-color { opacity: .88; animation: none; transform: none; }
.welcome-screen.is-fallback .welcome-depth { opacity: 0; animation: none; }
.welcome-screen.is-fallback .welcome-brand,
.welcome-screen.is-fallback .welcome-copy,
.welcome-screen.is-fallback .welcome-overline,
.welcome-screen.is-fallback .welcome-copy .welcome-title,
.welcome-screen.is-fallback .welcome-system,
.welcome-screen.is-fallback .welcome-greeting,
.welcome-screen.is-fallback .welcome-enter,
.welcome-screen.is-fallback .welcome-skip { opacity: 1; transform: none; animation: none; }

/* One continuous timeline. All strokes retain their completed ink until color arrives. */
#splash.welcome-screen { background: radial-gradient(ellipse 52% 100% at 88% 50%,#211b38 0%,transparent 76%),var(--color-bg,#0a0912); }
.welcome-art { inset: 0 !important; overflow: hidden; mask-image: linear-gradient(90deg,transparent 12%,#000 48%); -webkit-mask-image: linear-gradient(90deg,transparent 12%,#000 48%); }
.welcome-portrait { position: absolute; top: 50%; right: 0; width: max(100vw,177.2824vh); height: max(100vh,56.4072vw); transform: translateY(-50%); }
.welcome-portrait img,.welcome-portrait .welcome-line-svg { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: fill; max-width: none; }
.welcome-line-svg { filter: none; }
.welcome-line-svg > g { opacity: 1; stroke-width: .85; }
.welcome-line-svg .welcome-stroke { stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-opacity: 0; }
.welcome-eye-svg > g { stroke-width: 1; }
.welcome-detail-svg > g { stroke-width: .65; }
.welcome-eye-svg stop:nth-child(1),.welcome-lineart-svg stop:nth-child(1) { stop-color: #b7aef8; }
.welcome-eye-svg stop:nth-child(2),.welcome-lineart-svg stop:nth-child(2) { stop-color: #e0d9f5; }
.welcome-eye-svg stop:nth-child(3),.welcome-lineart-svg stop:nth-child(3) { stop-color: #cfb99a; }
.welcome-detail-svg stop:nth-child(1) { stop-color: #8c80b0; }
.welcome-detail-svg stop:nth-child(2) { stop-color: #aaa0c8; }
.welcome-detail-svg stop:nth-child(3) { stop-color: #ab94a7; }
.welcome-screen.is-ready .welcome-line-svg { opacity: .88; animation: welcome-ink-dissolve .4s ease 2.38s forwards; }
.welcome-screen.is-ready .welcome-lineart-svg { animation: welcome-ink-dissolve .4s ease 2.38s forwards; }
.welcome-screen.is-ready .welcome-lineart-svg > g { animation: welcome-line-breathe 2.6s ease-in-out 1.86s 1 both; }
.welcome-screen.is-ready .welcome-detail-svg { opacity: 0; animation: welcome-detail-in .38s ease .72s forwards; }
.welcome-screen.is-ready .welcome-detail-svg .welcome-stroke { animation: none; stroke-dashoffset: 0; stroke-opacity: .92; }
.welcome-screen.is-ready .welcome-eye-svg { opacity: 1; filter: none; animation-delay: 2.25s; }
/* Each bucket is at most 8.34ms wide: the original paths stay intact while
   one inherited dash animation updates the whole bucket instead of each path. */
.welcome-screen.has-batched-strokes .welcome-stroke-batch { stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-opacity: .92; animation: welcome-stroke-draw var(--batch-draw) linear var(--batch-start) both; }
.welcome-screen.has-batched-strokes .welcome-eye-svg .welcome-stroke,
.welcome-screen.has-batched-strokes .welcome-lineart-svg .welcome-stroke { stroke-dasharray: inherit; stroke-dashoffset: inherit; stroke-opacity: inherit; }
.welcome-screen.is-ready:not(.has-batched-strokes) .welcome-eye-svg .welcome-stroke,
.welcome-screen.is-ready:not(.has-batched-strokes) .welcome-lineart-svg .welcome-stroke { animation: welcome-stroke-draw var(--draw) linear var(--start) both; }
.welcome-pen { stroke: #eee8ff; stroke-width: 1.4; stroke-dasharray: .025 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 3px #c5b3f4); }
.welcome-screen.is-ready .welcome-pen { animation: welcome-pen-draw var(--draw) linear var(--start) both; }
.welcome-color { filter: url(#welcome-portrait-tone) brightness(.82) saturate(.8) contrast(1.025); transform-origin: 88% 57%; }
.welcome-depth { filter: blur(26px) brightness(.4) saturate(.65); mix-blend-mode: screen; }
.welcome-screen.is-ready .welcome-color { animation: welcome-color-arrive .95s cubic-bezier(.22,.72,.3,1) 2.78s both, welcome-figure-breathe 3.8s ease-in-out 3.72s infinite alternate; }
.welcome-screen.is-ready .welcome-depth { animation: welcome-depth-arrive .8s ease 2.85s both; }
.welcome-eye-light { opacity: 0; filter: brightness(.95) saturate(1.2) drop-shadow(0 0 6px #b7aef8); mix-blend-mode: screen; transform-origin: 88% 57%; mask-image: radial-gradient(ellipse 4.2% 6.3% at 90.6% 60.8%,#000 8%,#0009 42%,transparent 78%); -webkit-mask-image: radial-gradient(ellipse 4.2% 6.3% at 90.6% 60.8%,#000 8%,#0009 42%,transparent 78%); }
.welcome-screen.is-ready .welcome-eye-light { animation: welcome-iris-breathe 2.8s ease-in-out 3.2s infinite; }
.welcome-portrait::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 7% 10% at 90.2% 60%,#b7aef83b,transparent 75%); mix-blend-mode: screen; }
.welcome-screen.is-ready .welcome-portrait::after { animation: welcome-eye-breathe 3.1s ease-in-out 2.85s infinite; }
.welcome-screen.is-ready .welcome-copy { animation: welcome-copy-shell .4s ease .9s both; }
.welcome-screen.is-ready .welcome-copy .welcome-title { animation: welcome-text-in .8s ease 1.02s both; }
.welcome-screen.is-ready .welcome-brand { animation: welcome-text-in .7s ease 3.12s both; }
.welcome-screen.is-ready .welcome-overline { animation: welcome-text-in .65s ease 3.22s both; }
.welcome-screen.is-ready .welcome-system { animation: welcome-text-in .65s ease 3.38s both; }
.welcome-screen.is-ready .welcome-greeting { animation: welcome-text-in .7s ease 3.56s both; }
.welcome-screen.is-ready .welcome-atmosphere { animation: welcome-atmosphere-in 1.2s ease 2.8s both, welcome-drift 16s ease-in-out 4s infinite alternate; }
.welcome-enter { display: none; }
.welcome-skip { position: absolute !important; bottom: 24px; left: clamp(28px,8vw,132px); z-index: 3 !important; margin: 0; }
.welcome-screen.is-ready .welcome-skip { animation: welcome-text-in .6s ease 1.7s both; }
/* The outgoing copy clears first; the portrait and the site's lavender glow overlap. */
html.has-welcome { scrollbar-gutter: stable; }
html.home-transition,html.home-transition body { overflow: hidden; height: 100%; }
.welcome-screen { transition: opacity 1.26s cubic-bezier(.32,0,.32,1),visibility 0s linear 1.26s; }
.welcome-screen.is-exiting { opacity: 0; filter: none; visibility: hidden; }
.welcome-screen.is-exiting .welcome-art { opacity: 0; transform: scale(1.012); filter: none; transition: opacity 1.1s cubic-bezier(.32,0,.3,1) .08s,transform 1.25s ease; }
/* Stop decorative loops as the splash leaves; they otherwise keep repainting during the final fade. */
.welcome-screen.is-exiting .welcome-art *,
.welcome-screen.is-exiting .welcome-portrait::after { animation-play-state: paused !important; }
.welcome-screen.is-exiting .welcome-copy { opacity: 0; translate: 0 -5px; filter: blur(2px); transition: opacity .32s ease,translate .48s ease,filter .48s ease; animation: none; }
.welcome-screen.is-exiting .welcome-brand,.welcome-screen.is-exiting .welcome-skip { opacity: 0; transition: opacity .25s ease; animation: none; }
body > :not(#splash):not(script) { transition: opacity 1.05s ease,visibility 0s; }
body.home-reveal > main { transition-delay: .08s; }
body.home-reveal .site-nav { animation: welcome-home-nav .8s ease .24s both; }
body.home-reveal .site-nav .nav-brand { transition-delay: .32s; }
body.home-reveal .site-nav .nav-links li { transition-delay: calc(.28s + var(--rd,0s)); }
body.home-reveal .site-nav .nav-toggle { transition-delay: .38s; }
/* Hero 的入场只使用基础层的错峰 transition，避免 animation 结束时和 reveal 状态交接造成按钮轻跳。 */
body.home-reveal .hero-content > * { animation: none; }
body.home-reveal .hero-emblem { transition-duration: 1.15s; transition-delay: .3s; }
body.home-reveal .hero-hud { animation: welcome-home-details 1s ease .68s both; }
body.home-reveal .hero-controls { animation: welcome-home-details .8s ease .92s both; }
body.home-reveal .scroll-hint { animation: welcome-home-details .8s ease 1.1s both; }
body.home-reveal #starfield,body.home-reveal #starfield-2d { animation: welcome-home-stars 1.3s ease both; }
@keyframes welcome-stroke-draw { from { stroke-dashoffset: 1; stroke-opacity: .9; } to { stroke-dashoffset: 0; stroke-opacity: .9; } }
@keyframes welcome-pen-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: .8; } 85% { opacity: .8; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes welcome-ink-dissolve { to { opacity: 0; } }
@keyframes welcome-line-breathe {
  0%,100% { opacity: .78; }
  50% { opacity: 1; }
}
@keyframes welcome-detail-in { to { opacity: .36; } }
@keyframes welcome-color-arrive { from { opacity: 0; transform: scale(1.008); } to { opacity: .94; transform: scale(1); } }
@keyframes welcome-depth-arrive { to { opacity: .17; } }
@keyframes welcome-figure-breathe { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-4px,-6px,0) scale(1.014); } }
@keyframes welcome-hair-drift { from { transform: translate3d(-7px,3px,0) scale(1.035); } to { transform: translate3d(-16px,-5px,0) scale(1.045); } }
@keyframes welcome-iris-breathe { 0%,100% { opacity: 0; } 50% { opacity: .38; } }
@keyframes welcome-eye-breathe { 0%,100% { opacity: .08; } 50% { opacity: .6; } }
@keyframes welcome-copy-shell { to { opacity: 1; transform: none; } }
@keyframes welcome-text-in { to { opacity: 1; transform: none; } }
@keyframes welcome-atmosphere-in { to { opacity: .45; } }
@keyframes welcome-drift { from { transform: translate(-.2%,.2%); } to { transform: translate(.2%,-.2%); } }
@keyframes welcome-home-nav { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcome-home-content { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes welcome-home-details { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcome-home-stars { from { opacity: .15; } to { opacity: 1; } }
@media (max-width: 900px) {
  .welcome-screen { grid-template-columns: minmax(260px,.82fr) 1fr; padding-inline: 6vw; }
  .welcome-brand { left: 6vw; }
  .welcome-copy { width: min(100%,430px); }
}
@media (max-width: 620px) {
  .welcome-screen { display: block; padding: 0 7vw; }
  .welcome-art { mask-image: linear-gradient(180deg,#000 64%,#0008 80%,transparent 100%); -webkit-mask-image: linear-gradient(180deg,#000 64%,#0008 80%,transparent 100%); }
  .welcome-brand { top: 28px; left: 7vw; font-size: .66rem; }
  .welcome-brand img { width: 28px; height: 28px; }
  .welcome-copy { position: absolute !important; bottom: 90px; left: 7vw; width: 86vw; margin: 0; text-shadow: 0 2px 20px #0a0912; }
  .welcome-copy .welcome-title { font-size: clamp(2.7rem,12vw,4rem); }
  .welcome-copy .welcome-title span { display: inline-block; margin: 0 0 0 12px; font-size: .36em; letter-spacing: .28em; vertical-align: .35em; }
  .welcome-overline { margin-bottom: 12px; font-size: .54rem; }
  .welcome-system { margin-top: 14px; font-size: .77rem; }
  .welcome-greeting { margin-top: 6px; font-size: .9rem; }
  .welcome-mobile-break { display: initial; }
  .welcome-skip { left: 7vw; bottom: 24px; }
}
@media (max-height: 620px) and (min-width: 621px) {
  .welcome-brand { top: 24px; }
  .welcome-copy { margin-top: 0; }
  .welcome-copy .welcome-title { font-size: clamp(2.8rem,9vh,4.5rem); }
  .welcome-system { margin-top: 18px; }
  .welcome-greeting { margin-top: 7px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .splash.welcome-screen { display: grid !important; }
  .welcome-screen,.welcome-screen *,body.home-reveal * { animation: none !important; transition-duration: .01ms !important; }
  .welcome-screen.is-ready .welcome-line-svg { display: none; }
  .welcome-screen.is-ready .welcome-color { opacity: .94; transform: none; }
  .welcome-screen.is-ready .welcome-brand,.welcome-screen.is-ready .welcome-copy,.welcome-screen.is-ready .welcome-overline,.welcome-screen.is-ready .welcome-title,.welcome-screen.is-ready .welcome-system,.welcome-screen.is-ready .welcome-greeting,.welcome-screen.is-ready .welcome-skip { opacity: 1; transform: none; }
}
@media (max-width: 620px) and (prefers-reduced-motion: reduce) { .splash.welcome-screen { display: block !important; } }

.welcome-screen.is-fallback .welcome-copy { opacity: 1; transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .welcome-screen.is-exiting .welcome-copy { translate: none; filter: none; } }

@media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
  .welcome-depth,.welcome-eye-light { display: none !important; }
  .welcome-screen.is-ready .welcome-color { animation: welcome-color-arrive .9s cubic-bezier(.22,.72,.3,1) 2.72s both; }
}

.welcome-intro { margin: 10px 0 0; color: rgba(214,211,235,.72); font-size: clamp(.78rem,1vw,.9rem); letter-spacing: .06em; line-height: 1.8; }
.welcome-screen.is-ready .welcome-intro { animation: welcome-text-in .65s ease 3.7s both; }
@media (max-width: 820px) { .welcome-intro { font-size: .74rem; letter-spacing: .03em; } }