/* The opening titles. Its own sheet, not part of app.css: the page shares
   nothing with the rest of the site but the club's two colours and its serif,
   and app.css is sent to every page that will never show any of this. */

:root {
  --gold: #f0b429;
  --gold-pale: #f6dc9a;
  --bronze: #8a6a2f;
  --night: #0a0806;
  --font-display: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style",
                  Georgia, "Noto Serif", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0; overflow: hidden;
  background: var(--night); color: var(--gold-pale);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

#intro-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
}

/* ---- The lens ----------------------------------------------------------
   The map is a model on a table, and what sells a model is a shallow depth of
   field: sharp where the camera is looking, soft in front and behind. A real
   blur pass is a second render of every frame; blurring what is already behind
   a strip of the page, and fading the strip out toward the middle, is free. */
.lens { position: fixed; left: 0; right: 0; pointer-events: none; }
.lens-far, .lens-near {
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.lens-far {
  top: 0; height: 34%;
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, transparent 100%);
}
.lens-near {
  bottom: 0; height: 24%;
  -webkit-mask-image: linear-gradient(0deg, #000 0, transparent 100%);
          mask-image: linear-gradient(0deg, #000 0, transparent 100%);
}
.lens-vignette {
  top: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(10, 8, 6, .55) 85%, rgba(10, 8, 6, .9) 100%);
}

/* ---- Lettering ---------------------------------------------------------- */
.caption {
  position: fixed; left: 0; right: 0; bottom: max(5vh, 1.5rem);
  text-align: center; padding: 2.5rem 1rem 1.5rem; pointer-events: none;
  /* A smudge of dark behind the lettering: gold on parchment is not legible. */
  background: radial-gradient(ellipse 38rem 50% at 50% 55%, rgba(10, 8, 6, .62) 0, rgba(10, 8, 6, .35) 45%, transparent 100%);
  opacity: 0; transform: translateY(10px);
  transition: opacity .9s ease, transform 1.4s ease;
}
.caption.on { opacity: 1; transform: none; }
.caption p { margin: 0; }
.caption-name {
  font-size: clamp(1.35rem, 3.4vw, 2.6rem); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  /* Gold leaf: light along the top of each letter, bronze at its foot. */
  background: linear-gradient(180deg, #fff1c4 0%, var(--gold) 48%, var(--bronze) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .85));
}
.caption-suburb {
  margin-top: .35rem !important;
  font-size: clamp(.8rem, 1.5vw, 1.05rem); font-style: italic;
  letter-spacing: .3em; text-transform: uppercase; color: #e9dcc0;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .9);
}
/* A rule either side of the suburb, as on a title card. */
.caption-suburb::before, .caption-suburb::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 2.2em; height: 1px; margin: 0 .9em; background: currentColor; opacity: .55;
}

.controls {
  position: fixed; top: max(.8rem, env(safe-area-inset-top)); right: .9rem;
  display: flex; gap: .5rem; opacity: .55; transition: opacity .2s;
}
.controls:hover, .controls:focus-within { opacity: 1; }
.controls button, .finale-links button, .finale-links a {
  font: inherit; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-pale); background: rgba(10, 8, 6, .55);
  border: 1px solid rgba(240, 180, 41, .45); border-radius: 3px;
  padding: .45rem .8rem; cursor: pointer; text-decoration: none;
}
.controls button:hover, .finale-links button:hover, .finale-links a:hover {
  border-color: var(--gold); color: #fff;
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- The curtain -------------------------------------------------------- */
.curtain {
  position: fixed; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem;
  background: radial-gradient(ellipse at 50% 40%, #2a1d0d 0, var(--night) 70%);
  transition: opacity 1.6s ease;
}
.curtain.lifting { opacity: 0; pointer-events: none; }
.curtain p { margin: .4rem 0; }
.curtain-hat {
  font-size: .9rem; letter-spacing: .42em; text-transform: uppercase; color: var(--gold);
}
.curtain h1 {
  margin: .2rem 0 .3rem; font-size: clamp(2.6rem, 9vw, 6rem); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.05;
  background: linear-gradient(180deg, #fff1c4 0%, var(--gold) 50%, var(--bronze) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.curtain-sub { font-style: italic; font-size: 1.1rem; color: #cdbd98; }
.curtain-btn {
  margin-top: 1.4rem; font: inherit; font-size: 1rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; text-indent: .3em;
  color: var(--night); background: linear-gradient(180deg, #ffd96b, var(--gold));
  border: 0; border-radius: 3px; padding: .85rem 2.4rem; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 8px 30px rgba(240, 180, 41, .25);
}
.curtain-btn:hover { filter: brightness(1.08); }
.curtain-btn[disabled] { opacity: .5; cursor: default; }
.curtain-note { font-size: .85rem; color: #8f826a; }
.curtain-back { font-size: .85rem; color: #b5a684; letter-spacing: .08em; }

/* ---- The finale --------------------------------------------------------- */
.finale {
  position: fixed; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem; pointer-events: none;
  opacity: 0; transition: opacity 3s ease;
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 8, 6, .35) 0, rgba(10, 8, 6, .8) 75%);
}
.finale.on { opacity: 1; }
.finale p { margin: 0; }
.finale-hat {
  font-size: clamp(1rem, 2.6vw, 1.9rem); letter-spacing: .6em; text-indent: .6em;
  text-transform: uppercase; color: var(--gold-pale);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
.finale h2 {
  margin: .1em 0 .15em; font-size: clamp(3.2rem, 13vw, 10rem); font-weight: 700;
  letter-spacing: .1em; text-indent: .1em; text-transform: uppercase; line-height: 1;
  background: linear-gradient(180deg, #fff6d8 0%, var(--gold) 45%, #7a5a22 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .9));
}
.finale-tag {
  font-style: italic; font-size: clamp(1rem, 2.2vw, 1.5rem); color: #e9dcc0;
  letter-spacing: .12em; text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}
.finale-links {
  margin-top: 2.2rem !important; display: flex; gap: .8rem;
  opacity: 0; transition: opacity 1.5s ease;
}
.finale-links.on { opacity: 1; pointer-events: auto; }

[hidden] { display: none !important; }

/* Somebody who has asked for less motion still pressed Begin, so they get the
   film; what they are spared is the lettering sliding about on top of it. */
@media (prefers-reduced-motion: reduce) {
  .caption { transform: none; transition: opacity .9s ease; }
}