/* MidWave Effect — overlay forced to the true center of the viewport.
   This file intentionally uses the ID selector with !important to override
   any existing styles (including potential bottom-fixed visualizer styles).
*/

#midWave{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 50vh !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;

  height: 80px !important;
  pointer-events: none !important;
  overflow: visible !important;

  /* Layering: keep MidWave strictly in the background.
     - bgLayer is z=0
     - bgShade is z=1
     - site UI starts at z>=2, modals z>=50
     MidWave must never appear above UI/videos/modals.
  */
  z-index: 0 !important;

  opacity: 0;
  transition: opacity .25s ease;
}

/* Slight transparency so it doesn't overpower the UI */
#midWave.is-enabled{ opacity: 1; }

#midWave canvas{
  width: 100%;
  height: 100%;
  display: block;
}