@import "tailwindcss";

/* Skeleton */
@import "@skeletonlabs/skeleton";
@import "@skeletonlabs/skeleton/optional/presets";
@import "./cyberpunk";

@custom-variant dark (&:where(.dark, .dark *));

/* Globals */

body {
  overflow-x: hidden;
}

/* Overrides */

.btn {
  border-radius: 0px;
  border-top-right-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

/* Animation: Glitchy Text */
/* https://codepen.io/cbanlawi/pen/xxRBeMY */

.glitch-container {
  color: white;
  display: flex;
  justify-items: center;
}

.glitch {
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
    0.025em 0.04em 0 #fffc00;
  animation: glitch 0.75s infinite;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch span:first-child {
  animation: glitch 500ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-0.04em, -0.03em);
  opacity: 0.75;
}

.glitch span:last-child {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(0.04em, 0.03em);
  opacity: 0.75;
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
      0.025em 0.04em 0 #fffc00;
  }
  15% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
      0.025em 0.04em 0 #fffc00;
  }
  16% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }
  49% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }
  50% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
      0 -0.04em 0 #fffc00;
  }
  99% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
      0 -0.04em 0 #fffc00;
  }
  100% {
    text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff,
      -0.04em -0.025em 0 #fffc00;
  }
}

/* Animation: Scanlines */
/* https://codepen.io/ynef/pen/yvvyGv */

.scanlines {
  overflow: hidden;
  position: relative;
}
.scanlines:before,
.scanlines:after {
  display: block;
  pointer-events: none;
  content: "";
  position: absolute;
}
.scanlines:before {
  width: 100%;
  height: 2px;
  z-index: 2147483649;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0.75;
  animation: scanline 5s linear infinite;
}
.scanlines:after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483648;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 0, 0, 0.1) 51%
  );
  background-size: 100% 4px;
  animation: scanlines 1s steps(60) infinite;
}

/* ANIMATE UNIQUE SCANLINE */
@keyframes scanline {
  0% {
    transform: translate3d(0, 200000%, 0);
  }
}
@keyframes scanlines {
  0% {
    background-position: 0 50%;
  }
}
