/* Apertures measured independently in the 1800 × 720 source artwork. */
.process-stage { --door-left: 18.9%; --door-width: 71.7%; perspective: none; }
.process-stage:nth-child(2) { --door-left: 16.1%; --door-width: 71.4%; }
.process-stage:nth-child(3) { --door-left: 13.9%; --door-width: 70.3%; }
.process-stage:nth-child(4) { --door-left: 10.6%; --door-width: 71.7%; }
.process-stage:nth-child(5) { --door-left: 7.8%; --door-width: 72.2%; }
.process-visual { border: 0; }
.process-stage { border-right: 0; }
.stage-door {
  display: block;
  top: 18.9%; left: var(--door-left); width: var(--door-width); height: 49.7%;
  overflow: visible; border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  box-shadow: none;
  perspective: 700px; perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}
/* A permanent stone reveal holds the doors behind the front of the arch. */
.stage-door::before {
  inset: -2px; width: auto; border: 5px solid #baa487;
  border-bottom-width: 3px;
  border-radius: inherit;
  background: transparent;
  box-shadow: inset 4px 3px 7px #40332680, 1px 0 2px #fff5;
  transform: none !important; transition: none; pointer-events: none;
}
.stage-door::after { display: none; }
.stage-door > .door-leaf {
  position: absolute; top: 4px; bottom: 0; width: calc(50% - 3px);
  display: block; z-index: 2;
  opacity: 1; transform: rotateY(0deg); transform-style: preserve-3d;
  background:
    repeating-linear-gradient(90deg, #ffffff04 0 1px, transparent 1px 4px),
    linear-gradient(105deg, #ccbaa2, #e5d5bd 38%, #c2ad90);
  border: 1px solid #8f785c;
  box-shadow: inset 3px 0 4px #fff5, inset -3px 0 5px #58442a40, 0 3px 5px #241a164d;
  transition:
    transform 1.85s cubic-bezier(.25,.05,.18,1),
    filter 1.85s ease,
    opacity .34s ease 1.38s;
  backface-visibility: visible;
}
.stage-door > .door-left {
  left: 3px; transform-origin: 0 50%;
  border-radius: 100% 0 0 0 / 34% 0 0 0;
}
.stage-door > .door-right {
  right: 3px; transform-origin: 100% 50%;
  border-radius: 0 100% 0 0 / 0 34% 0 0;
  transition-delay: .09s;
}
/* Raised perimeter moulding and bronze outer hinge barrels. */
.door-leaf::before {
  content: ''; position: absolute; inset: 8px 6px 7px;
  border: 1px solid #8f775b70; border-radius: inherit;
  box-shadow: inset 1px 1px 2px #fff7, 1px 1px 1px #fff4;
}
.door-leaf::after {
  content: ''; position: absolute; top: 39%; bottom: 14%; width: 4px;
  background: linear-gradient(#ae8a4e 0 12%, transparent 12% 84%, #ae8a4e 84%);
  filter: drop-shadow(1px 0 1px #342515);
}
.door-left::after { left: -3px; }
.door-right::after { right: -3px; }
.door-handle {
  position: absolute; top: 62%; width: 3px; height: 18px;
  border-radius: 2px; background: linear-gradient(90deg, #725022, #e6c88c, #916b35);
  box-shadow: 2px 2px 3px #39271377;
}
.door-left .door-handle { right: 9px; }
.door-right .door-handle { left: 9px; }
.process-stage.is-open .stage-door > .door-leaf { opacity: 0; }
.process-stage.is-open .stage-door > .door-left { transform: rotateY(-68deg); filter: brightness(.86); }
.process-stage.is-open .stage-door > .door-right { transform: rotateY(68deg); filter: brightness(.92); }
.process-stage.is-open .stage-door::before { box-shadow: inset 4px 3px 7px #40332680, 1px 0 2px #fff5; }
/* The original projecting stone plinth is visible below the door threshold. */
.stage-label { bottom: 4.2%; }
@media (prefers-reduced-motion: reduce) {
  .stage-door > .door-leaf { transition-duration: .01ms; transition-delay: 0s; }
}