/* Decorative Quick Pricer background. Pricing content and scripts remain independent. */
.quick-pricer-page .quick-pricer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
}

.quick-pricer-page .quick-pricer__intro,
.quick-pricer-page .quick-pricer__shell {
  position: relative;
  z-index: 1;
}

.quick-pricer-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: quick-pricer-background-visibility 14s linear infinite both;
}

.quick-pricer-background,
.quick-pricer-background *,
.quick-pricer-background::before,
.quick-pricer-background::after {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.quick-pricer-background::before {
  position: absolute;
  inset: 0;
  content: "";
  background: url("../images/pricer/quick-pricer-background.jpg") center center / cover no-repeat;
  filter: grayscale(.72);
  opacity: .26;
}

.quick-pricer-background::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 88%) 24%, rgb(255 255 255 / 48%) 52%, rgb(255 255 255 / 16%) 76%, rgb(255 255 255 / 0%) 100%),
    linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(247 245 240 / 32%) 100%);
}

@keyframes quick-pricer-background-visibility {
  0%, 1%, 96%, 100% {
    opacity: 0;
    visibility: hidden;
  }
  2%, 94% {
    opacity: 1;
    visibility: visible;
  }
}

.quick-pricer-background__shutters {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 22% 28% 28% 22%;
  grid-template-rows: 32% 36% 32%;
  grid-template-areas: "a b c d" "a e f d" "g e f h";
}

.quick-pricer-background__shutters > span {
  margin: -1px;
  background: #fff;
  transform-origin: right center;
  animation: quick-pricer-background-shutter 14s cubic-bezier(.45, 0, .2, 1) infinite both;
}

.quick-pricer-background__shutters > span:nth-child(1) { grid-area: a; }
.quick-pricer-background__shutters > span:nth-child(2) { grid-area: b; animation-delay: 1.1s; }
.quick-pricer-background__shutters > span:nth-child(3) { grid-area: c; animation-delay: 1.4s; transform-origin: left center; }
.quick-pricer-background__shutters > span:nth-child(4) { grid-area: d; animation-delay: .25s; transform-origin: left center; }
.quick-pricer-background__shutters > span:nth-child(5) { grid-area: e; animation-delay: 1.6s; }
.quick-pricer-background__shutters > span:nth-child(6) { grid-area: f; animation-delay: 1.8s; transform-origin: left center; }
.quick-pricer-background__shutters > span:nth-child(7) { grid-area: g; animation-delay: .5s; }
.quick-pricer-background__shutters > span:nth-child(8) { grid-area: h; animation-delay: .7s; transform-origin: left center; }

@keyframes quick-pricer-background-shutter {
  0%, 10%, 100% {
    transform: scaleX(1);
    opacity: 1;
  }
  35%, 53% {
    transform: scaleX(0);
    opacity: 0;
  }
  82% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick-pricer-background {
    display: none;
    animation: none;
    opacity: 0;
    visibility: hidden;
  }

  .quick-pricer-background__shutters > span {
    animation: none;
  }
}