/* Darker fluid background with animation */
.fluid-background {
  position: fixed;
  inset: -12% 0 0 0;
  width: 100%;
  min-height: 120vh;
  pointer-events: none;
  z-index: -3;
  background-color: #0f0a03;
  overflow: hidden;
}

.fluid-background .fluid-gradient {
  position: absolute;
  inset: -12% -12% 0 -12%;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 210, 130, 0.46), transparent 55%),
    radial-gradient(circle at 76% 18%, rgba(255, 194, 110, 0.38), transparent 55%),
    radial-gradient(circle at 35% 78%, rgba(255, 168, 90, 0.34), transparent 60%),
    radial-gradient(circle at 72% 85%, rgba(226, 193, 148, 0.30), transparent 68%);
  filter: blur(160px);
  opacity: 0.85;
  transform: scale(1.08);
  animation: fluidDrift 22s ease-in-out infinite alternate;
}

.fluid-background .fluid-spot {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 140vw;
  height: 140vh;
  transform: translate(-50%, -55%);
  background: radial-gradient(circle at center, rgba(238, 198, 120, 0.38) 0%, rgba(238, 198, 120, 0.18) 38%, transparent 70%);
  filter: blur(85px);
  mix-blend-mode: screen;
  animation: spotPulse 14s ease-in-out infinite alternate;
}

.fluid-background .grain-overlay {
  position: absolute;
  inset: -45% -45%;
  opacity: 0.22;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  animation: grainShift 20s linear infinite;
}

@keyframes fluidDrift {
  0% {
    transform: scale(1.05) translate3d(0, 0, 0) rotate(0deg);
  }
  35% {
    transform: scale(1.09) translate3d(3%, -3%, 0) rotate(-0.7deg);
  }
  70% {
    transform: scale(1.12) translate3d(-4%, 2%, 0) rotate(0.9deg);
  }
  100% {
    transform: scale(1.05) translate3d(2%, 3%, 0) rotate(-0.4deg);
  }
}

@keyframes spotPulse {
  0% { opacity: 0.18; filter: blur(90px); transform: translate(-50%, -55%) scale(1); }
  40% { opacity: 0.26; filter: blur(82px); transform: translate(-49%, -57%) scale(1.05); }
  70% { opacity: 0.33; filter: blur(75px); transform: translate(-52%, -54%) scale(1.09); }
  100% { opacity: 0.18; filter: blur(90px); transform: translate(-50%, -55%) scale(1); }
}

@keyframes grainShift {
  0% { opacity: 0.22; transform: translate3d(0, 0, 0); }
  50% { opacity: 0.30; transform: translate3d(-4%, 3%, 0); }
  100% { opacity: 0.22; transform: translate3d(0, 0, 0); }
}

@media (max-width: 768px) {
  .fluid-background {
    inset: -18% 0 0 0;
    background-color: #0b0702;
  }
  .fluid-background .fluid-gradient {
    filter: blur(150px);
  }
  .fluid-background .fluid-spot {
    width: 160vw;
    height: 160vh;
  }
}