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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #05060a;
  font-family: "Songti TC", "Noto Serif TC", "PingFang TC", serif;
}

#stage {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 38%, #0c0e16 0%, #05060a 62%, #030408 100%);
}

canvas#fx {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ---------- text block ---------- */
#titles {
  position: absolute;
  left: 0; right: 0;
  top: 67%;
  text-align: center;
  pointer-events: none;
}

.gold {
  background: linear-gradient(100deg,
    #7a5c1e 0%, #b8912f 18%, #d4af37 34%,
    #f7e7a8 50%,
    #d4af37 66%, #b8912f 82%, #7a5c1e 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.shimmering {
  animation: shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 120% 0; }
  55%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

#zh {
  font-size: clamp(30px, 5.4vw, 68px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  filter: drop-shadow(0 0 18px rgba(212,175,55,0.22));
}

#en {
  margin-top: 0.55em;
  font-family: "Optima", "Avenir Next", "Trebuchet MS", sans-serif;
  font-size: clamp(18px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
}

.gold-line {
  width: clamp(120px, 28vw, 260px);
  height: 1px;
  margin: 0.75em auto 0 auto;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.38) 16%, #f8e7a8 50%, rgba(212,175,55,.42) 84%, transparent);
  box-shadow: 0 0 10px rgba(212,175,55,.32);
}

#tag {
  margin-top: 0.75em;
  font-size: clamp(18px, 2.8vw, 32px);
  font-weight: 400;
  letter-spacing: 0.30em;
  text-indent: 0.30em;
  color: rgba(214, 196, 150, 0.85);
}

.line {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.15s cubic-bezier(.22,.6,.28,1),
              transform 1.15s cubic-bezier(.22,.6,.28,1);
  will-change: opacity, transform;
}
.line.show { opacity: 1; transform: translateY(0); }

/* ---------- cinematic overlays ---------- */
#vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 95% at 50% 45%,
      rgba(0,0,0,0) 46%, rgba(0,0,0,0.42) 76%, rgba(0,0,0,0.82) 100%);
}
#bars-top, #bars-bottom {
  position: absolute; left: 0; right: 0;
  height: 5.5vh;
  background: #000;
  pointer-events: none;
}
#bars-top { top: 0; }
#bars-bottom { bottom: 0; }

#fade {
  position: absolute; inset: 0;
  background: #000;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.1s ease-in-out;
}
#fade.clear { opacity: 0; }

#hint {
  position: absolute;
  bottom: 7.2vh; right: 2.4vw;
  font-family: "Avenir Next", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.22);
  pointer-events: none;
}