/* The sunset page. The sky is one canvas of dots (sunset.js); this is the type on top of it.
   Departure Mono is drawn on an 11 px grid, so only 11, 22 and 33 px are used. */
@font-face {
  font-family: "Departure Mono";
  src: url("fonts/departure-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

:root {
  --bg: #131211;
  --line: #2e2b27;
  --fg: #ece3d0;        /* the cream of the Naaxa logo */
  --fg-2: #b8ad98;
  --fg-3: #857c6c;
  --fg-4: #575045;
  --accent: #ff8a2a;
  --ok: #a6c34c;
  --font: "Departure Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* set by sunset.js once it knows where things are */
  --hz: 62vh;           /* the horizon, from the top */
  --gut: 27vw;          /* the room either side of the logo */
  --edge: 33px;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font: 400 11px/16px var(--font);
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

#sky { position: fixed; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
/* a click anywhere is a click on the sky */
main, .foot { pointer-events: none; user-select: none; -webkit-user-select: none; }

/* ---------- what's said ---------- */

.say {
  position: fixed;
  top: clamp(33px, 8vh, 99px);
  left: 50%;
  width: min(100% - 2 * var(--edge), 638px);
  transform: translateX(-50%);
  text-align: center;
}
.kicker { margin-bottom: 11px; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; }
h1 { font: 400 33px/44px var(--font); text-wrap: balance; }
h1 .noise { color: var(--fg-4); }
.sub { max-width: 62ch; margin: 11px auto 0; color: var(--fg-2); text-wrap: pretty; }

/* nothing is said until the sun is lit; then it comes on in steps, like the rest of the wall */
.js .say > *, .js .hosts, .js .foot { opacity: 0; }
.js.is-lit .say > *, .js.is-lit .hosts, .js.is-lit .foot { opacity: 1; transition: opacity 500ms steps(5); }
.js.is-lit .say .sub { transition-delay: 350ms; }
.js.is-lit .hosts { transition-delay: 700ms; }
.js.is-lit .foot { transition-delay: 1000ms; }

/* ---------- the tools, either side of the sun's path on the water ---------- */

.hosts { position: fixed; top: calc(var(--hz) + 33px); width: clamp(220px, var(--gut) - 66px, 330px); }
#hosts-naaxa { left: var(--edge); }
#hosts-eilish { right: var(--edge); }
.hosts h2 {
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-3);
  font: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hosts ul { list-style: none; }
.hosts li { display: flex; align-items: center; gap: 7px; height: 18px; color: var(--fg-3); white-space: nowrap; break-inside: avoid; }
.hosts li i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-4); }
/* the row of dots between a name and what became of it */
.hosts li u { flex: 1; height: 3px; min-width: 14px; background: radial-gradient(circle, var(--fg-4) 0.9px, transparent 1.1px) 0 0 / 7px 3px repeat-x; opacity: 0.7; text-decoration: none; }
.hosts li b { min-width: 3ch; font-weight: 400; text-align: right; }

.hosts li.is-up { color: var(--fg-2); }
.hosts li.is-up i { background: var(--ok); }
.hosts li.is-up b { color: var(--ok); }
/* a star has just come down for this one */
.hosts li.is-landing { color: var(--fg); }
.hosts li.is-landing i { background: var(--accent); box-shadow: 0 0 0 2px rgba(255, 138, 42, 0.25); }
.hosts li.is-landing b { color: var(--accent); }
/* the one you came here for */
.hosts li.is-you { color: var(--accent); }
.hosts li.is-you i { background: var(--accent); }

/* ---------- the bottom line ---------- */

.foot {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding: 0 var(--edge) max(22px, env(safe-area-inset-bottom));
  color: var(--fg-3);
  white-space: nowrap;
}
.foot .hint { color: var(--fg-4); animation: hint 2.4s steps(2) infinite; }
.foot .hint.is-used { visibility: hidden; }
@keyframes hint { 50% { color: var(--fg-2); } }

/* ---------- smaller screens: the lists sit side by side under the reflection ---------- */

@media (max-width: 1099px) {
  :root { --edge: 16px; }
  .hosts { top: calc(var(--hz) + var(--drop, 66px)); width: calc(50% - 27px); }
}
@media (max-width: 699px) {
  h1 { font: 400 22px/33px var(--font); }
  .foot .hint { display: none; }
}
@media (max-height: 760px) and (min-width: 1100px) {
  .hosts { top: calc(var(--hz) + 22px); }
  .hosts li { height: 15px; }
}
@media (max-height: 620px) {
  .hosts li { height: 15px; }
  .sub { display: none; }
}
@media (max-height: 520px) { .hosts { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .foot .hint { animation: none; }
  .js.is-lit .say > *, .js.is-lit .hosts, .js.is-lit .foot { transition: none; }
}