/* Google Material Symbols Configurations */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}
.material-symbols-filled {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* CRT Screen Scanline Simulation Animation */
.scanline {
  width: 100%;
  height: 2px;
  background: rgba(255, 180, 171, 0.1);
  position: fixed;
  top: 0;
  z-index: 100;
  pointer-events: none;
  animation: scanline 8s linear infinite;
}
@keyframes scanline {
  0% {
    top: 0%;
  }
  100% {
    top: 100%;
  }
}

/* Retro Monitor Refresh Flicker Effect */
.crt-flicker {
  animation: flicker 0.15s infinite;
}
@keyframes flicker {
  0% {
    opacity: 0.98;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.99;
  }
}

/* Cybernetic Text Glitch Effect On Interaction */
.glitch-text:hover {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

/* Terminal Dot Grid Blueprint Layer */
.terminal-grid {
  background-image: radial-gradient(circle, rgba(255, 180, 171, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}