/* Additional header gradient effects */
.header__gradient__container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120vh;
  z-index: 1;
  overflow: hidden;
  max-width: 100vw;
}

.header__gradient__wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120vh;
  overflow: hidden;
  max-width: 100vw;
}

.header__gradient__shape {
  position: absolute;
  border-radius: 100%;
  background: linear-gradient(to left, #6366f1, #8b5cf6, #d946ef);
  filter: blur(90px);
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}

/* Top right blue spot */
.header__gradient__shape:nth-child(1) {
  top: 5%;
  right: 10%;
  width: 35%;
  height: 35%;
  background: radial-gradient(
    circle at center,
    rgba(59, 130, 246, 0.5),
    rgba(37, 99, 235, 0.2)
  );
  animation: float1 48s ease-in-out infinite alternate;
}

/* Center purple spot */
.header__gradient__shape:nth-child(2) {
  top: 15%;
  left: 50%;
  width: 45%;
  height: 40%;
  background: radial-gradient(
    circle at center,
    rgba(147, 51, 234, 0.4),
    rgba(126, 34, 206, 0.15)
  );
  transform: translate(-50%, -50%);
  animation: float2 54s ease-in-out infinite alternate;
}

/* Bottom left indigo spot */
.header__gradient__shape:nth-child(3) {
  top: 10%;
  left: 15%;
  width: 40%;
  height: 40%;
  background: radial-gradient(
    circle at center,
    rgba(79, 70, 229, 0.35),
    rgba(67, 56, 202, 0.1)
  );
  animation: float3 46s ease-in-out infinite alternate;
}

@keyframes float1 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: translate(3%, -3%) scale(1.08);
    opacity: 0.4;
  }
}

@keyframes float2 {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translate(-47%, -53%) scale(1.12);
    opacity: 0.4;
  }
}

@keyframes float3 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.35;
  }
  50% {
    opacity: 0.55;
  }
  100% {
    transform: translate(2%, 2%) scale(1.06);
    opacity: 0.35;
  }
}