:root {
  --alki-motion-fast: 120ms;
  --alki-motion-ui: 200ms;
  --alki-motion-reveal: 420ms;
  --alki-ease-out: cubic-bezier(.16, 1, .3, 1);
  --alki-ease-soft: cubic-bezier(.22, .61, .36, 1);
}

html.alki-motion-ready {
  scroll-behavior: smooth;
}

.alki-motion-button {
  transition:
    transform var(--alki-motion-ui) var(--alki-ease-soft),
    box-shadow var(--alki-motion-ui) ease,
    border-color var(--alki-motion-ui) ease,
    background-color var(--alki-motion-ui) ease;
}

.alki-motion-button:not(:disabled):active {
  transform: translateY(1px) scale(.99);
  transition-duration: var(--alki-motion-fast);
}

.alki-motion-reveal {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--alki-motion-reveal) var(--alki-ease-out),
    transform var(--alki-motion-reveal) var(--alki-ease-out);
  transition-delay: var(--alki-delay, 0ms);
}

.alki-motion-reveal.is-motion-visible {
  opacity: 1;
  transform: none;
}

.alki-motion-lift {
  transition:
    transform var(--alki-motion-ui) var(--alki-ease-soft),
    box-shadow var(--alki-motion-ui) ease,
    border-color var(--alki-motion-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
  .alki-motion-lift:hover {
    transform: translateY(-1px);
  }
}

.alki-motion-pop {
  animation: alki-pop 300ms var(--alki-ease-out);
}

@keyframes alki-pop {
  0% { transform: scale(.99); }
  60% { transform: scale(1.003); }
  100% { transform: scale(1); }
}

.alki-motion-attention {
  animation: alki-attention 420ms var(--alki-ease-soft);
}

@keyframes alki-attention {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(-1px); }
  70% { transform: translateX(1px); }
}

.alki-mascot-player .alki-mascot-frame {
  position: relative;
  z-index: 1;
  transform:
    translate3d(
      calc(var(--pose-x, 0px) + var(--mx, 0px)),
      calc(var(--pose-y, 0px) + var(--my, 0px)),
      0
    )
    rotate(calc(var(--pose-r, 0deg) + var(--mr, 0deg)));
  transform-origin: 50% 88%;
  transition: transform 220ms var(--alki-ease-soft);
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .2));
}

@media (max-width: 680px) {
  .alki-mascot-player .alki-mascot-frame {
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .18));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.alki-motion-ready {
    scroll-behavior: auto;
  }

  .alki-motion-button,
  .alki-motion-lift,
  .alki-motion-reveal,
  .alki-mascot-player .alki-mascot-frame {
    animation: none;
    transition: none;
    transform: none;
  }

  .alki-motion-reveal {
    opacity: 1;
  }
}