.motion-135bpm-draw-line {
  --m135-color: #14204f;
  position: relative;
  width: 100%;
  height: clamp(96px, 15vw, 190px);
  min-height: 96px;
  overflow: visible;
}

.motion-135bpm-draw-line .m135-line-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.motion-135bpm-draw-line .m135-line-path {
  fill: none;
  stroke: var(--m135-color);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter:
    drop-shadow(0 10px 18px rgba(20, 32, 79, 0.11))
    drop-shadow(0 0 10px rgba(20, 32, 79, 0.05));
}

.motion-135bpm-draw-line .m135-line-logo {
  position: absolute;
  top: 50%;
  right: 0;
  width: clamp(58px, 9vw, 104px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(14px) scale(0.94);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 10px 16px rgba(20, 32, 79, 0.12));
}

.motion-135bpm-draw-line .m135-line-logo img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .motion-135bpm-draw-line .m135-line-path {
    stroke-dashoffset: 0 !important;
  }

  .motion-135bpm-draw-line .m135-line-logo {
    opacity: 1 !important;
    transform: translateY(-50%) !important;
  }
}