/* The model's mark, held up (Chris, 26 Oct): see model-reveal.js. No panel and no dimming: the hand and the face are drawn in the page's own
   ink (the cut-out pictures in model-art/ used as masks), the model rises out of the mark into the hand, and its name stands in the corner. */
.work-model-mark.is-tap { width: 30px; height: 30px; -webkit-mask-size: 22px 22px; mask-size: 22px 22px; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; transition: color 0.2s ease, transform 0.2s ease; }
.work-model-mark.is-tap:hover { color: var(--text); }
.work-model-mark.is-tap:active { transform: scale(0.9); }
.work-model-mark.is-tap[data-held] { visibility: hidden; }
.work-model-mark.is-tap:focus-visible { outline: 2px solid var(--pot-gold, #d4af37); outline-offset: 2px; border-radius: 8px; }
.work-opts > .work-model-mark { margin: 0 6px 0 auto; align-self: center; }

.m-sonnet { --hand: url('/model-art/sonnet-hand.png'); }
.m-haiku { --hand: url('/model-art/haiku-hand.png'); }
.m-opus { --hand: url('/model-art/opus-hand.png'); }

.model-reveal { position: fixed; inset: 0; z-index: 2000; color: var(--text); pointer-events: none; }
/* The figure takes no taps of its own: the page goes on beneath it, and model-reveal.js picks out a tap on the drawn line by itself. */

.mr-stage { position: absolute; pointer-events: none; }

/* The hand and the face: a canvas the line is drawn on, along the line from the wrist to the face (model-reveal.js). Where its pictures
   could not be loaded the drawing shows whole, from the same cut-out as a mask. */
.mr-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.2s ease; }
.mr-lines.plain { background: currentColor; -webkit-mask: var(--hand) center / 100% 100% no-repeat; mask: var(--hand) center / 100% 100% no-repeat; }
.model-reveal.in .mr-lines { opacity: 0.85; }

/* The model: starts at the mark's place and size, ends in the hand. */
.mr-thing { position: absolute; background: currentColor; color: var(--muted); -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat;
  transform: translate(var(--dx), var(--dy)) scale(var(--ds)); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), color 0.7s ease; }
.model-reveal.in .mr-thing { transform: none; color: var(--text); }

/* The name, in the drawing's top corner over the face. */
.mr-name { position: absolute; right: 0; bottom: 100%; margin: 0 0 10px; display: flex; align-items: baseline; gap: 0.4em; line-height: 1;
  opacity: 0; transform: translateY(8px); letter-spacing: 0.3em; text-shadow: 0 0 6px var(--panel, transparent), 0 0 14px var(--panel, transparent);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 1s cubic-bezier(0.16, 1, 0.3, 1); }
.mr-word { font-size: 1.2rem; font-weight: 700; }
.mr-num { font-size: 0.82rem; font-weight: 500; opacity: 0.7; font-variant-numeric: tabular-nums; }
.model-reveal.in .mr-name { opacity: 1; transform: none; letter-spacing: 0.04em; transition-delay: 0.5s; }

/* Setting it back down: the model returns to the mark while the rest fades. */
.model-reveal.leaving .mr-lines { opacity: 0; transition: opacity 0.3s ease; }
.model-reveal.leaving .mr-name { opacity: 0; transition: opacity 0.25s ease; }
.model-reveal.leaving .mr-thing { transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0), color 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
  .mr-lines, .mr-thing, .mr-name { transition: opacity 0.2s ease !important; transition-delay: 0s !important; letter-spacing: 0.04em !important; }
  .mr-thing { transform: none !important; opacity: 0; }
  .model-reveal.in .mr-thing { opacity: 1; }
}

/* Continuing a finished session: the project is fixed, so its row steps aside and the model, mode and thinking take the strip. */
.work-form.continuing .work-opts > .mine-projects, .work-form.continuing .work-opts > .work-folder-chip { display: none; }
.work-form.continuing .work-opts > .work-folder-chip + .work-chip::before { display: none; }