:root {
  --matrix-bg-color: #0a0a0a;
  --matrix-text-color: #00ff9d;
  --matrix-grid-color: rgba(0, 77, 46, 0.3); /* Reduced opacity for grid lines */
  --cell-size: 25px;
  --font-size: 12px;
  --font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --hover-light-color: rgba(0, 255, 157, 0.8);
  --easter-egg-color: rgba(0, 255, 157, 1);
}

.crypto-matrix-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--matrix-bg-color);
  font-family: var(--font-family);
  z-index: 1; /* Place above black background but below hero content */
  max-width: 100%; /* Ensure it doesn't exceed viewport width */
  pointer-events: none; /* Allow navbar interactions to pass through */
}

.crypto-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--cell-size));
  grid-template-rows: repeat(auto-fill, var(--cell-size));
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  grid-gap: 0;
  will-change: transform; /* Optimize for animations */
  contain: layout style paint; /* CSS containment for better performance */
  pointer-events: auto; /* Re-enable pointer events for the grid */
}

.crypto-matrix-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--matrix-text-color);
  opacity: 0.04; /* Very light background hex codes by default */
  font-size: var(--font-size);
  text-align: center;
  user-select: none;
  font-family: var(--font-family);
  padding: 0; /* Remove padding inside cells */
  margin: 0; /* Remove margin around cells */
  box-sizing: border-box; /* Include padding and border in element's width and height */
  transition: opacity 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
  position: relative;
  will-change: opacity; /* Optimize for opacity changes */
  transform: translateZ(0); /* Force hardware acceleration */
}

.crypto-matrix-cell.highlight {
  opacity: 1;
  font-weight: 600;
}

.crypto-matrix-cell.easter-egg {
  opacity: 0;
  font-weight: 700;
  transition: opacity 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

.crypto-matrix-cell.easter-egg.lit {
  opacity: 1;
  color: var(--easter-egg-color);
}

.crypto-matrix-cell.lit {
  opacity: 0.3;
}

/* Hover light effect overlay - disabled */
.hover-light {
  display: none;
}

/* Vertical grid lines only */
.crypto-matrix-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, var(--matrix-grid-color) 1px, transparent 1px);
  background-size: var(--cell-size) 100%;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.3s ease;
}

/* Individual grid line segments for targeted lighting */
.grid-line-segment {
  position: absolute;
  width: 1px;
  background-color: rgba(0, 255, 157, 0.6);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.1s ease;
}