/* ==========================================================================
   Parallax Background — Staircase Grid Reveal
   ==========================================================================
   5 Reihen × 8 Spalten. Reihe 5 = solider Balken.
   Reihen 1-4 = animierte Squares, diagonal von unten-links nach oben-rechts.
   ========================================================================== */

.nc-parallax-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  /* Oberer Bereich (Reihen 1-4): 10% BG-Farbe als Grundton */
  background-color: color-mix(in srgb, var(--nc-parallax-bg, #151515) 10%, transparent);
}

/* Grid: 4 Reihen × 8 Spalten, nimmt 80% der Hoehe ein */
.nc-parallax-grid {
  flex: 1 1 80%;
  display: grid;
  grid-template-columns: repeat(var(--nc-parallax-cols, 8), 1fr);
  grid-template-rows: repeat(var(--nc-parallax-rows, 4), 1fr);
  gap: var(--nc-parallax-gap, 6px);
  padding: var(--nc-parallax-gap, 6px);
}

/* Einzelnes Square: initial unsichtbar, wird per GSAP eingeblendet */
.nc-parallax-square {
  background-color: var(--nc-parallax-square-color, #ffffff);
  border-radius: var(--nc-parallax-radius, 12px);
  opacity: 0;
  will-change: opacity;
}

/* Solider Balken: untere 20%, volle BG-Farbe */
.nc-parallax-bar {
  flex: 0 0 20%;
  background-color: var(--nc-parallax-bg, #151515);
}

/* A11y */
@media (prefers-reduced-motion: reduce) {
  .nc-parallax-square {
    opacity: 0 !important;
  }
}

/* Responsive: etwas kompakterer Gap auf Mobile */
@media (max-width: 768px) {
  .nc-parallax-grid {
    gap: calc(var(--nc-parallax-gap, 6px) * 0.5);
    padding: calc(var(--nc-parallax-gap, 6px) * 0.5);
  }
}