/*
 * Rotunda shared background layer
 * Background-only treatment for the public home page, Accession, and the
 * authenticated student/admin portal surfaces.
 */

html {
  background-color: #06142a !important;
}

html body,
html body.accession-page,
html body.admin-page {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  background-color: transparent !important;
  background-image: none !important;
  background-attachment: initial !important;
}

html body::before,
html body.accession-page::before,
html body.admin-page::before {
  content: "" !important;
  position: fixed !important;
  inset: -3vh -3vw !important;
  z-index: -2 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background-color: #06142a !important;
  background-image: url("assets/rotunda-entry-layers/home-rotunda-dark-v85.png?v=85") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: initial !important;
  filter: saturate(1.07) brightness(.96) !important;
  transform: translate3d(0, 0, 0) scale(1.035) !important;
  transform-origin: center top !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

html body::after,
html body.accession-page::after,
html body.admin-page::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(58, 143, 255, .16), transparent 36%),
    linear-gradient(180deg, rgba(3, 10, 24, .24), rgba(5, 15, 34, .48) 52%, rgba(3, 10, 24, .68)) !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* A fixed viewport layer gives the Rotunda photograph a parallax effect while
   the page content scrolls, including on mobile browsers that ignore
   background-attachment: fixed. */
@media (max-width: 760px) {
  html body::before,
  html body.accession-page::before,
  html body.admin-page::before {
    inset: -2vh -18vw !important;
    background-position: 50% top !important;
    transform: translate3d(0, 0, 0) scale(1.02) !important;
  }
}