/* Kallisto Design System — Backdrop Pattern Styles */

.kal-aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 900px at 50% 0%, oklch(0.97 0.02 295 / 0.7), transparent 60%),
    linear-gradient(180deg, #fff, var(--bg-2));
}

.kal-blob {
  position: fixed; top: 0; left: 0; width: 500px; height: 500px;
  pointer-events: none; z-index: 0;
  filter: blur(90px); will-change: transform; mix-blend-mode: multiply;
  background: radial-gradient(circle at 40% 40%,
    rgba(138,43,226,.55) 15%, rgba(0,255,163,.45) 35%,
    rgba(255,30,158,.45) 60%, rgba(107,71,255,.45) 85%, rgba(149,71,255,.35) 100%);
  border-radius: 50% 40% 60% 50% / 45% 55% 40% 60%;
}
.kal-blob::before, .kal-blob::after {
  content: ""; position: absolute; width: 100%; height: 100%;
  border-radius: inherit; filter: blur(140px); opacity: .85; mix-blend-mode: overlay;
}
.kal-blob::before {
  background: radial-gradient(circle at 80% 20%, rgba(120,0,255,.45) 20%, rgba(255,30,150,.40) 80%);
  animation: kalBlobPulse 6s infinite ease-in-out;
}
.kal-blob::after {
  background: radial-gradient(circle at 30% 70%, rgba(160,32,240,.35) 25%, rgba(255,80,210,.40) 80%);
  animation: kalBlobPulse 7s infinite ease-in-out reverse;
}
@keyframes kalBlobPulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.05); opacity: .85; }
}

.kal-grid-dots {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(80,60,140,.5) 1px, transparent 1.4px);
  background-size: 22px 22px; opacity: .35;
  -webkit-mask-image: radial-gradient(circle 500px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), black 0%, transparent 100%);
  mask-image: radial-gradient(circle 500px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), black 0%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .kal-blob { display: none !important; }
  .kal-blob::before, .kal-blob::after { animation: none !important; }
}