/* The lights of the room, shared by the landing pages and the profile pages: the palette, and the soft
   out-of-focus lights that drift behind the content. Each page places its own lights; this holds what they share. */

:root {
  /* Cyan, blue and violet, a few emerald lights among them, and amber for warm contrast.
     Kept as channels so each glow can set its own strength. */
  --cyan-rgb: 110, 231, 245;
  --blue-rgb: 91, 140, 255;
  --violet-rgb: 139, 123, 255;
  --emerald-rgb: 52, 211, 153;
  --amber-rgb: 255, 170, 92;
}

/* Soft gradients rather than a blur filter, and only transform and opacity move, so they stay cheap to animate. */
.ambient-blob {
  position: absolute;
  width: var(--blob-size, clamp(300px, 46vw, 680px));
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--blob-rgb), var(--blob-strength, 0.16)), rgba(var(--blob-rgb), 0));
  pointer-events: none;
  will-change: transform, opacity;
  animation:
    blobFloat var(--blob-duration, 14s) ease-in-out var(--blob-delay, 0s) infinite alternate,
    blobBreathe 5s ease-in-out var(--blob-delay, 0s) infinite alternate;
}

/* The second path, for lights that should not move in step with their neighbours. */
.ambient-blob-alt {
  animation-name: blobFloatAlt, blobBreathe;
}

.ambient-blob-emerald { --blob-rgb: var(--emerald-rgb); }
.ambient-blob-violet { --blob-rgb: var(--violet-rgb); }
.ambient-blob-blue { --blob-rgb: var(--blue-rgb); }
.ambient-blob-amber { --blob-rgb: var(--amber-rgb); }
.ambient-blob-cyan { --blob-rgb: var(--cyan-rgb); }

@keyframes blobFloat {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(48%, -30%, 0) scale(1.3); }
  66% { transform: translate3d(-22%, 38%, 0) scale(0.8); }
  100% { transform: translate3d(36%, 14%, 0) scale(1.15); }
}

@keyframes blobFloatAlt {
  0% { transform: translate3d(0, 0, 0) scale(1.1); }
  30% { transform: translate3d(-42%, 24%, 0) scale(0.8); }
  65% { transform: translate3d(26%, 44%, 0) scale(1.35); }
  100% { transform: translate3d(-30%, -26%, 0) scale(1); }
}

@keyframes blobBreathe {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-blob {
    animation: none;
  }
}