/* ============================================
   AURORA FLOW - Organic Liquid Light Ribbons
   ============================================ */

.aurora-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0; /* Behind all content */
  opacity: 1; /* Always visible */
  transition: opacity 0.5s ease;
}

/* Aurora ribbons - flowing organic shapes */
.aurora-ribbon {
  position: absolute;
  width: 200%;
  height: 300px;
  opacity: 0.4; /* Brighter in light mode */
  filter: blur(60px);
  mix-blend-mode: multiply; /* Better for light backgrounds */
  will-change: transform, opacity; /* Optimize for animation performance */
}

[data-theme="dark"] .aurora-ribbon {
  opacity: 0.45; /* Slightly toned down */
  mix-blend-mode: screen; /* Better for dark backgrounds */
}

/* First ribbon - deep navy blue */
.aurora-ribbon-1 {
  top: 10%;
  left: -50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(35, 58, 117, 0.6) 20%,
    rgba(26, 45, 90, 0.8) 40%,
    rgba(35, 58, 117, 0.6) 60%,
    transparent 100%
  );
  transform: rotate(-5deg);
  animation: auroraFlow1 25s ease-in-out infinite;
}

[data-theme="dark"] .aurora-ribbon-1 {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(35, 58, 117, 0.6) 20%,
    rgba(26, 45, 90, 0.75) 40%,
    rgba(35, 58, 117, 0.6) 60%,
    transparent 100%
  );
}

@keyframes auroraFlow1 {
  0%, 100% {
    transform: translateX(0%) rotate(-5deg) scaleY(1);
  }
  50% {
    transform: translateX(15%) rotate(-3deg) scaleY(1.2);
  }
}

/* Second ribbon - teal */
.aurora-ribbon-2 {
  top: 40%;
  left: -50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(29, 233, 182, 0.7) 25%,
    rgba(29, 233, 182, 0.9) 50%,
    rgba(29, 233, 182, 0.7) 75%,
    transparent 100%
  );
  transform: rotate(3deg);
  animation: auroraFlow2 30s ease-in-out infinite;
  animation-delay: -5s;
}

[data-theme="dark"] .aurora-ribbon-2 {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(29, 233, 182, 0.5) 25%,
    rgba(29, 233, 182, 0.7) 50%,
    rgba(29, 233, 182, 0.5) 75%,
    transparent 100%
  );
}

@keyframes auroraFlow2 {
  0%, 100% {
    transform: translateX(0%) rotate(3deg) scaleY(1);
  }
  50% {
    transform: translateX(-10%) rotate(5deg) scaleY(0.9);
  }
}

/* Third ribbon - navy and teal blend */
.aurora-ribbon-3 {
  top: 65%;
  left: -50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(35, 58, 117, 0.4) 30%,
    rgba(90, 182, 160, 0.5) 50%,
    rgba(35, 58, 117, 0.4) 70%,
    transparent 100%
  );
  transform: rotate(-2deg);
  animation: auroraFlow3 28s ease-in-out infinite;
  animation-delay: -10s;
}

[data-theme="dark"] .aurora-ribbon-3 {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(35, 58, 117, 0.45) 30%,
    rgba(90, 182, 160, 0.5) 50%,
    rgba(35, 58, 117, 0.45) 70%,
    transparent 100%
  );
}

@keyframes auroraFlow3 {
  0%, 100% {
    transform: translateX(0%) rotate(-2deg) scaleY(1);
  }
  50% {
    transform: translateX(8%) rotate(-4deg) scaleY(1.1);
  }
}

/* Subtle glow spots - not particles, just ambient light */
.aurora-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.2; /* Brighter in light mode */
  will-change: opacity, transform; /* Optimize for animation performance */
  pointer-events: none;
}

[data-theme="dark"] .aurora-glow {
  opacity: 0.22; /* Slightly toned down */
}

.aurora-glow-1 {
  width: 600px;
  height: 600px;
  top: -200px;
  left: -100px;
  background: radial-gradient(circle, rgba(35, 58, 117, 0.6) 0%, transparent 70%);
  animation: glowPulse1 15s ease-in-out infinite;
}

[data-theme="dark"] .aurora-glow-1 {
  background: radial-gradient(circle, rgba(35, 58, 117, 0.6) 0%, transparent 70%);
}

@keyframes glowPulse1 {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(1.1);
  }
}

.aurora-glow-2 {
  width: 800px;
  height: 800px;
  bottom: -300px;
  right: -200px;
  background: radial-gradient(circle, rgba(29, 233, 182, 0.7) 0%, transparent 70%);
  animation: glowPulse2 18s ease-in-out infinite;
  animation-delay: -7s;
}

[data-theme="dark"] .aurora-glow-2 {
  background: radial-gradient(circle, rgba(29, 233, 182, 0.5) 0%, transparent 70%);
}

@keyframes glowPulse2 {
  0%, 100% {
    opacity: 0.18;
    transform: scale(1);
  }
  50% {
    opacity: 0.32;
    transform: scale(1.15);
  }
}

.aurora-glow-3 {
  width: 700px;
  height: 700px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(26, 45, 90, 0.4) 0%, transparent 70%);
  animation: glowPulse3 20s ease-in-out infinite;
  animation-delay: -3s;
}

[data-theme="dark"] .aurora-glow-3 {
  background: radial-gradient(circle, rgba(26, 45, 90, 0.45) 0%, transparent 70%);
}

@keyframes glowPulse3 {
  0%, 100% {
    opacity: 0.16;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .aurora-ribbon,
  .aurora-glow {
    animation: none;
  }
}