/* ── DYNAMIC AURORA ANIMATION BACKGROUND ── */
.aurora-bg {
  position: fixed;
  inset: -20%; /* extend beyond screen to avoid blur cutoffs */
  z-index: -2;
  background: #040812; /* Dark deep blue base */
  overflow: hidden;
  filter: blur(120px) contrast(1.2);
  pointer-events: none;
  width: 140%;
  height: 140%;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: color-dodge; /* For the "overlay/blend" aurora aesthetic */
  opacity: 0.65;
  animation: aurora-flow infinite alternate ease-in-out;
}

.aurora-1 {
  width: 70vw; height: 80vh;
  background: #092c4e;
  top: 10%; left: 0%;
  animation-duration: 22s;
  animation-name: aurora-flow-1;
}

.aurora-2 {
  width: 80vw; height: 80vh;
  background: #122868;
  top: 30%; right: 0%;
  animation-duration: 27s;
  animation-name: aurora-flow-2;
  animation-delay: -5s;
}

.aurora-3 {
  width: 60vw; height: 75vh;
  background: #092c4e; /* React bits specified color #1 */
  bottom: 0%; left: 20%;
  animation-duration: 24s;
  animation-name: aurora-flow-3;
  animation-direction: alternate-reverse;
}

.aurora-4 {
  width: 75vw; height: 60vh;
  background: #122868; /* React bits specified color #2 */
  bottom: -10%; right: 20%;
  animation-duration: 32s;
  animation-name: aurora-flow-4;
  animation-delay: -12s;
}

@keyframes aurora-flow-1 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.6; }
  50%  { transform: translate(15vw, -10vh) scale(1.1) rotate(15deg); opacity: 0.8; }
  100% { transform: translate(-10vw, 5vh) scale(1.2) rotate(5deg); opacity: 0.7; }
}

@keyframes aurora-flow-2 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.7; }
  50%  { transform: translate(-10vw, 15vh) scale(1.2) rotate(-10deg); opacity: 0.55; }
  100% { transform: translate(15vw, -5vh) scale(0.9) rotate(-20deg); opacity: 0.8; }
}

@keyframes aurora-flow-3 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50%  { transform: translate(20vw, 20vh) scale(1.1); opacity: 0.6; }
  100% { transform: translate(-5vw, -10vh) scale(0.9); opacity: 0.9; }
}

@keyframes aurora-flow-4 {
  0%   { transform: translate(0, 0) scale(0.9); opacity: 0.5; }
  50%  { transform: translate(-20vw, -15vh) scale(1.2); opacity: 0.8; }
  100% { transform: translate(10vw, 5vh) scale(1.1); opacity: 0.6; }
}