/* ══════════════════════════════════════════════════════════════════
   Button FX · efecto musical + parallax arcade en cada botón
   Modular y autocontenido. Quitar = borrar enlaces en index.
   Notas musicales + partículas con profundidad (parallax) + onda neón
   + rebote del botón + nota de sinte (JS). Respeta prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════ */
.bfx-layer{
  position:fixed; inset:0; z-index:2147483000; pointer-events:none; overflow:hidden;
  --fx-blue:#4f8dff; --fx-blue-d:#1d4ed8; --fx-teal:#00d4b4; --fx-violet:#a855f7;
}
.bfx{ position:fixed; pointer-events:none; will-change:transform,opacity; }

/* Onda / shockwave neón */
.bfx-ring{
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--fx-blue);
  box-shadow:0 0 14px rgba(79,141,255,.8), inset 0 0 8px rgba(79,141,255,.5);
  transform:translate(-50%,-50%) scale(.3); opacity:.9;
  animation:bfxRing .62s cubic-bezier(.16,.84,.24,1) forwards;
}
@keyframes bfxRing{
  0%{ transform:translate(-50%,-50%) scale(.3); opacity:.95; }
  100%{ transform:translate(-50%,-50%) scale(3.6); opacity:0; }
}
.bfx-ring.r2{ border-color:var(--fx-teal); box-shadow:0 0 14px rgba(0,212,180,.7); animation-duration:.8s; animation-delay:.05s; }

/* Partículas: notas musicales + formas arcade. Profundidad por capa (parallax). */
.bfx-p{
  font-family:'Inter',system-ui,sans-serif; font-weight:700; line-height:1;
  transform:translate(-50%,-50%);
  animation:bfxFly var(--dur,.8s) cubic-bezier(.18,.7,.3,1) forwards;
}
@keyframes bfxFly{
  0%{ transform:translate(-50%,-50%) translate(0,0) rotate(0deg) scale(.4); opacity:0; }
  18%{ opacity:1; }
  100%{ transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) rotate(var(--rot,180deg)) scale(var(--sc,1)); opacity:0; }
}
/* capas de profundidad (parallax): near grande/nítida, far pequeña/difusa */
.bfx-p.near{ filter:drop-shadow(0 0 8px currentColor); }
.bfx-p.mid { opacity:.92; }
.bfx-p.far { filter:blur(.6px); }

/* Ecualizador que salta junto al click */
.bfx-eq{ transform:translate(-50%,-100%); display:flex; gap:3px; align-items:flex-end; }
.bfx-eq i{
  width:4px; height:6px; border-radius:2px; background:var(--fx-teal);
  box-shadow:0 0 8px rgba(0,212,180,.8);
  animation:bfxEq .5s ease-out forwards; transform-origin:bottom;
}
@keyframes bfxEq{
  0%{ transform:scaleY(.2); opacity:0; }
  30%{ transform:scaleY(var(--h,3)); opacity:1; }
  100%{ transform:scaleY(.2); opacity:0; }
}

/* Rebote arcade del botón pulsado */
.bfx-bounce{ animation:bfxBounce .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes bfxBounce{
  0%{ transform:scale(1); } 40%{ transform:scale(.93); } 70%{ transform:scale(1.05); } 100%{ transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .bfx-p, .bfx-eq, .bfx-ring.r2{ display:none !important; }
  .bfx-bounce{ animation:none; }
  .bfx-ring{ animation-duration:.3s; }
}