:root {
  --ym-loader-bg-light: #ffffff;
  --ym-loader-bg-dark: #0e0f0e;
  --ym-loader-logo-width: min(86vw, 860px);
}

.ym-loader {
  --ym-loader-bg: var(--ym-loader-bg-light);
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  overflow: hidden;
  background: var(--ym-loader-bg);
  opacity: 1;
  visibility: visible;
  isolation: isolate;
  touch-action: none;
}

html.ym-loader-active .ym-loader {
  display: grid;
}

.ym-loader[data-resolved-theme="dark"] {
  --ym-loader-bg: var(--ym-loader-bg-dark);
}

.ym-loader[hidden] {
  display: none;
}

.ym-loader__stage {
  position: relative;
  width: var(--ym-loader-logo-width);
  max-width: calc(100vw - 32px);
  aspect-ratio: 1017.54 / 234.06;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.ym-loader__main-frame {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  aspect-ratio: 1017.54 / 206.44;
}

.ym-loader__long,
.ym-loader__tagline {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.ym-loader__reveal {
  position: absolute;
  top: 0;
  left: 50%;
  width: 36.9888%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-50%) translateY(18px) scale(.55);
  transform-origin: 50% 50%;
  will-change: width, opacity, transform, filter;
  contain: paint;
  backface-visibility: hidden;
}

.ym-loader__long {
  width: auto;
  max-width: none;
  height: 100%;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.ym-loader__tagline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(7px);
  will-change: opacity, transform, filter;
}

html.ym-loading,
html.ym-loading body {
  overflow: hidden;
}

@media (max-width: 520px) {
  :root {
    --ym-loader-logo-width: min(91vw, 430px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ym-loader__reveal,
  .ym-loader__tagline,
  .ym-loader__stage {
    will-change: auto;
  }
}