.screenshot-footer {
  background: linear-gradient(#faf9ff 0%, #e6e0fb 50%, #c2b2f8 100%);
}

.screenshot-footer .footer-liquid-wave {
  opacity: .85;
  mix-blend-mode: normal;
  transform-origin: 20% 70%;
  pointer-events: none;
  background: url("../media/footer-glass-wave.webp") 0 100% / 48% no-repeat;
  animation: 15s ease-in-out infinite footer-liquid-drift;
  inset: -4%;
}

.screenshot-footer .screenshot-footer-glass {
  -webkit-backdrop-filter: blur(6px) saturate(1.06);
  background: #fff9;
  border-color: #ffffffa6;
  box-shadow: inset 0 1px 1px #ffffffb3;
}

.footer-filter-defs {
  pointer-events: none;
  position: absolute;
}

@keyframes footer-liquid-drift {
  0%, 100% {
    transform: translate3d(-1%, 1%, 0) rotate(-1.5deg) scale(1.04);
  }

  50% {
    transform: translate3d(2%, -2%, 0) rotate(2deg) scale(1.09);
  }
}

@media (width <= 767px) {
  .screenshot-footer .footer-liquid-wave {
    opacity: .6;
    background-size: auto 65%;
  }

  .screenshot-footer .screenshot-footer-glass {
    background: #ffffffad;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screenshot-footer .footer-liquid-wave {
    animation: none;
    transform: none;
    filter: blur(3px) !important;
  }
}