/* A quiet palace portrait, opening on the same paper as the invitation. */
#travel .journey-title-phrase { display: inline-block; max-width: 100%; white-space: pre-wrap; }
#travel .journey-scene {
  position: relative;
  isolation: isolate;
  width: calc(100% - 40px);
  height: 370px;
  margin: 0 auto;
  padding: 7px;
  border: 1px solid #ac855b99;
  border-radius: 46% 46% 3px 3px / 10% 10% 3px 3px;
  background: #f2e6d3;
  box-shadow: 0 12px 32px -23px #71492b80, inset 0 0 0 3px #f7eddf, inset 0 0 0 4px #bfa27677;
  overflow: hidden;
}
#travel .journey-scene .venue-portrait {
  width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none;
  border-radius: 46% 46% 1px 1px / 10% 10% 1px 1px;
}
#travel .journey-scene .venue-portrait img { transform: none; animation: none; }
.journey-door {
  position: absolute;
  top: 7px; bottom: 7px; width: calc(50% - 7px);
  z-index: 2;
  pointer-events: none;
  backface-visibility: hidden;
  background: linear-gradient(90deg,#ead5b6a6,#faf2e8b3 45%,#d6b88675),url('assets/paper-texture.webp') center/400px;
  box-shadow: inset 0 0 0 7px #f4e7d3, inset 0 0 0 8px #b6976499, inset 0 0 0 13px #f4e7d3, inset 0 0 0 14px #b6976444;
}
.journey-door::after {
  content: ''; position: absolute; top: 50%; width: 5px; height: 24px;
  border-radius: 50%; background: #9b7041; box-shadow: 0 0 0 3px #d4b78177;
}
.journey-door-left { left: 7px; transform-origin: left center; transform: perspective(800px) rotateY(-104deg); border-right: 1px solid #ad875c; }
.journey-door-right { right: 7px; transform-origin: right center; transform: perspective(800px) rotateY(104deg); border-left: 1px solid #ad875c; }
.journey-door-left::after { right: 12px; }
.journey-door-right::after { left: 12px; }
.journey-scene[data-journey-state="waiting"] .journey-door,
.journey-scene[data-journey-state="opening"] .journey-door,
.journey-scene[data-journey-state="closed"] .journey-door { transform: perspective(800px) rotateY(0deg); }
.journey-frame-jewel {
  position: absolute; top: 1px; left: calc(50% - 5px); z-index: 3;
  width: 10px; height: 10px; transform: rotate(45deg);
  border: 2px solid #bc955b; background: #8a2844; box-shadow: 0 0 0 2px #f1e3cf;
  pointer-events: none;
}
@media (min-width:900px), (min-width:700px) and (orientation:landscape) {
  #travel .journey-scene { width: 100%; height: 440px; }
}
@media (prefers-reduced-motion:reduce) {
  .journey-door { display: none; }
  #travel .journey-scene { transform: none !important; }
}