/* 4dsHub Music System v44 — wider, bolder logo-backed audio reactive wave */
:root{
  --ds-music-control-size:44px;
  --ds-music-control-top:max(18px, env(safe-area-inset-top));
  --ds-music-control-right:max(20px, env(safe-area-inset-right));
}

/* Kill every trace of the former player if stale markup survives a cache. */
#audio-control,
.audio-control,
.audio-player,
.music-player,
.music-controls,
.recep-audio-control,
.recep-music-player,
[data-audio-control],
[data-music-player]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Keep the real site logo and menu above the sound sculpture. */
.hero-header{isolation:isolate;}
.hero-header .logo-link,
.hero-header .nav{
  position:relative!important;
  z-index:12!important;
}

#ds-music-toggle{
  position:fixed;
  top:var(--ds-music-control-top);
  right:var(--ds-music-control-right);
  width:var(--ds-music-control-size);
  height:var(--ds-music-control-size);
  z-index:2147483200;
  display:grid;
  place-items:center;
  padding:0;
  margin:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(12,12,12,.46);
  color:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px) saturate(118%);
  backdrop-filter:blur(14px) saturate(118%);
  box-shadow:0 10px 30px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.025);
  cursor:pointer;
  outline:none;
  transition:transform .26s ease,border-color .26s ease,background-color .26s ease,color .26s ease,opacity .26s ease;
}
#ds-music-toggle:hover{
  transform:scale(1.055);
  border-color:rgba(255,255,255,.25);
  background:rgba(18,18,18,.62);
  color:#fff;
}
#ds-music-toggle:active{transform:scale(.965)}
#ds-music-toggle:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.22),0 10px 30px rgba(0,0,0,.24)}
#ds-music-toggle svg{width:21px;height:21px;display:block;overflow:visible}
#ds-music-toggle .ds-speaker,
#ds-music-toggle .ds-wave,
#ds-music-toggle .ds-slash{
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
#ds-music-toggle .ds-wave{opacity:.82;transform-origin:13px 12px}
#ds-music-toggle:not(.is-muted):not(.is-idle) .ds-wave-1{animation:dsMusicWave 1.45s ease-in-out infinite alternate}
#ds-music-toggle:not(.is-muted):not(.is-idle) .ds-wave-2{animation:dsMusicWave 1.45s ease-in-out -.55s infinite alternate}
#ds-music-toggle .ds-slash{opacity:0;transition:opacity .24s ease}
#ds-music-toggle.is-muted .ds-wave,
#ds-music-toggle.is-idle .ds-wave{opacity:.22;animation:none!important}
#ds-music-toggle.is-muted .ds-slash{opacity:.92}
#ds-music-toggle::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:2px;
  height:2px;
  margin-left:-1px;
  border-radius:50%;
  background:rgba(255,255,255,.58);
  opacity:.66;
  transition:opacity .3s ease,transform .3s ease;
}
#ds-music-toggle.is-muted::after,
#ds-music-toggle.is-idle::after{opacity:.18;transform:scale(.72)}

@keyframes dsMusicWave{
  from{opacity:.45;transform:scale(.94)}
  to{opacity:.92;transform:scale(1.04)}
}

/* Large, real-audio-reactive wave, positioned directly behind the 4dsHub logo. */
#ds-music-spectrum{
  position:absolute;
  left:0;
  top:0;
  width:820px;
  height:210px;
  z-index:2;
  pointer-events:none;
  opacity:.99;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 14px rgba(90,90,90,.10));
  transform:translateZ(0);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 5%,#000 18%,#000 82%,rgba(0,0,0,.12) 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 5%,#000 18%,#000 82%,rgba(0,0,0,.12) 95%,transparent 100%);
  transition:opacity .7s ease;
}
#ds-music-spectrum.is-silent{opacity:.48}

@media (max-width:760px){
  :root{
    --ds-music-control-size:38px;
    --ds-music-control-top:max(12px, env(safe-area-inset-top));
    --ds-music-control-right:max(12px, env(safe-area-inset-right));
  }
  #ds-music-toggle svg{width:18px;height:18px}
  #ds-music-spectrum{
    height:134px;
    opacity:.94;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 12%,#000 22%,#000 78%,rgba(0,0,0,.18) 88%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 12%,#000 22%,#000 78%,rgba(0,0,0,.18) 88%,transparent 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  #ds-music-toggle,
  #ds-music-toggle .ds-wave{animation:none!important;transition:none!important}
}