/*
  Camada decorativa de fundo em forma de "gotas d'água": blobs orgânicos
  desfocados, fixados por trás do conteúdo (z-index negativo, sem interceptar
  cliques), reforçando visualmente o tema de água/energia limpa.
*/

.gota-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.gota {
  position: absolute;
  display: block;
  filter: blur(2px);
  opacity: 0.55;
  background: radial-gradient(circle at 30% 25%, var(--color-yellow-100), var(--color-yellow-300) 70%);
  border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
  animation: gota-float 16s ease-in-out infinite;
}

.gota--1 {
  width: 320px;
  height: 380px;
  top: -80px;
  left: -60px;
  animation-delay: 0s;
}

.gota--2 {
  width: 220px;
  height: 260px;
  top: 20%;
  right: -80px;
  animation-delay: -4s;
  background: radial-gradient(circle at 30% 25%, #fffdf5, var(--color-yellow-100) 70%);
}

.gota--3 {
  width: 260px;
  height: 300px;
  bottom: 10%;
  left: 6%;
  animation-delay: -8s;
}

.gota--4 {
  width: 180px;
  height: 220px;
  bottom: -60px;
  right: 12%;
  animation-delay: -12s;
  background: radial-gradient(circle at 30% 25%, var(--color-yellow-100), var(--color-yellow-500) 70%);
  opacity: 0.35;
}

.gota--5 {
  width: 140px;
  height: 170px;
  top: 55%;
  left: 45%;
  animation-delay: -6s;
  opacity: 0.3;
}

@keyframes gota-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(24px) rotate(6deg);
  }
}

.wave-divider {
  display: block;
  width: 100%;
  line-height: 0;
}

.wave-divider svg {
  width: 100%;
  height: 80px;
}

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