.swing {
  --cord-width: 11rem;
  --cord-spread: calc(var(--cord-width) * 76 / 200);
  --screw: 0.4rem;
  margin-top: calc(-1 * var(--stage-gap) - 0.9rem);
  position: relative;
  z-index: 1;
}

.swing__body {
  display: grid;
  justify-items: center;
  transform-origin: 50% 0.4rem;
}
.is-engraved .swing__body,
.no-js .swing__body {
  animation:
    settle 2.4s var(--ease) both 0.2s,
    sway 4.8s ease-in-out 2.6s infinite alternate;
}

.swing__cord {
  width: var(--cord-width);
  height: auto;
  margin-bottom: -0.35rem;
  overflow: visible;
}
.swing__cord path {
  fill: none;
  stroke: #7A5A3A;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.swing__cord circle {
  fill: #6B4A2B;
  stroke: #E9D3AE;
  stroke-width: 1.5;
}

.signboard {
  position: relative;
  margin: 0;
  padding: 0.85em 1.6em 0.8em;
  border-radius: 12px;
  background: var(--wood) center / 600px auto, #DDBB88;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 3.6vw, 1.55rem);
  line-height: 1.15;
  text-wrap: balance;
  color: var(--burn);
  text-shadow: 0 0 2px rgba(110, 60, 20, 0.35), 0 1px 0 rgba(255, 244, 222, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.7), inset 0 0 0 1px rgba(120, 80, 40, 0.14),
    0 2px 0 #C79C66, 0 4px 0 #A67845,
    0 18px 26px -12px rgba(74, 52, 28, 0.45);
}
.signboard::before,
.signboard::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  width: var(--screw);
  height: var(--screw);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8A6A48, #3E2814);
}
.signboard::before { left: calc(50% - var(--cord-spread) - var(--screw) / 2); }
.signboard::after { right: calc(50% - var(--cord-spread) - var(--screw) / 2); }

@keyframes settle {
  0% { transform: rotate(9deg); }
  25% { transform: rotate(-6deg); }
  48% { transform: rotate(3.5deg); }
  70% { transform: rotate(-2deg); }
  100% { transform: rotate(-1.4deg); }
}
@keyframes sway {
  from { transform: rotate(-1.4deg); }
  to { transform: rotate(1.4deg); }
}