@charset "UTF-8";
/* CSS Document */
/* Reset */

@font-face {
  font-family: "RoadRadio";
  src: url("fonts/RoadRadio.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
	
	@font-face {
  font-family: "RoadRadioThin";
  src: url("fonts/RoadRadio-Thin.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {font-family:'RoadRadio', sans-serif; width: 100%; height: 100%; overflow: hidden; background: black; }

canvas#starfield {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Contenido principal */
/* Contenedor */
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}

/* Logo */
.logo {
  width: 400px;
  max-width: 100vw;
  opacity: 0;
  animation: fadeInUp 2s forwards 0s; /* empieza inmediatamente */
}

/* Links */
.nav-links {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; 
  opacity: 0;
  animation: fadeInUp 2s forwards 1s; /* empieza 2s después que el logo */
}

.nav-links a {
  color: white;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 14px;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s, transform 0.3s;
}

.nav-links a:hover {
  opacity: 1;
  color: red;
}

/* Animaciones unificadas */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 600px) {
  .logo { width: 300px; }
  .nav-links { gap: 20px; flex-wrap: wrap; }
  .nav-links a { font-size: 14px; letter-spacing: 2px; }
}