:root {
  --ink: #07080d;
  --gold: #e0bd5a;
  --gold-dim: #8f7634;
  --violet: #7a5cff;
  --teal: #4fd1c5;
  --text: #d9d3c3;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% 38%, #1b1630 0%, #0c0b16 48%, var(--ink) 100%);
  color: var(--text);
  font: 16px/1.5 Georgia, "Times New Roman", serif;
  overflow: hidden;
}

#intro { position: fixed; inset: 0; z-index: 5; }
#bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.on { animation: flash 900ms ease-out forwards; }
@keyframes flash { 0% { opacity: 0 } 25% { opacity: 1 } 100% { opacity: 0 } }

#titleblock {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 16px 9vh; text-align: center; pointer-events: none;
}
#titleblock > * { pointer-events: auto; }

.eyebrow {
  margin: 0 0 .4rem; letter-spacing: .5em; text-transform: uppercase; font-size: .72rem;
  color: var(--gold-dim); opacity: 0; transition: opacity 1.6s ease 2.6s;
}
#title {
  margin: 0; font-weight: 400; font-size: clamp(1.2rem, 7vw, 5.6rem);
  letter-spacing: .16em; text-indent: .16em; line-height: 1.15; white-space: nowrap;
  filter: drop-shadow(0 0 18px rgba(224, 189, 90, .35)) drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
#title .ch {
  display: inline-block; opacity: 0; transform: translateY(14px) scale(1.08); filter: blur(10px);
  background: linear-gradient(180deg, #fff2c4 0%, var(--gold) 46%, #9a7a2c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes rise { to { opacity: 1; transform: none; filter: blur(0); } }

.tagline {
  min-height: 1.6em; margin: .9rem 0 1.6rem; font-style: italic; font-size: clamp(.95rem, 2.2vw, 1.2rem);
  color: #b9b2a0; opacity: 0; transition: opacity 1.4s ease;
}
.tagline.show, .eyebrow.show { opacity: 1; }

#login {
  display: grid; gap: 10px; width: min(340px, 100%);
  opacity: 0; transform: translateY(12px); transition: opacity 1.1s ease, transform 1.1s ease;
  pointer-events: none;
}
#login.show { opacity: 1; transform: none; pointer-events: auto; }
#login input {
  padding: 12px 14px; font: inherit; color: var(--text); text-align: center;
  background: rgba(10, 9, 20, .62); border: 1px solid rgba(224, 189, 90, .28); border-radius: 3px;
  backdrop-filter: blur(6px); outline: none; transition: border-color .2s, box-shadow .2s;
}
#login input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 189, 90, .16), 0 0 22px rgba(122, 92, 255, .25); }
#login input::placeholder { color: #6f6a5c; letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; }
#go {
  padding: 13px 14px; font: inherit; letter-spacing: .32em; text-transform: uppercase; font-size: .82rem; cursor: pointer;
  color: #1a1407; border: 0; border-radius: 3px;
  background: linear-gradient(180deg, #f1d683, var(--gold) 55%, #b48f33);
  box-shadow: 0 0 24px rgba(224, 189, 90, .28); transition: transform .15s, box-shadow .2s, filter .2s;
}
#go:hover { transform: translateY(-1px); box-shadow: 0 0 34px rgba(224, 189, 90, .5); filter: brightness(1.06); }
#go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#go:disabled { filter: grayscale(.6) brightness(.8); cursor: wait; }
#msg { min-height: 1.3em; color: #e08a5a; font-size: .9rem; }

.hint { margin: 1.1rem 0 0; font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: #5a566a;
  animation: breathe 3.2s ease-in-out infinite; transition: opacity .6s; }
.hint.gone { opacity: 0; animation: none; }
@keyframes breathe { 50% { opacity: .35; } }


@media (max-height: 560px) {
  #titleblock { padding-bottom: 3vh; }
  .tagline { margin: .4rem 0 .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  #title .ch { animation-duration: .01ms; }
  .hint { animation: none; }
  #flash.on { animation-duration: 200ms; }
}