/*
 * Loading screen for Observable Polytope.
 *
 * The main site opens black and lights up; this one is its daylight twin, so it
 * opens white and the cosmos arrives when you touch it. The per-letter blur is
 * the same gag as the main site's, kept so the two read as one hand.
 */

#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #f4f4f6;
  opacity: 1;
  transition: opacity 1s ease;
}

#loading-screen.is-hidden {
  opacity: 0;
}

.loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0 16px;
}

.loading-logo {
  width: min(62vw, 560px);
  height: auto;
  /* the master is dark-on-transparent, which is what this screen wants */
  opacity: 0.82;
}

.loading-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

/* display:flex above would otherwise beat the [hidden] attribute */
.loading-text[hidden] {
  display: none;
}

.loading-text span {
  display: inline-block;
  margin: 0 0.18em;
  color: #1b1c22;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.72rem, 2.4vw, 1rem);
  letter-spacing: 0.1em;
  animation: blur-text 1.5s infinite linear alternate;
}

/*
 * The main site hand-wrote sixteen nth-child rules for this. One rule plus a
 * custom property set in markup does the same thing and does not run out of
 * letters.
 */
.loading-text span {
  animation-delay: calc(var(--i, 0) * 0.2s);
}

@keyframes blur-text {
  from { filter: blur(0); }
  to   { filter: blur(3px); }
}

.loading-note {
  color: #6a6b75;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-align: center;
}

/*
 * The venue card. After the click the white loading screen is covered by black
 * and this is what is on it, for a moment, before the cosmos starts to move.
 * Its opacity is driven from scene.js (the black as the background's alpha, the
 * text separately so it arrives after the black), not by a CSS transition, so
 * the easing curves can be edited in the tweak panel. It never takes a click.
 */

/*
 * Noto Sans JP, cut down to the glyphs the card needs (about 22 KB instead of
 * 9.6 MB) so that it looks the same on every device, with no request to a font
 * service. It is the variable font, so any weight from 100 to 900 works, and it
 * keeps `palt`, the proportional-metrics feature that sets Japanese tight.
 * Noto Sans JP is (c) 2014-2021 Adobe, licensed under the SIL Open Font
 * License 1.1 (https://openfontlicense.org); the notice is kept in the font's
 * own name table, and this is a subset of the unmodified outlines. Cut with
 * fontTools from the Noto Sans JP variable font.
 */
@font-face {
  font-family: 'Noto Sans JP Venue';
  src: url('assets/noto-sans-jp-venue.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  /* the card is black until the text is ready, so nothing flashes in a fallback */
  font-display: block;
}

#venue-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
}

.venue-text {
  grid-area: 1 / 1;
  margin: 0;
  text-align: center;
  color: #f2f3fb;
  /* the embedded subset first; the installed Noto Sans if that fails to load */
  font-family: 'Noto Sans JP Venue', 'Noto Sans JP', 'Noto Sans CJK JP', 'Hiragino Kaku Gothic ProN',
    'Yu Gothic', system-ui, sans-serif;
  /* set tight: proportional kana and kanji, kerning on */
  font-feature-settings: 'palt' 1, 'kern' 1;
  font-kerning: normal;
  line-height: 1;
  opacity: 0;
}

.venue-text span {
  display: block;
}

.venue-hall {
  font-size: clamp(0.9rem, 3vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  opacity: 0.85;
}

.venue-booth {
  margin-top: 0.5rem;
  font-size: clamp(3rem, 12vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.06em;
}

/* The crew's name, last, in the hall line's size, on one line. */
.venue-gang {
  margin-top: 1.25rem;
}

/* The goat and the title take the card before and after the venue: same
   cell as the text, shown by scene.js, never two at once. */
.venue-goat {
  grid-area: 1 / 1;
  width: clamp(8rem, 38vw, 15rem);
  height: auto;
  opacity: 0;
}

/* Small and widely tracked, like the footer and the loading prompt; in the
   card's own font so it sits with the venue text it follows. */
.venue-title {
  grid-area: 1 / 1;
  margin: 0;
  padding-left: 0.42em; /* the tracking after the last letter, given back on the left */
  color: #f2f3fb;
  font-family: 'Noto Sans JP Venue', 'Noto Sans JP', system-ui, sans-serif;
  font-size: clamp(0.78rem, 2.4vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  white-space: nowrap;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .loading-text span { animation: none; }
  #loading-screen { transition: none; }
}