/* Native dialog leaves the page available without JavaScript. */
html.invitation-pending, html.invitation-pending body { overflow: hidden; overscroll-behavior: none; }
.invitation-intro { position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; background: transparent; color: var(--paper); overflow: hidden; }
.invitation-intro::backdrop { background: transparent; }
.intro-surround { position: absolute; inset: 0; background: linear-gradient(#211e1680, #211e1680), url('assets/invitation-landscape-panels.webp') center / cover; }
.intro-stage { position: relative; width: min(100%, 660px); height: 100%; margin: auto; perspective: 1800px; isolation: isolate; }
.intro-panel { position: absolute; inset-block: 0; width: 50%; overflow: hidden; background: #45472e; backface-visibility: hidden; will-change: transform; }
.intro-panel-left { left: 0; transform-origin: left center; z-index: 2; box-shadow: 8px 0 20px #211e1622; }
.intro-panel-right { right: 0; transform-origin: right center; z-index: 1; }
.intro-panel img { position: absolute; top: 0; height: 100%; width: 200%; max-width: none; object-fit: cover; }
.intro-panel-left img { left: 0; }
.intro-panel-right img { right: 0; }
.intro-panel-left::after { content: ''; position: absolute; right: 0; inset-block: 0; width: 1px; background: #211e1630; }
.intro-open { position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(100%, 620px); aspect-ratio: 1; padding: 0; border: 0; background: none; color: var(--paper); cursor: pointer; }
.intro-bow-canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.intro-open-label { position: absolute; bottom: 0; left: 0; width: 100%; font-size: 14px; font-style: italic; letter-spacing: .03em; text-shadow: 0 1px 6px #151b0d, 0 0 14px #151b0d; transition: opacity .35s; }
.intro-open:hover .intro-open-label, .intro-open:focus-visible .intro-open-label { text-decoration: underline; text-underline-offset: 5px; }
.intro-open:focus-visible { outline: none; }
.intro-replay { display: block; margin: 24px auto 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit; padding: 8px 0; min-height: 44px; font-size: 13px; font-style: italic; }
.intro-replay[hidden] { display: none; }
.invitation-intro.is-opening { animation: intro-reveal .4s 4.3s ease both; }
.invitation-intro.is-opening .intro-open-label { opacity: 0; }
.invitation-intro.is-opening .intro-panel-left { animation: gatefold-left 1.9s 2.35s cubic-bezier(.45,0,.18,1) forwards; }
.invitation-intro.is-opening .intro-panel-right { animation: gatefold-right 1.9s 2.45s cubic-bezier(.45,0,.18,1) forwards; }
.invitation-intro.is-opening .intro-surround { animation: intro-ink-away 1.6s 2.65s ease forwards; }
@keyframes gatefold-left { to { transform: translateX(-108%) rotateY(-22deg); } }
@keyframes gatefold-right { to { transform: translateX(108%) rotateY(22deg); } }
@keyframes intro-ink-away { to { opacity: 0; } }
@keyframes intro-reveal { to { opacity: 0; } }
@media (min-width: 761px) {
  .intro-stage { height: min(94%, 920px); top: 50%; transform: translateY(-50%); width: min(660px, 68vh); }
  .intro-panel-left { border-radius: 3px 0 0 3px; }
  .intro-panel-right { border-radius: 0 3px 3px 0; }
}
@media (max-height: 600px) { .intro-open { width: min(95%, 80vh); } .intro-open-label { font-size: 12px; bottom: 5%; } }
@media (prefers-reduced-motion: reduce) { .invitation-intro *, .invitation-intro.is-opening { animation: none !important; transition: none !important; } }