/* Pixel intro scene for the Private Voice demo page: Suzy introduces the
 * secretary in an old-game cutscene, right above the interest CTA.
 *
 * Everything is sized in multiples of one integer unit (--px) so sprites,
 * borders and motion all sit on the same pixel grid; mixing scales is what
 * makes pixel pages look off. Sprites are drawn by pv-pixel.js onto tiny
 * canvases that CSS upscales with image-rendering: pixelated.
 */

.pv-pixel {
  --px: 3px;
  --px-ink: #241a38;
  --px-paper: #fdf6e9;
  margin-top: 2rem;
  position: relative;
}

@media (min-width: 560px) {
  .pv-pixel { --px: 4px; }
}

.pv-pixel__stage {
  position: relative;
  height: calc(64 * var(--px));
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(#f6edfd, #fbf3e6 78%);
  border: var(--px) solid var(--px-ink);
  image-rendering: pixelated;
}

/* Ground: a flat band with a one-pixel dithered top edge. */
.pv-pixel__stage::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: calc(7 * var(--px));
  background:
    repeating-linear-gradient(90deg,
      var(--px-ink) 0 var(--px),
      transparent var(--px) calc(2 * var(--px))) top / 100% var(--px) no-repeat,
    #e8dcc8;
  border-top: var(--px) solid var(--px-ink);
}

.pv-pixel__actor {
  position: absolute;
  bottom: calc(7 * var(--px));
  width: calc(16 * var(--px));
  height: calc(20 * var(--px));
  image-rendering: pixelated;
  z-index: 1;
}

/* Speech bubble: square pixel border, staircase tail painted by box-shadows
 * in ::after (see pv-pixel.js for the speaker positioning). */
.pv-pixel__bubble {
  position: absolute;
  top: calc(3 * var(--px));
  max-width: min(72%, 30rem);
  background: #fff;
  border: var(--px) solid var(--px-ink);
  padding: calc(2 * var(--px)) calc(3 * var(--px));
  font-family: "Press Start 2P", "Heebo", monospace;
  font-size: 10px;
  line-height: 1.9;
  color: var(--px-ink);
  z-index: 2;
}

@media (max-width: 559px) {
  .pv-pixel__bubble { font-size: 8px; }
}

/* Press Start 2P has no Hebrew glyphs, so the Hebrew mirror renders the
 * whole bubble in Heebo (the page does not even load the pixel face).
 * Heebo runs visually smaller than Press Start 2P at equal font-size and
 * needs less leading, so resize instead of inheriting the pixel metrics. */
.pv-pixel__bubble:lang(he) {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

@media (max-width: 559px) {
  .pv-pixel__bubble:lang(he) { font-size: 13px; }
}

.pv-pixel__replay:lang(he) {
  font-size: 13px;
  font-weight: 700;
}

.pv-pixel__bubble[hidden] { display: none; }

.pv-pixel__name {
  display: block;
  font-size: 0.8em;
  color: #6244f2;
  margin-bottom: calc(1 * var(--px));
}

/* The line's full text for screen readers; the typewriter span is aria-hidden. */
.pv-pixel__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Blinking advance arrow, hidden while the line is still typing. Drawn as
 * box-shadow pixels because the pixel font has no triangle glyph. */
.pv-pixel__more {
  position: relative;
  display: inline-block;
  width: calc(5 * var(--px));
  height: calc(3 * var(--px));
  margin-inline-start: 0.6em;
  animation: pv-px-blink 0.9s steps(2, jump-none) infinite;
}

.pv-pixel__more::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--px);
  height: var(--px);
  background: var(--px-ink);
  color: var(--px-ink);
  box-shadow:
    calc(1 * var(--px)) 0,
    calc(2 * var(--px)) 0,
    calc(3 * var(--px)) 0,
    calc(4 * var(--px)) 0,
    calc(1 * var(--px)) var(--px),
    calc(2 * var(--px)) var(--px),
    calc(3 * var(--px)) var(--px),
    calc(2 * var(--px)) calc(2 * var(--px));
}

.pv-pixel__more[hidden] { display: none; }

/* Staircase tail: one --px square whose box-shadows paint the steps. */
.pv-pixel__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  inset-inline-start: calc(6 * var(--px));
  width: var(--px);
  height: var(--px);
  background: var(--px-ink);
  box-shadow:
    calc(1 * var(--px)) 0 var(--px-ink),
    calc(2 * var(--px)) 0 #fff,
    calc(3 * var(--px)) 0 var(--px-ink),
    calc(1 * var(--px)) var(--px) var(--px-ink),
    calc(2 * var(--px)) var(--px) var(--px-ink);
}

.pv-pixel__replay {
  position: absolute;
  inset-inline-end: calc(2 * var(--px));
  bottom: calc(2 * var(--px));
  z-index: 3;
  font-family: "Press Start 2P", "Heebo", monospace;
  font-size: 8px;
  color: #fff;
  background: var(--px-ink);
  border: 0;
  padding: calc(1.5 * var(--px)) calc(2 * var(--px));
  cursor: pointer;
}

.pv-pixel__replay[hidden] { display: none; }

@keyframes pv-px-blink {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-pixel__more { animation: none; }
}