/* CRT Monitor Effect */

.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  background: 
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.04) 1px,
      transparent 1px,
      transparent 2px
    );
  mix-blend-mode: multiply;
}

/* Add slight screen glow */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
  z-index: 9997;
}

/* Screen distortion effect (subtle) - stops after 5 seconds */
@keyframes screenFlicker {
  0% { transform: translateY(0); }
  20% { transform: translateY(1px); }
  40% { transform: translateY(-1px); }
  60% { transform: translateY(0); }
  80% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

.desktop {
  animation: screenFlicker 0.15s infinite;
  animation-duration: 5s;
}

.desktop.crt-animation-stopped {
  animation: none !important;
}

/* Phosphor glow on active windows */
.window.active {
  box-shadow: 
    0 0 20px rgba(16, 132, 215, 0.3),
    1px 1px 0 #ffffff inset,
    -1px -1px 0 #808080 inset;
  text-shadow: 0 0 2px rgba(16, 132, 215, 0.1);
}

/* Window title glow */
.window-title {
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
}

/* Text scanline effect */
.window-content,
.window-scrollable {
  background: 
    linear-gradient(
      0deg,
      transparent 24%,
      rgba(0, 0, 0, 0.02) 25%,
      rgba(0, 0, 0, 0.02) 26%,
      transparent 27%,
      transparent 74%,
      rgba(0, 0, 0, 0.02) 75%,
      rgba(0, 0, 0, 0.02) 76%,
      transparent 77%,
      transparent
    ),
    white;
  background-size: 100% 4px;
}

/* Reduce glow on mobile */
@media (max-width: 768px) {
  .crt-overlay {
    opacity: 0.5;
  }

  .window.active {
    box-shadow: 
      0 0 10px rgba(16, 132, 215, 0.2),
      1px 1px 0 #ffffff inset,
      -1px -1px 0 #808080 inset;
  }
}

/* Vintage color shift effect */
@keyframes colorShift {
  0% { filter: hue-rotate(0deg) contrast(1.02); }
  50% { filter: hue-rotate(1deg) contrast(1.01); }
  100% { filter: hue-rotate(0deg) contrast(1.02); }
}

.desktop {
  animation: screenFlicker 0.15s infinite, colorShift 3s ease-in-out infinite;
}