@font-face { font-family: 'Ilumar Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/pt-serif-700-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Ilumar Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/pt-serif-400-italic-latin.woff2') format('woff2'); }

:root { --heat: 0; --fire-x: 49%; --fire-y: 76.5%; color-scheme: dark; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #050407; }
body {
  color: #d8c9ab;
  font-family: 'Ilumar Serif', Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}

.stage { position: fixed; inset: 0; overflow: hidden; cursor: pointer; }
.art, .art img, .night, .grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.art img { object-fit: cover; object-position: var(--fire-x) var(--fire-y); opacity: 0; transition: opacity 2.6s ease; }
.art img.ready { opacity: 1; }
.night, .grain { pointer-events: none; }
.grain { opacity: .06; mix-blend-mode: overlay; background-size: 160px 160px; animation: grain .6s steps(4) infinite; }
@keyframes grain {
  0% { background-position: 0 0; } 25% { background-position: -47px 31px; }
  50% { background-position: 53px -19px; } 75% { background-position: -29px -61px; } 100% { background-position: 0 0; }
}

.words {
  position: absolute; left: 50%; top: max(calc(env(safe-area-inset-top) + 40px), 15vh);
  transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
  text-align: center; pointer-events: none;
}
.title { font-weight: 700; }
.name, .ward { position: relative; display: block; line-height: 1; }
.name {
  font-size: clamp(42px, 12.5vw, 132px);
  letter-spacing: .32em; padding-left: .32em;
  color: #3b3841;
  text-shadow: 0 0 calc(var(--heat) * 34px) rgba(255, 128, 40, calc(var(--heat) * .38));
}
.ward {
  margin-top: clamp(14px, 2.4vh, 26px);
  font-size: clamp(13px, 2.2vw, 25px);
  letter-spacing: .74em; padding-left: .74em;
  color: #34313a;
}
.name::after, .ward::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  color: transparent;
  -webkit-background-clip: text; background-clip: text;
  opacity: var(--heat);
}
.name::after { padding-left: .32em; background-image: linear-gradient(180deg, #f8e7bb 0%, #e8b46a 55%, #a85a26 100%); }
.ward::after { padding-left: .74em; background-image: linear-gradient(180deg, #e9c58b, #b8733a); }
.line, .soon { opacity: 0; transform: translateY(8px); transition: opacity 1.8s ease, transform 1.8s ease; }
.line {
  font-style: italic; font-weight: 400; font-size: clamp(17px, 1.9vw, 24px); line-height: 1.5;
  color: #d3c09b; letter-spacing: .02em;
  text-shadow: 0 1px 12px #000;
}
.title + .line { margin-top: clamp(26px, 5vh, 52px); }
.soon {
  margin-top: clamp(22px, 4vh, 40px);
  font-weight: 700; font-size: 13px; letter-spacing: .6em; padding-left: .6em; text-transform: uppercase;
  color: #e09a52;
}
.line.on { opacity: .9; transform: none; }
.soon.on { opacity: .85; transform: none; }

.hint {
  position: absolute; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + clamp(22px, 5vh, 48px));
  text-align: center; pointer-events: none;
  font-weight: 700; font-size: 12px; letter-spacing: .42em; padding-left: .42em; text-transform: uppercase;
  color: #a99a82; opacity: 0; transition: opacity 1.4s ease;
}
.hint.on { opacity: .7; animation: breathe 3.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .28; } }

.instant .line, .instant .soon, .instant .art img { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .grain, .hint.on { animation: none; }
}