/* Blobs */

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #0a0a1a;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.8;
  mix-blend-mode: screen;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blob:nth-child(1) {
  width: 380px; height: 380px;
  background: radial-gradient(circle at 40% 40%, #aa55ff, #5555ff);
  animation: morph 9s ease-in-out infinite, drift1 13s ease-in-out infinite;
}

.blob:nth-child(2) {
  width: 320px; height: 320px;
  background: radial-gradient(circle at 60% 30%, #ff55ff, #aa55ff);
  animation: morph 7s ease-in-out infinite -2s, drift2 11s ease-in-out infinite -3s;
}

.blob:nth-child(3) {
  width: 280px; height: 280px;
  background: radial-gradient(circle at 50% 60%, #5555ff, #3333cc);
  animation: morph 11s ease-in-out infinite -4s, drift3 14s ease-in-out infinite -1s;
}

.blob:nth-child(4) {
  width: 240px; height: 240px;
  background: radial-gradient(circle at 30% 70%, #ff55ff, #ff2299);
  animation: morph 8s ease-in-out infinite -1s, drift4 10s ease-in-out infinite -5s;
}

.blob:nth-child(5) {
  width: 340px; height: 340px;
  background: radial-gradient(circle at 70% 50%, #7755ff, #ff55dd);
  animation: morph 10s ease-in-out infinite -3s, drift5 15s ease-in-out infinite -2s;
}

@keyframes morph {
  0%   { border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; }
  25%  { border-radius: 30% 70% 40% 60% / 70% 30% 60% 40%; }
  50%  { border-radius: 50% 50% 30% 70% / 40% 60% 70% 30%; }
  75%  { border-radius: 70% 30% 60% 40% / 30% 70% 40% 60%; }
  100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; }
}

@keyframes drift1 {
  0%   { transform: translate(-50%, -50%) scale(1); }
  25%  { transform: translate(-10%, -80%) scale(1.06); }
  50%  { transform: translate(-80%, -30%) scale(0.95); }
  75%  { transform: translate(-20%, 10%) scale(1.04); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes drift2 {
  0%   { transform: translate(-50%, -50%) scale(1); }
  25%  { transform: translate(10%, -20%) scale(0.96); }
  50%  { transform: translate(-20%, 30%) scale(1.07); }
  75%  { transform: translate(30%, -60%) scale(0.97); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes drift3 {
  0%   { transform: translate(-50%, -50%) scale(1); }
  25%  { transform: translate(-90%, 20%) scale(1.05); }
  50%  { transform: translate(10%, 40%) scale(0.93); }
  75%  { transform: translate(-60%, -70%) scale(1.03); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes drift4 {
  0%   { transform: translate(-50%, -50%) scale(1); }
  25%  { transform: translate(20%, 30%) scale(1.08); }
  50%  { transform: translate(-100%, -10%) scale(0.95); }
  75%  { transform: translate(0%, -80%) scale(1.04); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes drift5 {
  0%   { transform: translate(-50%, -50%) scale(1); }
  25%  { transform: translate(-30%, 40%) scale(0.94); }
  50%  { transform: translate(20%, -70%) scale(1.06); }
  75%  { transform: translate(-80%, -20%) scale(0.98); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 600px) {
    .blob {
        animation: none !important;
    }
}