/* =============================================
   ANIMATED GRADIENT — Homepage Hero only
   ============================================= */

.hero-gradient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
}

/* Top-right teal — main atmospheric light, stays away from text */
.blob-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0, 170, 177, 0.38) 0%, transparent 65%);
  top: -220px;
  right: -80px;
  animation: blobDrift1 16s ease-in-out infinite alternate;
}

/* Bottom-right blue */
.blob-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(6, 70, 165, 0.42) 0%, transparent 65%);
  bottom: -180px;
  right: 100px;
  animation: blobDrift2 20s ease-in-out infinite alternate;
}

/* Center-right soft teal accent */
.blob-3 {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(0, 170, 177, 0.22) 0%, transparent 65%);
  top: 25%;
  right: 10%;
  animation: blobDrift3 13s ease-in-out infinite alternate;
}

/* Far left — very dim, just enough to tint, not blind */
.blob-4 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(6, 70, 165, 0.18) 0%, transparent 65%);
  top: 40%;
  left: -120px;
  animation: blobDrift4 18s ease-in-out infinite alternate;
}

/* Top-left subtle teal — keeps left side from being pure black without washing out text */
.blob-5 {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(0, 170, 177, 0.12) 0%, transparent 65%);
  top: -100px;
  left: 5%;
  animation: blobDrift5 11s ease-in-out infinite alternate;
}

@keyframes blobDrift1 {
  0%   { transform: translate(0px, 0px) scale(1); }
  40%  { transform: translate(-80px, 100px) scale(1.1); }
  100% { transform: translate(-40px, 60px) scale(0.95); }
}

@keyframes blobDrift2 {
  0%   { transform: translate(0px, 0px) scale(1); }
  40%  { transform: translate(-120px, -80px) scale(1.08); }
  100% { transform: translate(-60px, -140px) scale(1.12); }
}

@keyframes blobDrift3 {
  0%   { transform: translate(0px, 0px) scale(1); }
  40%  { transform: translate(60px, 100px) scale(1.14); }
  100% { transform: translate(-40px, 60px) scale(0.9); }
}

@keyframes blobDrift4 {
  0%   { transform: translate(0px, 0px) scale(1); }
  40%  { transform: translate(80px, -80px) scale(1.08); }
  100% { transform: translate(40px, -120px) scale(0.92); }
}

@keyframes blobDrift5 {
  0%   { transform: translate(0px, 0px) scale(1); }
  40%  { transform: translate(50px, 80px) scale(1.16); }
  100% { transform: translate(20px, 40px) scale(0.88); }
}

/* Hero content must sit above the blobs */
.hero > .container {
  position: relative;
  z-index: 2;
}