/* ===== Reset ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100%; height:100%; overflow-x:hidden; overflow-y:auto;
  font-family: 'Noto Serif SC', serif;
  font-weight:200; color:#2c4a6e; background:#e8f0f8;
  -webkit-font-smoothing: antialiased;
}

/* ===== 背景：始终可见，作为全局底色 ===== */
.bg {
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 35%, #f0f6fc, transparent 70%),
    radial-gradient(ellipse 50% 50% at 15% 85%, rgba(168,207,232,.25), transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 70%, rgba(168,207,232,.18), transparent 50%),
    #e8f0f8;
}
.bg::after {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  pointer-events:none;
}
canvas { position:fixed; inset:0; z-index:1; pointer-events:none; }

/* ===== 欢迎页 ===== */
#cover {
  position:fixed; inset:0; z-index:10;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  transition: opacity 1s cubic-bezier(.4,0,.2,1), transform 1s cubic-bezier(.4,0,.2,1);
}
#cover.out { opacity:0; transform:scale(1.06); pointer-events:none; }
.zh {
  font-size:clamp(22px,5vw,40px); font-weight:300; letter-spacing:.2em;
  opacity:0; animation:up 1.4s cubic-bezier(.16,1,.3,1) forwards;
}
.div {
  display:flex; align-items:center; gap:10px;
  margin:clamp(14px,2.5vh,22px) 0;
  opacity:0; animation:up 1.4s cubic-bezier(.16,1,.3,1) .15s forwards;
}
.div::before,.div::after { content:''; width:48px; height:1px; }
.div::before { background:linear-gradient(90deg, transparent, #a8cfe8); }
.div::after  { background:linear-gradient(90deg, #a8cfe8, transparent); }
.div i { width:5px; height:5px; border-radius:50%; background:#5ba3d9; opacity:.45; font-style:normal; }
.en {
  font-size:clamp(10px,1.5vw,14px); letter-spacing:.25em; color:#5ba3d9;
  opacity:0; animation:up 1.4s cubic-bezier(.16,1,.3,1) .3s forwards;
}
.hint {
  position:absolute; bottom:clamp(32px,7vh,60px);
  font-size:13px; letter-spacing:.15em; color:#7a9bba;
  opacity:0;
  animation:up 1s cubic-bezier(.16,1,.3,1) 1.4s forwards, blink 2.8s ease-in-out 2.4s infinite;
}
@keyframes up    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes blink { 0%,100%{opacity:.2} 50%{opacity:.7} }

/* ===== 主容器：背景透明，叠在粒子上面 ===== */
#app {
  position:fixed; inset:0; z-index:5;
  opacity:0; pointer-events:none; overflow-x:hidden; overflow-y:auto;
  transition: opacity .8s cubic-bezier(.4,0,.2,1) .3s;
  /* 不设 background，让 .bg + canvas 透过来 */
}
#app.show { opacity:1; pointer-events:auto; }