// Readable AI popup interface animations
@keyframes readabler-ai-popup-show
  0%
    transform: translateY(calc(100% - 14px))
  // 14px is the reveal bar height + spacing
  100%
    transform: translateY(0)

@keyframes readabler-ai-popup-hide
  0%
    transform: translateY(0)
  100%
    transform: translateY(calc(100%))

@keyframes readabler-ai-popup-close
  0%
    transform: translateY(0)
    opacity: 1
  100%
    transform: translateY(calc(100% + 10px))
    // 10 is the spacing
    opacity: 0

@keyframes readabler-ai-recognition-ongoing
  0%
    box-shadow: 0 0 0 0 rgba(255, 37, 43, 1)
  50%
    box-shadow: 0 0 0 4px rgba(255, 37, 43, .1)
  100%
    box-shadow: 0 0 0 0 rgba(255, 37, 43, 1)

@keyframes readabler-ai-fade-in
  0%
    opacity: 0
  100%
    opacity: 1

@keyframes readabler-ai-pulse
  0%
    transform: scale(1)
  50%
    transform: scale(1.2)
  100%
    transform: scale(.9)

// Status indicator animations
@keyframes readabler-ai-status--wait
  100%
    background-position: 100% 0, 100% 100%, 0 100%, 0 0

@keyframes readabler-ai-status--listen
  25%
    background-position: 100% 0, 0 100%, 100% 100%
  50%
    background-position: 100% 0, 0 0, 100% 100%
  75%
    background-position: 100% 0, 0 0, 0 100%
  100%
    background-position: 100% 100%, 0 0, 0 100%

// Text-to-speech
@keyframes readabler-tts-in
  from
    width: 0
    height: 0
  to
    width: 40px
    height: 40px

/** Keyframes for animations. */

@keyframes readabler-bounce

  from,
  20%,
  40%,
  60%,
  80%,
  to
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)

  0%
    opacity: 0
    transform: scale3d(0.3, 0.3, 0.3)

  20%
    transform: scale3d(1.1, 1.1, 1.1)

  40%
    transform: scale3d(0.9, 0.9, 0.9)

  60%
    opacity: 1
    transform: scale3d(1.03, 1.03, 1.03)

  80%
    transform: scale3d(0.97, 0.97, 0.97)

  to
    opacity: 1
    transform: scale3d(1, 1, 1)

@keyframes readabler-fade

  from
    opacity: 0

  to
    opacity: 1

@keyframes readabler-fade-out

  from
    opacity: 1

  to
    opacity: 0

@keyframes readabler-scale

  0%
    transform: scale(0)
    opacity: 0

  100%
    transform: scale(1)
    opacity: 1

@keyframes readabler-slide-tr

  from
    transform: translateX(-100%)
    opacity: 0

  to
    transform: translateX(0)
    opacity: 1

@keyframes readabler-slide-tl

  from
    transform: translateX(100%)
    opacity: 0

  to
    transform: translateX(0)
    opacity: 1

@keyframes readabler-slide-tt

  from
    transform: translateY(100%)
    opacity: 0

  to
    transform: translateY(0)
    opacity: 1

@keyframes readabler-slide-tt

  from
    transform: translateY(100%)
    opacity: 0

  to
    transform: translateY(0)
    opacity: 1

@keyframes readabler-slide-tb

  from
    transform: translateY(-100%)
    opacity: 0

  to
    transform: translateY(0)
    opacity: 1

@keyframes readabler-flip-x

  from
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg)
    animation-timing-function: ease-in
    opacity: 0

  40%
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg)
    animation-timing-function: ease-in

  60%
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg)
    opacity: 1

  80%
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg)

  to
    transform: perspective(400px)

@keyframes readabler-flip-y

  from
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg)
    animation-timing-function: ease-in
    opacity: 0

  40%
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg)
    animation-timing-function: ease-in

  60%
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg)
    opacity: 1

  80%
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg)

  to
    transform: perspective(400px)

@keyframes readabler-rotate

  from
    transform-origin: center
    transform: rotate3d(0, 0, 1, -200deg)
    opacity: 0

  to
    transform-origin: center
    transform: translate3d(0, 0, 0)
    opacity: 1

@keyframes readabler-wobble

  from
    transform: scale3d(1, 1, 1)

  10%,
  20%
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)

  30%,
  50%,
  70%,
  90%
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)

  40%,
  60%,
  80%
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)

  to
    transform: scale3d(1, 1, 1)