/* Container */
.aurora-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #fff;
}

.dark .aurora-wrap {
  background: #000;
}

/* Text */
.aurora-text {
  position: relative;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #000;
  overflow: hidden;
}

.dark .aurora-text {
  color: #fff;
}

/* Aurora overlay */
.aurora-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: lighten;
}

.dark .aurora-overlay {
  mix-blend-mode: darken;
}

/* Aurora blobs */
.aurora-blob {
  position: absolute;
  width: 60vw;
  height: 60vw;
  filter: blur(40px);
  opacity: 0.9;
  animation: aurora-border 6s ease-in-out infinite;
}

/* Individual colors */
.aurora-cyan { background: #22d3ee; }
.aurora-yellow { background: #facc15; }
.aurora-green { background: #4ade80; }
.aurora-purple { background: #a855f7; }

/* Blob motion */
.blob-1 { animation: aurora-border 6s infinite, aurora-1 5s infinite alternate; }
.blob-2 { animation: aurora-border 6s infinite, aurora-2 5s infinite alternate; }
.blob-3 { animation: aurora-border 6s infinite, aurora-3 3s infinite alternate; }
.blob-4 { animation: aurora-border 6s infinite, aurora-4 13s infinite alternate; }

/* Keyframes */
@keyframes aurora-1 {
  0% { top: 0; right: 0; }
  50% { top: 100%; right: 75%; }
  75% { top: 100%; right: 25%; }
  100% { top: 0; right: 0; }
}

@keyframes aurora-2 {
  0% { top: -50%; left: 0; }
  60% { top: 100%; left: 75%; }
  85% { top: 100%; left: 25%; }
  100% { top: -50%; left: 0; }
}

@keyframes aurora-3 {
  0% { bottom: 0; left: 0; }
  40% { bottom: 100%; left: 75%; }
  65% { bottom: 40%; left: 50%; }
  100% { bottom: 0; left: 0; }
}

@keyframes aurora-4 {
  0% { bottom: -50%; right: 0; }
  50% { bottom: 0; right: 40%; }
  90% { bottom: 50%; right: 25%; }
  100% { bottom: -50%; right: 0; }
}

@keyframes aurora-border {
  0% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; }
  25% { border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%; }
  50% { border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%; }
  75% { border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; }
  100% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; }
}