/* 动画背景样式 - 提取自 AnimatedBackground 组件 */

.animated-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* 流动的背景图片层 */
.bg-flow-layer {
  position: absolute;
  inset: -100px;
  background-image: url('/images/login_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: inwardFlow 20s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
  z-index: 0;
  will-change: transform, filter;
}

/* 深色渐变遮罩层 */
.bg-gradient-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(79, 209, 197, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(129, 140, 248, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, rgba(10, 14, 26, 0.6) 0%, rgba(10, 14, 26, 0.8) 100%);
  z-index: 1;
  pointer-events: none;
}

/* 向内流动动画 */
@keyframes inwardFlow {
  0% {
    transform: scale(1.3) translate(-3%, -3%) rotate(0.5deg);
    filter: brightness(0.65) saturate(1.2) contrast(1.05);
  }
  25% {
    transform: scale(1.2) translate(1.5%, -1.5%) rotate(-0.3deg);
    filter: brightness(0.7) saturate(1.25) contrast(1.08);
  }
  50% {
    transform: scale(1.1) translate(-1%, 1%) rotate(0.3deg);
    filter: brightness(0.75) saturate(1.3) contrast(1.1);
  }
  75% {
    transform: scale(1.05) translate(1.5%, 1.5%) rotate(-0.5deg);
    filter: brightness(0.8) saturate(1.25) contrast(1.08);
  }
  100% {
    transform: scale(1) translate(0, 0) rotate(0deg);
    filter: brightness(0.85) saturate(1.2) contrast(1.05);
  }
}

/* 背景光斑 */
.bg-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  animation: float 10s ease-in-out infinite;
  z-index: 0;
}

.bg-orb-1 {
  top: -150px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(79, 209, 197, 0.15), transparent 70%);
  animation-direction: reverse;
}

.bg-orb-2 {
  bottom: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.12), transparent 70%);
  animation-duration: 14s;
}

.bg-orb-3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(79, 209, 197, 0.03), transparent 60%);
  animation-duration: 18s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

/* 向内流动的粒子效果 */
.bg-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.inward-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, rgba(79, 209, 197, 0.95), rgba(79, 209, 197, 0.4));
  border-radius: 50%;
  animation: inwardParticleFlow 10s linear infinite;
  box-shadow: 0 0 15px rgba(79, 209, 197, 0.9), 0 0 30px rgba(79, 209, 197, 0.5);
}

.inward-particle:nth-child(1) {
  top: 5%;
  left: 8%;
  animation-delay: 0s;
  animation-duration: 8s;
}

.inward-particle:nth-child(2) {
  top: 12%;
  right: 12%;
  animation-delay: 1.5s;
  animation-duration: 9s;
}

.inward-particle:nth-child(3) {
  bottom: 15%;
  left: 10%;
  animation-delay: 3s;
  animation-duration: 11s;
}

.inward-particle:nth-child(4) {
  bottom: 8%;
  right: 8%;
  animation-delay: 4.5s;
  animation-duration: 10s;
}

.inward-particle:nth-child(5) {
  top: 45%;
  left: 3%;
  animation-delay: 2s;
  animation-duration: 12s;
}

.inward-particle:nth-child(6) {
  top: 55%;
  right: 3%;
  animation-delay: 5s;
  animation-duration: 9s;
}

@keyframes inwardParticleFlow {
  0% {
    transform: translate(0, 0) scale(1.2);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(50vw - 100%), calc(50vh - 100%)) scale(0.2);
    opacity: 0;
  }
}

/* 额外的浮动粒子 */
.floating-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(79, 209, 197, 0.95), rgba(79, 209, 197, 0.3));
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 10px rgba(79, 209, 197, 0.8), 0 0 20px rgba(79, 209, 197, 0.4);
}

.floating-particle:nth-child(1) {
  top: 15%;
  left: 10%;
  animation: floatParticle 12s ease-in-out infinite;
  animation-delay: 0s;
}

.floating-particle:nth-child(2) {
  top: 25%;
  right: 15%;
  animation: floatParticle 15s ease-in-out infinite;
  animation-delay: 2s;
}

.floating-particle:nth-child(3) {
  bottom: 20%;
  left: 20%;
  animation: floatParticle 18s ease-in-out infinite;
  animation-delay: 4s;
}

.floating-particle:nth-child(4) {
  bottom: 30%;
  right: 10%;
  animation: floatParticle 14s ease-in-out infinite;
  animation-delay: 6s;
}

.floating-particle:nth-child(5) {
  top: 40%;
  left: 5%;
  animation: floatParticle 16s ease-in-out infinite;
  animation-delay: 8s;
}

.floating-particle:nth-child(6) {
  top: 60%;
  right: 5%;
  animation: floatParticle 13s ease-in-out infinite;
  animation-delay: 10s;
}

.floating-particle:nth-child(7) {
  top: 10%;
  left: 30%;
  animation: floatParticle 11s ease-in-out infinite;
  animation-delay: 1s;
}

.floating-particle:nth-child(8) {
  top: 35%;
  right: 25%;
  animation: floatParticle 17s ease-in-out infinite;
  animation-delay: 3s;
}

@keyframes floatParticle {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  25% {
    transform: translate(60px, -40px) scale(1.3);
    opacity: 0.7;
  }
  50% {
    transform: translate(120px, 0px) scale(1);
    opacity: 0.5;
  }
  75% {
    transform: translate(60px, 40px) scale(0.7);
    opacity: 0.8;
  }
}