.hero-background {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(40deg, #eef5ff 0%, #8abceb 100%);
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: center, center, center;
  overflow: hidden;
  pointer-events: auto; /* Ensure events are captured */
}

.gradient-blob-1 {
  position: absolute;
  width: 853px;
  height: 568px;
  left: 30%;
  top: 184px;
  transform-origin: 50% 50%;
  transform: translateX(-50%) perspective(600px);
  background: linear-gradient(225deg, 
    rgb(230, 245, 255) 0%,
    rgba(215, 240, 255, 0.95) 34%,
    rgba(200, 235, 255, 0.92) 40%,
    rgba(181, 212, 241, 0.70) 67%,
    rgba(181, 212, 241, 0) 100%
  );
  filter: blur(50px);
  animation: 
    blob1Shape 20s infinite ease-in-out,
    float 12s infinite ease-in-out;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.gradient-blob-2 {
  position: absolute;
  width: 853px;
  height: 568px;
  left: 10%;
  top: 57px;
  transform-origin: 50% 50%;
  transform: perspective(600px);
  background: linear-gradient(45deg,
    rgba(181, 212, 241, 0) 0%,
    rgba(181, 212, 241, 0.70) 40%,
    rgba(155, 190, 245, 0.95) 70%,
    rgba(155, 190, 245, 0.95) 80%,
    rgb(230, 245, 255) 100%
  );
  filter: blur(35px);
  animation: 
    blob2Shape 25s infinite ease-in-out,
    float 14s infinite ease-in-out reverse;
  border-radius: 50% 60% 70% 30% / 30% 60% 40% 70%;
}

.accent-circle-1 {
  position: absolute;
  width: 142px;
  height: 142px;
  left: 1276px;
  top: 106px;
  background: linear-gradient(45deg,
    rgba(75, 85, 105, 0) 0%,
    rgba(120, 155, 200, 0.88) 34%,
    rgb(155, 190, 245) 50%,
    rgb(190, 220, 255) 67%,
    rgb(230, 245, 255) 100%
  );
  filter: blur(8px);
  animation: 
    accentBlobShape 15s infinite ease-in-out,
    float 16s infinite ease-in-out;
  border-radius: 70% 30% 50% 50% / 50% 50% 50% 50%;
}

.ring-large {
  position: absolute;
  width: 427px;
  height: 426px;
  left: 637px;
  top: 322px;
  border: 5px solid rgba(230, 245, 255, 0.40);
  border-radius: 500px;
  transform: perspective(600px) rotate(10deg) rotateY(45deg) rotateX(45deg);
  transform-origin: 50% 50%;
}

.orb-center {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 668px;
  top: 420px;
  border-radius: 250px;
  background: linear-gradient(45deg,
    rgba(75, 85, 105, 0) 0%,
    rgba(120, 155, 200, 0.90) 25%,
    rgb(155, 190, 245) 35%,
    rgb(190, 220, 255) 50%,
    rgb(215, 235, 255) 75%,
    rgb(230, 245, 255) 100%
  );
  animation: scaleOrb 8s ease-in-out infinite;
}

.orb-blur {
  position: absolute;
  width: 249px;
  height: 248px;
  left: 607px;
  top: 441px;
  border-radius: 50%;
  background: linear-gradient(45deg,
    rgba(75, 85, 105, 0) 0%,
    rgba(95, 110, 145, 0.75) 33%,
    rgb(120, 155, 200) 65%,
    rgb(155, 190, 245) 66%,
    rgb(230, 245, 255) 100%
  );
  filter: blur(10px);
  animation: 
    orbBlobShape 12s infinite ease-in-out,
    float 12s infinite ease-in-out;
  border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
}

.orb-glass {
  position: absolute;
  width: 356px;
  height: 355px;
  left: 391px;
  top: 363px;
  border-radius: 500px;
  background: linear-gradient(45deg,
    #86b6f363 0%,
    #86b6f34f 75%,
    #86b6f396 100%
  );
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  animation: float 12s infinite ease-in-out;
}

.ring-small {
  position: absolute;
  width: 299px;
  height: 298px;
  left: 983px;
  top: -53px;
  border: 2px solid rgba(230, 245, 255, 0.40);
  border-radius: 250px;
  transform: perspective(600px) rotateY(45deg) rotateX(45deg);
}

.circle-gradient {
  position: absolute;
  width: 213px;
  height: 213px;
  left: 1012px;
  top: 7px;
  border-radius: 250px;
  background: linear-gradient(45deg,
    rgba(75, 85, 105, 0) 0%,
    rgba(120, 155, 200, 0.90) 25%,
    rgb(155, 190, 245) 35%,
    rgb(190, 220, 255) 50%,
    rgb(215, 235, 255) 75%,
    rgb(230, 245, 255) 100%
  );
  animation: float 15s infinite ease-in-out;
}

.circle-blur {
  position: absolute;
  width: 71px;
  height: 71px;
  left: 1174px;
  top: 24px;
  border-radius: 250px;
  background: rgba(230, 245, 255, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: float 13s infinite ease-in-out;
}

@keyframes blob1Shape {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 30% 60% 40% / 40% 50% 60% 50%;
  }
  75% {
    border-radius: 40% 60% 30% 70% / 70% 30% 50% 40%;
  }
}

@keyframes blob2Shape {
  0%, 100% {
    border-radius: 50% 60% 70% 30% / 30% 60% 40% 70%;
  }
  25% {
    border-radius: 70% 30% 50% 60% / 60% 40% 60% 30%;
  }
  50% {
    border-radius: 30% 70% 40% 50% / 50% 30% 60% 40%;
  }
  75% {
    border-radius: 60% 40% 60% 30% / 40% 50% 30% 60%;
  }
}

@keyframes accentBlobShape {
  0%, 100% {
    border-radius: 70% 30% 50% 50% / 50% 50% 50% 50%;
  }
  25% {
    border-radius: 50% 50% 30% 70% / 60% 40% 40% 60%;
  }
  50% {
    border-radius: 40% 60% 60% 40% / 40% 60% 50% 50%;
  }
  75% {
    border-radius: 50% 50% 50% 50% / 40% 60% 60% 40%;
  }
}

@keyframes orbBlobShape {
  0%, 100% {
    border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
  }
  25% {
    border-radius: 60% 40% 50% 50% / 40% 60% 50% 50%;
  }
  50% {
    border-radius: 50% 50% 40% 60% / 50% 50% 60% 40%;
  }
  75% {
    border-radius: 40% 60% 50% 50% / 60% 40% 40% 60%;
  }
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-15px, 15px);
  }
}

@keyframes scaleOrb {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}


/* Add to all movement elements */
.movement-wrapper {
  pointer-events: none; /* Allow events to pass through */
}

.gradient-blob-1,
.gradient-blob-2,
.accent-circle-1,
.ring-large,
.orb-center,
.orb-blur,
.orb-glass,
.ring-small,
.circle-gradient,
.circle-blur {
  pointer-events: none; /* Ensure decorative elements don't block events */
}

@media (max-width: 767px) {
  .movement-wrapper {
    display: none!important;
  }

  .hero-background {
    height: auto;
  }
}