@keyframes gridAnimation
  0%
    mask-position: 100% 50%
  10%
    mask-position: 75% 100%
  20%
    mask-position: 50% 100%
  30%
    mask-position: 25% 75%
  40%
    mask-position: 0% 50%
  50%
    mask-position: 0% 0%
  60%
    mask-position: 50% 25%
  70%
    mask-position: 50% 50%
  80%
    mask-position: 50% 100%
  90%
    mask-position: 75% 50%
  100%
    mask-position: 100% 50%

@keyframes animateHeroEthereumTop
  0%
    transform: translateY(0%)
  25%
    transform: translateY(-3%)
  50%
    transform: translateY(0%)
  75%
    transform: translateY(2%)
  100%
    transform: translateY(0%)

@keyframes animateHeroEthereumBottom
  0%
    transform: translateY(0%)
  25%
    transform: translateY(-2%)
  50%
    transform: translateY(0%)
  75%
    transform: translateY(3%)
  100%
    transform: translateY(0%)

@keyframes animateHeroReactImage
  0%
    transform: rotate(0deg) scale(1)
  25%
    transform: rotate(90deg) scale(0.95)
  50%
    transform: rotate(180deg) scale(1.05)
  75%
    transform: rotate(270deg) scale(0.95)
  100%
    transform: rotate(360deg) scale(1)

@keyframes animateHeroReactCircle
  0%
    transform: scale(1)
  55%
    transform: scale(1.25)
  100%
    transform: scale(1)

@keyframes animateTerminalCursor
  0%
    opacity: 1
  50%
    opacity: 0
  100%
    opacity: 1

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

@keyframes animateLoaderDash
  0%
    stroke-dasharray: 1, 150
    stroke-dashoffset: 0

  50%
    stroke-dasharray: 90, 150
    stroke-dashoffset: -35

  100%
    stroke-dasharray: 90, 150
    stroke-dashoffset: -124

@keyframes animateTerminalNotification
  0%
    opacity: 0
    transform: translate(-50%, -40%)
  100%
    opacity: 1
    transform: translate(-50%, -50%)