@keyframes binary-rain {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0.3;
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes circuit-glow {
  0% {
    filter: drop-shadow(0 0 2px var(--secondary-color));
  }
  50% {
    filter: drop-shadow(0 0 8px var(--secondary-color));
  }
  100% {
    filter: drop-shadow(0 0 2px var(--secondary-color));
  }
}

@keyframes glisten {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.parallax-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(100, 255, 218, 0.1) 25%,
        rgba(100, 255, 218, 0.2) 50%,
        rgba(100, 255, 218, 0.1) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: glisten 8s linear infinite;
    z-index: 1;
}

.binary-column {
  position: fixed;
  color: var(--highlight-color);
  font-family: monospace;
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
  animation: binary-rain 20s linear infinite;
  opacity: 0.1;
}

.tech-icon {
  animation: float 6s ease-in-out infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

h2:hover, h3:hover {
  animation: glitch 0.5s ease-in-out;
}

.circuit-background:hover .circuit-pattern {
  animation: circuit-glow 2s ease-in-out infinite;
}