/* Shared by the initial app boot and public merchant-page requests. */
.app-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  background: #101115;
}

.app-loading .ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 12%, rgb(200 171 114 / 30%) 50%, #c8ab72),
    rgb(239 233 220 / 10%);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3.1px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, #0000 calc(100% - 3.1px), #000 calc(100% - 2.5px));
  animation:
    coogo-boot-spin 1.05s cubic-bezier(.55, .15, .45, .85) infinite,
    coogo-boot-in .4s .6s cubic-bezier(.2, .8, .2, 1) both;
}

.app-loading .word {
  font: 500 11px/1 system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  letter-spacing: .32em;
  color: #8d8a82;
  opacity: 0;
  animation: coogo-boot-word .8s 2.5s ease forwards;
}

@keyframes coogo-boot-spin {
  to { rotate: 360deg; }
}

@keyframes coogo-boot-in {
  from { opacity: 0; scale: .6; }
}

@keyframes coogo-boot-word {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading .ring { animation: none; }
  .app-loading .word { animation: none; opacity: 1; }
}