:root {
  --bg-a: #e7f0ea;
  --bg-b: #d5e6df;
  --ink: #16302b;
  --muted: rgba(22, 48, 43, 0.62);
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html,
body {
  height: 100%;
}

body {
  min-height: 100dvh;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, #cfe8d8 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 10% 90%, #c5dde6 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-a), var(--bg-b));
}

.scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

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

.orb-a {
  width: min(95vw, 820px);
  height: min(95vw, 820px);
  top: -28%;
  left: -22%;
  background: radial-gradient(circle at 35% 35%, #d4ec8a, #7eb89a 55%, transparent 72%);
  opacity: 0.9;
  animation: move-a 7s ease-in-out infinite alternate;
}

.orb-b {
  width: min(110vw, 960px);
  height: min(110vw, 960px);
  right: -35%;
  bottom: -40%;
  background: radial-gradient(circle at 40% 40%, #8ecad6, #5a9aa8 55%, transparent 75%);
  opacity: 0.85;
  animation: move-b 9s ease-in-out infinite alternate;
}

.orb-c {
  width: min(70vw, 620px);
  height: min(70vw, 620px);
  top: 20%;
  left: 30%;
  background: radial-gradient(circle at 50% 50%, #c9df8e, #8fb86a 50%, transparent 70%);
  opacity: 0.75;
  animation: move-c 5.5s ease-in-out infinite;
}

.orb-d {
  width: min(55vw, 480px);
  height: min(55vw, 480px);
  top: 55%;
  left: -10%;
  background: radial-gradient(circle at 40% 40%, #a8d4c8, #4f8f7e 60%, transparent 75%);
  opacity: 0.7;
  animation: move-d 6.5s ease-in-out infinite alternate;
}

.orb-e {
  width: min(48vw, 420px);
  height: min(48vw, 420px);
  top: 5%;
  right: 5%;
  background: radial-gradient(circle at 50% 50%, #f0e6a0, #c4b86a 55%, transparent 72%);
  opacity: 0.55;
  animation: move-e 4.8s ease-in-out infinite alternate-reverse;
}

.content {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 2rem;
}

.lead {
  max-width: 22rem;
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  line-height: 1.55;
  color: var(--muted);
  animation: fade-up 1.2s ease both;
}

@keyframes move-a {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  100% {
    transform: translate(28%, 32%) scale(1.25) rotate(12deg);
  }
}

@keyframes move-b {
  0% {
    transform: translate(0, 0) scale(1.1);
  }
  100% {
    transform: translate(-30%, -26%) scale(0.85);
  }
}

@keyframes move-c {
  0%,
  100% {
    transform: translate(-15%, -8%) scale(0.85);
    opacity: 0.45;
  }
  50% {
    transform: translate(18%, 20%) scale(1.35);
    opacity: 0.9;
  }
}

@keyframes move-d {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(40%, -35%) scale(1.3);
  }
}

@keyframes move-e {
  0% {
    transform: translate(0, 0) scale(0.9);
    opacity: 0.35;
  }
  100% {
    transform: translate(-45%, 40%) scale(1.4);
    opacity: 0.7;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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