body[data-theme="mouse"] {
  background: #050010;
  overflow: hidden;
}

/* gradiente principal seguindo o mouse, com pulso no bass */
body[data-theme="mouse"]::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(circle calc(280px + 200px * var(--bass, 0)) at var(--mx, 50%) var(--my, 50%),
      rgba(124, 92, 255, calc(0.55 + 0.4 * var(--bass, 0))) 0%,
      rgba(80, 40, 200, .15) 40%,
      transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: background .05s linear;
}

/* segunda camada — gradiente cromatico */
body[data-theme="mouse"]::after {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(circle 600px at var(--mx, 50%) var(--my, 50%),
      transparent 0%,
      rgba(255, 100, 200, .08) 40%,
      rgba(80, 200, 255, .06) 60%,
      transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* trail dot principal — bola de luz que segue o cursor */
body[data-theme="mouse"] .mouse-cursor {
  position: fixed;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(124,92,255,.5) 50%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  left: var(--mx, 50%); top: var(--my, 50%);
  z-index: 5;
  filter: blur(calc(2px + 4px * var(--bass, 0)));
  transition: width .15s, height .15s;
}

body[data-theme="mouse"] .mouse-trail {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 140, 255, 1), rgba(124, 92, 255, .3) 50%, transparent 80%);
  pointer-events: none;
  animation: trail-fade .9s forwards ease-out;
  mix-blend-mode: screen;
}

@keyframes trail-fade {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(3); }
}

/* particulas que se movem em direcao ao cursor (magnetic) */
body[data-theme="mouse"] .mouse-particle {
  position: fixed;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(200, 180, 255, .8);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(180, 140, 255, .8);
  z-index: 2;
}

/* card reage suavemente ao mouse + bass */
body[data-theme="mouse"] .profile-card {
  transform: scale(calc(1 + 0.04 * var(--beat, 0)))
             translateX(calc((var(--mx-norm, 0) - 0.5) * 12px))
             translateY(calc((var(--my-norm, 0) - 0.5) * 12px));
  transition: transform .15s ease;
  box-shadow: 0 0 calc(40px + 60px * var(--bass, 0)) rgba(124, 92, 255, .7);
}