:root {
  color-scheme: dark;
  background: #03040a;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: #03040a;
  overflow: hidden;
}

.hero-band {
  position: relative;
  width: 100%;
  min-height: 100svh;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #03040a;
}

.hero-video {
  width: 100%;
  height: 100svh;
  display: block;
  object-fit: cover;
  background: #03040a;
  opacity: 1;
  transition: opacity 900ms ease;
}

.is-loading .hero-video {
  opacity: 0;
}

.loading-screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  padding: 32px;
  background:
    linear-gradient(rgba(3, 4, 10, 0.72), rgba(3, 4, 10, 0.88)),
    url("/assets/galame-logo.png") center / min(76vw, 760px) auto no-repeat,
    #03040a;
  opacity: 1;
  transition: opacity 700ms ease, visibility 700ms ease;
}

.is-ready .loading-screen {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.loading-logo {
  width: min(42vw, 360px);
  max-height: 28svh;
  object-fit: contain;
  filter: drop-shadow(0 24px 80px rgba(0, 220, 255, 0.18));
}

.loading-meter {
  width: min(360px, 62vw);
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}

.loading-fill {
  display: block;
  width: var(--loading-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, #7ef0ff, #94ff6b);
  transition: width 180ms ease;
}

.loading-label {
  margin: 0;
  color: rgba(232, 240, 255, 0.82);
  font: 500 13px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.loading-percent {
  font-variant-numeric: tabular-nums;
}

.is-indeterminate .loading-fill {
  width: 42%;
  animation: loading-sweep 1.25s ease-in-out infinite;
}

@keyframes loading-sweep {
  0% {
    transform: translateX(-115%);
  }

  100% {
    transform: translateX(250%);
  }
}