/**
 * Portrait strip (P4.3).
 *
 * Embed box is the original HTML size 117×253 (SWF stage is 110×110;
 * the extra height shows about two and a half faces, as in zkwohn.htm).
 * Film-strip Y scroll matches tools/extract_portrait.py preview.html.
 * prefers-reduced-motion: stills; JS adds .portrait-strip--manual + next/prev.
 */

.portrait-strip-figure {
  margin: 0;
}

.portrait-strip {
  --portrait-w: 117;
  --portrait-h: 253;
}

.portrait-strip-stage {
  position: relative;
  width: calc(var(--portrait-w) * 1px);
  max-width: 100%;
  aspect-ratio: var(--portrait-w) / var(--portrait-h);
  background: var(--color-bg, #000);
  overflow: hidden;
}

.portrait-strip-film {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  animation: portrait-scroll var(--portrait-duration, 40s) linear infinite;
}

.portrait-strip-img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
  width: var(--w);
  height: var(--h);
  max-width: none;
}

.portrait-strip-controls {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 10px);
  margin-top: var(--space-1, 5px);
}

.portrait-strip--manual .portrait-strip-controls {
  display: flex;
}

.portrait-strip-btn {
  font-family: var(--font-body, Geneva, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--font-size-2, 13px);
  color: var(--color-link, #ff0000);
  background: transparent;
  border: 1px solid var(--color-link, #ff0000);
  padding: var(--space-1, 5px) var(--space-2, 10px);
  cursor: pointer;
}

.portrait-strip-btn:focus-visible {
  outline: var(--focus-ring, 2px solid #ff0000);
  outline-color: var(--color-text, #ffcc99);
  outline-offset: 2px;
}

.portrait-strip-status {
  margin: 0;
  font-family: var(--font-body, Geneva, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--font-size-1, 10px);
  color: var(--color-text, #ffcc99);
}

@keyframes portrait-scroll {
  from {
    transform: translate(var(--portrait-tx), var(--portrait-from-y));
  }
  to {
    transform: translate(var(--portrait-tx), var(--portrait-to-y));
  }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-strip-film {
    animation: none;
    transform: translate(var(--portrait-tx), var(--portrait-still-y));
  }

  .portrait-strip--manual .portrait-strip-film {
    transform: translate(
      var(--portrait-tx),
      var(--portrait-y, var(--portrait-still-y))
    );
  }
}

.portrait-strip--paused .portrait-strip-film {
  animation: none;
  transform: translate(var(--portrait-tx), var(--portrait-pause-y));
}