:root{
  --ink: #eaf2ff;
  --ink-soft: rgba(234,242,255,0.62);
  --gold: #ffd9a0;
  --teal: #8ff0e0;
  --violet: #c9a8ff;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{ height:100%; }

body{
  background:#03040a;
  color:var(--ink);
  font-family:"Noto Serif SC","Cormorant Garamond",serif;
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}

/* hide native cursor only on fine pointers */
@media (pointer:coarse){ body{ cursor:auto; } #cursor-glow{ display:none; } }

/* ---------- Background canvases ---------- */
#aurora, #fx{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  display:block;
}
#aurora{ z-index:0; }
#fx{ z-index:1; pointer-events:none; }

/* cursor glow */
#cursor-glow{
  position:fixed; top:0; left:0;
  width:340px; height:340px;
  margin:-170px 0 0 -170px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(150,230,255,0.35), rgba(180,140,255,0.12) 38%, transparent 68%);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:3;
  transition:opacity .4s ease;
  will-change:transform;
}

/* ---------- Loading veil ---------- */
#veil{
  position:fixed; inset:0; z-index:50;
  background:radial-gradient(circle at 50% 40%, #0a1030, #03040a 70%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 1.4s ease, visibility 1.4s;
}
#veil.gone{ opacity:0; visibility:hidden; }
.veil-inner{ text-align:center; }
.veil-ring{
  width:74px; height:74px; margin:0 auto 26px;
  border-radius:50%;
  border:1px solid rgba(180,220,255,0.25);
  border-top-color:var(--teal);
  border-right-color:var(--violet);
  animation:spin 1.6s linear infinite;
  box-shadow:0 0 40px rgba(140,200,255,0.25), inset 0 0 30px rgba(140,200,255,0.12);
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.veil-text{
  font-size:34px; letter-spacing:.55em; padding-left:.55em;
  font-weight:300; color:var(--ink);
  text-shadow:0 0 24px rgba(160,210,255,0.5);
}
.veil-sub{
  margin-top:14px; font-size:13px; letter-spacing:.4em;
  color:var(--ink-soft);
}

/* ---------- Progress + dots ---------- */
#progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:5;
  background:rgba(255,255,255,0.04);
}
#progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--teal), var(--violet), var(--gold));
  box-shadow:0 0 14px rgba(180,200,255,0.6);
  transition:width .12s linear;
}
#dots{
  position:fixed; right:26px; top:50%; transform:translateY(-50%);
  z-index:5; display:flex; flex-direction:column; gap:18px;
}
#dots a{
  position:relative; width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,0.18);
  transition:.35s;
}
#dots a::after{
  content:attr(data-label);
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:12px; letter-spacing:.3em; color:var(--ink-soft);
  opacity:0; transition:.3s; white-space:nowrap;
}
#dots a:hover::after, #dots a.active::after{ opacity:1; }
#dots a.active{
  background:var(--teal);
  box-shadow:0 0 14px var(--teal);
  transform:scale(1.35);
}

/* ---------- Sound button ---------- */
#sound{
  position:fixed; left:24px; bottom:24px; z-index:5;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(10,16,40,0.4);
  color:var(--ink); font-size:18px; cursor:pointer;
  backdrop-filter:blur(6px);
  transition:.3s;
}
#sound:hover{ border-color:var(--teal); color:var(--teal); }
#sound.on{ box-shadow:0 0 18px rgba(140,240,224,0.5); border-color:var(--teal); }

/* ---------- Layout ---------- */
main{ position:relative; z-index:2; }
.panel{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:8vh 8vw;
  position:relative;
}

/* Hero */
.hero-wrap{ text-align:center; }
.eyebrow{
  font-size:14px; letter-spacing:.6em; color:var(--ink-soft);
  margin-bottom:26px; padding-left:.6em;
  opacity:0; animation:fadeUp 1.4s 1.6s forwards;
}
.title{
  font-family:"Cormorant Garamond",serif;
  font-weight:300;
  font-size:clamp(70px, 17vw, 230px);
  letter-spacing:.08em; padding-left:.08em;
  line-height:1;
  background:linear-gradient(180deg,#ffffff 0%, #bfe0ff 45%, #9a8cff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 40px rgba(150,200,255,0.35));
  opacity:0; animation:titleIn 2s 1.7s forwards;
}
.subtitle{
  margin-top:28px; font-size:clamp(14px,1.6vw,19px);
  letter-spacing:.22em; color:var(--ink-soft);
  opacity:0; animation:fadeUp 1.4s 2.1s forwards;
}
.scroll-hint{
  margin-top:60px; opacity:0; animation:fadeUp 1.4s 2.5s forwards;
  font-size:12px; letter-spacing:.4em; color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.scroll-hint i{
  width:1px; height:46px;
  background:linear-gradient(var(--teal), transparent);
  animation:drift 2.2s ease-in-out infinite;
}
@keyframes drift{ 0%,100%{ transform:scaleY(.4); opacity:.3;} 50%{ transform:scaleY(1); opacity:1;} }

/* Content blocks */
.content{ max-width:620px; }
.content.right{ margin-left:auto; text-align:right; }
.content.center{ text-align:center; margin:0 auto; }
.content h2{
  font-family:"Cormorant Garamond",serif;
  font-weight:300; font-size:clamp(40px,7vw,84px);
  letter-spacing:.04em; line-height:1.05;
  background:linear-gradient(180deg,#fff,#a9c6ff);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:22px;
  filter:drop-shadow(0 0 30px rgba(150,200,255,0.25));
}
.content p{
  font-size:clamp(15px,1.7vw,20px); line-height:2;
  color:var(--ink-soft); font-weight:300;
}
.hint-pill{
  display:inline-block; margin-top:30px;
  padding:11px 24px; border-radius:40px;
  border:1px solid rgba(180,220,255,0.3);
  font-size:13px; letter-spacing:.25em; color:var(--ink);
  background:rgba(20,30,60,0.3); backdrop-filter:blur(6px);
}
.sign{
  margin-top:34px; font-size:13px; letter-spacing:.4em; color:var(--ink-soft);
}

/* Reveal */
[data-reveal]{
  opacity:0; transform:translateY(40px);
  filter:blur(14px);
  transition:opacity 1.4s ease, transform 1.4s cubic-bezier(.16,1,.3,1), filter 1.4s ease;
}
[data-reveal].visible{
  opacity:1; transform:none; filter:blur(0);
}

@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none; } }
@keyframes titleIn{
  from{ opacity:0; transform:translateY(30px) scale(1.04); filter:blur(18px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}

@media (max-width:680px){
  #dots{ display:none; }
  .content.right{ text-align:center; margin:0 auto; }
}

/* 后台入口：低调浮标，极光风格，跳 /admin/ */
#enter-admin{
  position:fixed;
  right:20px;
  bottom:18px;
  z-index:60;
  padding:8px 16px;
  font-family:'Noto Serif SC', serif;
  font-size:13px;
  letter-spacing:2px;
  color:rgba(234,242,255,0.82);
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.28);
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(6px);
  transition:all .3s ease;
}
#enter-admin:hover{
  color:#fff;
  border-color:rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.12);
}
@media (max-width:680px){
  #enter-admin{ right:12px; bottom:12px; padding:6px 12px; font-size:12px; }
}