/* full-screen <dialog class="overlay"> shell shared by modals and the lightbox.
   opened by js/lib/layers.js; sits just under the custom cursor (z-index 1001) */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #333 transparent;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  outline: none; /* the dialog itself can take focus when opened; the ring would frame the whole screen */
  opacity: 0;
  transition:
    opacity 0.25s ease,
    display 0.25s allow-discrete;
}

.overlay[open] {
  opacity: 1;
}

@starting-style {
  .overlay[open] {
    opacity: 0;
  }
}

.overlay-close {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: inherit;
  color: var(--dim, rgba(255, 255, 255, 0.55));
  transition: color 0.2s ease;
}

.overlay-close::after {
  content: "✕";
  margin-left: 0.4em;
}

.overlay-close:hover {
  color: #fff;
}

.overlay-close:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .overlay,
  .overlay-close {
    transition: none;
  }
}