/* mock.css: the mock's own rules, over the app's (app.css, copied as it is): the window, its steps as layers the size
   of the window (one shown at a time, crossfading), the window's lights, the pointer, and the caret typing shows. */
html, body { width: 1280px; height: 800px; overflow: hidden; background: var(--app); }
.m-window { position: relative; width: 1280px; height: 800px; overflow: hidden; background: var(--app); }
.m-state { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 380ms var(--ease), visibility 0s 380ms; }
.m-state.on { opacity: 1; visibility: visible; transition: opacity 380ms var(--ease), visibility 0s; }
.m-state * { animation-play-state: running; }
/* nothing in a picture of the app answers a pointer */
.m-window, .m-window * { pointer-events: none !important; user-select: none !important; }

/* the Mac window's lights, where the app keeps room for them */
.m-lights { position: absolute; left: 18px; top: 18px; z-index: 40; display: flex; gap: 8px; }
.m-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .25); }
.m-lights i:nth-child(2) { background: #febc2e; } .m-lights i:nth-child(3) { background: #28c840; }

/* a textarea, as it was drawn (capture.mjs), and the caret typing leaves */
.m-ta .m-tx { color: inherit; }
.m-caret { display: inline-block; width: 2px; height: 1.2em; margin: 0 0 -.22em 1px; background: var(--accent); border-radius: 1px; animation: m-blink 1.06s steps(1) infinite; }
.m-sel { background: rgba(124, 109, 250, .38); border-radius: 2px; }
@keyframes m-blink { 50% { opacity: 0; } }

/* the stage's frames, one over the next as the playhead moves */
.m-pic { transition: opacity 160ms linear; }
.m-over { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; transition: opacity 260ms var(--ease); }
.m-over.on { opacity: 1; }

/* the pointer, and the ring a click leaves */
.m-cursor { position: absolute; left: 0; top: 0; z-index: 50; width: 22px; height: 22px; transform: translate(var(--cx, 1180px), var(--cy, 760px));
  transition: transform 700ms cubic-bezier(.45, .05, .2, 1), opacity 300ms; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.m-cursor.off { opacity: 0; }
.m-cursor svg { display: block; width: 22px; height: 22px; }
.m-ring { position: absolute; left: 0; top: 0; z-index: 49; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); opacity: 0; transform: scale(.4); }
.m-ring.go { animation: m-ring 520ms var(--ease); }
@keyframes m-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.25); } }