/**
 * acrostic_surface.css — Visual treatment for the acrostic lattice.
 *
 * All color, stroke, and fill values come from CSS custom properties
 * set by the renderer from contract style profiles. No hardcoded
 * colors here — the contract is the single source of truth.
 *
 * Layout uses the same scenic-square grid as the bitbord lattice.
 * Cell sizes are set inline by the renderer from stage scaffold pitch.
 */

/* ---------------------------------------------------------------------------
   Grid root
   --------------------------------------------------------------------------- */

.acr__grid {
  position: relative;
  transform-style: preserve-3d;
  font-family: "P22Typewriter-Regular", "P22 Typewriter", "IBM Plex Mono", monospace;
}

/* ---------------------------------------------------------------------------
   Depth layers
   --------------------------------------------------------------------------- */

.acr__layer {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.acr__layer > * {
  pointer-events: auto;
}

/* ---------------------------------------------------------------------------
   Cell — the scenic square
   --------------------------------------------------------------------------- */

.acr__cell {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  background-color: var(--acr-cell-fill, transparent);
  border: var(--acr-cell-stroke-width, 0.25px) solid var(--acr-cell-stroke, transparent);

  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.acr__cell[data-acr-noid="true"] {
  z-index: 2;
}

/* ---------------------------------------------------------------------------
   Letter — the character inside the cell
   --------------------------------------------------------------------------- */

.acr__letter {
  display: block;
  font-size: 75%;   /* relative to cell size; adjusted by renderer */
  line-height: 1;
  text-align: center;
  user-select: none;

  color: var(--acr-letter-fill, inherit);
  -webkit-text-stroke-width: var(--acr-letter-stroke-width, 0);
  -webkit-text-stroke-color: var(--acr-letter-stroke, transparent);
  paint-order: stroke fill;

  transition:
    color 0.3s ease,
    -webkit-text-stroke-color 0.3s ease;
}

/* ---------------------------------------------------------------------------
   Interactive states
   --------------------------------------------------------------------------- */

.acr__cell--highlight {
  z-index: 3;
}

.acr__cell--highlight .acr__letter {
  transform: scale(1.05);
}

/* Noid pulse — intersection cells get a subtle glow on highlight */
.acr__cell[data-acr-noid="true"].acr__cell--highlight {
  box-shadow: 0 0 8px 2px var(--acr-cell-fill, rgba(196, 196, 255, 0.4));
}

/* ---------------------------------------------------------------------------
   Tier visibility convenience classes
   --------------------------------------------------------------------------- */

.acr__layer--channel { z-index: 30; }
.acr__layer--project { z-index: 20; }
.acr__layer--grain   { z-index: 10; }

/* ---------------------------------------------------------------------------
   Fill states
   --------------------------------------------------------------------------- */

.acr__cell[data-acr-fill="blank"] {
  background-color: transparent;
  border-color: var(--acr-cell-stroke, rgba(48, 48, 96, 0.25));
}

.acr__cell[data-acr-fill="random"] .acr__letter {
  opacity: 0.15;
}