:root {
  --bg: #010d09;
  --gold: #c9963a;
  --gold-light: #f1d48a;
  --gold-dark: #8a5f1c;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg);
  color: var(--gold);
  font-family: Georgia, "Times New Roman", "Palatino Linotype", serif;
}
.stage {
  position: fixed; inset: 0;
  background: var(--bg) url("logo.jpg") center / contain no-repeat;
}
.stage.off { visibility: hidden; }
#mask {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block;
}
.final {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 1.6s ease;
}
.final.show { opacity: 1; pointer-events: auto; }
.final h1 {
  margin: 0;
  font-size: clamp(2rem, 7vw, 5.5rem);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 12px rgba(201,150,58,.35));
  transform: translateY(14px);
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.final p {
  margin: .6em 0 0;
  font-style: italic;
  font-size: clamp(1.2rem, 3.2vw, 2.4rem);
  letter-spacing: .06em;
  color: var(--gold-light);
  opacity: .9;
  transform: translateY(14px);
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1) .25s;
}
.final.show h1, .final.show p { transform: none; }
.final .rule {
  width: min(60vw, 320px); height: 1px; margin: 1.4em 0 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
@media (prefers-reduced-motion: reduce) {
  .final, .final h1, .final p { transition: none; }
}