:root {
  --erfurt-wave-ink: #080308;
  --erfurt-wave-plum: #31051f;
  --erfurt-wave-red: #ff2d62;
  --erfurt-wave-coral: #ff765f;
  --erfurt-wave-violet: #9a3cff;
  --erfurt-wave-cream: #fff8f0;
}

.wave-player-wrapper.erfurt-liquid-wave-shell,
.waveform-container.erfurt-liquid-wave-host {
  position: relative !important;
  min-width: 0 !important;
  border-radius: clamp(0.95rem, 1.6vw, 1.35rem) !important;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 45, 98, 0.26), transparent 30%),
    radial-gradient(circle at 82% 30%, rgba(154, 60, 255, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(8, 3, 8, 0.98), rgba(49, 5, 31, 0.94) 56%, rgba(11, 4, 13, 0.98)) !important;
  border: 1px solid rgba(255, 93, 145, 0.66) !important;
  box-shadow:
    0 20px 54px rgba(7, 3, 8, 0.38),
    0 0 32px rgba(255, 45, 98, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
}

.waveform-container.erfurt-liquid-wave-host {
  display: block !important;
  height: clamp(9.5rem, 16vw, 13.5rem) !important;
  min-height: clamp(9.5rem, 16vw, 13.5rem) !important;
  margin: 0 !important;
}

.waveform-container.erfurt-liquid-wave-host > :not(.erfurt-liquid-wave) {
  opacity: 0 !important;
  pointer-events: none !important;
}

.erfurt-liquid-wave {
  position: absolute !important;
  inset: clamp(0.55rem, 1.4vw, 0.9rem) !important;
  z-index: 5 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: clamp(0.75rem, 1.4vw, 1.05rem) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 27%),
    radial-gradient(circle at 50% 52%, rgba(255, 45, 98, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(3, 1, 4, 0.78), rgba(17, 4, 19, 0.72)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 119, 180, 0.22),
    inset 0 -24px 45px rgba(255, 45, 98, 0.1) !important;
  pointer-events: none !important;
}

.erfurt-liquid-wave::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 42%, rgba(255, 118, 95, 0.26), transparent 18%),
    radial-gradient(circle at 76% 34%, rgba(154, 60, 255, 0.32), transparent 20%),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(255, 45, 98, 0.2) 31px 32px, transparent 33px 65px) !important;
  opacity: 0.8 !important;
  mix-blend-mode: screen;
}

.erfurt-liquid-wave::after {
  content: "" !important;
  position: absolute !important;
  inset: 10% 0 auto !important;
  height: 80% !important;
  background:
    radial-gradient(circle, rgba(255, 248, 240, 0.92) 0 1px, transparent 2px) 0 0 / 46px 36px,
    radial-gradient(circle, rgba(255, 45, 98, 0.8) 0 1px, transparent 2px) 18px 20px / 62px 42px !important;
  opacity: 0.26 !important;
  filter: drop-shadow(0 0 8px rgba(255, 45, 98, 0.7));
  animation: erfurtLiquidSparkles 4.8s linear infinite paused;
}

.erfurt-liquid-wave-svg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.erfurt-wave-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
}

.erfurt-wave-line-back {
  stroke-width: 42;
  opacity: 0.42;
  stroke-dasharray: 980 220;
}

.erfurt-wave-line-mid {
  stroke-width: 28;
  opacity: 0.72;
  stroke-dasharray: 860 340;
}

.erfurt-wave-line-front {
  stroke-width: 16;
  opacity: 0.98;
  stroke-dasharray: 760 440;
}

.erfurt-wave-line-core {
  stroke-width: 12;
  opacity: 0.9;
}

.erfurt-liquid-spikes {
  position: absolute !important;
  inset: 10% 3% !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: none !important;
}

.erfurt-liquid-spikes span {
  width: max(2px, 0.16vw) !important;
  height: var(--spike-height) !important;
  min-height: 12% !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 45, 98, 0.95) 34%, rgba(255, 248, 240, 0.9) 50%, rgba(154, 60, 255, 0.9) 66%, transparent 100%) !important;
  box-shadow: 0 0 10px rgba(255, 45, 98, 0.64), 0 0 18px rgba(154, 60, 255, 0.4) !important;
  opacity: 0.7 !important;
  transform: scaleY(0.72);
  transform-origin: center;
  animation: erfurtLiquidSpike 0.74s ease-in-out infinite alternate paused;
  animation-delay: var(--spike-delay);
}

.erfurt-liquid-reflection {
  position: absolute !important;
  right: 8% !important;
  bottom: 7% !important;
  z-index: 2 !important;
  width: min(38%, 18rem) !important;
  height: 22% !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 118, 95, 0.48), transparent 62%),
    radial-gradient(ellipse at 46% 50%, rgba(154, 60, 255, 0.35), transparent 70%) !important;
  filter: blur(0.5px);
  opacity: 0.72 !important;
  transform: rotate(-3deg);
}

.erfurt-wave-playing .erfurt-wave-line-back {
  animation: erfurtLiquidTravel 3.4s linear infinite, erfurtLiquidSwell 1.6s ease-in-out infinite alternate;
}

.erfurt-wave-playing .erfurt-wave-line-mid {
  animation: erfurtLiquidTravel 2.7s linear infinite reverse, erfurtLiquidSwell 1.08s ease-in-out infinite alternate;
}

.erfurt-wave-playing .erfurt-wave-line-front {
  animation: erfurtLiquidTravel 1.9s linear infinite, erfurtLiquidSwell 0.84s ease-in-out infinite alternate;
}

.erfurt-wave-playing .erfurt-wave-line-core {
  animation: erfurtLiquidCore 1.08s ease-in-out infinite alternate;
}

.erfurt-wave-playing .erfurt-liquid-spikes span,
.erfurt-wave-playing .erfurt-liquid-wave::after {
  animation-play-state: running !important;
}

.erfurt-liquid-wave-button {
  border: 1px solid rgba(255, 248, 240, 0.86) !important;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.55), transparent 28%),
    linear-gradient(135deg, #ff2d62 0%, #b00058 48%, #7b2cff 100%) !important;
  box-shadow: 0 16px 34px rgba(7, 3, 8, 0.38), 0 0 28px rgba(255, 45, 98, 0.46) !important;
}

.erfurt-liquid-wave-button.erfurt-playing,
.erfurt-wave-playing + .erfurt-liquid-wave-button {
  box-shadow: 0 18px 38px rgba(7, 3, 8, 0.38), 0 0 34px rgba(255, 45, 98, 0.72), 0 0 54px rgba(154, 60, 255, 0.36) !important;
}

body.erfurt-final-home.erfurt-home-polish-v1 main .erfurt-audio-card .waveform-container:has(.erfurt-liquid-wave)::before {
  content: none !important;
}

body.erfurt-final-home.erfurt-home-polish-v1 main .erfurt-audio-card .waveform-container > .erfurt-liquid-wave {
  opacity: 1 !important;
}

body.erfurt-final-home.erfurt-home-polish-v1 main .erfurt-custom-wave {
  display: none !important;
}

@keyframes erfurtLiquidTravel {
  to {
    stroke-dashoffset: -1200;
  }
}

@keyframes erfurtLiquidSwell {
  from {
    transform: scaleY(0.76) translateY(4px);
  }
  to {
    transform: scaleY(1.16) translateY(-5px);
  }
}

@keyframes erfurtLiquidCore {
  from {
    transform: scaleY(0.86);
    opacity: 0.74;
  }
  to {
    transform: scaleY(1.08);
    opacity: 0.96;
  }
}

@keyframes erfurtLiquidSpike {
  from {
    transform: scaleY(0.54);
    opacity: 0.42;
  }
  to {
    transform: scaleY(1.28);
    opacity: 0.9;
  }
}

@keyframes erfurtLiquidSparkles {
  to {
    background-position: 46px 36px, 80px 62px;
  }
}

@media (max-width: 767px) {
  .waveform-container.erfurt-liquid-wave-host {
    height: clamp(8rem, 42vw, 10.5rem) !important;
    min-height: clamp(8rem, 42vw, 10.5rem) !important;
  }

  .erfurt-liquid-spikes {
    inset-inline: 5% !important;
  }

  .erfurt-liquid-spikes span {
    width: 2px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .erfurt-liquid-wave *,
  .erfurt-liquid-wave::after {
    animation: none !important;
  }
}