@import "tailwindcss";

:root {
  --background: #0a0a0a;
  --foreground: #ededed;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-montserrat);
  --font-mono: var(--font-montserrat-mono);
}

@media screen and (max-width: 768px) {
  * {
    font-size: 14px;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans), sans-serif !important;
}

* {
  transition: all 0.15s ease-in-out;
}


.bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('http://assets.iceable.com/img/noise-transparent.png') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: 1;
  visibility: visible;
}

@keyframes bg-animation {
  0% {
    transform: translate(0, 0)
  }

  10% {
    transform: translate(-5%, -5%)
  }

  20% {
    transform: translate(-10%, 5%)
  }

  30% {
    transform: translate(5%, -10%)
  }

  40% {
    transform: translate(-5%, 15%)
  }

  50% {
    transform: translate(-10%, 5%)
  }

  60% {
    transform: translate(15%, 0)
  }

  70% {
    transform: translate(0, 10%)
  }

  80% {
    transform: translate(-15%, 0)
  }

  90% {
    transform: translate(10%, 5%)
  }

  100% {
    transform: translate(5%, 0)
  }
}

.glitch {
  position: relative;
  mix-blend-mode: lighten;

  &:hover {

    &::after,
    &::before {
      animation-play-state: paused;
    }
  }
}

.glitch:before,
.glitch:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  width: 100%;
  background: black;
  clip: rect(0, 0, 0, 0);
}

.glitch:before {
  left: -4px;
  text-shadow: 4px 0 #00ff48;
  animation: glitch-anim-1 0.4s infinite ease-in-out alternate-reverse;
}

.glitch:after {
  left: 4px;
  text-shadow: -5px 0 #00ffc8;
  animation: glitch-anim-2 0.3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% {
    clip: rect(30px, 9999px, 10px, 0);
  }

  25% {
    clip: rect(15px, 9999px, 100px, 0);
  }

  50% {
    clip: rect(50px, 9999px, 105px, 0);
  }

  75% {
    clip: rect(2px, 9999px, 80px, 0);
  }

  100% {
    clip: rect(90px, 9999px, 100px, 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    top: -1px;
    left: 50px;
    clip: rect(65px, 9999px, 119px, 0);
  }

  25% {
    top: -10px;
    left: 1px;
    clip: rect(79px, 9999px, 19px, 0);
  }

  50% {
    top: -7px;
    left: 20px;
    clip: rect(65px, 9999px, 11px, 0);
  }

  75% {
    top: 10px;
    right: 20px;
    left: -50px;
    clip: rect(95px, 9999px, 53px, 0);
  }

  100% {
    top: -5px;
    left: -7px;
    clip: rect(31px, 9999px, 149px, 0);
  }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.animate-blink {
  animation: blink 1s infinite;
}