/* =============================================================
   components/pixel-grid.css — Reusable interactive pixel-grid
   background. Builds the full container + cell styling used by
   buildPixelGrid() in modules/pixel-grid.js. Page-specific wrappers
   (e.g. .hero, .contact-page) own their own gradient behind it.
   ============================================================= */

#pixeled-bg,
.pixeled-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(79, 28, 136, 0.70) 0%,
    rgba(79, 28, 136, 0.00) 19.71%,
    rgba(79, 28, 136, 0.00) 66.72%,
    rgba(79, 28, 136, 0.27) 83.65%,
    rgba(79, 28, 136, 0.70) 100%
  );
}

.pixel-row {
  display: flex;
  flex: 1 0 0;
  align-items: stretch;
  width: 100%;
}

.bg-pixel {
  flex: 1 0 0;
  min-width: 1px;
  min-height: 1px;
  opacity: 0.3;

  border: 1px solid var(--pixel-border);

  transition:
    opacity var(--transition-speed) ease-in-out,
    background-color var(--transition-speed) ease-in-out,
    box-shadow var(--transition-speed) ease-in-out;

  cursor: pointer;
  position: relative;
  pointer-events: auto;
  z-index: 10;
}

.opacity-30 { opacity: 0.3  !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-20 { opacity: 0.2  !important; }
.opacity-15 { opacity: 0.15 !important; }
.opacity-10 { opacity: 0.1  !important; }
.opacity-07 { opacity: 0.07 !important; }

.bg-pixel:hover {
  opacity: var(--pixel-hover-opacity) !important;
}


/* =============================================================
   Scatter pixels — sparse random-position texture. Non-interactive.
   Populated at runtime by modules/scatter-pixels.js.
   ============================================================= */
.scatter-pixels {
  position:       absolute;
  inset:          0;
  overflow:       hidden;
  pointer-events: none;
  z-index:        0;
}

.scatter-pixel {
  position:   absolute;
  display:    block;
  background: #8F00D8;
  border:     1px solid rgba(143, 0, 216, 0.55);
  transform:  translate(-50%, -50%);
  will-change: opacity;
}