/*
  Dot Matrix Effect
  Pixel art style text display
*/

.dot-matrix-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: 0;
  margin-top: 0;
}

.dot-matrix {
  display: grid;
  gap: clamp(1px, 0.25vw, 2px);
  padding: var(--spacing-md);
  background: transparent;
}

.dot-row {
  display: flex;
  gap: clamp(1px, 0.25vw, 2px);
}

.dot {
  width: clamp(2px, 0.5vw, 4px);
  height: clamp(2px, 0.5vw, 4px);
  font-size: clamp(3px, 0.6vw, 5px);
  line-height: 1;
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-normal);
  color: #000000;
  transition: all var(--transition-normal);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Border dots */
.dot.border {
  color: #000000;
}

/* Active dots - white text with gradient opacity */
.dot.active {
  opacity: var(--dot-opacity, 0.9);
  transform: scale(1.1);
  color: #FFFFFF;
  font-weight: var(--font-weight-bold);
}

/* Animation effect - staggered reveal */
@keyframes dotReveal {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.dot.active {
  animation: dotReveal 0.6s ease-out forwards;
}

/* Add staggered delay based on position */
.dot.active {
  animation-delay: calc(var(--dot-index) * 0.01s);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dot-matrix-container {
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) 0;
  }

  .dot-matrix {
    padding: var(--spacing-sm);
  }
}

/* Optional: Hover effect for interactive feel */
.dot.active:hover {
  transform: scale(1.3);
  filter: brightness(1.2);
}