/* 
  This CSS is for atmospheric effects only.
  All layout and primary styling is handled by HTML attributes.
*/

body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
  z-index: 2;
  pointer-events: none; /* Allows you to click through it */
}

.blinking-cursor {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.header-ascii {
  /* This makes the pre tag scale with the container */
  width: 95%; /* Adjust this percentage as needed */
  display: inline-block; /* Helps with sizing */
}

.header-ascii pre {
  /*
    This is the magic. The 'vw' unit stands for "viewport width".
    1vw is 1% of the browser's width.
    This makes the font size directly proportional to the screen size.
    The result: the ASCII art scales beautifully.
  */
  font-size: 1.2vw;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1.1; /* Tightens up the lines a bit */
}

/* Add a media query for smaller screens, like mobile */
@media (max-width: 768px) {
  .header-ascii pre {
    font-size: 2.5vw;
  }
}

/* --- LOGOUT PAGE ANIMATIONS --- */

/* This creates a full-screen overlay with animated scanlines */
.logout-page::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    0deg, 
    rgba(0, 255, 65, 0.15), 
    rgba(0, 255, 65, 0.15) 1px, 
    transparent 1px, 
    transparent 6px
  );
  background-size: 100% 6px;
  animation: screenWipe 2s linear infinite;
  z-index: -1; /* Puts it behind the text */
}

@keyframes screenWipe {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -100px;
  }
}

/* This makes the text itself flicker */
#logout-message {
  animation: textFlicker 3s linear infinite;
}

@keyframes textFlicker {
  0%, 100% { opacity: 1; }
  25% { opacity: 1; }
  26% { opacity: 0.5; }
  27% { opacity: 1; }
  50% { opacity: 1; }
  51% { opacity: 0.3; }
  52% { opacity: 1; }
}