/* ============================================================
   PURE-CSS ALTO SAXOPHONE — full rebuild
   ============================================================
   Complete rebuild replacing the earlier "tube with circles glued on"
   version. Every tube segment (mouthpiece, neck, body, bow, bell) is
   built from chained, individually-rotated pieces whose pivot points
   were computed with real trigonometry, so each segment's rotated end
   lands exactly where the next segment starts — no fudged overlaps.
   The body carries a full key mechanism: posts, rods, key cups with
   inset pearls, palm keys, side keys, a pinky/spatula cluster, braces,
   and screws. The bell gets a chamfered flare, a rolled rim, a dark
   interior with an inset shadow, and two engraved decorative rings.

   Brass surfaces use `.sax-metal` (a diagonal highlight sweep layered
   over a multi-stop horizontal gradient, simulating light wrapping a
   polished cylinder) rather than a single flat linear-gradient. Key
   cups use `.sax-key-cup` (an off-center radial-gradient, i.e. a
   domed-button look). Pearls and screws get their own small radial
   treatments too. */

:root {
  --brass-shadow: #3c2410;
  --brass-dark: #6b4518;
  --brass-mid: #a3711f;
  --brass-warm: #c98a2e;
  --brass-bright: #e8b74a;
  --brass-hi: #f6d789;
  --brass-shine: #fff6dd;
}

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

.csssax {
  position: relative;
  width: 300px;
  height: 520px;
  transform-origin: 50% 100%;
  animation: csssax-sway 5.5s ease-in-out infinite;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.28));
}

@keyframes csssax-sway {
  0%, 100% { transform: rotate(15deg); }
  50% { transform: rotate(20deg); }
}

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

/* Shared surface treatments -------------------------------------- */

.sax-metal {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.22) 80%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(90deg,
      var(--brass-shadow) 0%,
      var(--brass-dark) 12%,
      var(--brass-mid) 30%,
      var(--brass-warm) 44%,
      var(--brass-bright) 52%,
      var(--brass-hi) 58%,
      var(--brass-bright) 65%,
      var(--brass-warm) 76%,
      var(--brass-dark) 92%,
      var(--brass-shadow) 100%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
}

.sax-key-cup {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    var(--brass-shine) 0%,
    var(--brass-hi) 14%,
    var(--brass-bright) 38%,
    var(--brass-mid) 68%,
    var(--brass-dark) 90%,
    var(--brass-shadow) 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}

.sax-pearl {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fffdf6 0%, #f4edd9 55%, #d9cdae 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.sax-screw {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2f2f2, #8a8a8a 60%, #3d3d3d 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.sax-screw::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;
  height: 0.7px;
  background: rgba(0, 0, 0, 0.65);
  transform: translateY(-50%) rotate(25deg);
}

.sax-rod {
  position: absolute;
  background: linear-gradient(90deg, var(--brass-shadow), var(--brass-bright) 45%, var(--brass-shadow));
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.sax-post {
  position: absolute;
  width: 7px;
  height: 12px;
  background: linear-gradient(90deg, var(--brass-shadow), var(--brass-warm), var(--brass-shadow));
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.sax-brace {
  position: absolute;
  background: linear-gradient(90deg, var(--brass-shadow), var(--brass-mid), var(--brass-shadow));
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.sax-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid var(--brass-hi);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Mouthpiece + neck: a 7-piece chained fan --------------------------
   Each segment's bottom-center pivot is the previous segment's
   computed top-center, so the chain connects without gaps. Segment 0
   sits at the neck/body joint; segment 6 is the mouthpiece tip. */

.csssax__reed-neck-seg {
  position: absolute;
  transform-origin: 50% 100%;
}

.csssax__seg-0 { left: 107px; top: 158px; width: 26px; height: 32px; border-radius: 12px; transform: rotate(0deg); z-index: 5; }
.csssax__seg-1 { left: 107px; top: 128px; width: 26px; height: 30px; border-radius: 12px; transform: rotate(9deg); z-index: 5; }
.csssax__seg-2 { left: 111px; top: 98px;  width: 26px; height: 30px; border-radius: 12px; transform: rotate(18deg); z-index: 5; }
.csssax__seg-3 { left: 120px; top: 72px;  width: 24px; height: 28px; border-radius: 11px; transform: rotate(27deg); z-index: 5; }

/* Cork tenon: cream band between neck and mouthpiece */
.csssax__cork {
  position: absolute;
  left: 134px;
  top: 54px;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  background: linear-gradient(90deg, #b89a6a, #e9d6ab 45%, #b89a6a);
  transform: rotate(32deg);
  transform-origin: 50% 100%;
  z-index: 6;
}

.csssax__mouthpiece {
  position: absolute;
  left: 144px;
  top: 25px;
  width: 22px;
  height: 32px;
  border-radius: 10px 10px 5px 5px;
  background: linear-gradient(150deg, #565656, #2a2a2a 55%, #101010);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3), inset 0 0 6px rgba(255, 255, 255, 0.08);
  transform: rotate(42deg);
  transform-origin: 50% 100%;
  z-index: 7;
}

.csssax__reed {
  position: absolute;
  left: 3px;
  top: 4px;
  width: 6px;
  height: 24px;
  border-radius: 3px;
  background: linear-gradient(90deg, #d8c9a0, #f4ecd4 50%, #cbb98a);
}

.csssax__tip {
  position: absolute;
  left: 169px;
  top: 11px;
  width: 14px;
  height: 22px;
  border-radius: 9px 9px 3px 3px;
  background: linear-gradient(150deg, #454545, #1c1c1c 60%, #050505);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: rotate(52deg);
  transform-origin: 50% 100%;
  z-index: 8;
}

.csssax__ligature {
  position: absolute;
  left: 141px;
  top: 44px;
  width: 26px;
  height: 9px;
  border-radius: 4px;
  background: linear-gradient(90deg, #8a8a8a, #e6e6e6 45%, #6b6b6b);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transform: rotate(42deg);
  transform-origin: 50% 100%;
  z-index: 7;
}

.csssax__octave-key {
  position: absolute;
  left: 100px;
  top: 96px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  z-index: 6;
}

.csssax__neck-brace {
  position: absolute;
  left: 96px;
  top: 148px;
  width: 3px;
  height: 22px;
  transform: rotate(20deg);
  z-index: 4;
}

/* Body: gently tapered tube (34px at the top, 46px at the bottom) -- */

.csssax__body {
  position: absolute;
  left: 97px;
  top: 190px;
  width: 46px;
  height: 260px;
  clip-path: polygon(6px 0, 40px 0, 46px 260px, 0 260px);
  z-index: 3;
}

.csssax__receiver-ring {
  position: absolute;
  left: 92px;
  top: 184px;
  width: 56px;
  height: 12px;
  border-radius: 6px;
  z-index: 4;
}

/* Bow: 6-piece chained U-turn, same trig-chain technique as the neck,
   sweeping from straight-down (matching the body) through to
   straight-up (feeding into the bell). */

.csssax__bow-0 { left: 99px;  top: 450px; width: 42px; height: 26px; border-radius: 16px; transform: rotate(-30deg); transform-origin: 50% 0%; z-index: 2; }
.csssax__bow-1 { left: 112px; top: 473px; width: 42px; height: 26px; border-radius: 16px; transform: rotate(-60deg); transform-origin: 50% 0%; z-index: 2; }
.csssax__bow-2 { left: 134px; top: 486px; width: 44px; height: 24px; border-radius: 16px; transform: rotate(-90deg); transform-origin: 50% 0%; z-index: 2; }
.csssax__bow-3 { left: 158px; top: 486px; width: 44px; height: 24px; border-radius: 16px; transform: rotate(-120deg); transform-origin: 50% 0%; z-index: 2; }
.csssax__bow-4 { left: 178px; top: 474px; width: 44px; height: 22px; border-radius: 16px; transform: rotate(-150deg); transform-origin: 50% 0%; z-index: 2; }
.csssax__bow-5 { left: 189px; top: 455px; width: 44px; height: 22px; border-radius: 16px; transform: rotate(-180deg); transform-origin: 50% 0%; z-index: 2; }

.csssax__bow-0, .csssax__bow-1, .csssax__bow-2, .csssax__bow-3, .csssax__bow-4, .csssax__bow-5,
.csssax__seg-0, .csssax__seg-1, .csssax__seg-2, .csssax__seg-3 {
  position: absolute;
}

/* Bell: flare + rolled rim + dark interior + engraved rings --------- */

.csssax__bell {
  position: absolute;
  left: 151px;
  top: 302px;
  width: 120px;
  height: 130px;
  clip-path: polygon(38px 130px, 82px 130px, 100px 60px, 118px 15px, 108px 0, 12px 0, 2px 15px, 20px 60px, 38px 130px);
  z-index: 1;
}

.csssax__bell-engraving {
  position: absolute;
  left: 151px;
  width: 120px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(60, 36, 16, 0.35);
  z-index: 2;
}

.csssax__bell-engraving--1 { top: 350px; }
.csssax__bell-engraving--2 { top: 380px; }

.csssax__bell-rim {
  position: absolute;
  left: 149px;
  top: 296px;
  width: 124px;
  height: 20px;
  border-radius: 50%;
  z-index: 2;
}

.csssax__bell-opening {
  position: absolute;
  left: 163px;
  top: 300px;
  width: 96px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #2a1a0d 0%, #120b05 75%);
  box-shadow: inset 0 5px 8px rgba(0, 0, 0, 0.8);
  z-index: 3;
}

/* Key mechanism, laid along the body's front face ------------------- */

.csssax__key {
  position: absolute;
  z-index: 6;
}

.csssax__key--main-1 { left: 106px; top: 216px; width: 22px; height: 22px; }
.csssax__key--main-2 { left: 118px; top: 246px; width: 22px; height: 22px; }
.csssax__key--main-3 { left: 106px; top: 276px; width: 22px; height: 22px; }
.csssax__key--main-4 { left: 108px; top: 316px; width: 20px; height: 20px; }
.csssax__key--main-5 { left: 120px; top: 344px; width: 20px; height: 20px; }
.csssax__key--main-6 { left: 108px; top: 372px; width: 20px; height: 20px; }

.csssax__pearl {
  position: absolute;
  z-index: 7;
}

.csssax__pearl--1 { left: 112px; top: 222px; width: 10px; height: 13px; }
.csssax__pearl--2 { left: 124px; top: 252px; width: 10px; height: 13px; }
.csssax__pearl--3 { left: 112px; top: 282px; width: 10px; height: 13px; }
.csssax__pearl--4 { left: 113px; top: 321px; width: 9px; height: 12px; }
.csssax__pearl--5 { left: 125px; top: 349px; width: 9px; height: 12px; }
.csssax__pearl--6 { left: 113px; top: 377px; width: 9px; height: 12px; }

.csssax__palm-key {
  position: absolute;
  border-radius: 50%;
  z-index: 6;
}

.csssax__palm-key--1 { left: 136px; top: 204px; width: 11px; height: 15px; }
.csssax__palm-key--2 { left: 141px; top: 220px; width: 11px; height: 15px; }
.csssax__palm-key--3 { left: 136px; top: 236px; width: 11px; height: 15px; }

.csssax__side-key {
  position: absolute;
  border-radius: 4px;
  z-index: 6;
}

.csssax__side-key--1 { left: 98px; top: 300px; width: 14px; height: 9px; }
.csssax__side-key--2 { left: 96px; top: 314px; width: 14px; height: 9px; }

.csssax__pinky {
  position: absolute;
  border-radius: 3px 10px 10px 3px;
  z-index: 6;
}

.csssax__pinky--1 { left: 104px; top: 398px; width: 24px; height: 8px; transform: rotate(-8deg); }
.csssax__pinky--2 { left: 100px; top: 410px; width: 26px; height: 8px; transform: rotate(-4deg); }
.csssax__pinky--3 { left: 98px;  top: 422px; width: 28px; height: 8px; transform: rotate(0deg); }

.csssax__rod--1 { left: 116px; top: 210px; width: 2px; height: 30px; }
.csssax__rod--2 { left: 128px; top: 240px; width: 2px; height: 30px; }
.csssax__rod--3 { left: 116px; top: 270px; width: 2px; height: 30px; }
.csssax__rod--4 { left: 118px; top: 310px; width: 2px; height: 28px; }
.csssax__rod--5 { left: 130px; top: 338px; width: 2px; height: 28px; }
.csssax__rod--6 { left: 118px; top: 366px; width: 2px; height: 28px; }

.csssax__post--1 { left: 96px; top: 225px; }
.csssax__post--2 { left: 140px; top: 255px; }
.csssax__post--3 { left: 96px; top: 285px; }
.csssax__post--4 { left: 98px; top: 325px; }
.csssax__post--5 { left: 141px; top: 353px; }
.csssax__post--6 { left: 98px; top: 381px; }

.csssax__brace--1 { left: 92px; top: 232px; width: 10px; height: 3px; transform: rotate(-15deg); }
.csssax__brace--2 { left: 138px; top: 262px; width: 10px; height: 3px; transform: rotate(15deg); }
.csssax__brace--3 { left: 92px; top: 330px; width: 10px; height: 3px; transform: rotate(-15deg); }

.csssax__screw--1 { left: 98px; top: 229px; }
.csssax__screw--2 { left: 142px; top: 259px; }
.csssax__screw--3 { left: 98px; top: 289px; }
.csssax__screw--4 { left: 100px; top: 329px; }
.csssax__screw--5 { left: 143px; top: 357px; }
.csssax__screw--6 { left: 100px; top: 385px; }