/* Code generated by balancegen from placeholder.css.tmpl in this
 * directory. DO NOT EDIT: edit the .tmpl sibling and run
 * scripts/gen-data.sh. The role's copy task names each file it
 * installs, so the template beside this one never reaches a host.
 *
 * Role: placeholder. The style of the holding page.
 *
 * The page must look like the map: deep water at operational depth. It is
 * dark, it is calm, and it has movement in it
 * (docs/design/ui-map-interface.md §2).
 *
 * The theme is dark and fixed. This page is the look of the game and not a
 * themed document, so it holds no light mode.
 *
 * The animation lives in placeholder.js. This file holds no animation,
 * because the code must read `prefers-reduced-motion` itself
 * (placeholder.js, `reducedMotion`).
 */

:root {
  /* The deep sea gradient. Source: data/presentation/presentation.toml
   * [presentation.spawn], which the client's own render/spawn.ts reads. */
  --deep-top: #020c14;
  --deep-mid: #010810;
  --deep-low: #000407;

  /* Faction one's cyan, and the bright core of a wavefront. Source:
   * [presentation.accent], and ui-map-interface.md §2. */
  --accent: #35e0d2;
  --accent-bright: #dffcf8;

  /* Interface text. Source: [presentation.palette],
   * ui-map-interface.md §2. */
  --text: #a3cfe6;
  --text-dim: #5e89a0;

  /* Source: ui-map-interface.md §2. The numbers of the game must look like
   * the readings of an instrument, so every text is monospace. */
  --font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The face of the header lockup (brand.md §2, R1645, R1963): the vendored
 * JetBrains Mono 500 of the chart's map text, under the lockup's own
 * family name. The role's copy task takes the file from
 * client/public/fonts/ of the checkout, so the font has one copy in the
 * repository. The url is relative, because the page has one directory. */
@font-face {
  font-family: "Aqua Lockup";
  src: url(jetbrains-mono-500-chart.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7E, U+B7;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  /* The same gradient the canvas paints. If the browser gives no 2D
   * context, this background stays and the text is still readable. */
  background: linear-gradient(180deg,
      var(--deep-top) 0%,
      var(--deep-mid) 50%,
      var(--deep-low) 100%) fixed;
  color: var(--text);
  font-family: var(--font);
  /* The page is one screen. It must not scroll on a phone. */
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

/* The canvas fills the viewport and sits below the text. The code sets the
 * backing store size; these rules set the size on the page. */
#bloom {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.plate {
  /* The sign box of the header lockup; see .lockup below. */
  --lockup-h: clamp(2.5rem, 13vw, 6rem);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* `svh` keeps the text centred while a mobile browser shows or hides its
   * own toolbars. A browser that does not know the unit keeps `100vh`. */
  min-height: 100svh;
  padding:
    calc(env(safe-area-inset-top) + 1.5rem)
    calc(env(safe-area-inset-right) + 1.25rem)
    calc(env(safe-area-inset-bottom) + 1.5rem)
    calc(env(safe-area-inset-left) + 1.25rem);
  box-sizing: border-box;
  text-align: center;
  /* The animation below must not take a pointer or a touch. */
  pointer-events: none;
}

/* The header lockup (brand.md §2, R1645, R1963): the sign and the name
 * AQUAPHOBIA as one piece. Every length is a fraction of the sign box
 * `--lockup-h`: the name has a cap height of `cap` of the box, stands
 * `gap` of the box after it, and carries no tracking after its last
 * letter. With a line height of 1, the face's own metrics put the middle
 * of the cap height on the middle of the box.
 *
 * The holding page is a hero, so its sign box is not `header_px`: it
 * grows with the screen. The whole lockup is about 6.5 boxes wide, so
 * 13vw keeps it inside a 375 px telephone with its gutters. The lockup
 * takes no glow and no shadow: it stands as the headers draw it. The
 * box is set on .plate, because the message line reads it too. */
.lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--lockup-h) * 0.25);
  margin: 0;
  font-size: inherit;
}

.lockup .sign {
  display: block;
  width: var(--lockup-h);
  height: var(--lockup-h);
  flex: none;
}

.lockup .name {
  display: block;
  font: 500 calc(var(--lockup-h) * 0.6027) / 1 "Aqua Lockup", var(--font);
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  /* The ink of the chevron, which no theme turns (brand.md §2.1). */
  color: var(--accent-bright);
  white-space: nowrap;
}

.message {
  /* Nothing stands inside the clear space of the lockup (brand.md §2.1). */
  margin: max(1.35rem, calc(var(--lockup-h) * 0.5)) 0 0;
  font-size: clamp(0.8125rem, 3.6vw, 1rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-shadow: 0 0 16px rgba(2, 12, 20, 0.9);
}