/* Lama antics (lama-antics.js). Vendored unchanged by each site from the
   brand repository (assets/web). */

.lama-antics {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* The rig wraps the poses, and the turn inside it mirrors the Lama when it
   faces right. Both turn about a point between the Lama's feet. */
.lama-antics-rig,
.lama-antics-turn {
  transform-box: fill-box;
  transform-origin: 50% 92%;
}

div.lama-antics-rig,
div.lama-antics-turn {
  position: absolute;
  inset: 0;
}

/* Extra poses stay hidden until an antic shows one; while it does, the
   site's own proud and hello poses step aside. */
.lama-antics .antic-pose,
.lama-antics.is-posing .pose {
  opacity: 0 !important;
}

.lama-antics.is-posing .pose.is-current {
  opacity: 1 !important;
}

/* Pose swaps never leave the Lama see-through: a pose that appears fades
   in over the one it replaces, which leaves only once it is covered. */
.lama-antics .pose {
  transition: opacity 0s linear 140ms !important;
}

.lama-antics.is-posing .pose.is-current {
  transition: opacity 140ms linear !important;
}

.lama-antics-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}

/* Shapes are placed in page coordinates; the world follows the scroll. */
.lama-antics-world {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.lama-antics-bit {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.lama-antics-bit svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lama-antics-bit.is-mini {
  transform: none;
}

.lama-antics-wings {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: lama-antics-flap 150ms ease-in-out infinite alternate;
}

.lama-antics-bit.is-resting .lama-antics-wings {
  animation-duration: 700ms;
}

@keyframes lama-antics-flap {
  to {
    transform: scaleX(0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lama-antics-wings {
    animation: none;
  }
}