/* ==========================================================================
   WIZKET — floating music button (bottom-right). Prefix: mx-
   Orange only while sound is playing (the equalizer bars).
   ========================================================================== */
.mx {
  position: fixed; right: clamp(1rem, 2.2vw, 2rem); bottom: clamp(1rem, 2.2vw, 2rem); z-index: 900;
  display: inline-flex; align-items: center; gap: 0.75rem; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text); -webkit-tap-highlight-color: transparent;
}
.mx__label {
  order: -1; padding: 0.55rem 0.85rem; border-radius: 999px; white-space: nowrap;
  font: 500 0.6875rem/1 "Inter", sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text); background: var(--surface); border: 1px solid var(--line2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.mx:hover .mx__label, .mx:focus-visible .mx__label { opacity: 1; transform: none; }
.mx__btn {
  position: relative; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--nav-bg-scrolled); border: 1px solid var(--line2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--nav-shadow), var(--nav-highlight);
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--s, 1));
  transition: transform 0.4s var(--ease-out), border-color 0.3s;
}
.mx:hover .mx__btn { --s: 1.07; border-color: var(--text); }
.mx:active .mx__btn { --s: 0.94; }

/* entrance: pops in a moment after the page settles */
.mx { animation: mx-in 0.9s var(--ease-out) 1.6s both; }
@keyframes mx-in { from { opacity: 0; transform: translateY(18px) scale(0.7); } to { opacity: 1; transform: none; } }

/* sound waves: soft rings leave the button — muted "tap me" when off, orange when playing */
.mx__wave { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--muted); opacity: 0; pointer-events: none; animation: mx-wave 3.8s ease-out infinite; }
.mx__wave:nth-of-type(2) { animation-delay: 1.9s; }
.mx.is-on .mx__wave { border-color: var(--accent); animation-duration: 2.2s; }
.mx.is-on .mx__wave:nth-of-type(2) { animation-delay: 1.1s; }
@keyframes mx-wave { 0% { transform: scale(1); opacity: 0.45; } 70%, 100% { transform: scale(1.75); opacity: 0; } }

/* click ripple */
.mx__rip { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0.35; pointer-events: none; animation: mx-rip 0.7s var(--ease-out) forwards; }
@keyframes mx-rip { to { transform: scale(2.1); opacity: 0; } }
.mx:focus-visible { outline: none; }
.mx:focus-visible .mx__btn { outline: 2px solid var(--accent); outline-offset: 3px; }

/* equalizer */
.mx__bars { display: flex; align-items: center; gap: 3px; height: 1.1rem; }
.mx__bars i { display: block; width: 2.5px; height: 28%; border-radius: 2px; background: currentColor; transform-origin: center; transition: background-color 0.3s, height 0.4s var(--ease-out); }
.mx__bars i:nth-child(2) { height: 55%; } .mx__bars i:nth-child(3) { height: 40%; } .mx__bars i:nth-child(4) { height: 70%; }
.mx.is-on .mx__bars i { background: var(--accent); height: 100%; transform: scaleY(0.3); animation: mx-eq 1.1s ease-in-out infinite; }
.mx.is-on .mx__bars i:nth-child(2) { animation-delay: -0.35s; animation-duration: 0.9s; }
.mx.is-on .mx__bars i:nth-child(3) { animation-delay: -0.7s; animation-duration: 1.25s; }
.mx.is-on .mx__bars i:nth-child(4) { animation-delay: -0.2s; animation-duration: 1s; }
@keyframes mx-eq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
/* muted slash when off */
.mx__btn::after {
  content: ""; position: absolute; width: 1.5px; height: 1.5rem; background: var(--muted); border-radius: 2px;
  transform: rotate(45deg) scaleY(1); transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
.mx.is-on .mx__btn::after { transform: rotate(45deg) scaleY(0); opacity: 0; }

@media (max-width: 640px) {
  .mx { right: 1rem; bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }   /* lifted clear of the phone's bottom edge and the page footer */
  .mx__btn { width: 2.9rem; height: 2.9rem; }
  .mx__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.wz-full-motion) .mx { animation: none; } html:not(.wz-full-motion) .mx__wave, html:not(.wz-full-motion) .mx__rip { display: none; } html:not(.wz-full-motion) .mx.is-on .mx__bars i { animation: none; transform: scaleY(0.7); } html:not(.wz-full-motion) .mx__btn, html:not(.wz-full-motion) .mx__label { transition: none; } }