/* The window that opens beside a mockup on mockups-design.com. This file goes into the
   site's plugin, so every name here starts with mdeo- and nothing leans on the site's own
   styles: dropped into any page, it can neither be changed by it nor change it. */

.mdeo-veil {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* over a sticky advert, which is the only thing that goes this high */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
  background: rgba(10, 12, 18, 0.66);
  animation: mdeo-fade 140ms ease-out;
}

@keyframes mdeo-fade {
  from { opacity: 0; }
}

/* One shape on every screen, held to 1900 pixels: wider than that and the editor's
   canvas asks for pictures larger than the sets carry, which costs megabytes and buys
   nothing. It shrinks when the window is short, so the whole of it always shows. */
.mdeo-box {
  position: relative;
  width: min(95vw, 1900px);
  aspect-ratio: 16 / 10;
  max-height: 96vh;
  animation: mdeo-rise 160ms ease-out;
}

@keyframes mdeo-rise {
  from { opacity: 0; transform: translateY(8px); }
}

.mdeo-frame {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}

.mdeo-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The window carries no cross of its own: the editor's bar has one, and two ways out
   side by side only asked which of them was the real one. Besides it, a click on the
   dimmed page, Escape and the back button all close the window. */

/* While the window is open the page behind it does not scroll: a wheel over the editor
   belongs to the editor. */
.mdeo-still {
  overflow: hidden;
}