/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'TerminatorFont', Arial, sans-serif;
  background-color: #2b1b2b;  /* Dark purple background */
  color: #fff;  /* White text */
  text-align: center;
  overflow: hidden;
}

/* Loading Wrapper */
#loading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}

/* Import the Terminator Real NFI font */
@font-face {
  font-family: 'TerminatorReal';
  src: url('fonts/TerminatorRealNFI.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Apply the Terminator font to specific elements */
.scan-text {
  font-family: 'TerminatorReal', sans-serif;  /* Fallback to sans-serif in case font doesn't load */
  color: #c71585;  /* Purple */
  text-shadow: 0 0 5px rgba(199, 21, 133, 0.8);  /* Glowing purple shadow */
}  

.logo {
    position: relative;
    width: 225px;
    height: auto;
    overflow: hidden;
    border-radius: 50%; /* Добавляем круглую форму */
}

.logo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 50%; /* Также скругляем само изображение */
}

  /** animation: techcomVisibility 10s infinite;
}

/* Skynet overlay effect */
.logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background: url('assets/skynetlogo.png'); Path to your Skynet logo */
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  animation: skynetVisibility 10s infinite alternate, noiseEffect 1s infinite steps(15);
  border-radius: 50%;
}

@keyframes techcomVisibility {
  0%, 100% { 
    opacity: 1; /* Techcom starts visible */
  }
  50% {
    opacity: 0; /* Techcom fades out at midpoint */
  }
}

@keyframes skynetVisibility {
  0%, 100% { 
    opacity: 0; /* Skynet starts invisible */
  }
  25%, 75% {
    opacity: 0.5; /* Skynet becomes visible when Techcom is faded */
  }
}

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


/* Player Greeting */
h2.scan-text {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #c71585;  /* Purple */
  text-shadow: 0 0 5px #c71585;
}

/* Glitch Effect for Server Status */
.glitch-text {
  font-size: 1.2rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin-bottom: 20px;
  color: #9932cc;  /* Dark purple */
  text-shadow: 0 0 5px #9932cc;
  animation: glitchEffect 1.5s infinite;
}

  /* Background with Pan and Zoom Animation */
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/background.webp');
  background-size: cover;
  background-position: center;
  animation: panZoomEffect 45s ease-in-out infinite alternate;
  opacity: 0.4;
}

/* Keyframes for Pan and Zoom Animation */
@keyframes panZoomEffect {
  0% {
    background-position: 0% 100%; /* Начало внизу слева */
    background-size: 120%;
  }
  25% {
    background-position: 100% 100%; /* Перемещение вправо внизу */
    background-size: 130%;
  }
  50% {
    background-position: 100% 80%; /* Движение вверх справа */
    background-size: 140%;
  }
  75% {
    background-position: 0% 80%; /* Перемещение влево вверху */
    background-size: 130%;
  }
  100% {
    background-position: 0% 100%; /* Возврат вниз слева */
    background-size: 120%;
  }
}


/* Progress Bar Container */
#progress-container {
  position: absolute;
  bottom: 50px; /* Position it near the bottom of the screen */
  left: 50%;
  transform: translateX(-50%);
  width: 50%; /* Width of the container */
  height: 50px; /* Height of the progress bar */
  border: 2px solid #c71585; /* Purple border */
  box-shadow: 0 0 10px rgba(199, 21, 133, 0.8), inset 0 0 10px rgba(199, 21, 133, 0.6);
  overflow: hidden;
  background-color: #2a1a2a; /* Dark purple background behind the bar */
}

/* Progress Bar Itself */
#progress-bar {
  width: 0; /* Start at 0 and gradually fill */
  height: 100%;
  background-color: #c71585; /* Purple */
  box-shadow: 0 0 10px rgba(199, 21, 133, 0.8); /* Glowing purple effect */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-shadow: 0 0 10px rgba(199, 21, 133, 0.8); /* Glowing text effect */
  color: #ffffff;
}

/* Progress Text */
#progress-text {
  padding-left: 10px;
  text-align: center; 
  width: 100%;  
  color: #ffffff; 
  line-height: 10px; 
  font-size: 10px;
}

/* File Progress Details */
#loading-details {
  position: absolute;
  bottom: 20px; /* Just below the progress bar */
  left: 50%;
  transform: translateX(-50%);
  color: #9932cc; /* Dark purple */
  font-size: 16px;
}

/* Glitch Text Animation */
@keyframes glitchEffect {
  0% { text-shadow: 2px 2px #c71585, -2px -2px #0f0; }
  50% { text-shadow: -2px 2px #0f0, 2px -2px #c71585; }
  100% { text-shadow: 2px 2px #0f0, -2px -2px #c71585; }
}


/* Assembly Code Feed Left Column */
.assembly-feed-left {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 16px;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);  /* Glowing white effect */
  z-index: 0; /* Lower to push behind elements */
  opacity: 0.6;
}

.assembly-line-left {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
}

/* Assembly Code Feed Right Column */
.assembly-feed-right {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 16px;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);  /* Glowing white effect */
  z-index: -1; /* Lower z-index to push this behind other elements */
  opacity: 0.6; /* Optional: Adjust transparency */
}

.assembly-line-right {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
}

/* Targeting Reticle in the Center */
.reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
}

.reticle-vertical, .reticle-horizontal {
  position: absolute;
  background-color: #c71585; /* Purple */
  z-index: 10;
}

.reticle-vertical {
  width: 2px;
  height: 60px;
  left: 50%;
  transform: translateX(-50%);
}

.reticle-horizontal {
  width: 60px;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}

/* Flickering and Glitching Effects */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes glitch {
  0% {
    text-shadow: 0 0 10px rgba(199, 21, 133, 0.8), 0 0 20px rgba(199, 21, 133, 0.8);
  }
  50% {
    text-shadow: 0 0 20px rgba(199, 21, 133, 1), 0 0 40px rgba(199, 21, 133, 1);
  }
  100% {
    text-shadow: 0 0 10px rgba(199, 21, 133, 0.8), 0 0 20px rgba(199, 21, 133, 0.8);
  }
}

.hud-feed, .assembly-feed {
  animation: flicker 2s infinite, glitch 1.5s infinite;
}

/* Scanlines Overlay */
.scanlines {
position: fixed;  /* Sticks to the viewport */
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* Ensure clicks pass through */
background: repeating-linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0.25), /* Darker for better visibility */
  rgba(0, 0, 0, 0.25) 1px,
  transparent 1px,
  transparent 3px
);
z-index: 100; /* Make sure scanlines are above everything */
opacity: 0.2;  /* Higher opacity for more visibility */
}

/* Glitching and Flickering Effects */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes glitch {
  0% {
    text-shadow: 0 0 10px rgba(199, 21, 133, 0.8), 0 0 20px rgba(199, 21, 133, 0.8);
  }
  50% {
    text-shadow: 0 0 20px rgba(199, 21, 133, 1), 0 0 40px rgba(199, 21, 133, 1);
  }
  100% {
    text-shadow: 0 0 10px rgba(199, 21, 133, 0.8), 0 0 20px rgba(199, 21, 133, 0.8);
  }
}

.hud-feed, .assembly-feed {
  animation: flicker 2s infinite, glitch 1.5s infinite;  /* Flicker and glitch effects */
}

#music-status-box {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  font-size: 18px;
  background-color: #c71585; /* Purple */
  color: #ffffff;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(199, 21, 133, 0.7);
}

/* Styling for the console text and cursor */
#console {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  color: #ee82ee; /* Light purple */
  background-color: #2b0d2b; /* Dark purple background */
  padding: 20px;
  width: 600px;
  margin: 50px auto;
  border: 1px solid #9932cc; /* Dark purple border */
  box-shadow: 0 0 15px rgba(153, 50, 204, 0.3); /* Purple glow */
}

#cursor {
  font-weight: bold;
  color: #ee82ee; /* Light purple cursor */
  animation: blink 1s infinite;
}

/* Blinking cursor animation */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}