Pixel grid blink effect

<div class="pixel-grid"></div>

<style>
.pixel-grid {
  position: relative;
  width: 300px;
  height: 250px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0;
  pointer-events: none;
}

.pixel-grid div {
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: var(--e-global-color-accent) !important;
  animation-name: pixelBlink;
  animation-timing-function: steps(1, end); /* ➤ Bez glatkog prelaza */
  animation-iteration-count: infinite;
  transform: none !important; /* ➤ Potpuno uklanja skaliranje */
  will-change: opacity; /* ➤ Performanse */
}

/* ➤ Samo blinkanje (naglo paljenje/gašenje) */
@keyframes pixelBlink {
  0%, 40%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
</style>

<script>
(function() {
  const grid = document.querySelector('.pixel-grid');
  const columns = 5;
  const rows = 4;
  const pixelCount = columns * rows;

  for (let i = 0; i < pixelCount; i++) {
    const pixel = document.createElement('div');

    // Nasumičan delay i trajanje animacije
    pixel.style.animationDelay = (Math.random() * 3) + 's';
    pixel.style.animationDuration = (2 + Math.random() * 3) + 's';

    // 50% šanse da piksel ne svetli
    if (Math.random() < 0.5) {
      pixel.style.animation = 'none';
    }

    grid.appendChild(pixel);
  }
})();
</script>