/* ========================================
   Ambient Background System
   Living canvas with floating gradient blobs
   ======================================== */

.ambient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  animation: float 20s ease-in-out infinite;
}

.blob-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--accent-pink), transparent);
  top: -10%;
  left: -10%;
  animation-delay: 0s;
}

.blob-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--accent-purple), transparent);
  bottom: -10%;
  right: -10%;
  animation-delay: -7s;
}

.blob-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, var(--accent-cyan), transparent);
  top: 40%;
  right: 20%;
  animation-delay: -14s;
}

/* Dark mode: more vibrant blobs */
[data-theme="dark"] .blob {
  opacity: 0.25;
  filter: blur(100px);
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(30px, -50px) scale(1.1);
  }
  50% {
    transform: translate(-20px, -30px) scale(0.9);
  }
  75% {
    transform: translate(50px, 20px) scale(1.05);
  }
}

/* Background textures and patterns */
.page-background {
  background-image:
    /* Noise texture */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"),
    /* Dot grid */
    radial-gradient(circle, var(--gray-300) 1px, transparent 1px);
  background-size: 100% 100%, 20px 20px;
  background-position: 0 0, 0 0;
}

[data-theme="dark"] .page-background {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(circle, var(--gray-700) 1px, transparent 1px);
}

/* Mobile optimization - reduce complexity */
@media (max-width: 768px) {
  .blob {
    filter: blur(60px);
    opacity: 0.1;
  }

  [data-theme="dark"] .blob {
    opacity: 0.15;
  }

  .blob-1,
  .blob-2,
  .blob-3 {
    width: 300px;
    height: 300px;
  }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .blob {
    animation: none !important;
  }
}