:root {
  --logo-anim-time: 2.5s;
}

.bplo-logo {
  display: block;
  margin: 0 auto;
  width: 60px;
  padding-top: 0.3em;
  /*padding: 1rem 2rem;*/
  /*border-radius: 1.5rem;*/
  /*background-color: var(--color-bg-accent);*/

  & .bplo-b,
  & .bplo-p,
  & .bplo-l,
  & .bplo-o {
    stroke: var(--color-text-medium);
    animation-direction: alternate-reverse;
    animation-iteration-count: 1;
    transform-origin: center;
    transform-box: fill-box;
  }
}

@keyframes b_line {
  0%,  20%, 40%, 60%  { transform: translate(0, 0); }
  80%, 90%, 95%, 100% { transform: translate(0, 0) scaleY(0); }
}

@keyframes b_circ {
  0%,  20%, 40%, 60%, 80% { transform: translate(0, 0) scale(1);   fill: transparent; }
  90%, 95%, 100%          { transform: translate(0, 0) scale(0.1); fill: var(--color-text-medium); }
}

@keyframes p_line {
  0%, 20%, 40%         { transform: translate(0, 0); }
  60%                  { transform: translateX(-38px); }
  80%, 90%, 95%, 100%  { transform: translateX(-38px) scaleY(0); }
}

@keyframes p_circ {
  0%, 20%, 40%   { transform: translate(    0, 0) scale(1);   fill: transparent; }
  60%, 80%       { transform: translate(-38px, 0) scale(1);   fill: transparent; }
  90%, 95%, 100% { transform: translate(-38px, 0) scale(0.1); fill: var(--color-text-medium); }
}

@keyframes l_line {
  0%, 20%  { transform: translate(0, 0); }
  40%, 60% { transform: translateX(-80px); }
  80%, 90%, 95%, 100%  { transform: translateX(-80px) scaleY(0); }
}

@keyframes o_circ {
  0%             { transform: translate(    0, 0) scale(1); fill: transparent; }
  20%            { transform: translate(-10px, 0) scale(1); fill: transparent; }
  40%, 60%, 80%  { transform: translate(-88px, 0) scale(1); fill: transparent; }
  90%, 95%, 100% { transform: translate(-88px, 0) scale(0.1); fill: var(--color-text-medium); }
}

line.bplo-b { animation: var(--logo-anim-time) b_line ease; }
line.bplo-p { animation: var(--logo-anim-time) p_line ease; }
line.bplo-l { animation: var(--logo-anim-time) l_line ease; }

circle.bplo-b { animation: var(--logo-anim-time) b_circ ease; }
circle.bplo-p { animation: var(--logo-anim-time) p_circ ease; }
circle.bplo-o { animation: var(--logo-anim-time) o_circ ease; }