body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #030303; /* Almost pure black */
    color: #ff0000; /* Bright Red */
    font-family: 'VT323', 'Courier New', Courier, monospace;
    font-size: 26px; /* Larger text size */
    overflow: hidden;
}

#terminal {
    width: 100vw;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    position: relative;
    line-height: 1.5;
}

#output {
    white-space: pre-wrap;
    position: relative;
    /* Apply animations */
    animation:
        occasionalTransformGlitch 8s steps(1, end) infinite, /* Slower, occasional block glitch */
        textGlowAndShadowGlitch 6s linear infinite;      /* Handles base glow and occasional shadow glitch */
}

.cursor {
    display: inline-block;
    width: 0.6em;
    height: 1.2em;
    background-color: #ff0000; /* Red cursor */
    margin-left: 2px;
    animation: blink 1s step-end infinite;
    vertical-align: bottom;
    /* Match text glow for cursor */
    box-shadow: 0 0 3px rgba(255, 80, 80, 0.8),
                0 0 7px rgba(255, 0, 0, 0.7);
}

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

/* --- Glitch Animations --- */

/* For occasional main text block jerking/shifting */
@keyframes occasionalTransformGlitch {
  0%, 97% { /* Normal state for most of the animation cycle */
    transform: translate(0, 0) skewX(0deg);
  }
  /* Short burst of glitching (occupies 3% of 8s = ~0.24 seconds) */
  97.5% { transform: translate(-4px, 2px) skewX(-3deg); }
  98%   { transform: translate(3px, -3px) skewX(2deg); }
  98.5% { transform: translate(1px, 2px) skewX(-1deg); }
  99%   { transform: translate(-2px, -1px) skewX(3deg); }
  100%  { transform: translate(0, 0) skewX(0deg); } /* Return to normal */
}

/* For base text glow and occasional glitchy text shadows */
@keyframes textGlowAndShadowGlitch {
  /* Normal State: Subtle Glow (0% to 95% of the cycle) */
  0%, 95% {
    text-shadow:
      0 0 2px rgba(255, 100, 100, 0.7),  /* Inner, slightly soft bright red */
      0 0 5px rgba(255, 0, 0, 0.6),      /* Main red glow */
      0 0 9px rgba(255, 0, 0, 0.4);      /* Wider, more diffuse outer glow */
  }

  /* Glitchy Shadow State (occupies 5% of 6s = ~0.3 seconds) */
  95.5% {
    text-shadow:
      2px 1px 1px rgba(255,150,150,0.3),   /* Lighter red glitch shadow */
      -1px -2px 1px rgba(200,0,0,0.2),    /* Darker red glitch shadow */
      0 0 4px rgba(255,50,50,0.5);        /* A slightly sharper base glow during glitch */
  }
  96.5% {
    text-shadow:
      -3px -1px 1px rgba(255,120,120,0.4),
      2px 2px 1px rgba(180,30,30,0.3),
      0 0 6px rgba(255,30,30,0.6);
  }
  97.5% { /* Intense flicker/different glow */
    text-shadow:
      0 0 3px #ff8080, /* Brighter pinkish */
      0 0 8px #ff3333,
      0 0 15px rgba(255,0,0,0.7),
      1px 1px 0px rgba(100,0,0,0.2);
  }
  98.5% {
     text-shadow:
      1px -1px 1px rgba(255,100,100,0.3),
      -2px 1px 1px rgba(170,0,0,0.2),
      0 0 5px rgba(255,0,0,0.5);
  }
  100% { /* Return to normal glow state */
    text-shadow:
      0 0 2px rgba(255, 100, 100, 0.7),
      0 0 5px rgba(255, 0, 0, 0.6),
      0 0 9px rgba(255, 0, 0, 0.4);
  }
}
/* --- End Glitch Animations --- */


/* Optional: Scanlines effect - Adjusted for red theme and subtlety */
#terminal::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(10, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15) 50%), /* More subtle dark lines */
                linear-gradient(90deg, rgba(60, 0, 0, 0.04), rgba(30, 0, 0, 0.02), rgba(60, 0, 0, 0.04)); /* More subtle red vertical lines */
    z-index: 2;
    background-size: 100% 4px, 6px 100%;
    pointer-events: none;
    opacity: 0.4; /* Further reduced opacity for scanlines */
}