@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: black;
  color: #00ffcc;
  font-family: 'Share Tech Mono', monospace;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.glitch-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif') center/cover no-repeat;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
  will-change: opacity;
}

.overlay {
  position: relative;
  z-index: 1;
  padding: 4rem;
  text-align: center;
}

.glitch {
  font-size: clamp(2rem, 5vw, 3rem);
  color: #00ffcc;
  position: relative;
  cursor: default;
  user-select: none;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  color: #ff00ff;
  clip-path: inset(0 100% 100% 0);
}

.glitch::before {
  animation: glitchTop 2s infinite linear alternate-reverse;
  z-index: -1;
}

.glitch::after {
  color: #00ffff;
  animation: glitchBot 1.5s infinite linear alternate-reverse;
  z-index: -2;
}

@keyframes glitchTop {
  0% {
    clip-path: inset(0 100% 100% 0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(0 0 70% 0);
    transform: translate(-2px, -2px);
  }
  40% {
    clip-path: inset(0 0 50% 0);
    transform: translate(2px, -1px);
  }
  60% {
    clip-path: inset(0 0 70% 0);
    transform: translate(-1px, 1px);
  }
  80% {
    clip-path: inset(0 0 50% 0);
    transform: translate(1px, -1px);
  }
  100% {
    clip-path: inset(0 100% 100% 0);
    transform: translate(0);
  }
}

@keyframes glitchBot {
  0% {
    clip-path: inset(100% 100% 0 0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(30% 0 0 0);
    transform: translate(1px, 1px);
  }
  40% {
    clip-path: inset(50% 0 0 0);
    transform: translate(-1px, 2px);
  }
  60% {
    clip-path: inset(30% 0 0 0);
    transform: translate(2px, -1px);
  }
  80% {
    clip-path: inset(50% 0 0 0);
    transform: translate(-2px, 1px);
  }
  100% {
    clip-path: inset(100% 100% 0 0);
    transform: translate(0);
  }
}

.subtitle {
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #999;
  opacity: 0.8;
}

.console-text {
  margin-top: 2rem;
  font-size: 1rem;
  color: #00ffcc;
  animation: blink 1s steps(2, start) infinite;
  cursor: pointer;
  user-select: none;
  outline: none;
}

.console-text:focus {
  outline: 2px solid #00ffcc;
  outline-offset: 4px;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}