/* 开屏：星空画布、开屏页、起飞时的黑幕 / 白幕 */

/* ---------- 星空和黑幕 ---------- */

#sky { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease-out; }
#sky.on { opacity: 1; }
body.in-site #sky { visibility: hidden; }
.no-webgl #sky { display: none; }
/* 星空画出来之前（和不支持 WebGL 时）先垫一张深空底色，照着 stars.js 里的星云底图画的，星空淡入时接得上 */
body:not(.in-site) {
  background:
    radial-gradient(ellipse 27% 49% at 92% 7%, rgba(120, 70, 60, .18), transparent),
    radial-gradient(ellipse 39% 69% at 59% 59%, rgba(20, 60, 90, .3), transparent),
    radial-gradient(ellipse 47% 83% at 21% 80%, rgba(70, 30, 90, .35), transparent),
    radial-gradient(ellipse 51% 90% at 74% 24%, rgba(40, 46, 110, .55), transparent),
    var(--bg);
}
#blackout {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .75s cubic-bezier(.2, .6, .3, 1);
}
#blackout.on { opacity: 1; pointer-events: all; transition: opacity .85s cubic-bezier(.55, 0, .75, .3); }

/* ---------- 开屏 ---------- */

.launch { position: fixed; inset: 0; z-index: 2; display: grid; grid-template-rows: auto 1fr; pointer-events: none; }
/* 四周压暗，中间文字后面再垫一层很淡的暗影，流星划过时字也看得清 */
.launch::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 38% 26% at 50% 46%, rgba(4, 5, 10, .42), transparent 100%),
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
  transition: opacity .6s;
}
body.launching .launch::before { opacity: 0; }
.launch > * { pointer-events: auto; }
.l-top { display: flex; justify-content: space-between; padding: 28px 36px; transition: opacity .5s; }
.brand, .s-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font: 600 19px var(--font-latin);
  letter-spacing: .02em;
}
.brand { opacity: .92; animation: fade 1.2s ease-out .9s backwards; transition: opacity .3s; }
.brand:hover { opacity: 1; }
.brand svg, .s-brand svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.brand b, .s-brand b { color: var(--orange); }
.l-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px 9vh;
  text-align: center;
  transition: transform 1.15s cubic-bezier(.6, 0, .85, .25), opacity .75s ease-in, filter .75s ease-in;
}
.l-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .55em;
  margin: 0 0 clamp(30px, 4.4vh, 54px);
  font: 800 clamp(40px, 6vw, 120px)/1.12 var(--font);
  letter-spacing: .14em;
}
.l-word {
  display: inline-block;
  margin-right: -.14em;
  background: linear-gradient(100deg, #ffffff 0 38%, #c3d0ff 46%, #ffd9c2 52%, #ffffff 60% 100%);
  background-size: 320% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(110, 140, 255, .35));
  animation: word-in 1.5s var(--ease-out) backwards, shine 9s ease-in-out 2s infinite;
}
.l-word:nth-child(2) { animation-delay: .22s, 2.6s; }
@keyframes word-in { from { opacity: 0; transform: translateY(.22em); letter-spacing: .4em; filter: blur(14px); } }
@keyframes shine { 0%, 62% { background-position: 100% 0; } 88%, 100% { background-position: 0 0; } }
.l-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(var(--search-w), 100%);
  height: clamp(58px, 6.4vh, 74px);
  padding: 0 8px 0 26px;
  border-radius: 20px;
  background: rgba(12, 15, 30, .42);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: background .4s, border-color .4s;
  animation: rise 1.2s var(--ease-out) .5s backwards;
}
.l-search::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--ang), var(--blue), var(--cyan), var(--violet), var(--pink), var(--orange), var(--blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .6s;
  animation: spin 5s linear infinite;
  pointer-events: none;
}
.l-search:focus-within { background: rgba(12, 15, 30, .55); border-color: transparent; }
.l-search:focus-within::before { opacity: .9; }
.l-search.shake { animation: shake .42s ease-out; }
.l-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: 400 clamp(16px, 1.15vw, 21px) var(--font);
  letter-spacing: .02em;
  caret-color: var(--cyan);
}
.l-search input::placeholder { color: rgba(226, 232, 250, .5); }
.l-go {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(44px, 4.6vh, 56px);
  height: clamp(44px, 4.6vh, 56px);
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 22px -8px rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: transform .4s var(--ease-spring), box-shadow .4s, background .3s;
}
.l-go svg { width: 22px; height: 22px; fill: none; stroke: #0b0d16; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-spring); }
.l-go:hover { transform: scale(1.06); background: #fff; box-shadow: 0 0 28px -4px rgba(255, 255, 255, .65); }
.l-go:hover svg, .l-search.has-text .l-go svg { transform: rotate(-32deg); }
.l-go:active { transform: scale(.94); }
.l-hint { min-height: 22px; margin: 12px 0 0; font-size: 13.5px; color: #ffb4a3; opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
.l-hint.on { opacity: 1; transform: none; }
.l-enter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(6px, 1.6vh, 18px);
  padding: 10px 6px;
  color: var(--text-2);
  text-decoration: none;
  font-size: clamp(15px, 1vw, 18px);
  letter-spacing: .1em;
  transition: color .3s;
  animation: rise 1.2s var(--ease-out) .8s backwards;
}
.l-enter span { padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .55s var(--ease-out); }
.l-enter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-spring); }
.l-enter:hover { color: #fff; }
.l-enter:hover span { background-size: 100% 1px; }
/* 箭头往右上方一翘，暗示要起飞 */
.l-enter:hover svg { transform: translateX(4px) rotate(-32deg); }
/* 起飞：文字和输入框被甩向右上方，同时散焦消失 */
body.launching .l-center { transform: translate(16vw, -18vh) scale(.8); opacity: 0; filter: blur(8px); pointer-events: none; }
body.launching .l-top { opacity: 0; }
.l-top .theme-btn { color: rgba(226, 232, 250, .75); border-color: rgba(255, 255, 255, .16); animation: fade 1.2s ease-out .9s backwards; }
.l-top .theme-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .32); }
body.launching .l-top .theme-btn { pointer-events: none; }

/* ---------- 白天 ---------- */

body.day #blackout { background: #f5f6fa; }
body.day #blackout.on { transition: opacity .45s cubic-bezier(.4, 0, .6, 1); }

@media (max-width: 820px) {
  .l-top { padding: 18px 20px; }
  .l-title { letter-spacing: .1em; font-size: clamp(34px, 10.5vw, 60px); }
  .l-word { margin-right: -.1em; }
  .l-search { height: 58px; padding-left: 18px; border-radius: 16px; }
  .l-search input { font-size: 16px; }
}