/**
 * Cursor-Following Blob Animation
 * Global ambient glow that tracks mouse position
 * Reuses loading blob's dual-orb gradient (blue + pink)
 * Hidden on touch devices and idle cursor
 */

/* ============================================ */
/* Blob Container                               */
/* ============================================ */
.cursor-blob {
  position: fixed;
  top: 0;
  left: 0;
  width: 350px;
  height: 350px;
  pointer-events: none;
  z-index: 150; /* Above header (101) & menu overlay (100), below loading (9999) */
  opacity: 0;
  filter: blur(70px);
  transition: opacity 0.6s ease;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

/* Active state: cursor is moving */
.cursor-blob--active {
  opacity: 0.5;
}

/* ============================================ */
/* Dual Orbs (matches loading blob palette)     */
/* ============================================ */

/* Blue orb — primary, slightly larger */
.cursor-blob::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #0055FF 0%, rgba(0, 85, 255, 0) 70%);
  animation: cursor-blob-pulse1 3s ease-in-out infinite;
}

/* Pink orb — secondary, offset for depth */
.cursor-blob::after {
  content: '';
  position: absolute;
  width: 85%;
  height: 85%;
  top: 10%;
  left: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, #FF3388 0%, rgba(255, 51, 136, 0) 70%);
  animation: cursor-blob-pulse2 2.5s ease-in-out infinite;
}

/* ============================================ */
/* Subtle Morphing Pulse                        */
/* ============================================ */
@keyframes cursor-blob-pulse1 {
  0%, 100% { transform: scale(1) translate(0, 0); }
  33%      { transform: scale(1.08) translate(3%, -3%); }
  66%      { transform: scale(0.94) translate(-2%, 2%); }
}

@keyframes cursor-blob-pulse2 {
  0%, 100% { transform: scale(1) translate(0, 0); }
  40%      { transform: scale(1.12) translate(-4%, 3%); }
  75%      { transform: scale(0.9) translate(3%, -2%); }
}

/* ============================================ */
/* Reduced Motion & Touch Devices               */
/* ============================================ */
@media (prefers-reduced-motion: reduce) {
  .cursor-blob {
    display: none;
  }
}

/* Hide on touch-only devices (set via JS) */
.cursor-blob--touch-device {
  display: none;
}