:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #fff2dc;
  overflow: hidden;
}

.surface {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #fff1d8 0%, #f9d9bf 42%, #caeee7 100%);
}

.surface::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 42%),
    radial-gradient(circle at 50% 50%, transparent 0 48%, rgba(30, 25, 20, 0.07) 100%);
  pointer-events: none;
}

.wave {
  position: absolute;
  left: -30vw;
  width: 160vw;
  height: 42vh;
  border-radius: 48% 52% 46% 54%;
  filter: blur(22px);
  opacity: 0.82;
  transform-origin: center;
  animation: wave-flow 11s ease-in-out infinite;
}

.wave-one {
  top: 7vh;
  background: linear-gradient(90deg, #ff6b63, #ffb15c, #19b6c6);
}

.wave-two {
  top: 31vh;
  background: linear-gradient(90deg, #23c4a7, #5a9ff0, #a66bee);
  opacity: 0.66;
  animation-duration: 14s;
  animation-delay: -4s;
}

.wave-three {
  top: 57vh;
  background: linear-gradient(90deg, #f5c84f, #ff7f75, #2bb7c9);
  opacity: 0.58;
  animation-duration: 16s;
  animation-delay: -8s;
}

@keyframes wave-flow {
  0% {
    transform: translateX(-10vw) translateY(0) rotate(-5deg) scaleY(0.82);
    filter: blur(22px) hue-rotate(0deg) saturate(1.05);
  }

  33% {
    transform: translateX(2vw) translateY(-7vh) rotate(4deg) scaleY(1.05);
    filter: blur(26px) hue-rotate(12deg) saturate(1.18);
  }

  66% {
    transform: translateX(12vw) translateY(6vh) rotate(-2deg) scaleY(0.94);
    filter: blur(20px) hue-rotate(24deg) saturate(1.12);
  }

  100% {
    transform: translateX(-10vw) translateY(0) rotate(-5deg) scaleY(0.82);
    filter: blur(22px) hue-rotate(0deg) saturate(1.05);
  }
}