/*
  Startup screen.

  Paint model (this is the fix for the "grey squares"): the overlay is ONE
  opaque layer and the logo is painted into it. Nothing over the logo is
  animated, filtered, masked or hinted with will-change, so the browser has no
  reason to split the lockup into separate compositor layers. Those layers were
  drawn with a solid placeholder colour whenever rasterisation fell behind the
  main thread (the app bundle is parsed at exactly that moment), which is what
  showed up as a grey rectangle behind the lockup and a square behind the mark.

  The only animated element is the thin progress line under the logo; it moves
  with transform inside a small clipped track and never overlaps the logo.
*/
.startup, .startup * { box-sizing: border-box; }
.startup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  /* 100vw, not the client width: the page scrollbar appears and disappears
     while the app is laid out underneath, and must not move the logo. */
  width: 100vw;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  /* Opaque colours only: an opaque layer never lets anything show through. */
  background-color: #08080a;
  background-image: radial-gradient(48vmax 36vmax at 50% 46%, #1d130c 0%, #120d0b 42%, #08080a 100%);
  color: #f5f2ef;
  font: 400 14px/1.5 Geologica, system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: opacity .36s cubic-bezier(.22, 1, .36, 1);
}
.startup-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 380px);
}
/* The SVG keeps its own 272:64 ratio; only its width follows the viewport.
   overflow: visible lets the enlarged mark of the intro extend past the box. */
.startup-logo {
  display: block;
  flex: none;
  width: clamp(208px, 64vw, 360px);
  height: auto;
  aspect-ratio: 272 / 64;
  max-width: 100%;
  overflow: visible;
}
.startup-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.startup-recovery {
  margin-top: 24px;
  max-width: min(300px, calc(100vw - 48px));
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  color: #c4bcb6;
}
.startup-recovery[hidden] { display: none; }
.startup-recovery p { margin: 0 0 16px; }
.startup-retry {
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 12px;
  background: #ff7b1d;
  color: #140b04;
  font: 400 14px/1.2 Geologica, system-ui, -apple-system, 'Segoe UI', sans-serif;
  cursor: pointer;
}
.startup-retry:hover { background: #ff8f3f; }
.startup-retry:focus-visible { outline: 2px solid #ffb077; outline-offset: 3px; }
.startup.is-leaving { opacity: 0; pointer-events: none; }

/* The covered page is laid out without painting or running its entrance animations. */
html[data-startup='loading'] #root { visibility: hidden; }
/* Entrance animations start under the fading overlay, so the first page is
   already appearing when the overlay becomes transparent. */
html[data-startup='loading'] #root *, html[data-startup='loading'] #root *::before, html[data-startup='loading'] #root *::after { animation-play-state: paused !important; }


@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion='full']) .startup { transition: none; }
  :root:not([data-motion='full']) :is(.startup-word path, .startup-mark) { animation: none; opacity: 1; transform: none; fill: #ffffff; stroke: #ffffff; }
  :root:not([data-motion='full']) .startup-mark { fill: #ff7b1d; }
}

/*
  Lockup entrance. Everything moves inside the one SVG, which Chromium and Firefox
  paint as a single image; SVG children never get compositor layers of their own,
  so there is nothing that could be shown as a placeholder rectangle.
  A large mark appears in the middle, slides left into its place, then the letters
  rise one by one and cool from orange to white. No glow.
*/
.startup-mark {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: startup-mark 1.15s cubic-bezier(.65, 0, .35, 1) .05s forwards;
}
.startup-word path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  opacity: 0;
  fill: #ff7b1d;
  /* A stroke in the fill colour gives the outlined Geologica a heavier weight. */
  stroke: #ff7b1d;
  stroke-width: 1.1;
  stroke-linejoin: round;
  animation: startup-letter .5s cubic-bezier(.22, 1, .36, 1) calc(.95s + var(--i) * 40ms) forwards;
}
/* 102 user units = from the mark's place to the middle of the 272-wide lockup. */
@keyframes startup-mark {
  0% { opacity: 0; transform: translateX(102px) scale(1.25); }
  22% { opacity: 1; transform: translateX(102px) scale(1.75); }
  45% { opacity: 1; transform: translateX(102px) scale(1.75); }
  100% { opacity: 1; transform: none; }
}
@keyframes startup-letter {
  0% { opacity: 0; transform: translateY(42%) scale(.92); fill: #ff7b1d; stroke: #ff7b1d; }
  45% { opacity: 1; fill: #ffb077; stroke: #ffb077; }
  100% { opacity: 1; transform: none; fill: #ffffff; stroke: #ffffff; }
}