/* ============================================================
   M.O. SYSTEM — ASCII PHOTO FIGURE styles
   Layers over the project photo-holder styles.
   ============================================================ */

.ascii-fig {
  width: 100%;
  transition: border-color var(--d-base) var(--e-out);
}
.ascii-fig.is-probing { border-color: var(--signal-dim); }

/* chrome: add live mode + grid readouts on the right */
.ascii-fig .ph__chrome {
  grid-template-columns: auto auto auto 1fr auto;
}
.ascii-fig__mode {
  color: var(--signal);
  text-shadow: 0 0 6px var(--signal-glow);
  white-space: nowrap;
}
.ascii-fig__grid {
  text-align: right;
  color: var(--ghost);
  white-space: nowrap;
}

/* stage — the ratio is declared per block via --fig-ratio, because the archive
   is mixed: portrait phone clips, 4:3 stills, 16:9 bench video and a few
   near-square frames. 3/2 is only the fallback. */
.ascii-fig__stage {
  aspect-ratio: var(--fig-ratio, 3 / 2);
  cursor: crosshair;
  background: var(--space);
}

/* A portrait frame at the full 860px column would tower over the copy, so each
   orientation gets its own measure. The figure stays centred in the column. */
.ascii-fig { margin-inline: auto; }
.ascii-fig--portrait { max-width: 420px; }
.ascii-fig--square   { max-width: 560px; }
.ascii-fig--landscape { max-width: 860px; }

/* the sampled <video> never paints: the canvas is the picture */
.ascii-fig__src {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* play / pause — mirrors the hint pill, opposite corner */
.ascii-fig__play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: rgba(4, 6, 13, 0.62);
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--ff-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ash);
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.ascii-fig__play:hover { color: var(--signal); border-color: var(--signal-dim); }
.ascii-fig__play:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* A video figure carries both the hint and the play control on the same row.
   Centred, the hint runs under the button on a 420px portrait frame, so it
   moves to the left edge and yields its width to the control. */
.ascii-fig--video .ascii-fig__hint {
  left: 12px;
  right: auto;
  transform: none;
  max-width: calc(100% - 130px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 560px) {
  .ascii-fig--portrait { max-width: 100%; }
  .ascii-fig__play { right: 8px; bottom: 8px; }
  .ascii-fig--video .ascii-fig__hint { left: 8px; max-width: calc(100% - 118px); }
}
.ascii-fig.is-converted .ascii-fig__stage { cursor: pointer; }
.ascii-fig__cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.ascii-fig__cv:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -4px;
}

/* reticle accent brightens while probing */
.ascii-fig.is-probing .ph__phCorner { opacity: 1; }

/* bottom hint pill */
.ascii-fig__hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: rgba(4, 6, 13, 0.62);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--ff-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ash);
  white-space: pre;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity var(--d-base) var(--e-out);
}
.ascii-fig.is-probing .ascii-fig__hint,
.ascii-fig.is-converted .ascii-fig__hint { opacity: 1; color: var(--signal); border-color: var(--signal-dim); }

/* loading shimmer */
.ascii-fig__load {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ghost);
  animation: asciiFigPulse 1.4s var(--e-in-out) infinite;
}
@keyframes asciiFigPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.ascii-fig.is-ready .ascii-fig__load { display: none; }

/* Captions run to a line or two of prose, so they need leading and a measure.
   The default grid had a third column for an FPS counter, which was dev
   instrumentation sitting in editorial space. */
.ascii-fig .ph__cap { line-height: var(--lh-mono); align-items: baseline; }
.ascii-fig .ph__capV { max-width: 68ch; }

@media (max-width: 700px) {
  /* Narrow screens give every figure the full column, but the ratio is the
     block's own. This used to force 4/3 here, which silently cropped every
     portrait frame on a phone: 15 of the 19 clips and 27 of the 40 stills are
     portrait, so the override was wrong for most of the archive. */
  .ascii-fig { max-width: none; }
  .ascii-fig .ph__chrome { grid-template-columns: auto 1fr auto; }
  .ascii-fig__mode { display: none; }
  .ascii-fig__hint { bottom: 10px; font-size: var(--fs-nano); padding: 6px 10px; }
}

/* a media path that does not resolve reads as a fault, not as a slow load */
.ascii-fig__load--err {
  color: var(--pulse);
  border-color: var(--pulse);
}