.animated-bg {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.animated-bg > *:not(.particles) {
  position: relative;
  z-index: 2;
}

/* container particles */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 22px;
  height: 22px;
  opacity: 0;
  top: -50px;
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-10vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(110vh) translateX(var(--drift)) rotate(360deg);
    opacity: 0;
  }
}

/* BACKGROUND CONTACT */
.contact-section {
    background:
        radial-gradient(circle at 30% 20%, rgba(140,191,159,0.08), transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(107,79,58,0.06), transparent 65%),
        linear-gradient(135deg, #f6f2ec, #f1ede6, #ebe6dd);

    background-size: 200% 200%;
    animation: bgFloat 60s ease-in-out infinite;
    will-change: background-position;
}

@keyframes bgFloat {
    0% {
        background-position: 0% 0%, 100% 100%, 50% 50%;
    }

    50% {
        background-position: 10% 10%, 90% 90%, 55% 45%;
    }

    100% {
        background-position: 0% 0%, 100% 100%, 50% 50%;
    }
}