/* ===========================================================================
   boot.css — the load screen of the app on the Home Screen: a dark ground
   with a few large cards lying at angles across it, lit at their edges, and
   the mark, the name and the line under it in the middle.

   The same markup (index.html, #boot-splash) is what iOS shows as the app
   starts: scripts/make-splash.mjs photographs it at every iPhone and iPad
   size into icons/splash/, so the launch image and this screen are one
   picture, and the app fades in from it once it is ready (app.js). In a
   browser tab there is no load screen: it shows only in an installed app.

   Everything is sized in vmin / vmax, so one layout serves every screen,
   standing up or on its side.
   =========================================================================== */

.boot-splash { display: none; }

@media (display-mode: standalone), (display-mode: fullscreen) {
  .boot-splash { display: grid; }
}
/* The launch-image renderer shows it whatever the display mode. */
.boot-splash.is-render { display: grid; }

.boot-splash {
  position: fixed; inset: 0; z-index: 2000;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(60vmax 60vmax at 50% 50%, rgba(56, 189, 248, .07), transparent 60%),
    linear-gradient(170deg, #0b111c 0%, #080b12 55%, #06080d 100%);
  color: #eef2f8;
  font-family: var(--font, system-ui, -apple-system, sans-serif);
  -webkit-user-select: none; user-select: none;
  /* how far above the middle the cards are raised (a good way up), and the name with its
     line a little less far: it sits in the lower part of the dark gap they leave */
  --bs-lift: -12vh;
  --bs-text-lift: -9vh;
  transition: opacity 380ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 380ms;
}
.boot-splash.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
:root[data-motion="off"] .boot-splash { transition: none; }

/* ---- the cards: trading-card proportions, rounded, each turned its own way,
   lying round a dark gap that runs across the middle, where the name sits */
.bs-card {
  position: absolute;
  width: 44vmax; aspect-ratio: 5 / 7;
  border-radius: 3.6vmax;
  background: linear-gradient(155deg, var(--lit) 0%, var(--mid) 38%, var(--deep) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(125, 211, 252, .07),
    0 3vmax 8vmax rgba(0, 0, 0, .55);
  translate: 0 var(--bs-lift);
}
.bs-card.c1 { --lit: #1a3550; --mid: #0f1d2e; --deep: #0a121d; left: -22vmax; top: -24vmax; rotate: -30deg; }
.bs-card.c2 { --lit: #173049; --mid: #0d1826; --deep: #080e17; right: -22vmax; top: -20vmax; rotate: 26deg; }
.bs-card.c3 { --lit: #122740; --mid: #0b1522; --deep: #070c14; left: -30vmax; top: 56vmax; rotate: 16deg; }
/* one warm one, for the gold the app counts value in */
.bs-card.c4 {
  --lit: #2b2415; --mid: #14120d; --deep: #0a0908; right: -26vmax; bottom: -27vmax; rotate: -28deg;
  box-shadow: inset 0 0 0 1px rgba(245, 195, 91, .08), 0 3vmax 8vmax rgba(0, 0, 0, .55);
}
.bs-card.c5 { --lit: #12263a; --mid: #0b1420; --deep: #070b12; left: -4vmax; bottom: -44vmax; rotate: 8deg; }
/* on its side the name runs wide, so the two top cards stand further out */
@media (orientation: landscape) {
  .bs-card.c1 { left: -27vmax; }
  .bs-card.c2 { right: -28vmax; }
}

/* ---- the middle: the mark and the name side by side, the line under them */
.bs-lockup {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(12px, 3vmin, 24px);
  /* a little above the middle, where the eye takes the middle to be (a phone's status bar and home bar weigh it down) */
  translate: 0 var(--bs-text-lift);
}
/* A shorter screen standing up (an iPhone SE, an iPad) has less room under the line before the
   lower cards: the name stays a little higher there. */
@media (orientation: portrait) and (min-aspect-ratio: 10/18) {
  .boot-splash { --bs-text-lift: -10.5vh; }
}
/* the gap darkened a little more behind the words, so no card's edge runs through them */
.bs-lockup::before {
  content: ""; position: absolute; inset: -14vmin -18vmin; z-index: -1;
  background: radial-gradient(closest-side, rgba(5, 7, 12, .8), transparent);
}
.bs-brand { display: flex; align-items: center; gap: clamp(10px, 2.8vmin, 22px); }
.bs-mark {
  display: block; flex: none;
  width: clamp(46px, 13vmin, 104px); height: auto;
  filter: drop-shadow(0 0 3vmin rgba(56, 189, 248, .28));
}
.bs-name {
  font-size: clamp(32px, 10vmin, 80px); font-weight: 700; letter-spacing: -0.025em; line-height: 1;
  text-shadow: 0 0 4vmin rgba(56, 189, 248, .22);
}
.bs-line {
  margin: 0;
  font-size: clamp(10px, 2.7vmin, 20px); font-weight: 650;
  letter-spacing: .42em; text-transform: uppercase;
  /* the spacing trails the last letter: taken back, so the line stays centred */
  margin-right: -.42em;
  color: #7dd3fc;
}