/* Organic background shapes with enhanced animations */
.organic-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

.shape-1 {
  width: 700px;
  height: 700px;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.25), rgba(59, 130, 246, 0.2));
  animation: floatShape1 25s ease-in-out infinite;
}

.shape-2 {
  width: 650px;
  height: 650px;
  background: linear-gradient(225deg, rgba(79, 70, 229, 0.2), rgba(37, 99, 235, 0.25));
  animation: floatShape2 30s ease-in-out infinite;
}

.shape-3 {
  width: 600px;
  height: 600px;
  background: linear-gradient(45deg, rgba(147, 51, 234, 0.2), rgba(50, 191, 168, 0.22));
  animation: floatShape3 28s ease-in-out infinite;
}

.shape-4 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle at center, rgba(249, 115, 22, 0.15), rgba(59, 130, 246, 0.1));
  animation: floatShape4 32s ease-in-out infinite;
}

.shape-5 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle at center, rgba(107, 70, 193, 0.2), rgba(59, 130, 246, 0.15));
  animation: floatShape5 27s ease-in-out infinite;
}

.shape-6 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(124, 58, 237, 0.12));
  animation: floatShape6 33s ease-in-out infinite;
}

@keyframes floatShape1 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(50px, -30px) rotate(8deg) scale(1.08); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes floatShape2 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(-35px, 25px) rotate(-5deg) scale(1.05); }
  66% { transform: translate(25px, -20px) rotate(3deg) scale(0.97); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes floatShape3 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  40% { transform: translate(30px, 30px) rotate(-6deg) scale(1.04); }
  80% { transform: translate(-25px, -35px) rotate(5deg) scale(0.96); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes floatShape4 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translate(-25px, -20px) rotate(-4deg) scale(1.06); }
  50% { transform: translate(30px, 25px) rotate(5deg) scale(0.95); }
  75% { transform: translate(-15px, 35px) rotate(-2deg) scale(1.03); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes floatShape5 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  30% { transform: translate(40px, -15px) rotate(3deg) scale(1.07); }
  60% { transform: translate(-20px, 30px) rotate(-4deg) scale(0.94); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes floatShape6 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  35% { transform: translate(-30px, 25px) rotate(-7deg) scale(1.05); }
  70% { transform: translate(25px, -35px) rotate(4deg) scale(0.93); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* Image background effects */
.image-container {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.image-bg-effect {
  position: absolute;
  inset: -30px;
  background: linear-gradient(45deg, rgba(147, 51, 234, 0.15), rgba(59, 130, 246, 0.1), rgba(50, 191, 168, 0.15));
  filter: blur(30px);
  z-index: -1;
  opacity: 0.7;
  animation: rotateBg 15s linear infinite;
}

@keyframes rotateBg {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}