@property --dscr-calc-shutter-1 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --dscr-calc-shutter-2 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --dscr-calc-shutter-3 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --dscr-calc-shutter-4 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --dscr-calc-shutter-5 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --dscr-calc-shutter-6 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --dscr-calc-shutter-7 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --dscr-calc-shutter-8 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --dscr-calc-wipe { syntax: '<percentage>'; inherits: false; initial-value: -20%; }

/* Decorative calculator background; the calculator remains a separate layer. */
.dscr-calculator-page .dscr-calculator {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
}

.dscr-calculator-page .dscr-calculator__intro,
.dscr-calculator-page .dscr-calculator__shell,
.dscr-calculator-page .dscr-calculator__disclosure {
  position: relative;
  z-index: 1;
}

.dscr-calculator-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: dscr-calc-background-cycle 14s linear infinite both;
}

.dscr-calculator-background,
.dscr-calculator-background * {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.dscr-calculator-background__wipe,
.dscr-calculator-background__image {
  position: absolute;
  inset: 0;
}

.dscr-calculator-background__wipe {
  mask-image: linear-gradient(135deg, transparent calc(var(--dscr-calc-wipe) - 18%), #000 var(--dscr-calc-wipe));
  animation: dscr-calc-background-wipe 14s ease-in-out infinite both;
}

.dscr-calculator-background__image {
  background:
    linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 92%) 25%, rgb(255 255 255 / 52%) 54%, rgb(255 255 255 / 12%) 100%),
    url("../../DSCR-calc-background.jpg") center center / cover no-repeat;
  opacity: .28;
  filter: grayscale(.75);
  mask-image:
    linear-gradient(#000, #000), linear-gradient(#000, #000),
    linear-gradient(#000, #000), linear-gradient(#000, #000),
    linear-gradient(#000, #000), linear-gradient(#000, #000),
    linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-repeat: no-repeat;
  mask-position: 0% 0%, 14.285714% 100%, 28.571429% 0%, 42.857143% 100%, 57.142857% 0%, 71.428571% 100%, 85.714286% 0%, 100% 100%;
  mask-size:
    calc(12.5% + 2px) var(--dscr-calc-shutter-1),
    calc(12.5% + 2px) var(--dscr-calc-shutter-2),
    calc(12.5% + 2px) var(--dscr-calc-shutter-3),
    calc(12.5% + 2px) var(--dscr-calc-shutter-4),
    calc(12.5% + 2px) var(--dscr-calc-shutter-5),
    calc(12.5% + 2px) var(--dscr-calc-shutter-6),
    calc(12.5% + 2px) var(--dscr-calc-shutter-7),
    calc(12.5% + 2px) var(--dscr-calc-shutter-8);
  animation:
    dscr-calc-shutter-1 14s cubic-bezier(.45, 0, .2, 1) infinite both,
    dscr-calc-shutter-2 14s cubic-bezier(.45, 0, .2, 1) infinite both,
    dscr-calc-shutter-3 14s cubic-bezier(.45, 0, .2, 1) infinite both,
    dscr-calc-shutter-4 14s cubic-bezier(.45, 0, .2, 1) infinite both,
    dscr-calc-shutter-5 14s cubic-bezier(.45, 0, .2, 1) infinite both,
    dscr-calc-shutter-6 14s cubic-bezier(.45, 0, .2, 1) infinite both,
    dscr-calc-shutter-7 14s cubic-bezier(.45, 0, .2, 1) infinite both,
    dscr-calc-shutter-8 14s cubic-bezier(.45, 0, .2, 1) infinite both;
}

@keyframes dscr-calc-background-cycle {
  0%, 2%, 90%, 100% { opacity: 0; visibility: hidden; }
  3%, 85% { opacity: 1; visibility: visible; }
}

@keyframes dscr-calc-background-wipe {
  0%, 55% { --dscr-calc-wipe: -20%; }
  85%, 100% { --dscr-calc-wipe: 120%; }
}

@keyframes dscr-calc-shutter-1 {
  0%, 10%, 96%, 100% { --dscr-calc-shutter-1: 0%; }
  35%, 90% { --dscr-calc-shutter-1: 100%; }
}
@keyframes dscr-calc-shutter-2 {
  0%, 13.5714%, 96%, 100% { --dscr-calc-shutter-2: 0%; }
  38.5714%, 90% { --dscr-calc-shutter-2: 100%; }
}
@keyframes dscr-calc-shutter-3 {
  0%, 17.8571%, 96%, 100% { --dscr-calc-shutter-3: 0%; }
  42.8571%, 90% { --dscr-calc-shutter-3: 100%; }
}
@keyframes dscr-calc-shutter-4 {
  0%, 21.4286%, 96%, 100% { --dscr-calc-shutter-4: 0%; }
  46.4286%, 90% { --dscr-calc-shutter-4: 100%; }
}
@keyframes dscr-calc-shutter-5 {
  0%, 22.8571%, 96%, 100% { --dscr-calc-shutter-5: 0%; }
  47.8571%, 90% { --dscr-calc-shutter-5: 100%; }
}
@keyframes dscr-calc-shutter-6 {
  0%, 20%, 96%, 100% { --dscr-calc-shutter-6: 0%; }
  45%, 90% { --dscr-calc-shutter-6: 100%; }
}
@keyframes dscr-calc-shutter-7 {
  0%, 15%, 96%, 100% { --dscr-calc-shutter-7: 0%; }
  40%, 90% { --dscr-calc-shutter-7: 100%; }
}
@keyframes dscr-calc-shutter-8 {
  0%, 11.7857%, 96%, 100% { --dscr-calc-shutter-8: 0%; }
  36.7857%, 90% { --dscr-calc-shutter-8: 100%; }
}

@media (max-width: 40rem) {
  .dscr-calculator-background__image {
    background-position: center top;
    opacity: .23;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dscr-calculator-background {
    display: none;
    animation: none;
  }

  .dscr-calculator-background * {
    animation: none;
  }
}