/* Modern Mesh Background Styles */
.mesh-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* Base mesh gradient overlay */
.mesh-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(45, 55, 72, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(74, 85, 104, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(113, 128, 150, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(26, 32, 44, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(45, 55, 72, 0.15) 0%, 
      rgba(74, 85, 104, 0.08) 25%, 
      rgba(113, 128, 150, 0.12) 50%, 
      rgba(160, 174, 192, 0.06) 75%, 
      rgba(26, 32, 44, 0.15) 100%
    );
  animation: meshGradientShift 20s ease-in-out infinite;
}

/* Dark theme adjustments */
[data-theme="dark"] .mesh-gradient {
  background: 
    radial-gradient(circle at 20% 80%, rgba(26, 32, 44, 0.6) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(45, 55, 72, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(74, 85, 104, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(17, 24, 39, 0.5) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(26, 32, 44, 0.2) 0%, 
      rgba(45, 55, 72, 0.12) 25%, 
      rgba(74, 85, 104, 0.15) 50%, 
      rgba(113, 128, 150, 0.08) 75%, 
      rgba(17, 24, 39, 0.2) 100%
    );
}

@keyframes meshGradientShift {
  0%, 100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(60px) brightness(1);
  }
  25% {
    opacity: 0.8;
    transform: translate(20px, -30px) scale(1.1);
    filter: blur(70px) brightness(1.1);
  }
  50% {
    opacity: 0.9;
    transform: translate(-15px, 25px) scale(0.95);
    filter: blur(80px) brightness(0.95);
  }
  75% {
    opacity: 0.85;
    transform: translate(30px, 15px) scale(1.05);
    filter: blur(65px) brightness(1.05);
  }
}

/* Floating mesh orbs */
.mesh-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), transparent);
  filter: blur(40px);
  pointer-events: none;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.mesh-orb-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: -10%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(74, 85, 104, 0.7) 0%, 
    rgba(45, 55, 72, 0.4) 40%, 
    transparent 70%
  );
  animation: floatMeshOrb1 15s infinite;
}

.mesh-orb-2 {
  width: 250px;
  height: 250px;
  top: 60%;
  right: -5%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(113, 128, 150, 0.6) 0%, 
    rgba(74, 85, 104, 0.3) 40%, 
    transparent 70%
  );
  animation: floatMeshOrb2 18s infinite;
  animation-delay: -5s;
}

.mesh-orb-3 {
  width: 200px;
  height: 200px;
  top: 30%;
  left: 70%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(160, 174, 192, 0.5) 0%, 
    rgba(113, 128, 150, 0.25) 40%, 
    transparent 70%
  );
  animation: floatMeshOrb3 22s infinite;
  animation-delay: -10s;
}

.mesh-orb-4 {
  width: 180px;
  height: 180px;
  top: 80%;
  left: 20%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(45, 55, 72, 0.6) 0%, 
    rgba(26, 32, 44, 0.3) 40%, 
    transparent 70%
  );
  animation: floatMeshOrb4 20s infinite;
  animation-delay: -15s;
}

/* Dark theme orb adjustments */
[data-theme="dark"] .mesh-orb-1 {
  background: radial-gradient(circle at 30% 30%, 
    rgba(45, 55, 72, 0.9) 0%, 
    rgba(26, 32, 44, 0.5) 40%, 
    transparent 70%
  );
}

[data-theme="dark"] .mesh-orb-2 {
  background: radial-gradient(circle at 30% 30%, 
    rgba(74, 85, 104, 0.8) 0%, 
    rgba(45, 55, 72, 0.4) 40%, 
    transparent 70%
  );
}

[data-theme="dark"] .mesh-orb-3 {
  background: radial-gradient(circle at 30% 30%, 
    rgba(113, 128, 150, 0.7) 0%, 
    rgba(74, 85, 104, 0.35) 40%, 
    transparent 70%
  );
}

[data-theme="dark"] .mesh-orb-4 {
  background: radial-gradient(circle at 30% 30%, 
    rgba(17, 24, 39, 0.8) 0%, 
    rgba(26, 32, 44, 0.4) 40%, 
    transparent 70%
  );
}

@keyframes floatMeshOrb1 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(50px, -60px) rotate(120deg) scale(1.1);
  }
  66% {
    transform: translate(-30px, 40px) rotate(240deg) scale(0.9);
  }
  100% {
    transform: translate(20px, -20px) rotate(360deg) scale(1.05);
  }
}

@keyframes floatMeshOrb2 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(-40px, -50px) rotate(90deg) scale(1.15);
  }
  50% {
    transform: translate(60px, 30px) rotate(180deg) scale(0.85);
  }
  75% {
    transform: translate(-20px, 50px) rotate(270deg) scale(1.1);
  }
  100% {
    transform: translate(10px, -10px) rotate(360deg) scale(0.95);
  }
}

@keyframes floatMeshOrb3 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  40% {
    transform: translate(-70px, 40px) rotate(144deg) scale(1.2);
  }
  60% {
    transform: translate(30px, -80px) rotate(216deg) scale(0.8);
  }
  100% {
    transform: translate(-10px, 30px) rotate(360deg) scale(1.1);
  }
}

@keyframes floatMeshOrb4 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  30% {
    transform: translate(45px, -35px) rotate(108deg) scale(0.9);
  }
  70% {
    transform: translate(-55px, 55px) rotate(252deg) scale(1.3);
  }
  100% {
    transform: translate(25px, -15px) rotate(360deg) scale(1.05);
  }
}

/* Mesh lines/connections */
.mesh-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.08;
  background-image: 
    linear-gradient(30deg, rgba(74, 85, 104, 0.4) 1px, transparent 1px),
    linear-gradient(120deg, rgba(113, 128, 150, 0.3) 1px, transparent 1px),
    linear-gradient(60deg, rgba(160, 174, 192, 0.25) 1px, transparent 1px);
  background-size: 80px 80px, 120px 120px, 100px 100px;
  background-position: 0 0, 40px 40px, 20px 20px;
  animation: meshLinesMove 25s linear infinite;
}

[data-theme="dark"] .mesh-lines {
  opacity: 0.12;
  background-image: 
    linear-gradient(30deg, rgba(45, 55, 72, 0.5) 1px, transparent 1px),
    linear-gradient(120deg, rgba(74, 85, 104, 0.4) 1px, transparent 1px),
    linear-gradient(60deg, rgba(113, 128, 150, 0.3) 1px, transparent 1px);
}

@keyframes meshLinesMove {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(40px, 40px) rotate(1deg);
  }
}

/* Interactive hover effects */
.mesh-background:hover .mesh-gradient {
  animation-duration: 15s;
  filter: blur(50px) brightness(1.1);
}

.mesh-background:hover .mesh-orb {
  animation-duration: 12s;
  transform: scale(1.1);
}

.mesh-background:hover .mesh-lines {
  opacity: 0.15;
  animation-duration: 20s;
}

[data-theme="dark"] .mesh-background:hover .mesh-lines {
  opacity: 0.18;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mesh-gradient,
  .mesh-orb,
  .mesh-lines {
    animation: none;
  }
  
  .mesh-background:hover .mesh-gradient,
  .mesh-background:hover .mesh-orb,
  .mesh-background:hover .mesh-lines {
    animation: none;
    transform: none;
    filter: none;
  }
}

/* Performance optimizations for smaller screens */
@media (max-width: 768px) {
  .mesh-orb-3,
  .mesh-orb-4 {
    display: none;
  }
  
  .mesh-lines {
    opacity: 0.04;
  }
  
  [data-theme="dark"] .mesh-lines {
    opacity: 0.06;
  }
  
  .mesh-gradient {
    filter: blur(40px);
  }
}

@media (max-width: 480px) {
  .mesh-orb {
    transform: scale(0.8);
  }
  
  .mesh-lines {
    display: none;
  }
}

/* Themed Color Moving Shapes */
.theme-shape {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  filter: blur(120px);
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: screen;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: center center;
}

/* Primary Blue Shapes */
.theme-shape-1 {
  width: 350px;
  height: 200px;
  top: 15%;
  right: 20%;
  border-radius: 70% 30% 60% 40% / 40% 60% 30% 70%;
  background: radial-gradient(ellipse at 30% 40%, 
    var(--primary-color) 0%, 
    rgba(37, 99, 235, 0.4) 40%, 
    rgba(59, 130, 246, 0.2) 70%, 
    transparent 100%
  );
  animation: floatThemeShape1 16s infinite;
  animation-delay: -2s;
}

.theme-shape-2 {
  width: 280px;
  height: 380px;
  bottom: 25%;
  left: 15%;
  border-radius: 40% 60% 70% 30% / 70% 40% 60% 30%;
  background: radial-gradient(ellipse at 60% 30%, 
    var(--secondary-color) 0%, 
    rgba(14, 165, 233, 0.35) 45%, 
    rgba(6, 182, 212, 0.2) 75%, 
    transparent 100%
  );
  animation: floatThemeShape2 20s infinite;
  animation-delay: -8s;
}

.theme-shape-3 {
  width: 320px;
  height: 180px;
  top: 50%;
  left: 60%;
  border-radius: 80% 20% 50% 50% / 30% 80% 20% 70%;
  background: radial-gradient(ellipse at 40% 70%, 
    rgba(99, 102, 241, 0.6) 0%, 
    rgba(139, 92, 246, 0.35) 45%, 
    rgba(124, 58, 237, 0.2) 75%, 
    transparent 100%
  );
  animation: floatThemeShape3 14s infinite;
  animation-delay: -5s;
}

/* Accent Color Shape */
.theme-shape-4 {
  width: 200px;
  height: 260px;
  top: 70%;
  right: 10%;
  border-radius: 50% 50% 80% 20% / 60% 40% 80% 20%;
  background: radial-gradient(ellipse at 70% 20%, 
    var(--accent-color) 0%, 
    rgba(245, 158, 11, 0.4) 40%, 
    rgba(251, 191, 36, 0.25) 70%, 
    transparent 100%
  );
  animation: floatThemeShape4 18s infinite;
  animation-delay: -12s;
}

/* Additional floating shape for more movement */
.theme-shape-5 {
  width: 240px;
  height: 300px;
  top: 5%;
  left: 5%;
  border-radius: 30% 70% 40% 60% / 80% 20% 60% 40%;
  background: radial-gradient(ellipse at 20% 60%, 
    rgba(59, 130, 246, 0.5) 0%, 
    rgba(37, 99, 235, 0.3) 45%, 
    rgba(99, 102, 241, 0.2) 75%, 
    transparent 100%
  );
  animation: floatThemeShape5 22s infinite;
  animation-delay: -15s;
}

/* Dark theme adjustments for colored shapes */
[data-theme="dark"] .theme-shape {
  opacity: 0.4;
  filter: blur(80px);
}

[data-theme="dark"] .theme-shape-1 {
  background: radial-gradient(circle, 
    rgba(59, 130, 246, 0.7) 0%, 
    rgba(37, 99, 235, 0.35) 50%, 
    transparent 100%
  );
}

[data-theme="dark"] .theme-shape-2 {
  background: radial-gradient(circle, 
    rgba(14, 165, 233, 0.6) 0%, 
    rgba(6, 182, 212, 0.3) 50%, 
    transparent 100%
  );
}

[data-theme="dark"] .theme-shape-3 {
  background: radial-gradient(circle, 
    rgba(139, 92, 246, 0.7) 0%, 
    rgba(99, 102, 241, 0.35) 50%, 
    transparent 100%
  );
}

[data-theme="dark"] .theme-shape-4 {
  background: radial-gradient(circle, 
    rgba(251, 191, 36, 0.6) 0%, 
    rgba(245, 158, 11, 0.3) 50%, 
    transparent 100%
  );
}

[data-theme="dark"] .theme-shape-5 {
  background: radial-gradient(circle, 
    rgba(99, 102, 241, 0.6) 0%, 
    rgba(59, 130, 246, 0.3) 50%, 
    transparent 100%
  );
}

/* Animation keyframes for themed shapes */
@keyframes floatThemeShape1 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    border-radius: 70% 30% 60% 40% / 40% 60% 30% 70%;
  }
  25% {
    transform: translate(-60px, 80px) rotate(90deg) scale(1.2);
    border-radius: 40% 70% 30% 60% / 60% 40% 70% 30%;
  }
  50% {
    transform: translate(40px, -50px) rotate(180deg) scale(0.8);
    border-radius: 60% 40% 70% 30% / 30% 70% 40% 60%;
  }
  75% {
    transform: translate(70px, 30px) rotate(270deg) scale(1.1);
    border-radius: 30% 60% 40% 70% / 70% 30% 60% 40%;
  }
  100% {
    transform: translate(-20px, -40px) rotate(360deg) scale(0.9);
    border-radius: 70% 30% 60% 40% / 40% 60% 30% 70%;
  }
}

@keyframes floatThemeShape2 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    border-radius: 40% 60% 70% 30% / 70% 40% 60% 30%;
  }
  30% {
    transform: translate(80px, -60px) rotate(108deg) scale(1.3);
    border-radius: 70% 30% 40% 60% / 30% 70% 40% 60%;
  }
  60% {
    transform: translate(-50px, 70px) rotate(216deg) scale(0.7);
    border-radius: 60% 40% 30% 70% / 40% 60% 30% 70%;
  }
  100% {
    transform: translate(30px, -30px) rotate(360deg) scale(1.1);
    border-radius: 40% 60% 70% 30% / 70% 40% 60% 30%;
  }
}

@keyframes floatThemeShape3 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    border-radius: 80% 20% 50% 50% / 30% 80% 20% 70%;
  }
  40% {
    transform: translate(-70px, -80px) rotate(144deg) scale(1.4);
    border-radius: 20% 80% 70% 30% / 50% 50% 80% 20%;
  }
  80% {
    transform: translate(90px, 40px) rotate(288deg) scale(0.6);
    border-radius: 50% 50% 20% 80% / 70% 30% 50% 50%;
  }
  100% {
    transform: translate(-10px, 50px) rotate(360deg) scale(1.2);
    border-radius: 80% 20% 50% 50% / 30% 80% 20% 70%;
  }
}

@keyframes floatThemeShape4 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(-90px, 50px) rotate(120deg) scale(0.8);
  }
  66% {
    transform: translate(60px, -70px) rotate(240deg) scale(1.5);
  }
  100% {
    transform: translate(40px, 20px) rotate(360deg) scale(1.0);
  }
}

@keyframes floatThemeShape5 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  20% {
    transform: translate(50px, 90px) rotate(72deg) scale(1.1);
  }
  40% {
    transform: translate(-80px, -40px) rotate(144deg) scale(0.9);
  }
  60% {
    transform: translate(100px, 60px) rotate(216deg) scale(1.3);
  }
  80% {
    transform: translate(-30px, -90px) rotate(288deg) scale(0.7);
  }
  100% {
    transform: translate(10px, 30px) rotate(360deg) scale(1.0);
  }
}

/* Reduced motion support for themed shapes */
@media (prefers-reduced-motion: reduce) {
  .theme-shape {
    animation: none;
    transform: none;
  }
}

/* Performance optimizations for themed shapes */
@media (max-width: 768px) {
  .theme-shape-4,
  .theme-shape-5 {
    display: none;
  }
  
  .theme-shape {
    filter: blur(40px);
    opacity: 0.2;
  }
  
  [data-theme="dark"] .theme-shape {
    opacity: 0.25;
  }
}

@media (max-width: 480px) {
  .theme-shape-3 {
    display: none;
  }
  
  .theme-shape {
    transform: scale(0.7);
    filter: blur(30px);
  }
}

/* Interactive hover effects for themed shapes */
.mesh-background:hover .theme-shape {
  opacity: 0.5;
  animation-duration: 0.8;
  filter: blur(50px);
}

[data-theme="dark"] .mesh-background:hover .theme-shape {
  opacity: 0.6;
}