@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');


body {
  background: radial-gradient(#0d0d1a, #000010) fixed;
  color: #c8e6ff;
  font-family: 'Source Sans Pro', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Uncial Antiqua', cursive;
  color: #64ffda;
  animation: glitch 1.5s infinite;
}

#main .thumb:not(.fall-in) {
  animation: floaty 15s ease-in-out infinite;
}


#footer {
  display: none;
}

#footer.active {
  display: block;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

@keyframes glitch {
  0% { text-shadow: 1px 0 red, -1px 0 cyan; }
  20% { text-shadow: -2px 2px magenta, 2px -2px lime; }
  40% { text-shadow: 2px 0 cyan, -2px 0 red; }
  60%, 100% { text-shadow: none; }
}

#cursor-speed {
  position: fixed;
  top: 0; left: 0;
  width: 100px; height: 2px;
  background: linear-gradient(90deg, #64ffda 0%, transparent 100%);
  pointer-events: none;
  z-index: 9999;
  opacity: 0.5;
  transition: transform 0.05s linear;
}

.asteroid {
  position: absolute;
  width: 50px; height: 50px;
  background: url('images/asteroid.png') no-repeat center/contain;
  animation: drift 30s linear infinite;
  pointer-events: none;
  opacity: 0.3;
}

@keyframes drift {
  0% {
    transform: translateX(-100%) rotate(0deg);
  }
  100% {
    transform: translateX(120vw) rotate(360deg);
  }
}

.thumb.fall-in {
  opacity: 0;
  transform: translateY(-100px) scale(0.95) rotate(-5deg);
  transition: transform 1s ease-out, opacity 1s ease-out;
}

.thumb.fall-in.visible {
  opacity: 1;
  transform: translateY(0px) scale(1) rotate(0deg);
}