html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #f0e6d2;
  font-family: 'Courier New', monospace;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.message {
  font-size: 1.5rem;
  text-align: center;
  color: #f0e6d2;
  opacity: 0;
  width: 100%;
  max-width: 100%;
  padding: 0 1rem;
  margin: 0 auto;
  box-sizing: border-box;
  white-space: pre-wrap;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  backface-visibility: hidden; /* Prevent jaggedness during transforms */
  will-change: transform, opacity, filter; /* Optimize for animation performance */
  animation:
    bootUp 3s ease-out forwards,
    flickerCRT 12s infinite,
    blurPulse 30s infinite,
    rareTextGlitch 120s step-end infinite;
}

/* Boot-in zoom softened */
@keyframes bootUp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.03) rotateX(5deg); filter: blur(5px); }
  40% { opacity: 0.3; transform: translate(-50%, -50%) scale(1.01) rotateX(2deg); }
  70% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.005) rotateX(1deg); filter: blur(1px); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateX(0deg); filter: none; }
}

@keyframes flickerCRT {
  0%, 100% { opacity: 1; }
  3% { opacity: 0.85; }
  7% { opacity: 0.95; }
  14% { opacity: 0.88; }
  22% { opacity: 1; }
  38% { opacity: 0.92; }
  53% { opacity: 0.87; }
  66% { opacity: 1; }
  79% { opacity: 0.91; }
  89% { opacity: 1; }
}

@keyframes blurPulse {
  0%, 100% { filter: none; }
  20% { filter: blur(0.4px); }
  22% { filter: none; }
  48% { filter: blur(0.6px); }
  49% { filter: none; }
  74% { filter: blur(0.9px); }
  75% { filter: none; }
}

/* Very rare and subtle size glitches */
@keyframes rareTextGlitch {
  /* Mostly normal size */
  0%, 2%, 3%, 4%, 5%, 6%, 7%, 8%, 9%, 10%, 11%, 12%, 13%, 15%, 16%, 17%, 18%, 
  19%, 20%, 22%, 23%, 24%, 25%, 26%, 27%, 28%, 29%, 30%, 31%, 32%, 33%, 34%, 35%, 
  37%, 38%, 39%, 40%, 41%, 42%, 43%, 44%, 45%, 46%, 47%, 48%, 49%, 50%, 52%, 53%, 
  54%, 55%, 56%, 57%, 58%, 59%, 60%, 61%, 62%, 63%, 64%, 65%, 67%, 68%, 69%, 70%, 
  71%, 72%, 73%, 74%, 75%, 76%, 77%, 78%, 79%, 80%, 82%, 83%, 84%, 85%, 86%, 87%, 
  88%, 89%, 90%, 91%, 92%, 93%, 94%, 95%, 97%, 98%, 99%, 100% { transform: translate(-50%, -50%) scale(1); }
  
  /* First glitch: quick flash bigger then normal */
  14.0%, 14.1% { transform: translate(-50%, -50%) scale(1.02); }
  14.2% { transform: translate(-50%, -50%) scale(1); }
  
  /* Second glitch: slightly bigger for a moment */
  21.0%, 21.3% { transform: translate(-50%, -50%) scale(1.015); }
  21.4% { transform: translate(-50%, -50%) scale(1); }
  
  /* Third glitch: quick smaller then bigger */
  36.0% { transform: translate(-50%, -50%) scale(0.98); }
  36.1% { transform: translate(-50%, -50%) scale(1.01); }
  36.2% { transform: translate(-50%, -50%) scale(1); }
  
  /* Fourth glitch: slightly smaller for longer */
  51.0%, 51.5% { transform: translate(-50%, -50%) scale(0.985); }
  51.6% { transform: translate(-50%, -50%) scale(1); }
  
  /* Fifth glitch: double flash */
  66.0% { transform: translate(-50%, -50%) scale(1.013); }
  66.1% { transform: translate(-50%, -50%) scale(1); }
  66.2% { transform: translate(-50%, -50%) scale(1.013); }
  66.3% { transform: translate(-50%, -50%) scale(1); }
  
  /* Sixth glitch: very subtle size change */
  81.0%, 81.1% { transform: translate(-50%, -50%) scale(0.99); }
  81.2% { transform: translate(-50%, -50%) scale(1); }
  
  /* Seventh glitch: larger change but very brief */
  96.0% { transform: translate(-50%, -50%) scale(1.025); }
  96.05% { transform: translate(-50%, -50%) scale(1); }
}

.scanline {
  position: fixed;
  top: -5%;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(240, 230, 210, 0.05);
  animation: scanlineMove 12s ease-in-out infinite;
  z-index: 5;
}

@keyframes scanlineMove {
  0% { top: -5%; opacity: 0; }
  10% { opacity: 0.12; }
  50% { top: 100%; opacity: 0.08; }
  100% { top: 100%; opacity: 0; }
}

.glitchFlash {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #f0e6d2;
  opacity: 0;
  pointer-events: none;
  animation: glitchFlash 60s infinite;
  z-index: 4;
}

@keyframes glitchFlash {
  0%, 99.9%, 100% { opacity: 0; }
  29.5% { opacity: 0.02; }
  29.6% { opacity: 0; }
  68.8% { opacity: 0.01; }
  68.9% { opacity: 0; }
}

.sepiaNoise {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAK0lEQVQoz2NgYGD4T2dgYGBgYGDwYGBg+P8fBjAwMDP4TwYwCBgAAAEoAHVb8kHTAAAAAElFTkSuQmCC');
  background-repeat: repeat;
  opacity: 0;
  pointer-events: none;
  animation: sepiaNoise 90s infinite;
  z-index: 6;
}

@keyframes sepiaNoise {
  0%, 99.9%, 100% { opacity: 0; }
  30% { opacity: 0.02; }
  30.1% { opacity: 0; }
  80% { opacity: 0.015; }
  80.1% { opacity: 0; }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(240, 230, 210, 0.01) 0%, transparent 80%);
  animation: pulse 40s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { opacity: 0.005; }
  50% { opacity: 0.015; }
}

.screenFlash {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: white; /* or 'black' for memory blackout effect */
  opacity: 0;
  pointer-events: none;
  animation: screenShort 120s infinite;
  z-index: 10;
}

@keyframes screenShort {
  0%, 97%, 100% { opacity: 0; }
  49.8% { opacity: 0.02; }
  49.9% { opacity: 0.05; }
  50%   { opacity: 0.08; }
  50.1% { opacity: 0.02; }
  50.2% { opacity: 0; }
}

/* Random specs/dust floating across the screen */
.specs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
}

.spec {
  position: absolute;
  width: 1px;
  height: 1px;
  background-color: rgba(240, 230, 210, 0.5);
  border-radius: 50%;
  opacity: 0.05;
  pointer-events: none;
  box-shadow: 0 0 1px rgba(240, 230, 210, 0.3);
}

/* Pixel noise that randomly appears */
.pixelNoise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3C/rect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  animation: pixelNoiseAnimation 45s infinite;
}

@keyframes pixelNoiseAnimation {
  0%, 100% { opacity: 0; }
  15% { opacity: 0; }
  15.1% { opacity: 0.08; }
  15.3% { opacity: 0; }
  75% { opacity: 0; }
  75.1% { opacity: 0.10; }
  75.3% { opacity: 0; }
}

/* RGB shift effect */
.rgbShift {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 8;
}

.rgbShift::before, .rgbShift::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  mix-blend-mode: screen;
}

.rgbShift::before {
  background-color: rgba(255, 180, 140, 0.07);
  animation: rgbShiftRed 30s infinite;
}

.rgbShift::after {
  background-color: rgba(140, 180, 255, 0.07);
  animation: rgbShiftBlue 30s infinite;
}

@keyframes rgbShiftRed {
  0%, 100% { transform: translateX(0); opacity: 0; }
  15% { transform: translateX(-3px); opacity: 0.05; }
  16% { transform: translateX(0); opacity: 0; }
  75% { transform: translateX(2px); opacity: 0.04; }
  76% { transform: translateX(0); opacity: 0; }
}

@keyframes rgbShiftBlue {
  0%, 100% { transform: translateX(0); opacity: 0; }
  35% { transform: translateX(3px); opacity: 0.05; }
  36% { transform: translateX(0); opacity: 0; }
  85% { transform: translateX(-2px); opacity: 0.04; }
  86% { transform: translateX(0); opacity: 0; }
}

/* Static noise overlay */
.staticNoise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='staticFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23staticFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.terminal-prompt {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #f0e6d2;
  opacity: 1;
  z-index: 20;
  backface-visibility: hidden; /* Prevent jaggedness during transforms */
  will-change: transform, opacity, filter; /* Optimize for animation performance */
  animation:
    flickerCRT 12s infinite,
    blurPulse 30s infinite,
    rareTerminalGlitch 120s step-end infinite;
}

.prompt-line {
  margin: 0.3rem 0;
  opacity: 0;
}

.prompt-line.visible {
  opacity: 1;
}

.prompt {
  color: #d4af37;
}

.command {
  color: #f0e6d2;
}

.file-listing {
  margin: 0.5rem 0;
  padding-left: 2rem;
}

.file-link {
  display: block;
  color: #f0e6d2;
  text-decoration: none;
  margin: 0.2rem 0;
  opacity: 0;
}

.file-link.visible {
  opacity: 1;
}

.file-link:hover .file-name {
  color: #d4af37;
  text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
  text-decoration: underline;
}

.permissions {
  color: #8b7355;
  margin-right: 1rem;
}

.file-name {
  color: #87ceeb;
}

.cursor {
  animation: cursorBlink 1s infinite;
}

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

/* Mobile optimization */
@media (max-width: 767px) {
  .message {
    font-size: 1.2rem;
    width: 90%;
    padding: 0 0.5rem;
  }
  
  .terminal-prompt {
    bottom: 1rem;
    left: 1rem;
    font-size: 0.8rem;
  }
  
  .file-listing {
    padding-left: 1rem;
  }
}

@media (max-width: 480px) {
  .message {
    font-size: 1rem;
    width: 85%;
  }
  
  .terminal-prompt {
    font-size: 0.9rem;
  }
}

/* Interactive Effects - Triggered on tap/click */
.tapFlash {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(240, 230, 210, 0.15);
  opacity: 0;
  pointer-events: none;
  z-index: 12;
}

@keyframes tapReaction {
  0% { opacity: 0.15; }
  20% { opacity: 0.08; }
  40% { opacity: 0.12; }
  60% { opacity: 0.03; }
  80% { opacity: 0.05; }
  100% { opacity: 0; }
}

/* Text glitch animation for interaction */
@keyframes interactionTextGlitch {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: brightness(1); }
  10% { transform: translate(-49.8%, -50%) scale(1.01); opacity: 1; filter: brightness(1.1); }
  20% { transform: translate(-50.1%, -50.1%) scale(0.99); opacity: 1; filter: brightness(1.15); }
  30% { transform: translate(-50%, -49.9%) scale(1.005); opacity: 1; filter: brightness(1.2); }
  40% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: brightness(1.25); }
  50% { transform: translate(-50.1%, -50%) scale(1.01); opacity: 1; filter: brightness(1.3); }
  60% { transform: translate(-49.9%, -50.1%) scale(0.995); opacity: 1; filter: brightness(1.2); }
  70% { transform: translate(-50%, -49.9%) scale(1); opacity: 1; filter: brightness(1.1); }
  80% { transform: translate(-50.1%, -50.1%) scale(1.005); opacity: 1; filter: brightness(1.05); }
  90% { transform: translate(-49.9%, -50%) scale(0.998); opacity: 1; filter: brightness(1); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: brightness(1); }
}

/* Scanline reaction */
@keyframes scanlineReaction {
  0% { top: -5%; opacity: 0.2; }
  100% { top: 105%; opacity: 0.15; }
}

/* Terminal ripple effect */
.terminalRipple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 230, 210, 0.2) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 11;
  opacity: 0;
}

@keyframes rippleEffect {
  0% { width: 0; height: 0; opacity: 0.3; }
  100% { width: 300px; height: 300px; opacity: 0; }
}

/* Tap Static Effect */
.tapStatic {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='staticFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23staticFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

/* Different static intensities */
@keyframes tapStaticLight {
  0% { opacity: 0; }
  5% { opacity: 0.05; }
  30% { opacity: 0.03; }
  70% { opacity: 0.07; }
  100% { opacity: 0; }
}

@keyframes tapStaticMedium {
  0% { opacity: 0; }
  5% { opacity: 0.12; }
  30% { opacity: 0.09; }
  70% { opacity: 0.14; }
  100% { opacity: 0; }
}

@keyframes tapStaticHeavy {
  0% { opacity: 0; }
  5% { opacity: 0.25; }
  30% { opacity: 0.18; }
  70% { opacity: 0.22; }
  100% { opacity: 0; }
}

/* Instant static flash */
@keyframes tapStaticInstant {
  0%, 10%, 100% { opacity: 0; }
  5% { opacity: 0.2; }
}

/* Text brief disappearance animation */
@keyframes textBriefDisappearance {
  0%, 100% { opacity: 1; }
  5%, 6% { opacity: 0.3; } /* Quick disappearance around 5-6% of the animation */
  50%, 50.5% { opacity: 0.5; } /* Another quick flash around 50% */
  75%, 75.1% { opacity: 0.7; } /* Very brief flash at 75% */
}

/* TV Phase Shift Effect - Enhanced with better horizontal movement */
@keyframes tvPhaseShift {
  0% { transform: translate(-50%, -50%) scale(1); filter: none; }
  5% { transform: translate(-65px, -50%) scale(1.03); filter: hue-rotate(15deg) brightness(1.1); }
  10% { transform: translate(-55px, -52%) scale(1.02); filter: hue-rotate(12deg) brightness(1.15); }
  20% { transform: translate(-40px, -49%) scale(0.98); filter: hue-rotate(8deg) brightness(1.1); }
  30% { transform: translate(-50px, -51%) scale(1.01); filter: hue-rotate(5deg) brightness(1.05); }
  35% { transform: translate(-35px, -50%) scale(1.015); filter: hue-rotate(3deg) brightness(1.08); }
  45% { transform: translate(-25px, -48%) scale(0.99); filter: hue-rotate(2deg) brightness(1.05); }
  60% { transform: translate(-15px, -50%) scale(1.005); filter: hue-rotate(1deg); }
  75% { transform: translate(-8px, -49%) scale(1.01); filter: none; }
  85% { transform: translate(-3px, -50%) scale(1.002); filter: none; }
  100% { transform: translate(-50%, -50%) scale(1); filter: none; }
}

/* Alternative TV Phase Shift (other direction) */
@keyframes tvPhaseShiftAlt {
  0% { transform: translate(-50%, -50%) scale(1); filter: none; }
  5% { transform: translate(20px, -48%) scale(1.025); filter: hue-rotate(-15deg) brightness(1.1); }
  15% { transform: translate(32px, -51%) scale(1.03); filter: hue-rotate(-12deg) brightness(1.15); }
  20% { transform: translate(28px, -49%) scale(0.985); filter: hue-rotate(-9deg) brightness(1.05); }
  25% { transform: translate(40px, -52%) scale(1.02); filter: hue-rotate(-6deg) brightness(1.1); }
  40% { transform: translate(25px, -49%) scale(1.01); filter: hue-rotate(-4deg) brightness(1.08); } 
  50% { transform: translate(15px, -51%) scale(0.995); filter: hue-rotate(-2deg) brightness(1.05); }
  65% { transform: translate(8px, -50%) scale(1.008); filter: hue-rotate(-1deg); }
  80% { transform: translate(5px, -50%) scale(1.005); filter: none; }
  90% { transform: translate(2px, -49%) scale(1.002); filter: none; }
  100% { transform: translate(-50%, -50%) scale(1); filter: none; }
}

/* TV Phase color fringing - Enhanced implementation for sepia */
@keyframes tvColorFringing {
  0%, 100% { text-shadow: 0 0 0 transparent, 0 0 0 transparent; filter: none; }
  20% { text-shadow: -3px 0 2px rgba(255,180,140,0.8), 3px 0 2px rgba(140,180,255,0.8); filter: contrast(1.1); }
  40% { text-shadow: -4px 0 3px rgba(255,180,140,0.9), 4px 0 3px rgba(140,180,255,0.9); filter: contrast(1.2); }
  60% { text-shadow: -2px 0 2px rgba(255,180,140,0.8), 2px 0 2px rgba(140,180,255,0.8); filter: contrast(1.15); }
  80% { text-shadow: -1px 0 1px rgba(255,180,140,0.7), 1px 0 1px rgba(140,180,255,0.7); filter: contrast(1.05); }
}

/* Terminal-specific text glitch animation (no centering transforms) */
@keyframes rareTerminalGlitch {
  /* Mostly normal size */
  0%, 2%, 3%, 4%, 5%, 6%, 7%, 8%, 9%, 10%, 11%, 12%, 13%, 15%, 16%, 17%, 18%, 
  19%, 20%, 22%, 23%, 24%, 25%, 26%, 27%, 28%, 29%, 30%, 31%, 32%, 33%, 34%, 35%, 
  37%, 38%, 39%, 40%, 41%, 42%, 43%, 44%, 45%, 46%, 47%, 48%, 49%, 50%, 52%, 53%, 
  54%, 55%, 56%, 57%, 58%, 59%, 60%, 61%, 62%, 63%, 64%, 65%, 67%, 68%, 69%, 70%, 
  71%, 72%, 73%, 74%, 75%, 76%, 77%, 78%, 79%, 80%, 82%, 83%, 84%, 85%, 86%, 87%, 
  88%, 89%, 90%, 91%, 92%, 93%, 94%, 95%, 97%, 98%, 99%, 100% { transform: scale(1); }
  
  /* First glitch: quick flash bigger then normal */
  14.0%, 14.1% { transform: scale(1.02); }
  14.2% { transform: scale(1); }
  
  /* Second glitch: slightly bigger for a moment */
  21.0%, 21.3% { transform: scale(1.015); }
  21.4% { transform: scale(1); }
  
  /* Third glitch: quick smaller then bigger */
  36.0% { transform: scale(0.98); }
  36.1% { transform: scale(1.01); }
  36.2% { transform: scale(1); }
  
  /* Fourth glitch: slightly smaller for longer */
  51.0%, 51.5% { transform: scale(0.985); }
  51.6% { transform: scale(1); }
  
  /* Fifth glitch: double flash */
  66.0% { transform: scale(1.013); }
  66.1% { transform: scale(1); }
  66.2% { transform: scale(1.013); }
  66.3% { transform: scale(1); }
  
  /* Sixth glitch: very subtle size change */
  81.0%, 81.1% { transform: scale(0.99); }
  81.2% { transform: scale(1); }
  
  /* Seventh glitch: larger change but very brief */
  96.0% { transform: scale(1.025); }
  96.05% { transform: scale(1); }
}