#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--surface-page);
  transition: opacity 600ms ease;
  pointer-events: none;
  animation: loader-failsafe 0s 3500ms forwards;
}

#loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

#loader-boat {
  width: min(240px, 42vw);
  height: min(240px, 42vw);
}

@keyframes loader-failsafe {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  #loader {
    transition: none;
  }
}