/* Tack, free-standing (tack-bot.js). The .tk box keeps the cutout's shape, so nothing moves when the robot
   is drawn in; hops and leans draw outside the box and never push the page. Set the width where it is used. */
.tk {
  display: inline-block;
  flex: none;
  aspect-ratio: 642 / 993;
  line-height: 0;
  vertical-align: bottom;
}
.tk-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tk-all,
.tk-hop,
.tk-breathe,
.tk-point,
.tk-ant,
.tk-face,
.tk-eyes {
  transform-box: view-box;
}
/* Pivots, in the cutout's pixels: the feet, the base of the antenna, the middle of the eyes. */
.tk-all,
.tk-hop,
.tk-breathe {
  transform-origin: 321px 990px;
}
.tk-point,
.tk-ant {
  transform-origin: 408px 130px;
}
.tk-eyes {
  transform-origin: 363px 337px;
}
/* The screen face: pale glow on the dark glass. */
.tk-fill {
  fill: #eaf9ff;
}
.tk-line {
  fill: none;
  stroke: #eaf9ff;
  stroke-width: 16;
  stroke-linecap: round;
}
.tk .m-happy,
.tk .m-sad,
.tk[data-mood="happy"] .m-dead,
.tk[data-mood="sad"] .m-dead {
  display: none;
}
.tk[data-mood="happy"] .m-happy,
.tk[data-mood="sad"] .m-sad {
  display: inline;
}
/* Leaning toward a target: the whole robot tips from the feet, the antenna points, the eyes look. */
.tk.is-lean-l .tk-all {
  transform: rotate(-9deg);
}
.tk.is-lean-r .tk-all {
  transform: rotate(9deg);
}
/* The antenna already leans right a little, so it turns further for a left point. */
.tk.is-lean-l .tk-point {
  transform: rotate(-26deg);
}
.tk.is-lean-r .tk-point {
  transform: rotate(10deg);
}
.tk.is-lean-l .tk-face {
  transform: translateX(-14px);
}
.tk.is-lean-r .tk-face {
  transform: translateX(14px);
}
.tk[data-mood="sad"] .tk-all {
  transform: translateY(14px) rotate(-3deg) scaleY(0.97);
}

@media (prefers-reduced-motion: no-preference) {
  .tk-all,
  .tk-point,
  .tk-face {
    transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
  }
  /* Idle: a slow breath, a wobbling antenna, a blink now and then, a glance to the side. */
  .tk-breathe {
    animation: tk-breathe 3.4s ease-in-out infinite;
  }
  .tk-ant {
    animation: tk-wobble 2.8s ease-in-out var(--tk-d, 0s) infinite alternate;
  }
  .tk-eyes {
    animation: tk-blink 5.2s linear var(--tk-d, 0s) infinite;
  }
  .tk:not(.is-lean-l, .is-lean-r) .tk-face {
    animation: tk-glance 11s ease-in-out var(--tk-d, 0s) infinite;
  }
  /* A hop: crouch, up, land with a squash. The antenna catches up a beat late. */
  .tk.is-hop .tk-hop {
    animation: tk-hop 0.7s cubic-bezier(0.3, 0.7, 0.4, 1);
  }
  .tk.is-hop .tk-ant {
    animation: tk-boing 0.9s ease-out;
  }
}
@keyframes tk-breathe {
  50% {
    transform: scale(0.992, 1.012);
  }
}
@keyframes tk-wobble {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(5deg);
  }
}
@keyframes tk-blink {
  0%,
  93%,
  97%,
  100% {
    transform: none;
  }
  95% {
    transform: scaleY(0.08);
  }
}
@keyframes tk-glance {
  0%,
  42%,
  64%,
  100% {
    transform: none;
  }
  46%,
  60% {
    transform: translateX(-12px);
  }
}
/* Arriving: a jump in from the right that lands with a squash (the board and the notice). */
@keyframes tk-arrive {
  0% {
    opacity: 0;
    transform: translate(70%, -45%) rotate(18deg);
  }
  20% {
    opacity: 1;
  }
  70% {
    transform: scale(1.08, 0.9);
  }
  100% {
    transform: none;
  }
}
@keyframes tk-hop {
  0% {
    transform: none;
  }
  18% {
    transform: scale(1.06, 0.9);
  }
  50% {
    transform: translateY(-22%) scale(0.96, 1.05);
  }
  82% {
    transform: scale(1.07, 0.92);
  }
  100% {
    transform: none;
  }
}
@keyframes tk-boing {
  0% {
    transform: rotate(0);
  }
  35% {
    transform: rotate(-14deg);
  }
  60% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0);
  }
}