/* The web's loading screen (WebAppLaunch board): a 120 px tile in the
   middle of the page, the 食 writing itself in 953 ms. web/launch.js moves
   the tile into the rail's logo once Flutter has drawn. Timings are the
   Android splash's (tool/brand/fh-logo-strokes.json, timelines.splash). */

.fh-launch {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  --fh-page: #ffffff;
  --fh-tile: #ff6a13;
  --fh-ink: #111111;
  --fh-text: #111111;
  --fh-text-variant: #5c5c5c;
}

@media (prefers-color-scheme: dark) {
  .fh-launch {
    --fh-page: #000000;
    --fh-tile: #ff7a2e;
    --fh-text: #f5f5f5;
    --fh-text-variant: #a1a1a6;
  }
}

html,
body {
  background: #ffffff;
}

@media (prefers-color-scheme: dark) {
  html,
  body {
    background: #000000;
  }
}

.fh-launch__backdrop {
  position: absolute;
  inset: 0;
  background: var(--fh-page);
}

.fh-launch__tile {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  /* 13/48 of the side, as FhLogo. */
  border-radius: 32.5px;
  background: var(--fh-tile);
  overflow: hidden;
  transform-origin: 0 0;
}

/* The mark's 1024 canvas covers 0.8966 of the tile, centered. */
.fh-launch__mark {
  position: absolute;
  left: 6.204px;
  top: 6.204px;
  width: 107.592px;
  height: 107.592px;
}

.fh-stroke {
  fill: none;
  stroke: var(--fh-ink);
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation-name: fh-write;
  animation-fill-mode: both;
}

.fh-glyph {
  fill: var(--fh-ink);
  opacity: 0;
  animation: fh-show 1ms linear 953ms both;
}

/* At the last stroke's end the pieces give way to the whole mark, which
   has no seams along the cuts. */
.fh-strokes {
  animation: fh-hide 1ms linear 953ms both;
}

.fh-stroke-1 { animation-duration: 110ms; animation-delay: 0ms; animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
.fh-stroke-2 { animation-duration: 90ms; animation-delay: 126ms; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
.fh-stroke-3 { animation-duration: 40ms; animation-delay: 232ms; animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); }
.fh-stroke-4 { animation-duration: 135ms; animation-delay: 288ms; animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); }
.fh-stroke-5 { animation-duration: 90ms; animation-delay: 439ms; animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); }
.fh-stroke-6 { animation-duration: 90ms; animation-delay: 545ms; animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); }
.fh-stroke-7 { animation-duration: 125ms; animation-delay: 651ms; animation-timing-function: cubic-bezier(0.35, 0, 0.5, 1); }
.fh-stroke-8 { animation-duration: 55ms; animation-delay: 792ms; animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
.fh-stroke-9 { animation-duration: 90ms; animation-delay: 863ms; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }

@keyframes fh-write {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fh-show {
  to {
    opacity: 1;
  }
}

@keyframes fh-hide {
  to {
    opacity: 0;
  }
}

/* Reduced motion: the whole mark at once, only fades follow. */
@media (prefers-reduced-motion: reduce) {
  .fh-strokes {
    display: none;
  }

  .fh-glyph {
    animation: none;
    opacity: 1;
  }
}

/* Flutter did not start (web/launch.js): the mark gives way to a short
   message and a way to try again. */
.fh-launch--failed {
  pointer-events: auto;
}

.fh-launch--failed .fh-launch__tile {
  display: none;
}

.fh-launch__failure {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: var(--fh-text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.fh-launch__failure-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 28px;
}

.fh-launch__failure-text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--fh-text-variant);
}

/* The main action: saffron with ink, as in the app. */
.fh-launch__failure-button {
  margin-top: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 24px;
  background: var(--fh-tile);
  color: var(--fh-ink);
  font: 600 16px/24px system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
}

.fh-launch__failure-button:focus-visible {
  outline: 2px solid var(--fh-text);
  outline-offset: 2px;
}