#bn-loader,
#bn-loader * {
  box-sizing: border-box;
}

#bn-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  background: #ff3b30;
  clip-path: inset(0 0 0 0);
  isolation: isolate;
  pointer-events: auto;
  transform: translateZ(0);
  will-change: clip-path, opacity;
}

#bn-loader .bn-editorial-loader__progress {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: rgb(30, 30, 30);
  transform: scaleX(.01);
  transform-origin: 0 50%;
  will-change: transform;
}

#bn-loader .bn-editorial-loader__media {
  position: relative;
  width: min(384px, calc(100vw - 48px));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50% 0 50% 0);
  will-change: clip-path, opacity, transform;
}

#bn-loader .bn-editorial-loader__stack,
#bn-loader .bn-editorial-loader__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#bn-loader .bn-editorial-loader__stack {
  transform: scale(1.1);
  transform-origin: 50% 50%;
  will-change: transform;
}

#bn-loader .bn-editorial-loader__image {
  display: block;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  will-change: opacity;
}

#bn-loader .bn-editorial-loader__image:first-child {
  opacity: 1;
}

body.bn-editorial-loader-active {
  overscroll-behavior: none;
}

@media (max-width: 1199.98px) {
  #bn-loader .bn-editorial-loader__media {
    width: min(230px, calc(100vw - 48px));
    aspect-ratio: 230 / 280;
  }
}

@media (prefers-reduced-motion: reduce) {
  #bn-loader .bn-editorial-loader__progress {
    transform: scaleX(1);
  }
}