body.is-loading {
  overflow: hidden;
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  overflow: hidden;
  /* A viewport unit is required so the loader follows mobile browser chrome. */
  height: 100dvh;
}

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

.site-loader__surface {
  position: absolute;
  inset: 0;
  background: var(--color-secondary-cream);
}

.site-loader__scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1440px;
  height: 820px;
  transform: translate(-50%, -50%);
}

.site-loader__artwork {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.site-loader__artwork--left {
  position: absolute;
  top: 74px;
  left: -117px;
  width: 837px;
  height: 663px;
  object-fit: fill;
  mix-blend-mode: multiply;
  opacity: 0.16;
}

.site-loader__artwork--right {
  position: absolute;
  top: 226px;
  left: 994px;
  width: 331px;
  height: 365px;
  object-fit: fill;
}

.brand-lockup {
  position: absolute;
  top: 37px;
  left: 50%;
  z-index: var(--z-content);
  display: flex;
  width: 171px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
}

.brand-lockup__icon {
  width: 90px;
  height: 50px;
  object-fit: contain;
}

.brand-lockup__wordmark {
  width: 152px;
  height: 72px;
  object-fit: contain;
}

.loader-record {
  position: absolute;
  top: 206px;
  left: 50%;
  z-index: var(--z-record);
  width: 387px;
  height: 387px;
  overflow: hidden;
  border-radius: 9999px;
  transform: translateX(-50%);
  transform-origin: 50% 50%;
}

.loader-record__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.site-loader__tagline {
  position: absolute;
  top: 660px;
  left: 50%;
  z-index: var(--z-content);
  width: 861px;
  min-height: 110px;
  transform: translateX(-50%);
}

.site-loader--fallback-exit .site-loader__surface,
.site-loader--fallback-exit .site-loader__artwork,
.site-loader--fallback-exit .brand-lockup,
.site-loader--fallback-exit .site-loader__tagline,
.site-loader--fallback-exit .loader-record {
  opacity: 0;
  transition: opacity 450ms ease;
}

@media (max-width: 1280px) and (min-width: 769px) {
  .site-loader__scene {
    transform: translate(-50%, -50%) scale(0.86);
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .site-loader__scene {
    transform: translate(-50%, -50%) scale(0.7);
  }
}

@media (max-height: 819px) and (min-width: 769px) {
  .site-loader__scene {
    transform: translate(-50%, -50%) scale(0.86);
  }
}

@media (max-width: 1280px) and (max-height: 819px) and (min-width: 769px) {
  .site-loader__scene {
    transform: translate(-50%, -50%) scale(0.76);
  }
}

@media (max-height: 700px) and (min-width: 769px) {
  .site-loader__scene {
    transform: translate(-50%, -50%) scale(0.7);
  }
}

@media (max-width: 768px) {
  .site-loader__scene {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .brand-lockup {
    top: clamp(18px, 3.3dvh, 28px);
    width: 136px;
    gap: 8px;
  }

  .brand-lockup__icon {
    width: 68px;
    height: auto;
  }

  .brand-lockup__wordmark {
    width: 124px;
    height: auto;
  }

  .loader-record {
    top: clamp(154px, 22dvh, 194px);
    width: min(64vw, 300px);
    height: min(64vw, 300px);
  }

  .site-loader__artwork--left {
    top: clamp(248px, 34dvh, 318px);
    left: -43vw;
    width: min(102vw, 700px);
    height: auto;
    aspect-ratio: 1024 / 812;
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 0%,
      #000 56%,
      rgba(0, 0, 0, 0.82) 70%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      #000 0%,
      #000 56%,
      rgba(0, 0, 0, 0.82) 70%,
      transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .site-loader__artwork--right {
    top: clamp(252px, 35dvh, 326px);
    right: -14vw;
    left: auto;
    width: min(46vw, 290px);
    height: auto;
    aspect-ratio: 340 / 440;
  }

  .site-loader__tagline {
    top: auto;
    bottom: max(24px, env(safe-area-inset-bottom));
    width: calc(100% - 32px);
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .brand-lockup {
    top: clamp(14px, 2.6dvh, 22px);
    width: 124px;
  }

  .brand-lockup__icon {
    width: 62px;
  }

  .brand-lockup__wordmark {
    width: 112px;
  }

  .loader-record {
    top: clamp(142px, 20dvh, 170px);
    width: min(66vw, 270px);
    height: min(66vw, 270px);
  }

  .site-loader__artwork--left {
    top: clamp(235px, 33dvh, 290px);
    left: -50vw;
    width: 108vw;
  }

  .site-loader__artwork--right {
    top: clamp(250px, 35dvh, 305px);
    right: -17vw;
    width: 51vw;
  }

  .site-loader__tagline {
    bottom: max(20px, env(safe-area-inset-bottom));
    width: calc(100% - 24px);
  }

  .site-loader__tagline.type-split-tagline {
    font-size: 26px;
    line-height: 31px;
  }
}

@media (max-height: 700px) and (max-width: 768px) {
  .brand-lockup {
    top: 12px;
  }

  .loader-record {
    top: 120px;
    width: 220px;
    height: 220px;
  }

  .site-loader__artwork--left {
    top: 215px;
  }

  .site-loader__artwork--right {
    top: 225px;
  }

  .site-loader__tagline {
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .site-loader__tagline.type-split-tagline {
    font-size: 23px;
    line-height: 28px;
  }
}


/*
 * The Figma loader is a 1440 × 820 composition. On short responsive
 * viewports, retain that complete composition instead of independently
 * resizing its artwork, which otherwise makes the left and right scenes
 * visually unrelated to the record.
 */
@media (max-width: 768px) and (min-aspect-ratio: 5 / 4) {
  .site-loader__scene {
    top: 50%;
    left: 50%;
    width: min(100vw, calc(100dvh * 1.7561));
    height: auto;
    aspect-ratio: 1440 / 820;
    transform: translate(-50%, -50%);
  }

  .site-loader__artwork--left {
    top: 9.024%;
    left: -8.125%;
    width: 58.125%;
    height: 80.854%;
  }

  .site-loader__artwork--right {
    top: 27.561%;
    right: auto;
    left: 69.028%;
    width: 22.986%;
    height: 44.512%;
  }

  .brand-lockup {
    top: 4.512%;
    width: 11.875%;
    gap: clamp(5px, 0.833vw, 12px);
  }

  .brand-lockup__icon {
    width: 52.73%;
  }

  .brand-lockup__wordmark {
    width: 88.89%;
  }

  .loader-record {
    top: 25.171%;
    width: 26.875%;
    height: auto;
    aspect-ratio: 1;
  }

  .site-loader__tagline {
    top: 80.488%;
    bottom: auto;
    width: 59.792%;
    min-height: 13.415%;
  }

  .site-loader__tagline.type-split-tagline {
    font-size: clamp(23px, 3.333vw, 48px);
    line-height: 1.2;
  }
}