/* Animated gradient mesh background (light + dark) */
.mesh {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.55;
  transform: translateZ(0);
}

html.dark .mesh { opacity: 0.45; }

.mesh::before,
.mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgb(var(--grad-a) / 0.35), transparent 50%),
    radial-gradient(circle at 80% 30%, rgb(var(--grad-b) / 0.28), transparent 55%),
    radial-gradient(circle at 40% 80%, rgb(34 211 238 / 0.20), transparent 55%),
    radial-gradient(circle at 70% 70%, rgb(168 85 247 / 0.18), transparent 55%);
  animation: meshMove 12s ease-in-out infinite alternate;
}

.mesh::after {
  animation-duration: 16s;
  mix-blend-mode: screen;
}

@keyframes meshMove {
  0% { transform: translate(-2%, -1%) scale(1.02); }
  50% { transform: translate(2%, 1%) scale(1.06); }
  100% { transform: translate(-1%, 2%) scale(1.03); }
}