/* Native decorative light waves. Only the two outer frames move; the QR stays still. */
@media (min-width: 761px) {
  html body.contact-page .contact-qr-stage {
    position: relative;
    isolation: isolate;
    overflow: visible;
  }

  html body.contact-page .contact-qr-stage > .contact-qr-card {
    position: relative;
    z-index: 2;
  }

  html body.contact-page .contact-qr-stage > .contact-qr-ripple {
    --contact-wave-end-scale: 1.29;
    position: absolute;
    z-index: 0;
    inset: -13px;
    border: 0;
    border-radius: 0;
    background: url('/assets/contact-dark-20260911/contact-qr-light-768.png') center / 100% 100% no-repeat;
    pointer-events: none;
    transform-origin: center;
    opacity: 0;
    animation: contact-light-wave 7.2s cubic-bezier(.2, .52, .35, 1) infinite;
  }

  html body.contact-page .contact-qr-stage > .contact-qr-ripple:nth-of-type(2) {
    animation-delay: -3.6s;
  }

  /* The pre-rendered transparent material keeps every frame to two composited transforms. */
  @keyframes contact-light-wave {
    0% { transform: scale(.96); opacity: 0; }
    16% { opacity: .88; }
    54% { opacity: .46; }
    100% { transform: scale(var(--contact-wave-end-scale)); opacity: 0; }
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  html body.contact-page .contact-qr-stage > .contact-qr-ripple {
    --contact-wave-end-scale: 1.18;
  }
}

@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  html body.contact-page .contact-qr-stage > .contact-qr-ripple {
    animation: none;
    transform: scale(1.04);
    opacity: .40;
  }

  html body.contact-page .contact-qr-stage > .contact-qr-ripple:nth-of-type(2) {
    transform: scale(1.20);
    opacity: .18;
  }
}