/* Opening: palace doors — a real photograph of closed double doors, split at the centre seam into two leaves that swing
   open in 3D onto the invitation. Theme hook: --door-img (url of a 9:16 photo whose seam is exactly at the centre;
   shared variants live in /o/img/doors-*.jpg, see ops/build-openings.py). Plaques: .op-pl in invite.css. */
.op-doors { display: block; padding: 0; background: none; cursor: pointer; }
/* blurred copy of the doors fills wide screens around the 9:16 stage; it fades as soon as the doors start to open */
.op-doors::before { content: ""; position: absolute; inset: -40px; background: var(--door-img) center / cover no-repeat; filter: blur(30px) brightness(.8); transition: opacity .5s ease; }
.doors { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 9 / 16; transform: translateX(-50%); perspective: 1600px; perspective-origin: 50% 45%; }
.door {
  position: absolute; top: 0; bottom: 0; width: 50%; background: var(--door-img) no-repeat; background-size: 200% 100%;
  backface-visibility: hidden; box-shadow: 0 0 60px rgba(0, 0, 0, .35);
  transition: transform 1.6s cubic-bezier(.6, .04, .22, 1) .3s, filter 1.6s ease .3s;
}
.door-l { left: 0; background-position: left center; transform-origin: 0 50%; }
.door-r { right: 0; background-position: right center; transform-origin: 100% 50%; }
/* warm light pouring through the seam */
.doors-light {
  position: absolute; left: 50%; top: -10%; bottom: -10%; width: 40%; transform: translateX(-50%) scaleX(.04); opacity: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(closest-side, #FFF8E6, rgba(255, 236, 190, .55) 45%, transparent);
  transition: opacity .5s ease .25s, transform 1.4s cubic-bezier(.5, 0, .2, 1) .3s;
}
.op-doors .op-pl { z-index: 3; cursor: default; }
.op-doors .op-pl .btn { margin-top: 6px; }
.op-doors.is-opening::before { opacity: 0; }
.op-doors.is-opening .door-l { transform: rotateY(88deg); filter: brightness(.55); }
.op-doors.is-opening .door-r { transform: rotateY(-88deg); filter: brightness(.55); }
.op-doors.is-opening .doors-light { opacity: 1; transform: translateX(-50%) scaleX(2.6); }
.op-doors.is-gone { transition-duration: .7s; }
@media (prefers-reduced-motion: reduce) { .door, .doors-light { transition: none; } }