/* Pure-CSS violin illustration. Same layered-shapes technique as
   guitar.css/bass.css, scaled down and re-proportioned: violins are
   smaller and narrower-waisted than a guitar, with pointed corner
   "bouts" and f-holes instead of a round soundhole. */

.cssviolin-wrap {
  width: 150px;
  max-width: 100%;
  margin: 30px auto 0;
}

.cssviolin {
  position: relative;
  width: 150px;
  height: 400px;
  transform-origin: 50% 0%;
  animation: cssviolin-sway 5.5s ease-in-out infinite;
}

@keyframes cssviolin-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@media (max-width: 767px) {
  .cssviolin-wrap {
    transform: scale(0.75);
    transform-origin: top center;
    margin-top: 10px;
  }
}

/* Scroll (stylized as a small curled shell) + pegbox */
.cssviolin__scroll {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  background-color: #5c3a1a;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.18);
  z-index: 4;
}

.cssviolin__scroll::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #e1f3fd;
}

.cssviolin__pegbox {
  position: absolute;
  top: 26px;
  left: 50%;
  width: 20px;
  height: 46px;
  margin-left: -10px;
  background-color: #3d2612;
  z-index: 3;
}

.cssviolin__peg {
  position: absolute;
  width: 13px;
  height: 5px;
  background-color: #d8b26a;
  border-radius: 2px;
}

.cssviolin__peg--1 { top: 6px; left: -11px; }
.cssviolin__peg--2 { top: 18px; right: -11px; }
.cssviolin__peg--3 { top: 30px; left: -11px; }

/* Neck + fingerboard */
.cssviolin__neck {
  position: absolute;
  top: 70px;
  left: 50%;
  width: 18px;
  height: 150px;
  margin-left: -9px;
  background: linear-gradient(90deg, #2a1a0d 0%, #3d2612 50%, #2a1a0d 100%);
  z-index: 2;
}

/* Strings */
.cssviolin__string {
  position: absolute;
  top: 8px;
  width: 1px;
  height: 350px;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 4;
  transform-origin: top center;
  animation: cssviolin-vibrate 1.8s ease-in-out infinite;
}

.cssviolin__string--1 { left: 42%; animation-delay: 0s; }
.cssviolin__string--2 { left: 47%; animation-delay: 0.1s; }
.cssviolin__string--3 { left: 53%; animation-delay: 0.2s; }
.cssviolin__string--4 { left: 58%; animation-delay: 0.3s; }

@keyframes cssviolin-vibrate {
  0%, 100% { transform: scaleX(1); opacity: 0.8; }
  50% { transform: scaleX(3); opacity: 0.3; }
}

/* Body: narrower waist than the guitar, pointed corner bouts */
.cssviolin__body {
  position: absolute;
  top: 210px;
  left: 0;
  width: 150px;
  height: 190px;
}

.cssviolin__upper-bout {
  position: absolute;
  top: 0;
  left: 50%;
  width: 108px;
  height: 92px;
  margin-left: -54px;
  border-radius: 50%;
  background: linear-gradient(160deg, #c97a3d, #8b5a2b);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
}

.cssviolin__lower-bout {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 132px;
  height: 112px;
  margin-left: -66px;
  border-radius: 50%;
  background: linear-gradient(160deg, #c97a3d, #6e4420);
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.2);
}

.cssviolin__waist {
  position: absolute;
  top: 66px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #ffffff;
}

.cssviolin__waist--left { left: -12px; }
.cssviolin__waist--right { right: -12px; }

/* Corner "points" at the waist, a violin-specific detail a plain guitar
   figure-8 doesn't have */
.cssviolin__corner {
  position: absolute;
  top: 78px;
  width: 8px;
  height: 14px;
  background-color: #8b5a2b;
}

.cssviolin__corner--left { left: 8px; transform: rotate(20deg); }
.cssviolin__corner--right { right: 8px; transform: rotate(-20deg); }

/* F-holes */
.cssviolin__fhole {
  position: absolute;
  top: 62px;
  width: 6px;
  height: 46px;
  background-color: #2b1b12;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.cssviolin__fhole--left { left: 34px; transform: rotate(8deg); }
.cssviolin__fhole--right { right: 34px; transform: rotate(-8deg); }

.cssviolin__chinrest {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 46px;
  height: 20px;
  margin-left: -23px;
  background-color: #1e1108;
  border-radius: 0 0 16px 16px;
}

/* Bow, drawn diagonally across the body */
.cssviolin__bow {
  position: absolute;
  bottom: 40px;
  left: -46px;
  width: 220px;
  height: 6px;
  background: linear-gradient(90deg, #3d2612, #d8c9a3 8%, #d8c9a3 92%, #3d2612);
  border-radius: 3px;
  transform: rotate(-32deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}