.perch { position: relative; }

.rig {
  position: absolute;
  top: 100%;
  left: 45%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  pointer-events: none;
  transform-origin: 0 0;
  visibility: hidden;
}
.rig.drop { pointer-events: auto; cursor: pointer; }
.rig.drop.drown, .rig.drop.raft, .rig.busy { pointer-events: none; }
.rig:focus-visible { outline: 2px solid var(--hot); outline-offset: 6px; }
.silk {
  display: block;
  width: 1.5px;
  height: 0;
  margin-left: 0;
  background: var(--paper);
  opacity: .85;
}
.rig img {
  display: block;
  width: 84px;
  height: auto;
  /* The generated sprite's own thread stub sits at 58% of its width; the CSS silk has to land on it. */
  margin-left: calc(-84px * .58);
  margin-top: -2px;
}
.rig.drop { visibility: visible; animation: sway 3.2s ease-in-out 1.3s infinite; }
.rig.drop .silk { animation: lower 1.3s cubic-bezier(.3, 1.35, .5, 1) forwards; }
.rig.drop img { animation: hello .5s ease-in-out 1.3s 3 alternate; }
.rig.drop.drown { z-index: 6; animation: none; }
.rig.climb { animation: none; }
.rig.climb .silk { animation: climb .7s steps(7) forwards; }
.rig.climb img { animation: hello .14s steps(2) 5 alternate; }
.rig.shed .tow { animation: shed 1s steps(10) forwards; }
.perch .bubble { top: calc(100% + var(--drop, 7.5rem) + 10px); right: calc(55% + 56px); }
@keyframes climb { from { height: var(--drop, 7.5rem); } to { height: 0; } }
@keyframes shed {
  0% { transform: translate(0, 0) rotate(-14deg); opacity: 1; }
  30% { transform: translate(14px, 18vh) rotate(24deg); }
  60% { transform: translate(-10px, 38vh) rotate(-20deg); opacity: 1; }
  100% { transform: translate(6px, 62vh) rotate(12deg); opacity: 0; }
}
.rig.drown img { animation: flail .14s steps(2) 5, lose .9s steps(1) .7s forwards; }
.rig.drown .silk { animation: lower 1.3s cubic-bezier(.3, 1.35, .5, 1) forwards, lose .9s steps(1) .7s forwards; }
.rig .pb, .rig .rip {
  position: absolute;
  opacity: 0;
  left: -22px;
  top: calc(var(--drop, 7.5rem) + 34px);
  background: var(--paper);
}
.rig .pb { width: 5px; height: 5px; }
.rig .pb:nth-child(4) { width: 7px; height: 7px; left: -6px; }
.rig .pb:nth-child(5) { width: 4px; height: 4px; left: 10px; top: calc(var(--drop, 7.5rem) + 46px); }
.rig .rip {
  background: none;
  left: -30px;
  top: calc(var(--drop, 7.5rem) + 20px);
  font: 500 .8rem/1 var(--mono);
  letter-spacing: .05em;
  color: var(--paper);
}
.rig.drown .pb { animation: pbub .9s steps(5) forwards; }
.rig.drown .pb:nth-child(4) { animation-delay: .3s; }
.rig.drown .pb:nth-child(5) { animation-delay: .55s; }
.rig.drown .rip { animation: rip 1.2s steps(8) 1s forwards; }
@keyframes flail { from { transform: rotate(-24deg) translateX(-5px); } to { transform: rotate(24deg) translateX(5px); } }
@keyframes lose { 0%, 40%, 80% { opacity: 1; } 20%, 60%, 100% { opacity: 0; } }
@keyframes pbub { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-52px); opacity: 0; } }
@keyframes rip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-70px); opacity: 0; } }

.rig .hat {
  display: none;
  position: absolute;
  left: -27px;
  top: calc(var(--drop, 7.5rem) + 2px);
  width: 50px;
  height: 4px;
  background: var(--paper);
  transform: rotate(-12deg);
  transform-origin: 50% 100%;
}
.rig .hat::before {
  content: "";
  position: absolute;
  left: 11px;
  bottom: 4px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 30px solid var(--dim);
}
.rig .hat::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 6px;
  width: 20px;
  height: 4px;
  background: var(--hot);
}
.rig.hat .hat { display: block; }
.rig .flake {
  display: none;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -14px;
  box-shadow: 12px 0px 0 0 var(--hot), 0px 4px 0 0 var(--hot), 12px 4px 0 0 var(--hot), 24px 4px 0 0 var(--hot), 4px 8px 0 0 var(--hot), 12px 8px 0 0 var(--hot), 20px 8px 0 0 var(--hot), 0px 12px 0 0 var(--hot), 4px 12px 0 0 var(--hot), 8px 12px 0 0 var(--hot), 12px 12px 0 0 var(--hot), 16px 12px 0 0 var(--hot), 20px 12px 0 0 var(--hot), 24px 12px 0 0 var(--hot), 4px 16px 0 0 var(--hot), 12px 16px 0 0 var(--hot), 20px 16px 0 0 var(--hot), 0px 20px 0 0 var(--hot), 12px 20px 0 0 var(--hot), 24px 20px 0 0 var(--hot), 12px 24px 0 0 var(--hot);
}
.rig.snow img { display: none; }
.rig.snow .flake { display: block; transform-origin: 14px 14px; animation: twirl 2.4s steps(4) infinite; }
@keyframes twirl { to { transform: rotate(360deg); } }

.rig .pop {
  position: absolute;
  left: -64px;
  top: calc(var(--drop, 7.5rem) + 6px);
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--hot);
  text-shadow: 2px 2px 0 var(--paper);
  opacity: 0;
}
.rig .pop.go { animation: popup 1.4s steps(7) forwards; }
.rig .ding {
  position: absolute;
  left: -60px;
  top: calc(var(--drop, 7.5rem) - 8px);
  width: 104px;
  height: 96px;
  box-shadow: inset 0 0 0 3px var(--paper);
  opacity: 0;
}
.rig.grab .ding { animation: ding .5s steps(1) .8s 2; }
.rig.grab .silk { animation: lower 1.3s cubic-bezier(.3, 1.35, .5, 1) forwards, reach 1.4s steps(6) both; }
.rig .tow {
  position: absolute;
  display: none;
  left: -46px;
  top: calc(var(--drop, 7.5rem) + 58px);
  width: 20px;
  height: 13px;
  background: linear-gradient(var(--paper) 0 3px, var(--hot) 3px 5px, var(--paper) 5px 8px, var(--hot) 8px 10px, var(--paper) 10px);
  border-bottom: 2px dotted var(--hot);
  transform: rotate(-14deg);
}
.rig.towel .tow { display: block; }
.rig.drop.raft { z-index: 6; animation: none; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
.rig.raft .silk { visibility: hidden; }
.rig.raft img { animation: ride 1.1s steps(2) infinite alternate; }
.rig.raft .tow {
  left: -62px;
  top: calc(var(--drop, 7.5rem) + 50px);
  width: 68px;
  height: 9px;
  transform: none;
  border-bottom: 0;
  animation: ride 1.1s steps(2) infinite alternate;
}
.rig.ashore { transition: transform 1.2s var(--ease); }
@keyframes popup { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-52px); } }
@keyframes ding { 50% { opacity: 1; } }
@keyframes reach { 50% { height: calc(var(--drop, 7.5rem) + 3.5rem); } }
@keyframes ride { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(4px) rotate(5deg); } }

@keyframes lower { from { height: 0; } to { height: var(--drop, 7.5rem); } }
@keyframes sway { 0%, 100% { transform: rotate(2.5deg); } 50% { transform: rotate(-2.5deg); } }
@keyframes hello { to { transform: rotate(-7deg); } }

@media (prefers-reduced-motion: reduce) {
  .rig.drop .silk { height: var(--drop, 7.5rem); }
}