/* 全局渐变背景样式 */
.gradient-background {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

/* 备选渐变背景（更柔和的紫色渐变） */
.gradient-background-soft {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
  min-height: 100vh;
}

/* 淡紫色渐变背景（接近图片效果） */
.gradient-background-light {
  background: linear-gradient(180deg, #e8d5ff 0%, #f5f1ff 50%, #ffffff 100%);
  min-height: 100vh;
}

/* 圆圈晕染效果背景 */
.gradient-background-circles {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #e8d5ff 0%, #f5f1ff 35%, #ffffff 100%);
  overflow: hidden;
}

/* 左上角紫色大圆 */
.gradient-background-circles::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -30%;
  width: 80%;
  height: 80%;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.35) 0%,
    rgba(139, 92, 246, 0.2) 25%,
    rgba(139, 92, 246, 0.1) 45%,
    rgba(139, 92, 246, 0.05) 65%,
    transparent 85%
  );
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  animation: slowPulse 12s ease-in-out infinite;
}

/* 右上角蓝色大圆 */
.gradient-background-circles::after {
  content: '';
  position: absolute;
  top: -10%;
  right: -35%;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.3) 0%,
    rgba(59, 130, 246, 0.15) 30%,
    rgba(59, 130, 246, 0.08) 50%,
    rgba(59, 130, 246, 0.03) 70%,
    transparent 90%
  );
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  animation: rotate 20s linear infinite;
}


/* 动画效果 */
@keyframes slowPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

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

@keyframes float {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.8;
  }
  33% {
    transform: translateY(-15px) scale(1.02);
    opacity: 1;
  }
  66% {
    transform: translateY(10px) scale(0.98);
    opacity: 0.9;
  }
}

/* 确保内容在圆圈效果之上 */
.gradient-background-circles > * {
  position: relative;
  z-index: 1;
}

.gradient-background-circles .content {
  position: relative;
  z-index: 2;
}