/* The model on projects/3d-modelling.html: a window onto the building, framed and hung like the site's paintings.
   The canvas (viewer.js) draws over a still of the same view, which stays when the model can't be drawn. */

body.museum .essay.model { max-width: 56rem; }                 /* the frame may be wider than the text */
body.museum .essay.model > :not(.exhibit) { max-width: 40rem; }

body.museum .exhibit { margin: 1.75rem 0 0; }
body.museum .exhibit .frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #c3d3dd 0%, #d9e1e2 34%, #e9e7df 60%, #efe9dd 100%);   /* a pale sky over the cream wall */
  box-shadow:
    0 0 0 1px rgb(var(--ink) / .08),
    0 1px 2px rgb(var(--ink) / .08),
    0 6px 12px -4px rgb(var(--ink) / .1),
    0 18px 32px -16px rgb(var(--ink) / .26);
}
@media (max-width: 39.99rem) { body.museum .exhibit .frame { aspect-ratio: 1 / 1; } }   /* phones: the long, low building fills a square */

body.museum .exhibit picture,
body.museum .exhibit .still,
body.museum .exhibit canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
body.museum .exhibit .still { object-fit: cover; transition: opacity .6s ease; }
body.museum .exhibit .loading .still { opacity: .72; }
body.museum .exhibit .live .still { visibility: hidden; transition: visibility 0s .9s; }   /* once the canvas has faded in over it */

body.museum .exhibit canvas { opacity: 0; transition: opacity .8s ease; cursor: grab; outline: none; -webkit-tap-highlight-color: transparent; }
body.museum .exhibit .live canvas { opacity: 1; }
body.museum .exhibit .live canvas:active { cursor: grabbing; }
body.museum .exhibit canvas:focus-visible { outline: 1px dotted var(--rurikon-400); outline-offset: -5px; }
body.museum .exhibit .still-only canvas { display: none; }

/* while the model is being built: low in the frame, clear of the building */
body.museum .exhibit .status {
  position: absolute; left: 50%; top: auto; bottom: .9rem; translate: -50% 0;
  margin: 0; padding: .35rem .9rem;
  font: italic .9375rem/1.4 "Lora", Georgia, serif; white-space: nowrap;
  color: rgb(var(--ink) / .78);
  background: rgb(249 241 226 / .86);
  box-shadow: 0 0 0 1px rgb(var(--ink) / .08);
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
body.museum .exhibit .loading .status { opacity: 1; animation: model-breathe 1.6s ease-in-out infinite alternate; }
@keyframes model-breathe { from { color: rgb(var(--ink) / .5); } to { color: rgb(var(--ink) / .85); } }

/* how to handle it, under the frame */
body.museum .exhibit .hint {
  min-height: 1.35rem; margin: .6rem 0 0;
  font-size: .8125rem; line-height: 1.35rem; color: var(--rurikon-400);
}
body.museum .exhibit .hint.nudge { animation: model-nudge 1.8s ease; }   /* scrolled over it without ctrl / ⌘ */
@keyframes model-nudge { 0%, 55% { color: var(--rurikon-800); } 100% { color: var(--rurikon-400); } }

body.museum .essay.model .source { margin-top: 1rem; font-size: .8125rem; line-height: 1.35rem; color: var(--rurikon-400); }

@media (prefers-reduced-motion: reduce) {
  body.museum .exhibit .loading .status { animation: none; }
  body.museum .exhibit canvas, body.museum .exhibit .still { transition: none; }
}