/* Retain the original path, easing, opacity, scale, duration and filters.
   Only the horizontal positioning mechanism changes: an independent translate
   replaces per-frame left/layout changes. The width is cached on resize.
   Do not add containment/isolation here: the stage lights share this backdrop. */
@supports (translate: 1px) {
  .vault-carousel .carousel-viewport[data-carousel-motion="ready"] > .carousel-background-glow {
    left: 0 !important;
    translate: calc(var(--carousel-motion-width) * -.34) 0;
    animation-name: bryerCarouselTravellingGlow;
  }
  .vault-carousel .carousel-viewport[data-carousel-motion="ready"] > .carousel-background-sweep {
    left: 0 !important;
    translate: calc(var(--carousel-motion-width) * -.28) 0;
    animation-name: bryerCarouselTravellingSweep;
  }
  @keyframes bryerCarouselTravellingGlow {
    0%, 10% {
      translate: calc(var(--carousel-motion-width) * -.34) 0;
      opacity: 0;
      transform: translate3d(-50%, -50%, 0) scale(.84);
    }
    24% { opacity: .78; }
    50% {
      translate: calc(var(--carousel-motion-width) * .5) 0;
      opacity: 1;
      transform: translate3d(-50%, -50%, 0) scale(1.08);
    }
    76% { opacity: .72; }
    90%, 100% {
      translate: calc(var(--carousel-motion-width) * 1.34) 0;
      opacity: 0;
      transform: translate3d(-50%, -50%, 0) scale(.88);
    }
  }
  @keyframes bryerCarouselTravellingSweep {
    0%, 12% { translate: calc(var(--carousel-motion-width) * -.28) 0; opacity: 0; }
    28% { opacity: .72; }
    50% { opacity: .95; }
    72% { opacity: .62; }
    88%, 100% { translate: calc(var(--carousel-motion-width) * 1.08) 0; opacity: 0; }
  }
}