/*
 * Compact AziluM adaptation of "Bongo Cat Codes #2 - Jamming".
 * The complete illustration stays local and uses no external resources.
 */

.az-bongo {
  --az-bongo-bg: #080a25;
  --az-bongo-orange: #ff9828;
  --az-bongo-pink: #f41172;
  --az-bongo-magenta: #df38cf;
  --az-bongo-purple: #8757ff;
  --az-bongo-cyan: #69c9ff;
  position: relative;
  overflow: hidden;
  display: grid;
  width: 100%;
  height: 116px;
  margin: -2px 0 23px;
  border-bottom: 1px solid rgba(148, 87, 255, .23);
  place-items: end center;
}

.az-bongo::before {
  position: absolute;
  right: 7%;
  bottom: -41px;
  left: 7%;
  height: 86px;
  border-radius: 50%;
  content: "";
  background: radial-gradient(ellipse, rgba(129, 77, 255, .22), transparent 69%);
  pointer-events: none;
}

.az-bongo__scene {
  display: block;
  width: min(270px, 88%);
  height: auto;
  max-height: 113px;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(120, 74, 255, .16));
}

#az-bongo-cat {
  fill: var(--az-bongo-bg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

#az-bongo-cat .laptop-cover,
#az-bongo-cat .headphone .band {
  fill: none;
}

#az-bongo-cat .paw,
#az-bongo-cat .head {
  stroke: var(--az-bongo-orange);
}

#az-bongo-cat .laptop-keyboard {
  stroke-width: 2;
}

#az-bongo-cat .terminal-code {
  stroke-width: 5;
}

#az-bongo-cat .music .note,
#az-bongo-cat .laptop-base,
#az-bongo-cat .laptop-cover,
#az-bongo-cat .paw .pads {
  stroke: var(--az-bongo-pink);
}

#az-bongo-cat .table line,
#az-bongo-cat .headphone .band,
#az-bongo-cat .headphone .speaker path:nth-child(3) {
  stroke: var(--az-bongo-magenta);
}

#az-bongo-cat .terminal-frame,
#az-bongo-cat .laptop-keyboard,
#az-bongo-cat .headphone .speaker path:nth-child(2) {
  stroke: var(--az-bongo-purple);
}

#az-bongo-cat .terminal-code,
#az-bongo-cat .headphone .speaker path:first-child {
  stroke: var(--az-bongo-cyan);
}

#az-bongo-cat .paw .up,
#az-bongo-cat .music .note {
  opacity: 0;
}

#az-bongo-cat .music .note {
  transform-box: fill-box;
  transform-origin: center;
  stroke: var(--az-note-color, var(--az-bongo-pink));
}

#az-bongo-cat .terminal-code line {
  stroke-dasharray: var(--az-code-length, 1);
  stroke-dashoffset: var(--az-code-length, 1);
}

.az-bongo.is-playing #az-bongo-cat .paw-left .up,
.az-bongo.is-playing #az-bongo-cat .paw-right .down {
  animation: az-bongo-show-first .38s steps(1, end) infinite;
}

.az-bongo.is-playing #az-bongo-cat .paw-left .down,
.az-bongo.is-playing #az-bongo-cat .paw-right .up {
  animation: az-bongo-show-second .38s steps(1, end) infinite;
}

.az-bongo.is-playing #az-bongo-cat .music .note {
  animation: az-bongo-note var(--az-note-duration, 2s) var(--az-note-delay, 0s) linear infinite;
}

.az-bongo.is-playing #az-bongo-cat .terminal-code line {
  animation: az-bongo-code 2.7s var(--az-code-delay, 0s) linear infinite;
}

@keyframes az-bongo-show-first {
  0%, 49.99% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes az-bongo-show-second {
  0%, 49.99% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes az-bongo-note {
  0% {
    opacity: 0;
    transform: translate(0, 10px) scale(.2) rotate(0);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--az-note-x, 16px), -74px) scale(1) rotate(var(--az-note-rotation, 22deg));
  }
}

@keyframes az-bongo-code {
  0% { stroke-dashoffset: var(--az-code-length, 1); opacity: .25; }
  14%, 48% { stroke-dashoffset: 0; opacity: 1; }
  64%, 100% { stroke-dashoffset: calc(var(--az-code-length, 1) * -1); opacity: .32; }
}

@media (max-width: 680px) {
  .az-bongo {
    height: 108px;
    margin-bottom: 19px;
  }

  .az-bongo__scene {
    width: min(250px, 92%);
    max-height: 105px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .az-bongo #az-bongo-cat .paw .up,
  .az-bongo #az-bongo-cat .music .note,
  .az-bongo #az-bongo-cat .terminal-code line {
    animation: none;
  }

  .az-bongo #az-bongo-cat .paw .up {
    opacity: 0;
  }

  .az-bongo #az-bongo-cat .paw .down,
  .az-bongo #az-bongo-cat .terminal-code line {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .az-bongo #az-bongo-cat .music .note:nth-child(-n+2) {
    opacity: .5;
    transform: none;
  }
}