/* Native equivalent of the GradientWaves visual language for this static site. */
:root {
  --wave-x: 50%;
  --wave-y: 50%;
}

html { background: #f4efeb; }

body {
  background: transparent !important;
  isolation: isolate;
}

.gradient-waves-background {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(60rem 32rem at var(--wave-x) var(--wave-y), rgba(255, 212, 228, .52), transparent 63%),
    linear-gradient(145deg, #f7f2ed 8%, #f3e9ee 48%, #eee5e7 100%);
}

.gradient-waves-background::before,
.gradient-waves-background::after {
  content: "";
  position: absolute;
  width: 150vw;
  height: 58vw;
  min-height: 34rem;
  left: -25vw;
  border-radius: 45% 55% 52% 48% / 44% 45% 55% 56%;
  filter: blur(1px);
  transform-origin: center;
}

.gradient-waves-background::before {
  top: 12%;
  opacity: .38;
  background:
    radial-gradient(ellipse at 28% 40%, rgba(235, 52, 113, .76), transparent 28%),
    radial-gradient(ellipse at 70% 53%, rgba(126, 30, 102, .72), transparent 37%),
    linear-gradient(100deg, rgba(165, 25, 103, .63), rgba(255, 136, 180, .3) 51%, rgba(92, 20, 71, .58));
  animation: gradient-wave-drift 22s ease-in-out infinite alternate;
}

.gradient-waves-background::after {
  top: 57%;
  opacity: .23;
  background: linear-gradient(104deg, rgba(255, 164, 196, .72), rgba(174, 42, 135, .7) 48%, rgba(255, 216, 229, .64));
  animation: gradient-wave-drift 30s -9s ease-in-out infinite alternate-reverse;
}

main,
.header,
.topline,
.site-footer { position: relative; z-index: 0; }

@keyframes gradient-wave-drift {
  0% { transform: translate3d(-6%, -3%, 0) rotate(-5deg) scale(1.03); }
  50% { transform: translate3d(5%, 3%, 0) rotate(4deg) scale(1.1); }
  100% { transform: translate3d(-1%, 8%, 0) rotate(-1deg) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-waves-background::before,
  .gradient-waves-background::after { animation: none; }
}