:root {
  color-scheme: dark;
  --ivory: #fff9ee;
  --gold: #f8d59a;
  --rose: #f3a9ba;
  --lavender: #cbb8ff;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #05040d;
}

body {
  color: var(--ivory);
  font-family: "Songti SC", "STSong", "SimSun", serif;
  -webkit-font-smoothing: antialiased;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.noise {
  position: fixed;
  inset: 0;
  opacity: .075;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.low-power .noise { display: none; }

.story { position: relative; height: 100%; pointer-events: none; }

.hero {
  position: absolute;
  z-index: 2;
  left: clamp(28px, 8vw, 150px);
  top: 50%;
  width: min(520px, 42vw);
  transform: translateY(-52%);
  text-shadow: 0 3px 30px rgba(0,0,0,.7);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  color: rgba(255,249,238,.52);
  font: 500 9px/1.4 system-ui, sans-serif;
  letter-spacing: .38em;
}

.eyebrow span { width: 26px; height: 1px; background: currentColor; }

h1 {
  margin: 0;
  font-size: clamp(58px, 7.1vw, 116px);
  font-weight: 300;
  letter-spacing: .1em;
  line-height: 1;
  filter: drop-shadow(0 0 25px rgba(238,185,255,.12));
}

h1 em {
  position: relative;
  color: transparent;
  font-family: "STKaiti", "KaiTi", "Kaiti SC", cursive;
  font-style: normal;
  background: linear-gradient(145deg, #fff 4%, var(--gold) 45%, var(--rose) 85%);
  -webkit-background-clip: text;
  background-clip: text;
}

.verse {
  margin: 30px 0 0 5px;
  color: rgba(255,249,238,.72);
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 300;
  line-height: 2.15;
  letter-spacing: .18em;
  transition: opacity .65s ease, transform .65s ease;
}

.verse.changing { opacity: 0; transform: translateY(8px); }

.hint {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 13px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.42);
  font: 400 9px/1 system-ui, sans-serif;
  letter-spacing: .18em;
  white-space: nowrap;
  transition: opacity 1s ease;
}

.mouse { width: 16px; height: 24px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; }
.mouse i { display: block; width: 2px; height: 4px; margin: 5px auto; border-radius: 2px; background: var(--gold); animation: scroll 1.8s ease infinite; }

.sound, .wish {
  position: fixed;
  z-index: 4;
  border: 0;
  color: rgba(255,255,255,.66);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.sound {
  top: max(24px, env(safe-area-inset-top));
  right: clamp(24px, 4vw, 64px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .15em;
}

.sound-bars { display: flex; align-items: center; gap: 2px; width: 19px; height: 14px; }
.sound-bars i { width: 1px; height: 3px; background: var(--gold); transition: height .3s; }
.sound[aria-pressed="true"] .sound-bars i { animation: equalize .8s ease-in-out infinite alternate; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: -.45s; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: -.2s; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(4) { animation-delay: -.62s; }

.wish {
  right: clamp(24px, 4vw, 64px);
  bottom: max(25px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 11px;
  letter-spacing: .22em;
}

.wish i { color: var(--gold); font-style: normal; animation: pulse 2.6s ease infinite; }

.opening {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 24px;
  background: radial-gradient(circle at 50% 45%, #171129 0%, #080611 44%, #030308 100%);
  transition: opacity 1.8s cubic-bezier(.2,.8,.2,1), visibility 1.8s;
}

.opening::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background: radial-gradient(circle at center, transparent 0 1px, #fff 1.5px 2px, transparent 2.5px) 0 0 / 110px 100px;
  mask-image: radial-gradient(circle, #000 0%, transparent 68%);
}

.opening.hidden { opacity: 0; visibility: hidden; }
.opening-star { color: var(--gold); font-size: 22px; animation: pulse 2.5s ease infinite; }
.opening p { margin: 0; color: rgba(255,255,255,.62); font-size: 13px; letter-spacing: .32em; }
.opening button {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  padding: 13px 24px;
  border: 1px solid rgba(248,213,154,.28);
  border-radius: 999px;
  color: var(--ivory);
  background: rgba(255,255,255,.035);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .22em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color .3s, background .3s, transform .3s;
}
.opening button:hover { border-color: rgba(248,213,154,.7); background: rgba(248,213,154,.08); transform: translateY(-2px); }
.opening button span { margin-left: 12px; color: var(--gold); }

@keyframes scroll { 0% { opacity: 0; transform: translateY(0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(7px); } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.82) rotate(12deg); } }
@keyframes equalize { from { height: 3px; } to { height: 13px; } }

@media (max-width: 700px) {
  .hero { top: 22%; left: 0; width: 100%; padding: 0 24px; text-align: center; transform: none; }
  .eyebrow { justify-content: center; margin-bottom: 18px; font-size: 7px; letter-spacing: .25em; }
  h1 { font-size: clamp(52px, 18vw, 82px); }
  .verse { margin-top: 20px; font-size: 12px; line-height: 2; }
  .hint { bottom: 24px; font-size: 7px; letter-spacing: .1em; }
  .sound { top: 19px; right: 20px; }
  .sound-label { display: none; }
  .wish { right: 20px; bottom: 55px; }
  .opening p { font-size: 11px; letter-spacing: .2em; }
}

@media (prefers-reduced-motion: reduce) {
  .mouse i, .wish i, .opening-star, .sound-bars i { animation: none !important; }
}