/* Let the wax-sealed invitation clear the pocket before moving into the event. */
html{overflow-x:clip}
.opening .envelope:not(.opening-object) .envelope-letter{transition:transform 1.5s .8s cubic-bezier(.2,.65,.2,1)}
.opening.is-opening .envelope:not(.opening-object) .envelope-letter{transform:translateY(-114%)}
.opening.is-opening .envelope:not(.opening-object){transform:translateY(45px);transition:transform 1.5s .8s ease}
.opening h1,.opening-eyebrow{transition:opacity .45s ease}
.opening.is-opening:has(.envelope:not(.opening-object)) h1,.opening.is-opening:has(.envelope:not(.opening-object)) .opening-eyebrow{opacity:0}
/* Photograph-based openings: true image halves, and one continuous sheet of
   cotton paper divided at its two physical creases. */
body:not([data-tactile=true]):is([data-opening=curtains],[data-opening=letter]) #open-letter.opening-object{
 width:min(100%,330px,42svh)!important;max-width:330px!important;
 aspect-ratio:3/4!important;margin:18px auto 22px!important;perspective:1500px;
}
.curtain-stage{position:absolute;inset:0;display:block;overflow:hidden;background:#200d17;box-shadow:0 18px 55px #0004;isolation:isolate}
.curtain-invite{position:absolute;inset:5% 9%;padding:35px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;color:#543d3c;background:#f7f1e6 url('../assets/compact-openings/folded-paper-v2.png') center/cover;transform:scale(.96);opacity:.55}
.curtain-invite>small{font-size:12px;letter-spacing:.12em;line-height:1.6;max-width:190px}
.stage-names{font:500 clamp(25px,5vw,43px)/1.1 var(--serif);overflow-wrap:anywhere;max-width:100%}
.stage-date{font-size:14px;letter-spacing:.04em;line-height:1.5}
.curtain-invite>em{font:italic 21px/1.3 var(--serif)}
.curtain-panel{position:absolute;top:0;bottom:0;width:50.2%;overflow:hidden;z-index:2;backface-visibility:hidden;will-change:transform}
.curtain-panel img{position:absolute;top:0;width:199.2032%;max-width:none;height:100%;object-fit:cover;object-position:center;pointer-events:none;filter:hue-rotate(-8deg) saturate(.78) brightness(.9)}
.curtain-left{left:0;transform-origin:0 50%}.curtain-left img{left:0}
.curtain-right{right:0;transform-origin:100% 50%}.curtain-right img{right:0}
.is-opening .curtain-left{transform:translateX(-76%) scaleX(.86);transition:transform 2.2s .1s cubic-bezier(.46,.02,.15,1)}
.is-opening .curtain-right{transform:translateX(76%) scaleX(.86);transition:transform 2.2s .1s cubic-bezier(.46,.02,.15,1)}
.is-opening .curtain-invite{transform:scale(1);opacity:1;transition:transform 1.7s .5s ease,opacity 1.4s .3s ease}
/* Both faces rotate around their actual horizontal hinge. In the closed state
   the top panel rests over the centre, with the other fold underneath it. */
.folded-sheet{position:absolute;inset:8%;display:block;transform:rotate(-3deg) scale(.96);transform-style:preserve-3d}
.letter-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 18px;color:#4b4039;background-color:#f7f1e6;background-image:url('../assets/compact-openings/folded-paper-v2.png');background-repeat:no-repeat;background-size:100% 300%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.letter-centre{top:33.3333%;bottom:auto;height:33.3334%;z-index:1;background-position:50% 50%;gap:10px}
.letter-fold{position:absolute;left:0;width:100%;height:33.3334%;transform-style:preserve-3d;will-change:transform}
.letter-fold-top{top:0;transform-origin:50% 100%;transform:rotateX(-180deg);z-index:3}
.letter-fold-bottom{bottom:0;transform-origin:50% 0;transform:rotateX(180deg);z-index:2}
.letter-fold-top .letter-front{background-position:50% 0}
.letter-fold-bottom .letter-front{background-position:50% 100%}
.letter-back{transform:rotateX(180deg);background-position:50% 50%;box-shadow:0 7px 26px #0003}
.letter-face small{font-size:12px;letter-spacing:.1em;line-height:1.5;text-wrap:balance}
.letter-face em{font:italic clamp(20px,4.5vw,27px)/1.15 var(--serif)}
.letter-monogram{font:500 37px/1 var(--serif);letter-spacing:.02em}
.letter-names{font:500 var(--letter-name-size,30px)/1.05 var(--serif);overflow-wrap:anywhere;max-width:100%}
.letter-face .letter-date{font-size:13px;letter-spacing:.03em}
.is-opening .folded-sheet{transform:rotate(0) scale(1);transition:transform 1.8s .1s ease}
.is-opening .letter-fold-top{transform:rotateX(0deg);transition:transform 1.05s .1s cubic-bezier(.42,0,.22,1)}
.is-opening .letter-fold-bottom{transform:rotateX(0deg);transition:transform 1.05s .8s cubic-bezier(.42,0,.22,1)}
.is-opening .letter-back{box-shadow:none}
@media(max-width:760px){
 body:is([data-opening=curtains],[data-opening=letter]) .opening-eyebrow{font-size:12px;max-width:310px;line-height:1.5;margin-inline:auto}
 .curtain-invite{padding:24px 17px;gap:18px}.stage-names{font-size:35px}
}
@media(max-height:700px){
 body:not([data-tactile=true]):is([data-opening=curtains],[data-opening=letter]) #open-letter.opening-object{width:min(100%,230px,38svh)!important;margin:12px auto 18px!important}
 .curtain-invite{padding:20px 12px;gap:13px}.curtain-invite>small{font-size:12px}.stage-names{font-size:27px}.stage-date{font-size:12px}.curtain-invite>em{font-size:18px}
 .letter-face{padding:8px 10px;gap:6px}.letter-face small{font-size:12px;letter-spacing:.03em}.letter-monogram{font-size:29px}.letter-names{font-size:min(var(--letter-name-size),24px)}.letter-face em{font-size:20px}.letter-face .letter-date{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.curtain-panel,.curtain-invite,.folded-sheet,.letter-fold{transition:none!important;will-change:auto}}
.motion-paused .curtain-panel,.motion-paused .curtain-invite,.motion-paused .folded-sheet,.motion-paused .letter-fold{transition:none!important;will-change:auto}
@media(max-height:600px){body:is([data-opening=curtains],[data-opening=letter]) .opening-eyebrow{display:none}}