/* Live projects: a full-screen layer over the page (js/embed.js). It is the page's own paper, so when the boxes have cleared the
   layer simply takes over; the way back (the logo and a pill) sits over it. */

html.wall-open { overflow: hidden; }
html.wall-open .page { pointer-events: none; }

.wall-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-embed);
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s var(--dur-base);
}
.wall-layer.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.wall-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; }

.wall-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: calc(var(--z-embed) + 5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--pad) var(--pad) 0;
  visibility: hidden;
}
html.wall-open .wall-bar { visibility: visible; }
.wall-back { opacity: 0; height: 44px; padding: 0 18px; overflow: hidden; transition: opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), padding var(--dur-base) var(--ease-out); }
html.wall-open .wall-back { opacity: 1; }

/* Back to site becomes a close icon while something in the page is picked up: the words shrink away, the cross grows in, and the
   pill closes down to a circle */
.wall-back-label { max-width: 9em; white-space: nowrap; transition: max-width var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.wall-back-x { width: 0; opacity: 0; transition: width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
html.wall-selected .wall-back { padding: 0 14px; }
html.wall-selected .wall-back-label { max-width: 0; opacity: 0; }
html.wall-selected .wall-back-x { width: 16px; opacity: 1; }