* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #17352d; }
.scene-root { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; display: grid; place-items: start center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.scene-background { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.scene-canvas { position: relative; z-index: 1; width: min(100%, 750px, calc((100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 750 / 1206)); width: min(100%, 750px, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 750 / 1206)); height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); container-type: inline-size; }
.scene-layer { position: absolute; display: block; height: auto; pointer-events: none; }
.scene-arrow { position: absolute; top: 94.320066335%; transform: translate(-50%, -50%); width: max(44px, 6.8cqw); height: max(44px, 6.8cqw); border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.scene-arrow.back { left: calc(50% - max(24px, 4.4cqw)); }
.scene-arrow.next { left: calc(50% + max(24px, 4.3333333333cqw)); }
.scene-arrow:focus-visible { outline: 2px solid #fff4cf; outline-offset: 3px; }
.scene-arrow:active { background: #ffffff25; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.curtain-overlay { position: fixed; z-index: 10; inset: 0; overflow: hidden; touch-action: manipulation; }
.curtain-overlay[hidden] { display: none; }
.curtain-artboard { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100vh * 750 / 1206)); height: max(100vh, calc(100vw * 1206 / 750)); width: max(100vw, calc(100dvh * 750 / 1206)); height: max(100dvh, calc(100vw * 1206 / 750)); transform: translate(-50%, -50%); }
.curtain-panel, .curtain-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.curtain-panel { will-change: transform; }
/* Coordinates belong to the ORIGINAL 750 × 1206 artwork, never the viewport.
   The seam bends to x=390 between y=458 and y=639, safely between both tickets. */
.curtain-left { clip-path: polygon(0 0, 50.04% 0, 50.04% 35%, 52.04% 38%, 52.04% 53%, 50.04% 56%, 50.04% 100%, 0 100%); }
.curtain-right { clip-path: polygon(49.96% 0, 100% 0, 100% 100%, 49.96% 100%, 49.96% 56%, 51.96% 53%, 51.96% 38%, 49.96% 35%); }
.is-opening .curtain-still { visibility: hidden; }
.curtain-trigger { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.curtain-trigger:focus-visible { outline: 3px solid #fff4cf; outline-offset: -6px; }
.is-opening .curtain-left { animation: curtain-left 2.6s cubic-bezier(.65, 0, .25, 1) both; }
.is-opening .curtain-right { animation: curtain-right 2.6s cubic-bezier(.65, 0, .25, 1) both; }
@keyframes curtain-left { from { transform: translateX(0); } to { transform: translateX(-60%); } }
@keyframes curtain-right { from { transform: translateX(0); } to { transform: translateX(60%); } }
@media (prefers-reduced-motion: reduce) { .curtain-panel { animation: none !important; } }

/* Do not leave an invisible full-screen click shield over the revealed invitation. */
.curtain-overlay.is-opening.invitation-interactive { pointer-events:none; }
.is-opening.invitation-interactive .curtain-trigger { pointer-events:none; }
.is-opening.invitation-interactive .curtain-panel { pointer-events:auto; }