/*
 * Layout for the pages imported from Readymag.
 *
 * Every page is a fixed 1024px-wide canvas whose widgets are absolutely
 * positioned with inline styles. js/site.js sets --scale so the canvas fills
 * the browser width, the way Readymag's "scalable viewer" does.
 */

html,
body {
  margin: 0;
  background: #000;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

#mags {
  width: 1024px;
  margin: 0 auto;
  zoom: var(--scale, 1);
}

/* --- page structure ------------------------------------------------------ */

/* clip (not hidden) so the sticky background below keeps working. */
.page {
  position: relative;
  overflow: clip;
}

/* The background stays put while the content scrolls over it. */
.page-fixed-bg-container {
  position: sticky;
  top: 0;
  height: calc(100vh / var(--scale, 1));
  margin-bottom: calc(-100vh / var(--scale, 1));
  overflow: hidden;
}

.widget-background,
.picture-background {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.fixed-position-container,
.fixed-position-container-top {
  display: none;
}

.content-scroll-wrapper,
.content-bounds {
  position: relative;
}

.page-content-container,
.rmwidget,
.animation-container {
  position: absolute;
}

/* Animation boxes can be larger than the widget inside them, so only the
   widget itself should catch clicks and hovers. */
.animation-container {
  pointer-events: none;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.animation-container .rmwidget {
  pointer-events: auto;
}

/* js/scroll-zoom.js sets the scale every frame, so it shouldn't lag behind. */
.animation-container.scroll-zoom {
  transition: none;
}

/* --- pictures ------------------------------------------------------------ */

.widget-picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.widget-picture .bgpic {
  position: absolute;
  inset: 0;
  background-size: cover;
}

.widget-picture .bgpic ~ img {
  visibility: hidden;
}

/* --- text ---------------------------------------------------------------- */

.text-viewer {
  overflow-wrap: break-word;
}

.text-viewer > * {
  margin: 0;
}

/* Paragraph styles (.style-*, .align-*) live in the generated text.css. */

/* --- buttons ------------------------------------------------------------- */

.common-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, border-width 0.2s;
}

/* --- video --------------------------------------------------------------- */

.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Text boxes clip to their size, which hides the overflow of the stacked
   combining marks in the "V͓̽J͓̽T͓̽O͓̽R͓̽Z͓̽" logo. */
.widget-text-v3 {
  overflow: hidden;
}