/* ============================================
   ANIMATED SCROLLING BACKGROUNDS
   ============================================ */

/* Background Container */
.page-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
}

/* Blob Shapes */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: float 20s ease-in-out infinite;
  will-change: transform;
}

/* Homepage Blobs */
.blob-1 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, #00796b, #00bfa5);
  top: -200px;
  left: -200px;
  animation: float 25s ease-in-out infinite, pulse 8s ease-in-out infinite;
}

.blob-2 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #76ff03, #00bfa5);
  bottom: -150px;
  right: -150px;
  animation: float 30s ease-in-out infinite reverse, pulse 10s ease-in-out infinite;
}

.blob-3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #004d40, #00796b);
  top: 50%;
  right: 10%;
  animation: float 20s ease-in-out infinite, pulse 12s ease-in-out infinite;
}

/* Solutions Page Blobs */
.blob-solutions-1 {
  width: 700px;
  height: 700px;
  background: linear-gradient(135deg, #00796b, #76ff03);
  top: -300px;
  right: -250px;
  animation: float 28s ease-in-out infinite, rotate 40s linear infinite;
}

.blob-solutions-2 {
  width: 550px;
  height: 550px;
  background: linear-gradient(135deg, #00bfa5, #004d40);
  bottom: -200px;
  left: -200px;
  animation: float 22s ease-in-out infinite reverse;
}

/* Enterprise Page Blobs */
.blob-enterprise-1 {
  width: 800px;
  height: 800px;
  background: linear-gradient(135deg, #004d40, #00796b);
  top: 0;
  left: -300px;
  animation: float 35s ease-in-out infinite, pulse 15s ease-in-out infinite;
}

.blob-enterprise-2 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, #76ff03, #00bfa5);
  bottom: -200px;
  right: -200px;
  animation: float 25s ease-in-out infinite reverse;
}

.blob-enterprise-3 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, #00bfa5, #00796b);
  top: 40%;
  left: 50%;
  animation: float 20s ease-in-out infinite, pulse 10s ease-in-out infinite;
}

/* Pricing Page Blobs */
.blob-pricing-1 {
  width: 650px;
  height: 650px;
  background: linear-gradient(135deg, #00796b, #76ff03);
  top: 10%;
  left: -200px;
  animation: float 30s ease-in-out infinite;
}

.blob-pricing-2 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #00bfa5, #004d40);
  bottom: 10%;
  right: -150px;
  animation: float 25s ease-in-out infinite reverse, pulse 12s ease-in-out infinite;
}

/* About Page Blobs */
.blob-about-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, #76ff03, #00bfa5);
  top: -250px;
  left: 50%;
  transform: translateX(-50%);
  animation: float 32s ease-in-out infinite, pulse 14s ease-in-out infinite;
}

.blob-about-2 {
  width: 550px;
  height: 550px;
  background: linear-gradient(135deg, #004d40, #00796b);
  bottom: -200px;
  left: -150px;
  animation: float 28s ease-in-out infinite reverse;
}

.blob-about-3 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, #00bfa5, #76ff03);
  top: 60%;
  right: -100px;
  animation: float 24s ease-in-out infinite;
}

/* Contact Page Blobs */
.blob-contact-1 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, #00796b, #00bfa5);
  top: -200px;
  right: -200px;
  animation: float 26s ease-in-out infinite, pulse 11s ease-in-out infinite;
}

.blob-contact-2 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #76ff03, #004d40);
  bottom: -150px;
  left: -150px;
  animation: float 22s ease-in-out infinite reverse;
}

/* Decorative Shapes */
.deco-shape {
  position: absolute;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  opacity: 0.15;
  animation: morph 15s ease-in-out infinite;
}

.deco-circle {
  position: absolute;
  border-radius: 50%;
  border: 3px solid #00796b;
  opacity: 0.2;
  animation: float 18s ease-in-out infinite;
}

.deco-rect {
  position: absolute;
  border-radius: 20px;
  background: #00bfa5;
  opacity: 0.15;
  animation: float 20s ease-in-out infinite reverse, rotate 30s linear infinite;
}

/* Chat Bubble Shapes */
.chat-bubble {
  position: absolute;
  background: linear-gradient(135deg, #00796b, #00bfa5);
  opacity: 0.2;
  animation: float 25s ease-in-out infinite, pulse 8s ease-in-out infinite;
}

.chat-bubble-1 {
  width: 120px;
  height: 80px;
  border-radius: 40px;
  top: 20%;
  left: 15%;
}

.chat-bubble-2 {
  width: 80px;
  height: 60px;
  border-radius: 30px;
  bottom: 30%;
  right: 20%;
  animation-delay: 2s;
}

.chat-bubble-3 {
  width: 60px;
  height: 40px;
  border-radius: 20px;
  top: 60%;
  left: 70%;
  animation-delay: 4s;
}

/* Small Dots */
.dot {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #00796b;
  opacity: 0.3;
  animation: float 15s ease-in-out infinite;
}

.dot-1 { top: 25%; left: 40%; animation-delay: 1s; }
.dot-2 { top: 45%; right: 30%; animation-delay: 3s; }
.dot-3 { bottom: 35%; left: 25%; animation-delay: 5s; }
.dot-4 { top: 70%; right: 45%; animation-delay: 2s; }

/* Animations */
@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(30px, -30px) scale(1.05);
  }
  50% {
    transform: translate(-20px, 40px) scale(0.95);
  }
  75% {
    transform: translate(40px, 20px) scale(1.02);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.5;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes morph {
  0%, 100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
  }
}

/* Parallax Layers */
.parallax-layer-1 {
  transform: translateZ(-1px) scale(1.5);
}

.parallax-layer-2 {
  transform: translateZ(-2px) scale(2);
}

.parallax-layer-3 {
  transform: translateZ(-3px) scale(2.5);
}

/* Gradient Overlays */
.gradient-overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.8) 0%, transparent 100%);
  pointer-events: none;
}

.gradient-overlay-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0.8) 0%, transparent 100%);
  pointer-events: none;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .blob {
    filter: blur(60px);
  }
  
  .blob-1, .blob-solutions-1, .blob-enterprise-1, .blob-about-1 {
    width: 400px;
    height: 400px;
  }
  
  .blob-2, .blob-3, .blob-solutions-2, .blob-enterprise-2, .blob-about-2 {
    width: 350px;
    height: 350px;
  }
  
  .deco-shape, .deco-circle, .deco-rect {
    display: none;
  }
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  .blob,
  .deco-shape,
  .deco-circle,
  .deco-rect,
  .chat-bubble,
  .dot {
    animation: none;
  }
}