:root {
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-900: #164e63;
  --cyan-950: #083344;
}

body {
  background-color: black;
  color: var(--cyan-400);
  font-family: 'JetBrains Mono', monospace;
  margin: 0;
  overflow: hidden;
}

.text-glow {
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.7), 0 0 20px rgba(0, 255, 255, 0.3);
}

.border-glow {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4), inset 0 0 10px rgba(0, 255, 255, 0.2);
}

.glitch {
  position: relative;
}

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

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(31px, 9999px, 94px, 0); transform: skew(0.85deg); }
  5% { clip: rect(70px, 9999px, 71px, 0); transform: skew(0.5deg); }
  10% { clip: rect(29px, 9999px, 83px, 0); transform: skew(0.1deg); }
  15% { clip: rect(46px, 9999px, 15px, 0); transform: skew(0.3deg); }
  20% { clip: rect(10px, 9999px, 13px, 0); transform: skew(0.7deg); }
  25% { clip: rect(56px, 9999px, 49px, 0); transform: skew(0.4deg); }
  30% { clip: rect(67px, 9999px, 92px, 0); transform: skew(0.2deg); }
  35% { clip: rect(44px, 9999px, 47px, 0); transform: skew(0.6deg); }
  40% { clip: rect(12px, 9999px, 98px, 0); transform: skew(0.9deg); }
  45% { clip: rect(83px, 9999px, 20px, 0); transform: skew(0.1deg); }
  50% { clip: rect(54px, 9999px, 70px, 0); transform: skew(0.5deg); }
  55% { clip: rect(96px, 9999px, 37px, 0); transform: skew(0.3deg); }
  60% { clip: rect(22px, 9999px, 6px, 0); transform: skew(0.8deg); }
  65% { clip: rect(79px, 9999px, 85px, 0); transform: skew(0.4deg); }
  70% { clip: rect(15px, 9999px, 42px, 0); transform: skew(0.2deg); }
  75% { clip: rect(61px, 9999px, 53px, 0); transform: skew(0.7deg); }
  80% { clip: rect(38px, 9999px, 10px, 0); transform: skew(0.9deg); }
  85% { clip: rect(92px, 9999px, 66px, 0); transform: skew(0.1deg); }
  90% { clip: rect(47px, 9999px, 29px, 0); transform: skew(0.5deg); }
  95% { clip: rect(5px, 9999px, 74px, 0); transform: skew(0.3deg); }
  100% { clip: rect(81px, 9999px, 12px, 0); transform: skew(0.8deg); }
}

@keyframes glitch-anim2 {
  0% { clip: rect(65px, 9999px, 100px, 0); transform: skew(0.15deg); }
  23% { clip: rect(12px, 9999px, 45px, 0); transform: skew(0.45deg); }
  49% { clip: rect(88px, 9999px, 12px, 0); transform: skew(0.25deg); }
  77% { clip: rect(34px, 9999px, 78px, 0); transform: skew(0.55deg); }
  100% { clip: rect(5px, 9999px, 92px, 0); transform: skew(0.35deg); }
}

.scanline {
  width: 100%;
  height: 100px;
  z-index: 10;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.1;
  position: absolute;
  bottom: 100%;
  animation: scanline 10s linear infinite;
  pointer-events: none;
}

@keyframes scanline {
  0% { bottom: 100%; }
  100% { bottom: -100px; }
}

.animate-aggressive-blink {
  animation: aggressive-blink 0.4s ease-in-out infinite;
}

@keyframes aggressive-blink {
  0%, 100% { opacity: 1; filter: brightness(1.2); }
  50% { opacity: 0.6; filter: brightness(0.8); }
}

.hidden-step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.show-step {
  opacity: 1;
  transform: translateY(0);
}

.bg-radial-gradient {
  background: radial-gradient(circle, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 100%);
}