/* Retro Animations and Effects Library */
:root {
  --neon-magenta: #ff0099;
  --neon-blue: #00c3ff;
  --neon-purple: #d417ff;
  --neon-cyan: #00ffdb;
  --neon-yellow: #ffdf22;
  --neon-green: #39ff14;
  --grid-color: rgba(255, 0, 255, 0.2);
  --text-primary: #f2f2ff;
  --text-secondary: #b4a0ff;
  --bg-dark: #0b0614;
}

/* Optimize performance with GPU acceleration */
.gpu-accelerated {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Prefers reduced motion - accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Animation keyframes */
@keyframes scanlines {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

@keyframes flicker {
  0%, 100% { opacity: 0.05; }
  5% { opacity: 0.06; }
  10% { opacity: 0.05; }
  15% { opacity: 0.06; }
  20% { opacity: 0.05; }
  50% { opacity: 0.057; }
  60% { opacity: 0.05; }
  70% { opacity: 0.058; }
  80% { opacity: 0.05; }
}

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

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(1deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
  75% { transform: translateY(-10px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes neonPulse {
  0%, 100% { 
    opacity: 1;
    text-shadow: 
      0 0 5px var(--neon-magenta),
      0 0 10px var(--neon-magenta),
      0 0 20px var(--neon-blue),
      0 0 40px var(--neon-blue);
  }
  50% { 
    opacity: 0.9; 
    text-shadow: 
      0 0 2px var(--neon-magenta),
      0 0 5px var(--neon-magenta),
      0 0 10px var(--neon-blue),
      0 0 20px var(--neon-blue);
  }
}

@keyframes textGlitch {
  0%, 85%, 95%, 100% { 
    text-shadow: 
      0 0 5px var(--neon-magenta),
      0 0 10px var(--neon-magenta),
      0 0 20px var(--neon-blue),
      0 0 40px var(--neon-blue);
    transform: skew(0); 
  }
  87%, 93% { 
    text-shadow: none;
    transform: skew(-5deg); 
  }
  90% {
    text-shadow: none;
    transform: skew(5deg);
  }
}

@keyframes borderGlow {
  0%, 100% {
    box-shadow: 0 0 10px var(--neon-magenta), inset 0 0 5px var(--neon-magenta);
  }
  50% {
    box-shadow: 0 0 20px var(--neon-blue), inset 0 0 10px var(--neon-blue);
  }
}

@keyframes rotateIn {
  from {
    transform: rotate3d(0, 0, 1, -720deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes pixelate {
  0%, 100% { filter: none; }
  20% { filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="a" color-interpolation-filters="sRGB"><feComponentTransfer><feFuncR type="discrete" tableValues="0 .5 1 1"/><feFuncG type="discrete" tableValues="0 .5 1"/><feFuncB type="discrete" tableValues="0 0.5 1"/></feComponentTransfer></filter></svg>#a'); }
}

/* Additional animation keyframes */
@keyframes dataScroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

@keyframes horizontalGlitch {
  0%, 100% { transform: skewX(0); }
  20% { transform: skewX(10deg); }
  40% { transform: skewX(-10deg); }
  60% { transform: skewX(5deg); }
  80% { transform: skewX(-5deg); }
}

@keyframes colorShift {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(90deg); }
}

@keyframes digitalNoise {
  0%, 100% { background-position: 0 0; }
  10% { background-position: -5% -5%; }
  20% { background-position: 10% 10%; }
  30% { background-position: 15% -10%; }
  40% { background-position: -15% 5%; }
  50% { background-position: -10% 15%; }
  60% { background-position: 5% 5%; }
  70% { background-position: 2% -12%; }
  80% { background-position: -15% -5%; }
  90% { background-position: 10% 10%; }
}

@keyframes hologramFlicker {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.91; }
  30% { opacity: 0.98; }
  35% { opacity: 0.89; }
  40% { opacity: 1; }
  50% { opacity: 0.95; }
  60% { opacity: 1; }
  70% { opacity: 0.93; }
  75% { opacity: 0.99; }
}

@keyframes scanEffect {
  0% { transform: translateY(-100%); opacity: 0.5; }
  50% { opacity: 0.8; }
  100% { transform: translateY(100%); opacity: 0.5; }
}

@keyframes matrixRain {
  0% { top: -120%; }
  100% { top: 120%; }
}

/* CRT and old computer effects */
.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9997;
  pointer-events: none;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 3px;
  opacity: 0.7;
  mix-blend-mode: overlay;
  animation: scanlines 8s linear infinite;
}

.crt-flicker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.05;
  animation: flicker 8s infinite ease-in-out;
}

/* Retro icons and decorations */
.retro-icon {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  image-rendering: pixelated;
}

.retro-computer {
  width: 64px;
  height: 64px;
  background: url('../images/retro/computer.png') no-repeat center/contain;
  animation: float 8s infinite ease-in-out;
}

.retro-disk {
  width: 64px;
  height: 64px;
  background: url('../images/retro/floppy.png') no-repeat center/contain;
  animation: rotateIn 1s ease-out;
}

.retro-console {
  width: 64px;
  height: 64px;
  background: url('../images/retro/console.png') no-repeat center/contain;
  animation: float 7s infinite ease-in-out alternate;
}

.retro-joystick {
  width: 64px;
  height: 64px;
  background: url('../images/retro/joystick.png') no-repeat center/contain;
  animation: float 6s 2s infinite ease-in-out alternate;
}

/* Additional retro equipment */
.retro-keyboard {
  width: 80px;
  height: 40px;
  background: url('../images/retro/keyboard.png') no-repeat center/contain;
  animation: float 5s 1s infinite ease-in-out alternate;
}

.retro-monitor {
  width: 80px;
  height: 70px;
  background: url('../images/retro/monitor.png') no-repeat center/contain;
  position: relative;
  animation: float 7s 0.5s infinite ease-in-out alternate;
}

.retro-monitor::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  width: 60%;
  height: 50%;
  background: var(--neon-blue);
  opacity: 0.3;
  animation: hologramFlicker 4s infinite;
}

.retro-vhs {
  width: 70px;
  height: 40px;
  background: url('../images/retro/vhs.png') no-repeat center/contain;
  transform-style: preserve-3d;
  animation: float 9s 1.5s infinite ease-in-out alternate;
}

/* Custom VHS tracking effect */
.vhs-tracking {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  z-index: 10000;
  background: linear-gradient(
    to bottom,
    transparent, 
    rgba(20, 20, 20, 0.8),
    transparent
  );
  animation: tracking 0.5s ease-out forwards;
}

@keyframes tracking {
  0% { opacity: 0; transform: translateY(-100%); }
  30% { opacity: 0.7; }  
  100% { opacity: 0; transform: translateY(100%); }
}

/* Animated glitch overlay */
.glitch-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/noise.png');
  opacity: 0.05;
  pointer-events: none;
  z-index: 9999;
  animation: digitalNoise 0.5s steps(3) infinite;
}

/* Data stream effects */
.data-stream-container {
  position: relative;
  overflow: hidden;
}

.data-line {
  position: absolute;
  width: 1px;
  height: 20%;
  background: linear-gradient(to bottom, 
    rgba(0, 195, 255, 0), 
    rgba(0, 195, 255, 0.7),
    rgba(0, 195, 255, 0));
  opacity: 0.7;
  animation: matrixRain 15s linear infinite;
}

/* Random data hex codes effect */
.data-code {
  position: absolute;
  font-family: 'VCR OSD Mono', monospace;
  font-size: 10px;
  color: var(--neon-cyan);
  opacity: 0.8;
  text-shadow: 0 0 5px var(--neon-cyan);
  animation: hologramFlicker 3s infinite;
}

/* Animation utility classes */
.fade-in {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Additional delay classes */
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }
.delay-9 { animation-delay: 0.9s; }
.delay-10 { animation-delay: 1.0s; }

.glitching {
  animation: textGlitch 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important;
}

.neon-text {
  color: var(--neon-cyan);
  text-shadow: 
    0 0 5px var(--neon-cyan), 
    0 0 10px var(--neon-cyan), 
    0 0 20px var(--neon-cyan);
}

.neon-border {
  border: 2px solid var(--neon-magenta);
  box-shadow: 0 0 10px var(--neon-magenta);
  animation: borderGlow 4s infinite alternate;
}

/* Additional neon text color variations */
.neon-magenta {
  color: var(--neon-magenta);
  text-shadow: 
    0 0 5px var(--neon-magenta), 
    0 0 10px var(--neon-magenta), 
    0 0 20px var(--neon-magenta);
}

.neon-yellow {
  color: var(--neon-yellow);
  text-shadow: 
    0 0 5px var(--neon-yellow), 
    0 0 10px var(--neon-yellow), 
    0 0 20px var(--neon-yellow);
}

.neon-green {
  color: var(--neon-green);
  text-shadow: 
    0 0 5px var(--neon-green), 
    0 0 10px var(--neon-green), 
    0 0 20px var(--neon-green);
}

/* Animated text effects */
.scan-text {
  position: relative;
  overflow: hidden;
}

.scan-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--neon-cyan) 50%, 
    transparent 100%);
  opacity: 0.7;
  animation: scanEffect 3s ease-in-out infinite;
}

.type-text {
  display: inline-block;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3s steps(30, end) forwards;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

.retro-line {
  height: 2px;
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--neon-magenta),
    var(--neon-cyan) 20px,
    var(--neon-magenta) 40px
  );
  margin: 1.5rem 0;
  opacity: 0.7;
}

/* Loading animation for lazy images */
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.lazy-image.loaded {
  opacity: 1;
}

/* Matrix code rain effect */
.matrix-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.matrix-column {
  position: absolute;
  top: 0;
  font-family: 'VCR OSD Mono', monospace;
  font-size: 12px;
  line-height: 1.2;
  color: var(--neon-green);
  opacity: 0.8;
  animation: matrixRain calc(15s + (var(--delay) * 5s)) linear infinite;
  animation-delay: calc(var(--delay) * -5s);
}

.variable-size-text {
  animation: sizeFlicker 2s infinite alternate;
}

@keyframes sizeFlicker {
  0%, 100% { font-size: 1em; }
  50% { font-size: 1.05em; }
}

/* Performance optimization for mobile */
@media (max-width: 768px) {
  .crt-overlay {
    background-size: 100% 4px; /* Slightly bigger scanlines for mobile */
  }
  
  /* Simplify animations on mobile for better performance */
  .retro-computer,
  .retro-disk,
  .retro-console,
  .retro-joystick {
    animation-duration: 10s;
  }
}

/* Add cyber scanner effect */
.scanner-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
  opacity: 0.8;
  top: 0;
  left: 0;
  animation: scannerMove 3s linear infinite;
}

@keyframes scannerMove {
  0% { transform: translateY(-100%); }
  5% { opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  95% { opacity: 0; }
  100% { transform: translateY(100%); }
}

/* Add data visualization elements */
.data-pulse {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid var(--neon-cyan);
  opacity: 0;
  animation: dataPulse 4s ease-out infinite;
}

@keyframes dataPulse {
  0% { 
    opacity: 0.7; 
    transform: scale(0.2);
    border-color: var(--neon-magenta);
  }
  100% { 
    opacity: 0; 
    transform: scale(1);
    border-color: var(--neon-cyan);
  }
}

/* Additional cyber tech elements */
.cyber-circuit {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(90deg, transparent 98%, var(--neon-blue) 98%, var(--neon-blue) 100%),
    linear-gradient(0deg, transparent 98%, var(--neon-blue) 98%, var(--neon-blue) 100%);
  background-size: 30px 30px;
  opacity: 0.15;
  pointer-events: none;
  z-index: -1;
}

/* Terminal effect container */
.terminal-window {
  border: 2px solid var(--neon-cyan);
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  padding: 10px;
  font-family: 'VCR OSD Mono', monospace;
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
}

.terminal-window::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(90deg, var(--neon-magenta), var(--neon-blue));
  opacity: 0.7;
}

.terminal-text {
  margin-top: 20px;
  line-height: 1.5;
  font-size: 14px;
}

.terminal-text .cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--neon-cyan);
  animation: blink 1s infinite;
  vertical-align: middle;
  margin-left: 2px;
}

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

/* Loading Progress Bar */
.cyber-progress {
  height: 10px;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--neon-blue);
  position: relative;
  overflow: hidden;
}

.cyber-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--neon-magenta), var(--neon-blue));
  width: 0;
  animation: progressLoad 2s ease-in-out forwards;
}

@keyframes progressLoad {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* Holographic elements */
.hologram {
  position: relative;
  opacity: 0.9;
}

.hologram::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      transparent 0px,
      rgba(0, 195, 255, 0.1) 1px,
      transparent 2px
    );
  pointer-events: none;
  animation: hologramFlicker 3s infinite;
}

/* Grid background */
.grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.25;
  animation: gridMove 30s infinite linear;
  transform-origin: center;
  transform: perspective(1000px) rotateX(60deg) scale(2, 1.5) translateY(10%);
  transform-style: preserve-3d;
}

/* Stars background */
.star {
  position: absolute;
  background-color: #fff;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 0.8;
  animation: twinkle 3s infinite alternate ease-in-out;
}

/* Floating particles */
.particle {
  position: absolute;
  background-color: var(--neon-cyan, #00ffff);
  border-radius: 50%;
  opacity: 0.7;
  box-shadow: 0 0 8px var(--neon-cyan, #00ffff);
  animation: floatParticle 20s infinite ease-in-out;
  z-index: -1;
}

/* Data stream effects */
.stream {
  position: absolute;
  width: 1px;
  background: linear-gradient(to bottom, 
      rgba(0, 195, 255, 0), 
      rgba(0, 195, 255, 0.7), 
      rgba(0, 195, 255, 0));
  animation: streamFlow 25s linear infinite;
  opacity: 0.4;
}

/* Glitching text effect */
.glitching {
  animation: textGlitch 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  position: relative;
}

/* Glow orbs */
.glow-orb {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
  animation: pulse-glow 8s ease-in-out infinite alternate;
}

/* Animation keyframes */
@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

@keyframes floatParticle {
  0% { transform: translate(0, 0); }
  25% { transform: translate(20px, 10px); }
  50% { transform: translate(10px, 30px); }
  75% { transform: translate(-10px, 20px); }
  100% { transform: translate(0, 0); }
}

@keyframes streamFlow {
  from { transform: translateY(-100%); }
  to { transform: translateY(100vh); }
}

@keyframes textGlitch {
  0% { 
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
                0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
                -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
                0.05em 0 0 rgba(0, 255, 0, 0.75),
                0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
                -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
                -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}

@keyframes pulse-glow {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes colorPulse {
  0% { opacity: 0.15; }
  50% { opacity: 0.25; }
  100% { opacity: 0.15; }
}

@keyframes colorChange {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* Additional animation for pulsing elements */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse-effect {
  animation: pulse 2s infinite ease-in-out;
}

/* Sunset background */
.sunset-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(0deg, rgba(255, 0, 170, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: -2;
}

/* Retro sun */
.retro-sun {
  position: absolute;
  bottom: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(255, 0, 170, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: -2;
  opacity: 0.7;
}

/* Circuit lines */
.circuit-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/circuit-pattern.png');
  background-size: 500px;
  background-repeat: repeat;
  opacity: 0.03;
  z-index: -1;
}

/* Add classes for usage */
.pulse-effect {
  animation: pulse 2s infinite ease-in-out;
}

.pulse-subtle {
  animation: pulse 4s infinite ease-in-out;
}

.glow-text {
  text-shadow: 0 0 5px currentColor;
}

.glow-text-intense {
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}

.color-cycle {
  animation: colorChange 10s infinite linear;
}

.float-animation {
  animation: float 5s infinite ease-in-out;
}

/* Retro Animations - For that perfect 80s cyber feel */

/* CRT screen effects */
.crt-effect {
    position: relative;
}

.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
                        rgba(10, 10, 15, 0) 0%,
                        rgba(10, 10, 15, 0.2) 80%,
                        rgba(10, 10, 15, 0.5) 100%);
    pointer-events: none;
    z-index: 1001;
}

.crt-flicker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 16, 16, 0);
    opacity: 0;
    pointer-events: none;
    z-index: 1002;
    animation: crtFlicker 2s infinite;
}

@keyframes crtFlicker {
    0% { opacity: 0; }
    2% { opacity: 0.1; }
    3% { opacity: 0.0; }
    9% { opacity: 0; }
    11% { opacity: 0.1; }
    12% { opacity: 0; }
    71% { opacity: 0; }
    72% { opacity: 0.1; }
    73% { opacity: 0; }
    95% { opacity: 0; }
    96% { opacity: 0.1; }
    97% { opacity: 0; }
}

/* Horizontal scan lines */
.scan-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0.02) 1px,
        rgba(0, 0, 0, 0) 2px
    );
    pointer-events: none;
    z-index: 1003;
}

/* Scan line animation */
.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: rgba(0, 255, 255, 0.3);
    opacity: 0.6;
    z-index: 1004;
    animation: scanline 6s linear infinite;
}

@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(1000%); }
}

/* Glitch overlay effect */
.glitch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 0, 153, 0.03);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1005;
    display: none;
}

/* Text glitch effect */
@keyframes glitch-animation-1 {
    0% { clip: rect(44px, 9999px, 56px, 0); }
    5% { clip: rect(11px, 9999px, 97px, 0); }
    10% { clip: rect(66px, 9999px, 91px, 0); }
    15% { clip: rect(33px, 9999px, 5px, 0); }
    20% { clip: rect(80px, 9999px, 91px, 0); }
    25% { clip: rect(63px, 9999px, 26px, 0); }
    30% { clip: rect(11px, 9999px, 59px, 0); }
    35% { clip: rect(133px, 9999px, 61px, 0); }
    40% { clip: rect(18px, 9999px, 145px, 0); }
    45% { clip: rect(40px, 9999px, 13px, 0); }
    50% { clip: rect(52px, 9999px, 78px, 0); }
    55% { clip: rect(143px, 9999px, 43px, 0); }
    60% { clip: rect(93px, 9999px, 78px, 0); }
    65% { clip: rect(69px, 9999px, 82px, 0); }
    70% { clip: rect(100px, 9999px, 33px, 0); }
    75% { clip: rect(23px, 9999px, 71px, 0); }
    80% { clip: rect(66px, 9999px, 123px, 0); }
    85% { clip: rect(13px, 9999px, 123px, 0); }
    90% { clip: rect(44px, 9999px, 19px, 0); }
    95% { clip: rect(98px, 9999px, 71px, 0); }
    100% { clip: rect(59px, 9999px, 98px, 0); }
}

@keyframes glitch-animation-2 {
    0% { clip: rect(24px, 9999px, 91px, 0); }
    5% { clip: rect(21px, 9999px, 49px, 0); }
    10% { clip: rect(12px, 9999px, 21px, 0); }
    15% { clip: rect(77px, 9999px, 35px, 0); }
    20% { clip: rect(34px, 9999px, 153px, 0); }
    25% { clip: rect(99px, 9999px, 143px, 0); }
    30% { clip: rect(109px, 9999px, 84px, 0); }
    35% { clip: rect(89px, 9999px, 140px, 0); }
    40% { clip: rect(37px, 9999px, 53px, 0); }
    45% { clip: rect(81px, 9999px, 118px, 0); }
    50% { clip: rect(101px, 9999px, 43px, 0); }
    55% { clip: rect(22px, 9999px, 140px, 0); }
    60% { clip: rect(74px, 9999px, 153px, 0); }
    65% { clip: rect(132px, 9999px, 60px, 0); }
    70% { clip: rect(120px, 9999px, 73px, 0); }
    75% { clip: rect(19px, 9999px, 67px, 0); }
    80% { clip: rect(90px, 9999px, 145px, 0); }
    85% { clip: rect(112px, 9999px, 85px, 0); }
    90% { clip: rect(32px, 9999px, 138px, 0); }
    95% { clip: rect(120px, 9999px, 45px, 0); }
    100% { clip: rect(19px, 9999px, 17px, 0); }
}

/* Fade in animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

/* Animation delays */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }
.animate-delay-6 { animation-delay: 0.6s; }
.animate-delay-7 { animation-delay: 0.7s; }
.animate-delay-8 { animation-delay: 0.8s; }
.animate-delay-9 { animation-delay: 0.9s; }
.animate-delay-10 { animation-delay: 1s; }

/* Pulse animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.pulse-effect {
    animation: pulse 2s infinite ease-in-out;
}

/* Neon flicker animation */
@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 
            0 0 5px var(--neon-cyan),
            0 0 10px var(--neon-cyan),
            0 0 15px var(--neon-cyan);
    }
    20%, 22%, 24%, 55% {
        text-shadow: none;
    }
}

.neon-flicker {
    animation: neonFlicker 3s infinite;
}

/* Data stream animation */
.data-stream {
    display: flex;
    justify-content: space-around;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.stream {
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--neon-cyan) 20%, var(--neon-cyan) 80%, transparent);
    height: 50vh;
    opacity: 0.3;
    animation: data-stream 8s linear infinite;
}

@keyframes data-stream {
    0% { transform: translateY(-50vh); }
    100% { transform: translateY(100vh); }
}

/* Cyber particles animation */
.cyber-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: var(--neon-cyan);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--neon-cyan);
    pointer-events: none;
    opacity: 0.6;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .crt-flicker,
    .scan-line,
    .glitch-overlay,
    .animate-fade-in,
    .pulse-effect,
    .neon-flicker,
    .data-stream,
    .cyber-particles {
        animation: none !important;
        transition: none !important;
    }
    
    .glitch-text::before,
    .glitch-text::after {
        content: none !important;
    }
}

/* Matrix Digital Rain Animation */
.matrix-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -5; /* Ensures it stays behind all content */
  pointer-events: none;
  overflow: hidden;
  opacity: 0.4; /* Make it subtle so it doesn't interfere with readability */
}

.matrix-column {
  position: absolute;
  top: -100%;
  width: 20px;
  font-family: 'VCR OSD Mono', monospace;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: var(--neon-green);
  opacity: 0.7;
  z-index: -5;
  text-shadow: 0 0 5px var(--neon-green);
  animation: matrix-rain linear infinite;
}

@keyframes matrix-rain {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* Content-aware matrix positioning */
.container, .section-content, .blog-body, header, footer {
  position: relative;
  z-index: 5; /* Ensure content appears above matrix */
}

/* Make sure matrix doesn't affect interaction with page elements */
input, select, textarea, button, a {
  position: relative;
  z-index: 6; /* Ensure interactive elements are fully clickable */
}

/* Ensure proper layering with other cyber elements */
.cyber-bg > * {
  z-index: -4; /* Other background elements should be above matrix */
}

/* Media query to reduce matrix intensity on small screens */
@media (max-width: 768px) {
  .matrix-column {
    font-size: 0.7rem;
    opacity: 0.5;
  }
  
  .matrix-container {
    opacity: 0.3;
  }
}

/* Console/Terminal/Code Panel Loading Animation */
@keyframes console-load {
  0% {
    background: linear-gradient(to bottom, 
      var(--neon-cyan) 0%,
      transparent 5%,
      transparent 100%);
    opacity: 0.7;
  }
  25% {
    background: linear-gradient(to bottom, 
      transparent 0%,
      var(--neon-cyan) 40%,
      transparent 45%);
    opacity: 0.7;
  }
  50% {
    background: linear-gradient(to bottom, 
      transparent 0%,
      var(--neon-cyan) 90%,
      transparent 95%);
    opacity: 0.7;
  }
  51% {
    opacity: 0;
  }
  /* Pause for 7 seconds (51% to 100% of the animation) */
  100% {
    opacity: 0;
  }
}

/* Apply the loading animation to console/code elements */
.terminal-window,
.terminal-text,
.terminal-content,
pre.code-block,
.code-example,
.architecture-diagram,
.cyber-panel.console,
.cmd-line {
  position: relative;
  overflow: hidden;
}

.terminal-window::after,
.terminal-text::after,
.terminal-content::after,
pre.code-block::after,
.code-example::after,
.architecture-diagram::after,
.cyber-panel.console::after,
.cmd-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  animation: console-load 15s ease-in-out infinite;
  /* Animation timing: 8 seconds for the scan + 7 seconds pause = 15 seconds total */
}

/* Remove duplicated styles */
.glow-orbs {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

/* Console/Code styling with loading animation */
.console-code {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--neon-cyan);
  border-radius: 4px;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 0 20px rgba(0, 255, 249, 0.3);
  font-family: var(--font-retro, 'VCR OSD Mono', monospace);
  color: var(--neon-cyan, #00ffff);
}

.console-code pre {
  margin: 0;
  white-space: pre;
  position: relative;
  z-index: 2;
}

.console-code::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--neon-cyan, #00ffff);
  box-shadow: 0 0 10px var(--neon-cyan, #00ffff);
  z-index: 3;
  opacity: 0;
}

.loading-active::before {
  opacity: 1;
  animation: console-scan 5s linear forwards;
}

@keyframes console-scan {
  0% { transform: translateY(0); opacity: 0.8; }
  100% { transform: translateY(100%); opacity: 0.8; }
}

/* Use the correct CSS variable names */
.architecture-diagram pre,
.terminal-text,
.terminal-content,
pre.code-block,
.code-example,
.cmd-line {
  color: var(--neon-cyan, #00ffff);
  font-family: var(--font-retro, 'VCR OSD Mono', monospace);
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

/* Media query for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .loading-active::before {
    animation: none !important;
  }
}

/* Console/Code styling with typewriter and loading animation */
.console-code {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--neon-cyan, #00ffff);
  border-radius: 4px;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 0 20px rgba(0, 255, 249, 0.3);
}

.console-code pre,
.console-code .terminal-text,
.console-code .cmd-line {
  margin: 0;
  white-space: pre;
  position: relative;
  z-index: 2;
  font-family: var(--font-retro, 'VCR OSD Mono', monospace);
  color: var(--neon-cyan, #00ffff);
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  overflow: auto;
  max-width: 100%;
}

/* Cursor effect for terminal text */
.console-code pre::after,
.console-code .terminal-text::after,
.console-code .cmd-line::after {
  content: '|';
  display: inline-block;
  animation: cursor-blink 1s step-end infinite;
  color: var(--neon-cyan, #00ffff);
  text-shadow: 0 0 5px var(--neon-cyan, #00ffff);
  font-weight: normal;
}

/* Special blinking cursor for idle state */
.console-code .idle-cursor::after {
  animation: idle-cursor-blink 2s step-end infinite;
}

@keyframes idle-cursor-blink {
  0%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

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

/* Loading scan effect */
.console-code::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--neon-cyan, #00ffff);
  box-shadow: 0 0 10px var(--neon-cyan, #00ffff), 0 0 20px var(--neon-cyan, #00ffff);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

.loading-active::before {
  opacity: 1;
  animation: console-scan 5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes console-scan {
  0% { 
    transform: translateY(0); 
    opacity: 0.8; 
  }
  100% { 
    transform: translateY(100%); 
    opacity: 0.8; 
  }
}

/* Class to exclude elements from animation if needed */
.no-animation {
  animation: none !important;
}

/* Media query for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .loading-active::before {
    animation: none !important;
  }
  
  .typewriter-applied {
    transition: none !important;
    animation: none !important;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none !important;
  }
}

/* Retro animations for Lackadaisical Security website */

/* Retro computer equipment */
.retro-computer {
    position: absolute;
    bottom: 10px;
    right: 10%;
    width: 120px;
    height: 100px;
    background: linear-gradient(145deg, #1a1a3e, #0f0f2d);
    border-radius: 5px;
    border-bottom: 15px solid #0c0c24;
    border-right: 2px solid #0c0c24;
    border-left: 2px solid #0c0c24;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
    opacity: 0.7;
    z-index: -1;
    transform: perspective(500px) rotateX(10deg);
}

.retro-computer::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 30px;
    background: #000;
    border-radius: 3px;
    border: 1px solid #2f2f6f;
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.3);
}

.retro-computer::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 20px;
    right: 20px;
    height: 10px;
    background: #0c0c24;
    border-radius: 3px;
}

.retro-disk {
    position: absolute;
    bottom: 60px;
    right: calc(10% + 130px);
    width: 40px;
    height: 38px;
    background: linear-gradient(145deg, #262654, #1a1a42);
    border-radius: 3px;
    border: 1px solid #3f3f7f;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
    opacity: 0.8;
    z-index: -1;
    transform: perspective(500px) rotateX(30deg) rotateZ(-10deg);
}

.retro-disk::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    height: 20px;
    background: #000;
    border-radius: 2px;
}

.retro-disk::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 5px;
    background: #3f3f7f;
    border-radius: 1px;
}

/* Glitch overlay */
.glitch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    z-index: 9997;
    overflow: hidden;
}

.glitch-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-100%);
    animation: glitch-line 10s infinite;
}

@keyframes glitch-line {
    0% { transform: translateY(-100%); }
    10% { transform: translateY(-100%); }
    10.1% { transform: translateY(200%); }
    10.2% { transform: translateY(400%); }
    10.3% { transform: translateY(600%); }
    10.4% { transform: translateY(800%); }
    10.5% { transform: translateY(1000%); }
    10.6% { transform: translateY(1200%); }
    20% { transform: translateY(1200%); }
    80% { transform: translateY(-100%); }
    100% { transform: translateY(-100%); }
}

/* Animated retro grid */
.grid {
    animation: grid-move 20s linear infinite;
}

@keyframes grid-move {
    0% { background-position: 0 0; }
    100% { background-position: 0 50px; }
}

/* Scan line animation */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to bottom, 
        rgba(0, 255, 255, 0.5), 
        transparent 80%);
    animation: scan 3s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

/* Pulsating glow effect */
.glow-pulse {
    animation: glow-pulse 2s infinite alternate;
}

@keyframes glow-pulse {
    0% { text-shadow: 0 0 5px var(--neon-cyan, #00ffff); }
    100% { text-shadow: 0 0 20px var(--neon-cyan, #00ffff), 0 0 30px var(--neon-cyan, #00ffff); }
}

/* Add flicker effect to neon elements */
.flicker-text {
    animation: text-flicker 5s linear infinite;
}

@keyframes text-flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1; }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.33; }
}

/* Animation for cyber elements */
.cyber-animate {
    animation: cyber-float 3s ease-in-out infinite alternate;
}

@keyframes cyber-float {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
  
  /* Adjust cyber effects for smaller screens */
  .crt-overlay, .crt-flicker {
    opacity: 0.1;
  }
  
  /* Make code blocks scroll horizontally on mobile */
  .console-code, pre {
    max-width: 100%;
    overflow-x: auto;
    font-size: 0.8rem;
  }
  
  /* Reduce the size of animated elements */
  .glow-orbs, .cyber-particles {
    transform: scale(0.7);
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
  
  /* Adjust animations for tablet view */
  .scan-line {
    animation-duration: 6s;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.9);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Improve responsiveness of animations for different viewports */
@media (max-width: 576px) {
  /* Small mobile screens */
  .matrix-column {
    font-size: 0.6rem;
  }
  
  .cyber-spinner {
    width: 40px;
    height: 40px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.6);
  }
  
  .terminal-window {
    font-size: 0.8rem;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Larger mobile and small tablets */
  .matrix-column {
    font-size: 0.7rem;
  }
  
  .cyber-spinner {
    width: 50px;
    height: 50px;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.7);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Tablets and small desktops */
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard {
    transform: scale(0.8);
  }
}

/* Optimize animations for devices with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    opacity: 0.2;
    top: 30%; /* Fixed position instead of animation */
  }
  
  .crt-flicker, .glitch-overlay {
    animation: none;
  }
  
  .retro-computer, .retro-disk, .retro-console, .retro-keyboard,
  .cyber-spinner, .glow-orbs, .tech-controller, .cyber-keyboard {
    animation: none !important;
    transition: none !important;
  }
  
  .console-code::before,
  .console-code::after {
    animation: none;
  }
  
  .console-code pre::after,
  .console-code .terminal-text::after,
  .console-code .cmd-line::after {
    animation: none;
    opacity: 1;
  }
  
  /* Reduce particle effects */
  .cyber-particles, .data-stream, .stream {
    opacity: 0.2;
  }
}

/* Additional Glitch Effect Styles */
.horizontal-offset {
  animation: horizontal-glitch 0.3s steps(3) infinite;
}

.vertical-offset {
  animation: vertical-glitch 0.3s steps(3) infinite;
}

.color-shift {
  animation: color-glitch 0.2s steps(2) infinite;
}

.opacity-flicker {
  animation: opacity-glitch 0.15s steps(2) infinite;
}

@keyframes horizontal-glitch {
  0% { transform: translateX(0); }
  25% { transform: translateX(5px); }
  50% { transform: translateX(-8px); }
  75% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

@keyframes vertical-glitch {
  0% { transform: translateY(0); }
  25% { transform: translateY(5px); }
  50% { transform: translateY(-5px); }
  75% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

@keyframes color-glitch {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(90deg); }
  100% { filter: hue-rotate(0deg); }
}

@keyframes opacity-glitch {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* Override any flash effects on console elements */
.console-code::before {
  opacity: 0.3; /* Make scan line subtle */
}

.console-code pre,
.console-code .terminal-text,
.console-code .cmd-line {
  color: var(--neon-cyan, #00ffff);
  text-shadow: 0 0 3px rgba(0, 255, 255, 0.5); /* More subtle glow */
}

/* Specific styling for idle state */
.idle-cursor::after {
  content: '|';
  display: inline-block;
  animation: idle-cursor-blink 1.2s step-end infinite;
  color: var(--neon-cyan, #00ffff);
  text-shadow: 0 0 3px var(--neon-cyan, #00ffff);
}

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

/* Adjust matrix rain to be more subtle */
.matrix-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.matrix-column {
  position: absolute;
  top: -20%;
  width: 20px;
  font-family: 'VCR OSD Mono', monospace;
  font-size: 14px;
  text-align: center;
  user-select: none;
  opacity: 0.4; /* More transparent */
  animation: matrix-fall linear infinite;
}

/* Reduce animation effects for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .matrix-column,
  .horizontal-offset,
  .vertical-offset,
  .color-shift,
  .opacity-flicker {
    animation: none !important;
  }
}

/* Retro Lockscreen Animation */
.retro-lockscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-retro, 'VCR OSD Mono', monospace);
}

.retro-lockscreen-terminal {
  width: 80%;
  max-width: 600px;
  background-color: #000;
  border: 2px solid var(--neon-cyan, #00ffff);
  box-shadow: 0 0 20px var(--neon-cyan, #00ffff), inset 0 0 10px rgba(0, 255, 255, 0.3);
  padding: 20px;
  color: var(--neon-cyan, #00ffff);
  text-shadow: 0 0 5px var(--neon-cyan, #00ffff);
  position: relative;
  overflow: hidden;
}

.retro-lockscreen-terminal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--neon-cyan, #00ffff);
  box-shadow: 0 0 10px var(--neon-cyan, #00ffff);
  animation: lockscreen-scan 3s linear infinite;
  opacity: 0.7;
}

@keyframes lockscreen-scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

.retro-lockscreen-access {
  letter-spacing: 3px;
  font-weight: bold;
  animation: pulse-text 2s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .retro-lockscreen-terminal::before {
    animation: none;
  }
}