@keyframes fadein
  0%
    opacity: 0
  100%
    opacity: 1

@keyframes raiko
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

@keyframes thunder
  0%
    fill: $oedo-thnder-yellow
    transform: scale(1)
  1%
    fill: white
    transform: scale(1.05)
  2%
    fill: $oedo-thnder-yellow
    transform: scale(1)
  3%
    fill: $oedo-thnder-yellow
    transform: scale(1.05)
  4%
    fill: $oedo-thnder-yellow
    transform: scale(1)

@keyframes thunder-red
  0%
    fill: $oedo-red
    transform: scale(1)
  1%
    fill: white
    transform: scale(1.05)
  2%
    fill: $oedo-red
    transform: scale(1)
  3%
    fill: white
    transform: scale(1.05)
  4%
    fill: $oedo-red
    transform: scale(1)

@keyframes cloud
  0%
    transform: translateX(0), scale(1)
  1%
    transform: scale(1.1)
  2%
    transform: scale(1)
  3%
    transform: scale(1.1)
  4%
    transform: scale(1)
  50%
    transform: translateX(100px)
  100%
    transform: translateX(0), scale(1)

@keyframes logo-letter
  0%
    transform: translateY(10px)
    opacity: 0
  100%
    transform: translateY(0)
    opacity: 1
