/* Interpolation panel (slide 03-2): the slerp grid between the four evolved manipulators,
   a playhead walking it from the corners inward, and the current decoded design over its
   latent barcode. Dark glass, thin cyan hairlines, monospace labels; the tiles keep the
   paper's blend hues. Token variables only. */

.slide-media > .ip { flex: 0 1 auto; width: 100%; min-width: 0; }
.ip {
  --ip-line: color-mix(in srgb, var(--data) 30%, transparent);
  --ip-line-strong: color-mix(in srgb, var(--data) 65%, transparent);
  --ip-glass: color-mix(in srgb, var(--bg) 55%, transparent);
  --ip-glow: color-mix(in srgb, var(--data) 45%, transparent);
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--data);
  background: var(--ip-glass);
  border: 1px solid var(--ip-line);
  border-radius: 2px;
  padding: 0.9rem 1.2rem 0.8rem;
}
.ip-label { color: var(--ip-line-strong); margin: 0; }
.ip-live { color: var(--data); white-space: nowrap; }

/* ---------- header: three mono labels on one hairline ---------- */
.ip-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--ip-line); }
.ip-head > :nth-child(2) { text-align: center; min-height: 1.5em; }
.ip-head > :last-child { text-align: right; }

/* ---------- body: the grid between its corner names | the large view over the barcode ---------- */
.ip-body { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 11fr); gap: 1.6rem; align-items: center; padding: 1rem 0 0.9rem; }
.ip-grid-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0; }
.ip-corner { color: var(--ip-line-strong); white-space: nowrap; }
.ip-corner.is-right { text-align: right; }
.ip-grid { position: relative; grid-column: 1 / -1; aspect-ratio: 1 / 1; display: grid; grid-template-columns: repeat(var(--ip-size, 5), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.ip-tile { min-width: 0; min-height: 0; padding: 8%; cursor: pointer; }
.ip-tile img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0.3; transition: opacity 0.35s; }
.ip-tile.is-seen img, .ip-tile.is-now img { opacity: 1; }
.ip-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ip-ring { fill: none; stroke: var(--data); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ip-path { fill: none; stroke: var(--data); stroke-opacity: 0.7; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ip-now { fill: none; stroke: var(--data); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ip-head-dot { fill: var(--data); filter: drop-shadow(0 0 4px var(--data)); }

.ip-view { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.ip-big { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--ip-line); background: var(--bg); }
.ip-big img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 3%; object-fit: contain; opacity: 0; transition: opacity 0.3s; }
.ip-big img.is-front { opacity: 1; }
.ip-big::before, .ip-big::after { content: ""; position: absolute; width: 10px; height: 10px; border: 0 solid var(--data); }
.ip-big::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.ip-big::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.ip-barcode { display: block; width: 100%; height: auto; }
.ip-bar { stroke: var(--ip-line); stroke-width: 0.5; transition: fill-opacity 0.3s, fill 0.3s; }
.ip-bar-mark { fill: var(--ip-line-strong); font-family: var(--font-mono); font-size: 10px; }

/* ---------- footer: hairline play control and scrub bar ---------- */
.ip-foot { display: flex; align-items: center; gap: 1rem; margin-top: 0.2rem; padding-top: 0.6rem; border-top: 1px solid var(--ip-line); }
.ip-play { flex: none; width: 20px; height: 20px; padding: 0; background: none; border: 0; color: var(--data); cursor: pointer; }
.ip-play svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
.ip-icon-pause { display: none; }
.ip.is-playing .ip-icon-play { display: none; }
.ip.is-playing .ip-icon-pause { display: block; }
.ip-scrub { position: relative; flex: 1; height: 24px; cursor: pointer; touch-action: none; outline: none; }
.ip-scrub-line, .ip-scrub-done { position: absolute; left: 0; top: 50%; height: 1px; }
.ip-scrub-line { right: 0; background: var(--ip-line); }
.ip-scrub-done { width: 0; background: var(--data); }
.ip-scrub-head { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border: 1px solid var(--data); border-radius: 50%; background: var(--bg); transform: translate(-50%, -50%); }
.ip-scrub:focus-visible .ip-scrub-head { box-shadow: 0 0 8px var(--ip-glow); }

/* ---------- short desktop viewports: a narrower grid and a flatter view, so the stage never clips ---------- */
@media (min-width: 901px) and (max-height: 820px) {
  .ip { padding: 0.6rem 1rem 0.5rem; }
  .ip-body { grid-template-columns: minmax(0, 9fr) minmax(0, 13fr); padding: 0.6rem 0 0.5rem; }
  .ip-big { aspect-ratio: 3 / 2; }
}

/* ---------- phones: one column, the grid above the view ---------- */
@media (max-width: 900px) {
  .ip { padding: 1rem 0.9rem 0.9rem; }
  .ip-head { grid-template-columns: 1fr; gap: 0.25rem; }
  .ip-head > :nth-child(2), .ip-head > :last-child { text-align: left; }
  .ip-body { grid-template-columns: 1fr; gap: 1.2rem; }
}