Gradients

.card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 1rem;
  isolation: isolate;
}

/* 1 · Aurora: blurred color blobs drifting in two layers */
.aurora {
  background: #070b1f;
}

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  inset: -40%;
  filter: blur(28px);
  animation: drift 14s ease-in-out infinite alternate;
}

.aurora::before {
  background:
    radial-gradient(circle at 30% 35%, #22d3ee 0, transparent 30%),
    radial-gradient(circle at 70% 55%, #a855f7 0, transparent 32%);
}

.aurora::after {
  background:
    radial-gradient(circle at 45% 75%, #22c55e 0, transparent 28%),
    radial-gradient(circle at 75% 25%, #3b82f6 0, transparent 26%);
  mix-blend-mode: screen;
  animation-duration: 18s;
  animation-direction: alternate-reverse;
}

@keyframes drift {
  from { transform: translate(-6%, 4%) rotate(0deg) scale(1); }
  to { transform: translate(6%, -6%) rotate(40deg) scale(1.15); }
}