/* Animated gradient background for the sign-in page only. */
.bg-gradient {
  --color-bg1: rgb(176, 124, 236);
  --color-bg2: rgb(96, 120, 224);
  --color1: 110, 160, 255;
  --color2: 235, 140, 255;
  --color3: 160, 235, 255;
  --color4: 255, 150, 170;
  --color5: 255, 225, 150;
  --color6: 143, 104, 252;
  --color7: 108, 91, 189;
  --color8: 87, 121, 252;
  --color-interactive: 180, 150, 255;
  --blob-alpha: 0.8;
  --circle-size: 80%;
  --blending: hard-light;
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
}
.bg-gradient .bg-svg { position: absolute; width: 0; height: 0; }
.bg-gradient .gradients-container { width: 100%; height: 100%; filter: url(#goo) blur(40px); }
.bg-gradient .g1, .bg-gradient .g2, .bg-gradient .g3, .bg-gradient .g4, .bg-gradient .g5,
.bg-gradient .g6, .bg-gradient .g7, .bg-gradient .g8, .bg-gradient .interactive {
  position: absolute; mix-blend-mode: var(--blending); width: var(--circle-size); height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2); left: calc(50% - var(--circle-size) / 2);
}
.bg-gradient .g1 { background: radial-gradient(circle at center, rgba(var(--color1), var(--blob-alpha)) 0, rgba(var(--color1), 0) 50%) no-repeat; transform-origin: center center; animation: moveVertical 30s ease infinite; }
.bg-gradient .g2 { background: radial-gradient(circle at center, rgba(var(--color2), var(--blob-alpha)) 0, rgba(var(--color2), 0) 50%) no-repeat; transform-origin: calc(50% - 400px); animation: moveInCircle 20s reverse infinite; }
.bg-gradient .g3 { background: radial-gradient(circle at center, rgba(var(--color3), var(--blob-alpha)) 0, rgba(var(--color3), 0) 50%) no-repeat; top: calc(50% - var(--circle-size) / 2 + 200px); left: calc(50% - var(--circle-size) / 2 - 500px); transform-origin: calc(50% + 400px); animation: moveInCircle 40s linear infinite; }
.bg-gradient .g4 { background: radial-gradient(circle at center, rgba(var(--color4), var(--blob-alpha)) 0, rgba(var(--color4), 0) 50%) no-repeat; transform-origin: calc(50% - 200px); animation: moveHorizontal 40s ease infinite; opacity: 0.7; }
.bg-gradient .g5 { background: radial-gradient(circle at center, rgba(var(--color5), var(--blob-alpha)) 0, rgba(var(--color5), 0) 50%) no-repeat; width: calc(var(--circle-size) * 2); height: calc(var(--circle-size) * 2); top: calc(50% - var(--circle-size)); left: calc(50% - var(--circle-size)); transform-origin: calc(50% - 800px) calc(50% + 200px); animation: moveInCircle 20s ease infinite; }
.bg-gradient .g6 { background: radial-gradient(circle at center, rgba(var(--color6), var(--blob-alpha)) 0, rgba(var(--color6), 0) 50%) no-repeat; top: calc(50% - var(--circle-size) / 2 - 150px); left: calc(50% - var(--circle-size) / 2 + 300px); transform-origin: calc(50% + 300px) calc(50% - 100px); animation: moveInCircle 35s ease infinite; }
.bg-gradient .g7 { background: radial-gradient(circle at center, rgba(var(--color7), var(--blob-alpha)) 0, rgba(var(--color7), 0) 50%) no-repeat; transform-origin: calc(50% - 300px) calc(50% + 150px); animation: moveHorizontal 50s ease infinite reverse; opacity: 0.6; }
.bg-gradient .g8 { background: radial-gradient(circle at center, rgba(var(--color8), var(--blob-alpha)) 0, rgba(var(--color8), 0) 50%) no-repeat; transform-origin: center center; animation: moveVertical 45s ease infinite reverse; }
.bg-gradient .interactive { background: radial-gradient(circle at center, rgba(var(--color-interactive), var(--blob-alpha)) 0, rgba(var(--color-interactive), 0) 50%) no-repeat; width: 100%; height: 100%; top: -50%; left: -50%; opacity: 0.7; }
@keyframes moveInCircle { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes moveVertical { 0% { transform: translateY(-50%); } 50% { transform: translateY(50%); } 100% { transform: translateY(-50%); } }
@keyframes moveHorizontal { 0% { transform: translateX(-50%) translateY(-10%); } 50% { transform: translateX(50%) translateY(10%); } 100% { transform: translateX(-50%) translateY(-10%); } }
@media (prefers-reduced-motion: reduce) { .bg-gradient * { animation: none !important; } }