/* A physical botanical cabinet: its photograph never moves with the ornament. */
#invitation-page #gallery.memory-cabinet-section {
  --memory-stage-width: min(88vw,470px);
  --memory-stage-height: calc(var(--memory-stage-width)*1.25);
  --cabinet-play: paused;
  background: #203729;
  padding: 115px 0 90px;
  overflow: hidden;
}
#invitation-page #gallery.memory-cabinet-section::before {
  background: linear-gradient(#dbe0ca,transparent 110px),radial-gradient(ellipse at 58% 55%,#8b795b26,transparent 62%);
}
#invitation-page #gallery.memory-cabinet-section::after {
  inset: 110px 0 0;
  opacity: .075;
}
#invitation-page #gallery .memory-introduction { position: relative; z-index: 2; text-align: center; padding: 0 25px; }
#invitation-page #gallery .memory-introduction .section-intro { padding: 0; margin: 0 auto 24px; max-width: 420px; }
#invitation-page #gallery .memory-introduction h2 { font-size: clamp(3rem,11vw,4.7rem); line-height: .98; }
#invitation-page #gallery .memory-introduction .section-intro>p { font-size: .84rem; line-height: 1.8; max-width: 260px; }
#invitation-page #gallery .memory-introduction .album-help { margin: 0 auto 28px; max-width: 260px; font-size: .73rem; color: #b8bea3; }
#invitation-page #gallery .cabinet-flourish { display: block; width: 132px; height: 60px; margin: 0 auto 18px; color: #c7a770; overflow: visible; }
#invitation-page #gallery .memory-projection {
  width: var(--memory-stage-width); margin: 0 auto; padding: 0;
  background: transparent; box-shadow: none; border-radius: 0;
  perspective: 1100px; isolation: isolate;
}
#invitation-page #gallery .memory-projection::before,
#invitation-page #gallery .memory-projection::after { display: none; }
#invitation-page #gallery .memory-projection.is-projection-living { --cabinet-play: running; }
/* Clip the moving rail to the actual aperture, including between slides.
   The second mask keeps the live caption below the frame unrestricted. */
#invitation-page #gallery #gallery-list {
  -webkit-mask-image: linear-gradient(#000,#000),linear-gradient(#000,#000);
  mask-image: linear-gradient(#000,#000),linear-gradient(#000,#000);
  -webkit-mask-size: 74.8% calc(var(--memory-stage-height)*.787),100% calc(100% - var(--memory-stage-height));
  mask-size: 74.8% calc(var(--memory-stage-height)*.787),100% calc(100% - var(--memory-stage-height));
  -webkit-mask-position: center calc(var(--memory-stage-height)*.1),left bottom;
  mask-position: center calc(var(--memory-stage-height)*.1),left bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#invitation-page #gallery .memory:focus-visible { outline: none; }
#invitation-page #gallery .memory-projection:has(.memory:focus-visible) .memory-screen-mount {
  outline: 2px solid #f1d89f; outline-offset: 3px;
}
#invitation-page #gallery .memory-caption { min-height: 3.6em; padding: .7rem 12% 0; font-size: 1.13rem; line-height: 1.4; text-wrap: balance; }
#invitation-page #gallery .memory-projection .memory img,
#invitation-page #gallery .memory-projection .memory.is-current img,
#invitation-page #gallery .memory-projection.is-projecting .memory.is-current img {
  height: var(--memory-stage-height); padding: calc(var(--memory-stage-height)*.10) calc(var(--memory-stage-width)*.128) calc(var(--memory-stage-height)*.115);
  object-fit: contain; object-position: center; opacity: 1; animation: none; filter: none; transform: none!important;
  background: none;
}
#invitation-page #gallery .cabinet-interior {
  position: absolute; z-index: 1; left: 12.6%; right: 12.6%; top: calc(var(--memory-stage-height)*.1);
  height: calc(var(--memory-stage-height)*.787); pointer-events: none;
  background: #15291f; box-shadow: inset 0 0 34px #050e0880;
}
#invitation-page #gallery .memory-screen-mount { z-index: 7; filter: drop-shadow(0 22px 19px #08150b85); }
#invitation-page #gallery .cabinet-aperture {
  position: absolute; z-index: 5; left: 12.4%; width: 75.2%; top: calc(var(--memory-stage-height)*.097);
  height: calc(var(--memory-stage-height)*.793); perspective: 950px; pointer-events: none;
  overflow: hidden; isolation: isolate;
}
#invitation-page #gallery .cabinet-shutter {
  position: absolute; inset: 0 auto 0 0; width: 50.15%;
  background: url('assets/memory-lattice-v56.svg') center/100% 100%;
  transform-origin: left center; transform: rotateY(-103deg); opacity: 0;
  backface-visibility: hidden; box-shadow: 10px 0 24px #04100880;
  transition: transform .48s cubic-bezier(.22,.7,.25,1),opacity .36s;
}
#invitation-page #gallery .cabinet-shutter--right {
  left: auto; right: 0; transform-origin: right center; transform: rotateY(103deg);
  box-shadow: -10px 0 24px #04100880; background: none;
}
#invitation-page #gallery .cabinet-shutter--right::after {
  content: ''; position: absolute; inset: 0; background: url('assets/memory-lattice-v56.svg') center/100% 100%; transform: scaleX(-1);
}
#invitation-page #gallery .is-memory-turning .cabinet-shutter { opacity: 1; transform: rotateY(0); }
#invitation-page #gallery .is-projecting .cabinet-shutter { animation: cabinet-open-left-v56 2.05s cubic-bezier(.24,.62,.24,1) both; animation-play-state: var(--cabinet-play); }
#invitation-page #gallery .is-projecting .cabinet-shutter--right { animation-name: cabinet-open-right-v56; }
#invitation-page #gallery .cabinet-light {
  position: absolute; inset: 0; opacity: 0; transform: translateX(-115%);
  background: linear-gradient(108deg,transparent 20%,#e9d4a209 38%,#ffebbe45 49%,#f8e6bd09 60%,transparent 76%);
  mix-blend-mode: screen; pointer-events: none;
}
#invitation-page #gallery .is-projecting .cabinet-light { animation: cabinet-light-v56 2.05s ease both; animation-play-state: var(--cabinet-play); }
#invitation-page #gallery .cabinet-pendant {
  position: absolute; z-index: 8; width: 11%; height: auto; top: calc(var(--memory-stage-height)*.05); left: -1%; pointer-events: none;
  transform-origin: 50% 0; filter: drop-shadow(2px 6px 5px #07140d70);
  animation: cabinet-leaf-left-v56 7.4s ease-in-out infinite alternate; animation-play-state: var(--cabinet-play);
}
#invitation-page #gallery .cabinet-pendant--right {
  left: auto; right: -1%; width: 9%;
  animation-name: cabinet-leaf-right-v56; animation-duration: 8.6s;
}
#invitation-page #gallery .cabinet-pendant::before {
  content: ''; display: block; width: 1px; height: 65px; margin: auto;
  background: linear-gradient(#d8b77c88,#d8b77cdd);
}
#invitation-page #gallery .cabinet-pendant--right::before { height: 105px; }
#invitation-page #gallery .cabinet-pendant img { display: block; width: 100%; height: auto; }
#invitation-page #gallery .gallery-controls { margin: 5px 0 0; gap: .35rem 1rem; }
#invitation-page #gallery .gallery-controls button { background: #13271b80; border-color: #bfa06b66; }
#invitation-page #gallery .gallery-controls .projection-playback { flex-basis: 100%; font-size: .72rem; margin: 0; }
#invitation-page #gallery #gallery-count { font-family: 'Cormorant Garamond',Georgia,serif; font-size: 1.12rem; min-width: 62px; letter-spacing: .06em; }
#invitation-page #gallery .projection-playback::before { display: none; }
@keyframes cabinet-open-left-v56 { 0%,8% { transform: rotateY(0); opacity: 1; } 78% { opacity: 1; } 100% { transform: rotateY(-103deg); opacity: 0; } }
@keyframes cabinet-open-right-v56 { 0%,13% { transform: rotateY(0); opacity: 1; } 78% { opacity: 1; } 100% { transform: rotateY(103deg); opacity: 0; } }
@keyframes cabinet-light-v56 { 0%,26% { transform: translateX(-115%); opacity: 0; } 42% { opacity: .7; } 85% { opacity: .45; } 100% { transform: translateX(115%); opacity: 0; } }
@keyframes cabinet-leaf-left-v56 { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes cabinet-leaf-right-v56 { from { transform: rotate(3.5deg); } to { transform: rotate(-2deg); } }
@media(min-width:900px) {
  #invitation-page #gallery.memory-cabinet-section { --memory-stage-width: min(41vw,500px); display: grid; grid-template-columns: minmax(260px,340px) var(--memory-stage-width); align-items: center; justify-content: center; column-gap: clamp(45px,8vw,130px); padding: 140px 6vw 100px; }
  #invitation-page #gallery .memory-introduction { text-align: left; padding: 0 0 70px; }
  #invitation-page #gallery .memory-introduction .section-intro { margin: 0 0 24px; text-align: left; }
  #invitation-page #gallery .memory-introduction h2 { max-width: 330px; font-size: clamp(4.5rem,6.4vw,6rem); }
  #invitation-page #gallery .memory-introduction .section-intro>p { margin: 1.2rem 0 0; max-width: 245px; font-size: .92rem; }
  #invitation-page #gallery .memory-introduction .album-help { margin: 0; font-size: .76rem; }
  #invitation-page #gallery .cabinet-flourish { margin: 0 0 28px; width: 155px; height: 72px; }
  #invitation-page #gallery .memory-caption { font-size: 1.2rem; }
}
@media(max-width:359px) {
  #invitation-page #gallery.memory-cabinet-section { --memory-stage-width: 89vw; }
  #invitation-page #gallery .memory-introduction h2 { font-size: 2.8rem; }
  #invitation-page #gallery .memory-caption { font-size: 1rem; padding-inline: 8%; }
}
.card-preview #invitation-page #gallery :is(.cabinet-shutter,.cabinet-light) { display: none!important; }
.card-preview #invitation-page #gallery .cabinet-pendant { animation: none!important; }
.is-backgrounded #invitation-page #gallery :is(.cabinet-shutter,.cabinet-light,.cabinet-pendant) { animation-play-state: paused!important; }
@media(prefers-reduced-motion:reduce) {
  #invitation-page #gallery :is(.cabinet-shutter,.cabinet-light) { display: none!important; }
  #invitation-page #gallery .cabinet-pendant { animation: none!important; }
}