:root {
  --wf-ink-base: #000000;
  --wf-ink-violet: rgba(144, 58, 255, 0.86);
  --wf-ink-violet-2: rgba(188, 84, 255, 0.78);
  --wf-ink-magenta: rgba(255, 74, 218, 0.7);
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  background: #000;
  background-color: var(--wf-ink-base);
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -28vmax;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

body::before {
  z-index: 0;
  opacity: 0.68;
  mix-blend-mode: screen;
  background:
    radial-gradient(24% 22% at 14% 22%, var(--wf-ink-violet) 0%, rgba(144, 58, 255, 0.34) 36%, rgba(144, 58, 255, 0) 72%),
    radial-gradient(28% 24% at 84% 30%, var(--wf-ink-violet-2) 0%, rgba(188, 84, 255, 0.32) 38%, rgba(188, 84, 255, 0) 74%),
    radial-gradient(22% 20% at 58% 78%, var(--wf-ink-magenta) 0%, rgba(255, 74, 218, 0.3) 36%, rgba(255, 74, 218, 0) 72%);
  filter: blur(84px) saturate(178%) contrast(122%);
  animation: wf-fluid-ink-a 26s cubic-bezier(0.46, 0.04, 0.26, 1) infinite alternate;
}

body::after {
  z-index: 1;
  opacity: 0.5;
  mix-blend-mode: screen;
  background:
    radial-gradient(18% 16% at 34% 62%, rgba(126, 52, 255, 0.62) 0%, rgba(126, 52, 255, 0) 72%),
    radial-gradient(16% 14% at 72% 66%, rgba(230, 90, 255, 0.54) 0%, rgba(230, 90, 255, 0) 72%),
    radial-gradient(20% 17% at 50% 14%, rgba(116, 48, 255, 0.56) 0%, rgba(116, 48, 255, 0) 74%);
  filter: blur(72px) saturate(170%) contrast(118%);
  animation: wf-fluid-ink-b 34s cubic-bezier(0.48, 0.06, 0.22, 1) infinite alternate;
}

.page {
  position: relative;
  z-index: 3;
}

@keyframes wf-fluid-ink-a {
  0% {
    transform: translate3d(-3vw, -2vh, 0) scale(1) rotate(-2deg);
    filter: blur(84px) saturate(168%) contrast(118%) hue-rotate(0deg);
  }

  35% {
    transform: translate3d(4vw, 3vh, 0) scale(1.08) rotate(4deg);
    filter: blur(90px) saturate(188%) contrast(124%) hue-rotate(8deg);
  }

  70% {
    transform: translate3d(-2vw, 6vh, 0) scale(1.04) rotate(-5deg);
    filter: blur(92px) saturate(194%) contrast(126%) hue-rotate(-6deg);
  }

  100% {
    transform: translate3d(5vw, -4vh, 0) scale(1.12) rotate(6deg);
    filter: blur(88px) saturate(182%) contrast(122%) hue-rotate(12deg);
  }
}

@keyframes wf-fluid-ink-b {
  0% {
    transform: translate3d(5vw, -4vh, 0) scale(1.02) rotate(4deg);
    filter: blur(72px) saturate(154%) contrast(112%) hue-rotate(0deg);
  }

  30% {
    transform: translate3d(-6vw, 4vh, 0) scale(1.1) rotate(-6deg);
    filter: blur(76px) saturate(170%) contrast(120%) hue-rotate(-10deg);
  }

  66% {
    transform: translate3d(4vw, 7vh, 0) scale(1.06) rotate(7deg);
    filter: blur(80px) saturate(176%) contrast(124%) hue-rotate(9deg);
  }

  100% {
    transform: translate3d(-7vw, -6vh, 0) scale(1.14) rotate(-8deg);
    filter: blur(74px) saturate(162%) contrast(116%) hue-rotate(16deg);
  }
}

@media (max-width: 860px) {
  body::before {
    opacity: 0.62;
    filter: blur(74px) saturate(164%) contrast(116%);
  }

  body::after {
    opacity: 0.44;
    filter: blur(64px) saturate(154%) contrast(112%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
    transform: none !important;
    filter: blur(62px) saturate(122%) contrast(110%) !important;
  }
}