/* Clean gallery typography inspired by classic Nimbus Sans. */
html body,
html body * {
  font-family: "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, sans-serif !important;
}

html body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before,
body::after {
  content: '';
  position: fixed;
  top: 10vh;
  width: 390px;
  height: 76vh;
  z-index: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(1) contrast(1.35);
  opacity: 0.18;
}

body::before {
  left: -135px;
  background-image: url('assets/images/mixed-media/web/Leigh_Banner_Knots_1.jpg');
  animation: rotate-left-art 40s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(ellipse at left center, #000 20%, transparent 84%);
  mask-image: radial-gradient(ellipse at left center, #000 20%, transparent 84%);
}

body::after {
  right: -135px;
  background-image: url('assets/images/mixed-media/web/Leigh_Banner_Scores_1.jpg');
  animation: rotate-right-art 40s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(ellipse at right center, #000 20%, transparent 84%);
  mask-image: radial-gradient(ellipse at right center, #000 20%, transparent 84%);
}

@keyframes rotate-left-art {
  0%, 20% {
    background-image: url('assets/images/mixed-media/web/Leigh_Banner_Knots_1.jpg');
    opacity: 0.18;
  }
  23% { opacity: 0; }
  25%, 45% {
    background-image: url('assets/images/mixed-media/web/IMG_3276.jpg');
    opacity: 0.18;
  }
  48% { opacity: 0; }
  50%, 70% {
    background-image: url('assets/images/mixed-media/web/IMG_3473.jpg');
    opacity: 0.18;
  }
  73% { opacity: 0; }
  75%, 95% {
    background-image: url('assets/images/mixed-media/web/IMG_8299.jpg');
    opacity: 0.18;
  }
  98% { opacity: 0; }
  100% {
    background-image: url('assets/images/mixed-media/web/Leigh_Banner_Knots_1.jpg');
    opacity: 0.18;
  }
}

@keyframes rotate-right-art {
  0%, 20% {
    background-image: url('assets/images/mixed-media/web/Leigh_Banner_Scores_1.jpg');
    opacity: 0.18;
  }
  23% { opacity: 0; }
  25%, 45% {
    background-image: url('assets/images/mixed-media/web/IMG_5980.jpg');
    opacity: 0.18;
  }
  48% { opacity: 0; }
  50%, 70% {
    background-image: url('assets/images/mixed-media/web/IMG_3814.jpg');
    opacity: 0.18;
  }
  73% { opacity: 0; }
  75%, 95% {
    background-image: url('assets/images/mixed-media/web/IMG_0662.jpg');
    opacity: 0.18;
  }
  98% { opacity: 0; }
  100% {
    background-image: url('assets/images/mixed-media/web/Leigh_Banner_Scores_1.jpg');
    opacity: 0.18;
  }
}

body > section,
body > footer {
  position: relative;
  z-index: 1;
}

@media (max-width: 1200px) {
  body::before,
  body::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}