.halftonePattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

/* Color variants */
.black {
  color: var(--brutal-black);
}

.white {
  color: var(--brutal-white);
}

.red {
  color: #EF4444;
}

.blue {
  color: #3B82F6;
}

.yellow {
  color: #FACC15;
}

.cyan {
  color: #00FFFF;
}

/* Animation */
.animated .dot {
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.7;
  }
}

/* Dot styles */
.dot {
  transition: transform 0.3s ease, opacity 0.3s ease;
}