@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost.woff2") format("woff2");
  font-weight: 300 500;
  font-display: swap;
}

:root {
  --night: #0a0806;
  --gold-hi: #fff1c1;
  --gold: #e2b04a;
  --gold-deep: #8a5a12;
  --dim: rgba(240, 220, 170, .55);
  --faint: rgba(240, 220, 170, .32);

  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--night);
  color: var(--gold-hi);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: crosshair;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--gold); color: var(--night); }

#pool {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* film grain: keeps the black from looking flat */
.grain {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -4%); }
  60%  { transform: translate(-4%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Title ---------- */

.stage {
  position: fixed;
  left: 0;
  right: 0;
  top: 61vh;
  padding: 0 1rem;
  text-align: center;
  pointer-events: none;
}

.overline {
  margin: 0 0 1.4rem;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--dim);
  padding-left: .42em; /* balance the trailing letter-spacing */
}
.overline span { color: var(--gold); }

h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 7.5rem);
  /* the largest optical size has hairlines too thin to survive the gradient */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 20;
  line-height: .95;
  letter-spacing: -.01em;
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 .28em;
  filter: drop-shadow(0 0 28px rgba(226, 176, 74, .18));
}

/* liquid gold: a moving highlight across a metallic gradient, per word */
h1 > span {
  display: inline-block;
  padding: .04em .02em .12em; /* room for italic overhang and descenders */
  background: linear-gradient(100deg,
    var(--gold-deep) 0%, var(--gold) 22%, var(--gold-hi) 38%,
    var(--gold) 50%, var(--gold-deep) 66%, var(--gold) 82%, var(--gold-hi) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1 .w2 { font-style: italic; font-weight: 400; }

@keyframes sheen {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

.tagline {
  margin: 1.6rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--dim);
}

/* entrance */
.overline, h1 > span, .tagline {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 1.4s cubic-bezier(.2, .7, .1, 1) forwards;
}
h1 > span {
  animation:
    rise 1.4s cubic-bezier(.2, .7, .1, 1) forwards,
    sheen 9s ease-in-out infinite alternate;
}
.overline   { animation-delay: .2s; }
h1 .w1      { animation-delay: .45s, 0s; }
h1 .w2      { animation-delay: .6s, -.6s; }
h1 .w3      { animation-delay: .75s, -1.2s; }
.tagline    { animation-delay: 1.1s; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* ---------- Footer ---------- */

.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) calc(1.25rem + env(safe-area-inset-bottom));
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  pointer-events: none;
}
.hint { animation: fade-hint 1s 3s both; }
@keyframes fade-hint { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 40rem) {
  .stage { top: 60vh; }
  .overline { letter-spacing: .3em; font-size: .65rem; }
  .foot { flex-direction: column; align-items: center; gap: .4rem; }
}

@media (max-height: 34rem) {
  .stage { top: 52vh; }
  .tagline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .hint { animation: none; }
  .overline, h1 > span, .tagline { animation: none; opacity: 1; transform: none; }
}