/* ============================================================
   SLEEK AUDIO PLAYER
   Namespaced custom properties with theme-agnostic defaults —
   a consuming theme overrides these to make it look native
   instead of forking this stylesheet. See this project's
   studio.theme.wp for the bridge that maps its own design
   tokens onto these variables.
   ============================================================ */

.sleek-audio-player {
  --sleek-audio-wave-color:     #888888;
  --sleek-audio-progress-color: #ffffff;
  --sleek-audio-loading-color:  #888888;
  --sleek-audio-ease:           ease-in-out;
  --sleek-audio-height:         4rem;

  display:     flex;
  align-items: center;
  gap:         1.6rem;
  width:       100%;
}

/* ============================================================
   PLAY / PAUSE TOGGLE — left of the player, CSS-drawn icons
   (no image asset, matches the theme's plain-glyph convention
   used elsewhere for modal controls).
   ============================================================ */

.sleek-audio-player__toggle {
  position:    relative;
  flex-shrink: 0;
  width:       3.2rem;
  height:      3.2rem;
  border:      none;
  background:  none;
  padding:     0;
  cursor:      pointer;
  color:       var(--sleek-audio-progress-color);
}

.sleek-audio-player__toggle::before {
  content:      '';
  position:     absolute;
  top:          50%;
  left:         50%;
  width:        0;
  height:       0;
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.1rem;
  border-color: transparent transparent transparent currentColor;
  transform:    translate(-40%, -50%);
}

.sleek-audio-player__toggle::after {
  content:    '';
  display:    none;
  position:   absolute;
  top:        50%;
  left:       50%;
  width:      1rem;
  height:     1.2rem;
  transform:  translate(-50%, -50%);
  background: currentColor;
  box-shadow: 0.6rem 0 0 currentColor;
}

.sleek-audio-player.is-playing .sleek-audio-player__toggle::before { display: none;  }
.sleek-audio-player.is-playing .sleek-audio-player__toggle::after  { display: block; }

/* ============================================================
   WAVEFORM + LOADING BAR
   Both occupy the exact same box; the loading bar is visible
   first, then cross-fades into the rendered waveform once
   WaveSurfer's `ready` event fires (player.js wires this via
   the is-ready class, not inline styles, so the theme's own
   CSS can still override transition timing if ever needed).
   ============================================================ */

.sleek-audio-player__visual {
  position: relative;
  flex:     1 1 auto;
  height:   var(--sleek-audio-height);
}

.sleek-audio-player__wave,
.sleek-audio-player__loading {
  position:   absolute;
  inset:      0;
  transition: opacity 0.6s var(--sleek-audio-ease);
}

.sleek-audio-player__wave {
  opacity: 0;
}

.sleek-audio-player.is-ready .sleek-audio-player__wave {
  opacity: 1;
}

.sleek-audio-player.is-ready .sleek-audio-player__loading {
  opacity:        0;
  pointer-events: none;
}

.sleek-audio-player__loading {
  display:     flex;
  align-items: center;
  overflow:    hidden;
}

.sleek-audio-player__loading::before {
  content:    '';
  display:    block;
  width:      100%;
  height:     0.2rem;
  background: var(--sleek-audio-loading-color);
  opacity:    0.25;
}

.sleek-audio-player__loading::after {
  content:    '';
  position:   absolute;
  top:        50%;
  left:       -30%;
  width:      30%;
  height:     0.2rem;
  background: var(--sleek-audio-loading-color);
  transform:  translateY(-50%);
  animation:  sleek-audio-loading-sweep 1.2s ease-in-out infinite;
}

@keyframes sleek-audio-loading-sweep {
  0%   { left: -30%;  }
  100% { left: 100%;  }
}