.vestibule {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: auto;
}

.vestibule__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-canvas);
  z-index: 0;
}

.vestibule.is-done {
  pointer-events: none;
}

.vestibule__field {
  position: relative;
  z-index: 1;
  width: min(94vw, 52rem);
  height: min(82svh, 40rem);
  display: grid;
  place-items: center;
}

.vestibule__wall {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: transform, opacity, filter;
  background: var(--color-paper);
  box-shadow:
    0 0 0 1px rgba(39, 33, 29, 0.07),
    0 32px 90px rgba(39, 33, 29, 0.1);
  overflow: hidden;
}

.vestibule__paper {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: multiply;
}

.vestibule__paper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(0.9) brightness(1.08);
}

.vestibule__geometry {
  position: absolute;
  inset: 12% 16%;
  opacity: 0.85;
  pointer-events: none;
}

.vestibule__geometry svg {
  width: 100%;
  height: 100%;
}

.vestibule__geometry .geom-line {
  fill: none;
  stroke: var(--color-charcoal);
  stroke-opacity: 0.62;
  vector-effect: non-scaling-stroke;
}

.vestibule__annotation {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-label);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(39, 33, 29, 0.5);
  opacity: 0;
}

.vestibule__skip {
  position: absolute;
  right: 0;
  bottom: -2.75rem;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.5rem 0;
  font-size: var(--type-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(39, 33, 29, 0.45);
  cursor: pointer;
}

@media (max-width: 767px) {
  .vestibule__field {
    width: 90vw;
    height: 58svh;
  }

  .vestibule__wall {
    box-shadow: 0 0 0 1px rgba(39, 33, 29, 0.06);
  }

  .vestibule__geometry {
    inset: 12% 10%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vestibule__wall {
    opacity: 1;
  }
}