/* Retro 2003 CSS Enhancements */

/* Simulate animated starfield background */
body {
  background-image:
    radial-gradient(2px 2px at 20px 30px, white, transparent),
    radial-gradient(2px 2px at 60px 70px, white, transparent),
    radial-gradient(1px 1px at 50px 50px, white, transparent),
    radial-gradient(1px 1px at 130px 80px, white, transparent),
    radial-gradient(2px 2px at 90px 10px, white, transparent);
  background-size: 200px 200px;
  background-color: #000000;
}

/* Blinking cursor effect */
.terminal-cursor {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* Glow effect for special text */
.glow {
  text-shadow:
    0 0 10px #00ff00,
    0 0 20px #00ff00,
    0 0 30px #00ff00;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    text-shadow:
      0 0 10px #00ff00,
      0 0 20px #00ff00;
  }
  50% {
    text-shadow:
      0 0 20px #00ff00,
      0 0 30px #00ff00,
      0 0 40px #00ff00;
  }
}

/* Simulated flame line animation */
.flame-line {
  background: linear-gradient(
    90deg,
    #ff0000 0%,
    #ff4400 25%,
    #ffaa00 50%,
    #ff4400 75%,
    #ff0000 100%
  );
  height: 10px;
  animation: flame-flicker 0.5s infinite;
}

@keyframes flame-flicker {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Simulated horizontal bar */
.bar-cyan {
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
  height: 5px;
}

.bar-green {
  background: linear-gradient(90deg, transparent, #00ff00, transparent);
  height: 5px;
}

/* Simulated "NEW!" badge */
.new-badge {
  background: #ff0000;
  color: #ffff00;
  font-weight: bold;
  font-size: 10px;
  padding: 2px 5px;
  border: 1px solid #ffff00;
  animation: blink 1s infinite;
}

/* Simulated "COOL" badge */
.cool-badge {
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  color: #ffffff;
  font-weight: bold;
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid #ffffff;
}

/* Simulated star icon */
.star-icon {
  color: #ffff00;
  text-shadow: 0 0 5px #ffff00;
}

/* Under construction animation */
.construction {
  animation: construction-flash 1s infinite;
}

@keyframes construction-flash {
  0%,
  50% {
    background-color: #ffff00;
    color: #000000;
  }
  51%,
  100% {
    background-color: #000000;
    color: #ffff00;
  }
}

/* Hover effects for links */
a:hover {
  text-shadow: 0 0 10px #ff00ff;
}

/* Multi-layer tech banner */
.system-banner {
  width: 754px; /* Account for 3px border on each side */
  height: 94px; /* Account for 3px border on each side */
  background-color: #000033;
  border: 3px double #00ffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
/* Aspect ratio fix for square assets in rectangular containers */
.retro-img {
    object-fit: cover;
}

.badge-v31 {
    width: 88px;
    height: 31px;
    object-fit: cover;
    border: 1px solid #555;
    background-color: #000;
}

/* Scanline effect (optional retro CRT feel) */
.scanline-effect::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 0, 0.03) 0px,
    rgba(0, 255, 0, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 9999;
}