.loader {
  z-index: 10000;
  color: #fff;
  width: 100%;
  height: 100dvh;
  position: fixed;
  inset: 0% 0% auto;
}

html[data-loader-shown="true"] .loader {
  display: none;
}

.loader__bg {
  background-color: #8e1f1e;
  background-image: var(--ssw-noise-image), var(--ssw-loader-gradient);
  background-repeat: repeat, no-repeat;
  background-size: var(--ssw-noise-size), cover;
  background-position:
    left top,
    center top;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.loader__container {
  z-index: 2;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.loader__bg-bar {
  z-index: 1;
  transform-origin: 0%;
  transform-style: preserve-3d;
  background-color: #fff;
  width: 100%;
  height: 0.5em;
  position: absolute;
  inset: auto 0% 0%;
  transform: scale3d(0, 1, 1);
}

.loader__logo-wrap {
  justify-content: center;
  align-items: center;
  /* At the 1920px reference viewport, the logo is 576px wide (30vw).
     Keep that same viewport proportion at every breakpoint. */
  width: 30vw;
  aspect-ratio: 18 / 5;
  height: auto;
  display: flex;
  position: relative;
}

.loader__logo-item {
  width: 100%;
  height: 100%;
  position: absolute;
}

.loader__logo-item.is--base {
  opacity: 0.2;
}

.loader__logo-item.is--top {
  -webkit-clip-path: inset(0% 100% 0% 0%);
  clip-path: inset(0% 100% 0% 0%);
}

.loader__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.loader__text-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 3.5em;
}

.loader__text-el {
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: -0.25em;
  padding-bottom: 0.25em;
  font-family: var(--inter, Inter, Arial, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  position: absolute;
}

body.is-loader-active {
  overflow: hidden;
}

[data-load-reset] {
  opacity: 0;
}