/* Inline aurora background (escopo: #aurora-panel) */
#aurora-panel {
  position: relative;
  overflow: hidden;
  background: #003b99;
}
#aurora-panel .aurora-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 130, 255, 0.18) 0%,
    rgba(0, 71, 179, 0.12) 40%,
    rgba(0, 59, 153, 0.9) 100%
  );
  filter: blur(24px);
  transform: scale(1.02);
  pointer-events: none;
}
#aurora-panel .blob {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(110px);
  opacity: 0.92;
  transition: transform 0.3s ease;
}
/* Formas mais organicas usando border-radius com percentuais distintos */
#aurora-panel .blob {
  border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
}
@keyframes blobA {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  25% {
    transform: translate3d(30px, -20px, 0) scale(1.05) rotate(-3deg);
  }
  50% {
    transform: translate3d(-20px, 20px, 0) scale(0.98) rotate(2deg);
  }
  75% {
    transform: translate3d(15px, 30px, 0) scale(1.02) rotate(-1deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}
@keyframes blobB {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  25% {
    transform: translate3d(10px, -10px, 0) scale(1.02) rotate(1deg);
  }
  50% {
    transform: translate3d(-25px, 25px, 0) scale(0.98) rotate(-2deg);
  }
  75% {
    transform: translate3d(5px, 15px, 0) scale(1.01) rotate(1deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}
#aurora-panel .blob.a {
  width: 500px;
  height: 500px;
  left: 18%;
  top: -120px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(102, 178, 255, 0.95),
    rgba(0, 75, 153, 0.12)
  );
  animation: blobA 14s ease-in-out infinite;
}
#aurora-panel .blob.b {
  width: 420px;
  height: 420px;
  right: 8%;
  bottom: -70px;
  background: radial-gradient(
    circle at 70% 70%,
    rgba(102, 255, 240, 0.85),
    rgba(0, 60, 153, 0.14)
  );
  animation: blobB 18s ease-in-out infinite;
}
/* Bolhas mais escuras (tamanhos e formas irregulares) */
#aurora-panel .blob.c {
  width: 560px;
  height: 360px;
  left: 5%;
  bottom: -100px;
  background: radial-gradient(
    circle at 20% 60%,
    rgba(0, 40, 100, 0.9),
    rgba(0, 30, 80, 0.6)
  );
  filter: blur(120px);
  mix-blend-mode: multiply;
  opacity: 0.85;
  transform: rotate(-8deg);
  border-radius: 50% 40% 60% 40% / 60% 50% 40% 50%;
  animation: blobB 22s ease-in-out infinite;
}
#aurora-panel .blob.d {
  width: 380px;
  height: 480px;
  right: 20%;
  top: -140px;
  background: radial-gradient(
    circle at 80% 20%,
    rgba(0, 20, 80, 0.95),
    rgba(0, 40, 120, 0.5)
  );
  filter: blur(130px);
  mix-blend-mode: multiply;
  opacity: 0.9;
  transform: rotate(6deg);
  border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%;
  animation: blobA 20s ease-in-out infinite;
}
#aurora-panel .noise {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px
  );
  background-size: 6px 6px;
  opacity: 0.03;
  pointer-events: none;
}
#aurora-panel .panel-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
@media (max-width: 768px) {
  #aurora-panel .blob {
    opacity: 0.65;
    filter: blur(90px);
  }
  #aurora-panel .blob.a {
    width: 360px;
    height: 360px;
  }
  #aurora-panel .blob.b {
    width: 300px;
    height: 300px;
  }
}
/* Fade in com desborrando (blur decrescente) para logos e elementos */
@keyframes fadeInUnblur {
  0% {
    opacity: 0;
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}
#aurora-panel .auth-brand-logo {
  animation: fadeInUnblur 1.2s ease-out forwards !important;
}