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

html, body {
  height: 100%;
  background: #242632;
  overflow: hidden;
}

.scene {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.droplet {
  position: relative;
  width: 80px;
  height: 80px;
  animation: float 6s ease-in-out infinite;
}

.droplet__body {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(
    ellipse at 30% 30%,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(120, 180, 255, 0.15) 30%,
    rgba(80, 140, 220, 0.2) 50%,
    rgba(60, 120, 200, 0.3) 70%,
    rgba(40, 80, 160, 0.4) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 -8px 20px rgba(255, 255, 255, 0.05),
    inset 0 8px 20px rgba(255, 255, 255, 0.08),
    0 0 40px rgba(100, 160, 255, 0.1),
    0 0 80px rgba(100, 160, 255, 0.05);
  animation: morph 4s ease-in-out infinite;
}

.droplet__reflection {
  position: absolute;
  top: 18%;
  left: 22%;
  width: 30%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: reflectionShift 4s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  15% {
    transform: translateY(-20px) rotate(3deg) scale(1.02);
  }
  30% {
    transform: translateY(-8px) rotate(-2deg) scale(0.98);
  }
  50% {
    transform: translateY(-30px) rotate(4deg) scale(1.03);
  }
  65% {
    transform: translateY(-12px) rotate(-3deg) scale(0.99);
  }
  80% {
    transform: translateY(-22px) rotate(1deg) scale(1.01);
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}

@keyframes morph {
  0%, 100% {
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  }
  25% {
    border-radius: 55% 45% 55% 45% / 55% 55% 45% 45%;
  }
  50% {
    border-radius: 45% 55% 45% 55% / 58% 58% 42% 42%;
  }
  75% {
    border-radius: 52% 48% 50% 50% / 56% 56% 44% 44%;
  }
}

@keyframes reflectionShift {
  0%, 100% {
    top: 18%;
    left: 22%;
  }
  25% {
    top: 20%;
    left: 25%;
  }
  50% {
    top: 16%;
    left: 20%;
  }
  75% {
    top: 19%;
    left: 24%;
  }
}