:root {
  --mtv-preloader-bg-start: #0b7447;
  --mtv-preloader-bg-end: #ffc700;
  --mtv-preloader-fg: #1a1a1a;
}

[data-theme=dark],
.dark-theme {
  --mtv-preloader-bg-start: #095c39;
  --mtv-preloader-bg-end: #e6b300;
  --mtv-preloader-fg: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mtv-preloader-bg-start: #095c39;
    --mtv-preloader-bg-end: #e6b300;
    --mtv-preloader-fg: #1a1a1a;
  }
}
.mtv-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background-color: var(--mtv-preloader-bg-start);
  background-image: linear-gradient(145deg, var(--mtv-preloader-bg-start) 0%, var(--mtv-preloader-bg-end) 100%);
  color: var(--mtv-preloader-fg);
  transition: opacity 0.35s ease, visibility 0.35s ease, background-color 0.3s ease, background-image 0.3s ease, color 0.3s ease;
}

.mtv-preloader__logo {
  width: min(14rem, 60vw);
  max-height: 38vh;
}

.mtv-preloader__logo svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 38vh;
}

.mtv-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mtv-preloader {
    transition-duration: 0.01ms;
  }
}