html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: #4d2528;
}

#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: #4d2528;
  transition: opacity 500ms ease-in;
  animation: splash-auto-out 600ms ease-in 2200ms forwards;
}

#splash.is-out {
  animation: none;
  opacity: 0;
  pointer-events: none;
}

#splash .splash-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1);
  animation:
    splash-bg-in 800ms ease-out 0ms forwards,
    splash-bg-zoom 6000ms ease-out 200ms forwards;
}

#splash .splash-emblem {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(64px, 6.5vw, 96px);
  height: auto;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  animation: splash-emblem-in 900ms cubic-bezier(0.22, 1, 0.36, 1) 250ms forwards;
}

canvas {
  image-rendering: crisp-edges !important;
}

@keyframes splash-bg-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes splash-bg-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

@keyframes splash-emblem-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes splash-auto-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  #splash .splash-bg,
  #splash .splash-emblem {
    animation: splash-bg-in 400ms ease-out forwards;
  }

  #splash .splash-emblem {
    transform: translate(-50%, -50%);
  }
}