/* ============================================================
   NAUSTALGIAOS PERFORMANCE PATCH
   
   Add this CSS AFTER styles.css to override expensive animations
   and add performance hints
============================================================ */

/* ============================================================
   GPU ACCELERATION HINTS
   Tell browser to composite these on GPU
============================================================ */
#glitchGhost,
#cursorGhost,
.cursorGhost,
.glyph,
#term .term-inner,
#crtOverlay,
.terminal-particles {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ============================================================
   OPTIMIZED CRT OVERLAY
   - Slower flicker (less repaints)
   - Simpler gradient
============================================================ */
#crtOverlay {
  /* Slower flicker - 0.5s instead of 0.15s */
  animation: flickOptimized 0.5s infinite;
  /* Simpler scanlines */
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 255, 0.06) 0,
    rgba(0, 255, 255, 0.06) 1px,
    transparent 1px,
    transparent 4px
  );
}

@keyframes flickOptimized {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 0.12; }
}

/* ============================================================
   OPTIMIZED CURSOR GHOST
   - Uses transform instead of left/top
   - Simpler shadow
============================================================ */
#cursorGhost,
.cursorGhost {
  position: fixed;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* Simpler gradient - less computation */
  background: rgba(0, 255, 255, 0.7);
  /* Single shadow instead of multiple */
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.1s linear;
}

/* ============================================================
   REDUCED MOTION SUPPORT
   For users who prefer less animation
============================================================ */
@media (prefers-reduced-motion: reduce) {
  #glitchGhost,
  .glyph,
  #cursorGhost,
  #crtOverlay,
  .terminal-particles .dust {
    animation: none !important;
    transition: opacity 0.1s linear !important;
  }
  
  #crtOverlay {
    opacity: 0.1 !important;
  }
  
  /* Disable scan lines entirely */
  #crtOverlay::before,
  #crtOverlay::after {
    display: none !important;
  }
}

/* ============================================================
   SIMPLIFIED GLYPH ANIMATIONS
   Reduce from 3 animations to 1
============================================================ */
.glyph {
  /* Single animation instead of multiple */
  animation: glyphPulse 3s ease-in-out infinite;
}

@keyframes glyphPulse {
  0%, 100% { 
    opacity: 0.7;
    transform: translate(var(--drift-x, 0), var(--drift-y, 0));
  }
  50% { 
    opacity: 0.9;
    transform: translate(calc(var(--drift-x, 0) + 1px), calc(var(--drift-y, 0) + 1px));
  }
}

/* ============================================================
   REDUCED SHADOW COMPLEXITY
   Fewer box-shadows = less paint time
============================================================ */
#term {
  /* Single shadow instead of multiple layers */
  text-shadow: 0 0 6px #00FFFF !important;
}

#term .line {
  /* Simplified text shadow */
  text-shadow: 0 0 4px currentColor;
}

/* Ghost sigil - simplified glow */
#glitchGhost {
  filter: 
    drop-shadow(0 0 10px rgba(0, 255, 255, 0.8))
    drop-shadow(0 0 30px rgba(0, 255, 255, 0.4)) !important;
}

/* ============================================================
   PARTICLE OPTIMIZATION
   Reduce particle count effect
============================================================ */
.terminal-particles .dust:nth-child(n+15) {
  display: none;
}