#loader{ width: 100%; height: 100%; background: var(--color-bg); position: fixed; top: 0px; left: 0px; z-index: 9999; display: flex; align-items: center; justify-content: center;}

.loader {
  width: 75px;
  height: 75px;
  position: relative;
  background:
    linear-gradient(#1B2A44 0 0) bottom / 30px 6px, /* 底座 */
    linear-gradient(#1B2A44 0 0) center / 6px 60px;  /* 立柱 */
  background-repeat: no-repeat;
}

.loader::before,
.loader::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  translate: -50% 0;
}

.loader::before {
  width: 66px;
  height: 6px;
  background: #1B2A44;
  border-radius: 3px;
  transform-origin: center;
  animation: scale-tilt 1s infinite ease-in-out;
}

.loader::after {
  width: 60px;
  height: 38px;
  /* 繪製兩側的吊繩與半圓秤盤 */
  background:
    /* 左吊繩與盤子 */
    radial-gradient(farthest-side at top, #A9824C 90%, #0000) left 0 bottom 0 / 18px 9px,
    linear-gradient(#1B2A44 0 0) left 3px top 0 / 3px 30px,
    linear-gradient(#1B2A44 0 0) left 15px top 0 / 3px 30px,
    /* 右吊繩與盤子 */
    radial-gradient(farthest-side at top, #A9824C 90%, #0000) right 0 bottom 0 / 18px 9px,
    linear-gradient(#1B2A44 0 0) right 3px top 0 / 3px 30px,
    linear-gradient(#1B2A44 0 0) right 15px top 0 / 3px 30px;
  background-repeat: no-repeat;
  transform-origin: top center;
  animation: scale-tilt 1s infinite ease-in-out;
}

@keyframes scale-tilt {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(12deg);  /* 右重左輕 */
  }
  75% {
    transform: rotate(-12deg); /* 左重右輕 */
  }
}