:root {
  --webpark-pink: #d33091;
  --webpark-purple: #702a7e;
  --webpark-deep: #3a1248;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--webpark-deep);
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      var(--webpark-deep) 0%,
      var(--webpark-deep) 26%,
      #4c1760 42%,
      var(--webpark-purple) 58%,
      #9a2478 74%,
      var(--webpark-pink) 88%,
      var(--webpark-deep) 100%
    );
  background-size: 180% 180%;
  animation: wash 18s ease-in-out infinite alternate;
}

.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 58% 38%, transparent 8%, rgba(58, 18, 72, 0.42) 48%, #3a1248 100%);
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.7;
  mix-blend-mode: screen;
  will-change: transform;
}

.orb-deep {
  width: 78vw;
  height: 78vw;
  right: -8vw;
  bottom: -20vh;
  opacity: 0.95;
  mix-blend-mode: multiply;
  background: radial-gradient(circle, #3a1248 0%, rgba(58, 18, 72, 0.72) 48%, transparent 74%);
  animation: drift-deep 22s ease-in-out infinite alternate;
}

.orb-pink {
  width: 58vw;
  height: 58vw;
  left: -8vw;
  top: -12vh;
  background: radial-gradient(circle, #ff4eae 0%, var(--webpark-pink) 42%, transparent 70%);
  animation: drift-pink 16s ease-in-out infinite alternate;
}

.orb-purple {
  width: 62vw;
  height: 62vw;
  right: -14vw;
  bottom: -18vh;
  background: radial-gradient(circle, #b45ad4 0%, var(--webpark-purple) 46%, transparent 72%);
  animation: drift-purple 20s ease-in-out infinite alternate;
}

.orb-glow {
  width: 36vw;
  height: 36vw;
  left: 38%;
  top: 28%;
  background: radial-gradient(circle, rgba(255, 190, 230, 0.85) 0%, transparent 68%);
  animation: drift-glow 14s ease-in-out infinite alternate;
}

main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(78vw, 640px);
  padding: 24px;
}

main img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 36px rgba(42, 8, 48, 0.35));
}

@keyframes wash {
  from {
    background-position: 0% 40%;
  }
  to {
    background-position: 100% 60%;
  }
}

@keyframes drift-deep {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-10vw, 12vh, 0) scale(1.12);
  }
}

@keyframes drift-pink {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(18vw, 16vh, 0) scale(1.18);
  }
}

@keyframes drift-purple {
  from {
    transform: translate3d(0, 0, 0) scale(1.05);
  }
  to {
    transform: translate3d(-16vw, -12vh, 0) scale(0.88);
  }
}

@keyframes drift-glow {
  from {
    transform: translate3d(-8vw, 4vh, 0) scale(0.9);
    opacity: 0.55;
  }
  to {
    transform: translate3d(10vw, -8vh, 0) scale(1.2);
    opacity: 0.95;
  }
}

@media (max-width: 640px) {
  main {
    width: min(88vw, 420px);
  }

  .orb {
    filter: blur(28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop,
  .orb {
    animation: none;
  }
}