/* Frame and beam are separate images so the beam can turn on its
   pivot. Both were pulled off a flat magenta backing by unmixing, not
   thresholding - a hard key eats the one-pixel sling ropes. It stands
   bottom-left, where every round on the page is thrown from. */
.trebuchet{
  position:fixed;left:50px;bottom:6px;
  /* Displayed at half the resolution it was drawn at, so it stays
     crisp on a high-density screen. */
  width:50.25px;height:56.25px;
  z-index:0;pointer-events:none;
  /* The beam swings well outside this box at both ends. */
  overflow:visible;
  opacity:.9;
  /* Traverse. A trebuchet aims by turning on its base, so this is the
     aim and the beam angle is only elevation. */
  transform-origin:25.13px 56.25px;
  transform:rotate(var(--yaw, 0deg));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
/* No room for it beside the content until the window is wide. */
@media (max-width:1100px){ .trebuchet{display:none;} }

/* Behind the frame, so the beam passes between the uprights and its
   axle disappears under the cap. */
.treb-arm{
  position:absolute;left:-49.88px;top:-10.13px;
  width:93.75px;height:37.5px;z-index:0;
  transform-origin:75px 13.88px;
  transform:rotate(-34deg);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.treb-arm img{display:block;width:100%;height:100%;}
/* Zero-sized marker in the sling head. Its rect gives the launch point
   with the traverse and the beam rotation already composed, so JS never
   redoes that maths and cannot fall out of step with this file. */
.treb-sling{position:absolute;left:8.25px;top:13.5px;width:0;height:0;}
.treb-frame{position:absolute;left:0;top:0;width:50.25px;height:56.25px;z-index:1;}

/* No easing out - the beam is stopped by the frame. */
.trebuchet.firing .treb-arm{transition:transform .17s cubic-bezier(.35,0,.75,1);}
/* The long recovery afterwards. */
.trebuchet.resetting .treb-arm{transition:transform .95s cubic-bezier(.15,.75,.3,1);}
/* Hauls back while a check runs, on the round's own clock. */
.trebuchet.cocking .treb-arm{transition:transform 5.5s cubic-bezier(.1,.5,.4,1);}