animations.sass

@keyframes shine-through
  0%
    opacity: 0
    transform: translateX(-150%) rotate(45deg)

  50%
    opacity: 0.5

  100%
    opacity: 0
    transform: translateX(150%) rotate(45deg)

@keyframes absorb-bottom-shock
  40%
    transform: translateY(10px)

@keyframes limited-shock-left
  40%
    transform: translateX(-5px)

@keyframes limited-shock-right
  40%
    transform: translateX(5px)

@keyframes score-alert
  0%
    transform: translate(-50%, -50%) scale(0.8)
    opacity: 0

  0%,100%
    background-position: 0 0

  40%
    opacity: 0.7

  50%
    background-position: 100% 0

  to
    transform: translate(-50%, -50%) scale(5)

@keyframes stat-highlight
  0%
    opacity: 0.4
    transform: scale(1)
    filter: blur(5px)

  50%
    transform: scale(1.2)

  100%
    transform: scale(1)

@keyframes row-clear
  0%
    z-index: var(--z-row-clear)
    filter: blur(5px) brightness(2)
    transform: scale(1)

  50%
    transform: scale(1.5)

  100%
    transform: scale(1)

.shine-button
  position: relative
  width: 150px
  height: 50px
  background-color: #333
  color: white
  text-align: center
  line-height: 50px
  overflow: hidden
  border-radius: 5px

.shine-button:before
  content: ""
  position: absolute
  top: -150%
  left: -150%
  width: 200%
  height: 200%
  background: rgba(255, 255, 255, 0.5)
  opacity: 0
  transform: rotate(45deg)
  pointer-events: none
  animation: shine 3s infinite ease-in-out