/* Shared by the static startup shell and React loading states. */
.loading-logo {
  --loading-ink: #000;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 64px;
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  color: var(--loading-ink);
  -webkit-mask: url("/assets/branding/battlesea-logo.webp") center / contain
    no-repeat;
  mask: url("/assets/branding/battlesea-logo.webp") center / contain no-repeat;
}
.loading-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.12;
}
.loading-logo__water {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  animation: logo-fill 12s cubic-bezier(0.16, 0.6, 0.25, 1) forwards;
}
.loading-logo__water::before,
.loading-logo__water::after {
  content: "";
  position: absolute;
  top: -8%;
  left: 0;
  width: 200%;
  height: 120%;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q25 0 50 8 T100 8 T150 8 T200 8 V120 H0Z'/%3E%3C/svg%3E")
    0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q25 0 50 8 T100 8 T150 8 T200 8 V120 H0Z'/%3E%3C/svg%3E")
    0 0 / 100% 100%;
  animation: logo-wave 2.4s linear infinite;
}
.loading-logo__water::before {
  top: -12%;
  opacity: 0.3;
  animation-duration: 3.6s;
  animation-direction: reverse;
}
.loading-logo[data-paused="true"] *,
.loading-logo[data-paused="true"] *::before,
.loading-logo[data-paused="true"] *::after {
  animation-play-state: paused;
}
.dark .loading-logo,
.loading-logo--light {
  --loading-ink: #fff;
}
@keyframes logo-fill {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(14%);
  }
}
@keyframes logo-wave {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading-logo__water {
    animation: none;
    transform: translateY(45%);
  }
  .loading-logo__water::before,
  .loading-logo__water::after {
    animation: none;
  }
}