/* Shared by the editor and the OBS overlay. Positions and sizes are percentages
   of the stage, so a 1920x1080 OBS source and a small editor window match. */
.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }

.av { position: absolute; transform: translate(-50%, -50%); z-index: 1; }
.av.talking { z-index: 2; }

.bob { position: relative; transition: transform 80ms ease-out; }
.bob img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.av.flip img { transform: scaleX(-1); }

/* The talking image sits on top of the idle one and fades in, so there is no flicker from swapping src. */
.bob .talk { position: absolute; inset: 0; height: 100%; object-fit: contain; opacity: 0; }
.av.talking.has-talk .talk { opacity: 1; }
.av.talking.has-talk .idle { opacity: 0; }

.av.talking:not(.nobounce) .bob { transform: translateY(-4%); }