/* Layered cinematic stationery; the modal owns its scroll, never the invitation. */
.luxury-opening{--paper:#25463B;--wax:#C9AA78;--card:#FFFDF7;--card-ink:#403C35;--texture:none;--pattern:none;position:fixed;inset:0;z-index:5000;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scroll-behavior:auto;isolation:isolate;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.luxury-opening::-webkit-scrollbar{display:none}
.opening-track{position:relative;height:300dvh}
.opening-scene{position:sticky;top:0;width:100%;height:100dvh;overflow:hidden;background:var(--card);perspective:1500px}
.opening-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.s1-stage{z-index:3;background:radial-gradient(ellipse at 50% 30%,#33483B,#17271F 70%,#101D17);color:#E0C998}
.s1-heading{position:relative;z-index:3;text-align:center;max-width:90%;margin-bottom:clamp(22px,5vh,55px)}
.s1-heading>p:first-child{font-family:var(--serif);font-size:clamp(17px,2.2vw,24px);letter-spacing:.14em;text-transform:uppercase;margin:0 0 15px}
.s1-heading>span{display:block;font-size:24px;line-height:1;color:#C9AA78}
.s1-heading h1{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1.05;margin:16px 0 12px}
.s1-heading>p:last-child{font-family:var(--serif);font-size:clamp(21px,3vw,33px);margin:0;max-width:640px;overflow-wrap:anywhere}
.s1-stationery{position:relative;width:min(760px,110vw);aspect-ratio:1.45;flex:none}
.s1-envelope{position:absolute;left:14%;top:4%;width:72%;height:66%;background-color:var(--paper);background-image:var(--texture),var(--pattern);border:1px solid #ffffff12;box-shadow:0 24px 50px #0006,inset 0 0 40px #0002}
.s1-flap{position:absolute;inset:0 0 18%;clip-path:polygon(0 0,100% 0,100% 6%,50% 80%,0 6%);background:linear-gradient(170deg,color-mix(in srgb,var(--paper),white 13%),var(--paper) 75%);filter:drop-shadow(0 5px 5px #0005)}
.s1-folds{position:absolute;inset:0;background:linear-gradient(35deg,transparent 49.8%,#ffffff20 50%,transparent 50.25%) left bottom/50% 75% no-repeat,linear-gradient(-35deg,transparent 49.8%,#ffffff20 50%,transparent 50.25%) right bottom/50% 75% no-repeat;pointer-events:none}
.opening-hand{position:absolute;bottom:0;width:50%;height:100%;background-image:url('/assets/images/opening/gloved-hands.png');background-repeat:no-repeat;background-size:200% auto;pointer-events:none;z-index:4}
.opening-hand-left{left:0;background-position:left bottom}.opening-hand-right{right:0;background-position:right bottom}
.luxury-opening .ceremonial-seal{position:absolute;width:clamp(64px,9vw,92px);height:clamp(64px,9vw,92px);border-radius:48% 52% 49% 51%;border:2px solid color-mix(in srgb,var(--wax),white 30%);background:radial-gradient(ellipse at 28% 20%,color-mix(in srgb,var(--wax),white 40%),var(--wax) 50%,color-mix(in srgb,var(--wax),black 40%));box-shadow:0 5px 12px #0007,inset 1px 1px 3px #fff8,inset -2px -3px 5px #0006;color:color-mix(in srgb,var(--wax),black 65%);display:grid;place-items:center;cursor:pointer;padding:7px;z-index:7;transition:none;transform:none}
.luxury-opening .ceremonial-seal>span{display:grid;place-items:center;width:100%;height:100%;border:1px solid color-mix(in srgb,var(--wax),black 30%);border-radius:50%;font-family:var(--serif);font-size:30px;box-shadow:inset 0 1px 2px #0005;text-shadow:0 1px 0 #fff5;color:inherit}
.luxury-opening .s1-seal{left:50%;top:52%;translate:-50% -50%}
.luxury-opening .ceremonial-seal:focus-visible{outline:none;filter:brightness(1.12)}
.s2-stage{z-index:2;background:radial-gradient(ellipse at 50% 25%,#F4EFE5,#DDD5C8);padding:24px}
.gatefold-card{position:relative;width:min(510px,82vw,57vh);height:min(730px,73dvh);perspective:1600px;transform-style:preserve-3d;filter:drop-shadow(0 18px 20px #52413230)}
.gatefold-inside{position:absolute;inset:0;background:var(--card);color:var(--card-ink);padding:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;border:1px solid #BFAF934D}
.gatefold-inside>span{font-size:10px;letter-spacing:.14em}.gatefold-inside>strong{font-family:var(--serif);font-size:clamp(26px,4vw,45px);font-weight:500}.gatefold-inside>p{font-size:13px}
.gatefold-door{position:absolute;top:0;bottom:0;width:50%;background:var(--card);border:1px solid #B6AA9650;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform}
.gatefold-door:before{content:'';position:absolute;inset:0;background-image:url('/assets/images/opening/embossed-paper.png');background-repeat:no-repeat;background-size:200% 100%;mix-blend-mode:luminosity;opacity:.72;pointer-events:none}
.gatefold-left{left:0;transform-origin:left center;border-radius:3px 0 0 3px}.gatefold-right{right:0;transform-origin:right center;border-radius:0 3px 3px 0}
.gatefold-left:before{background-position:left center}.gatefold-right:before{background-position:right center}
.s2-plaque{position:absolute;top:14%;left:20%;width:60%;padding:16px 8px;color:var(--card-ink);background:none;border:0;z-index:4;text-align:center}
.s2-plaque>span{display:block;font-size:8px;letter-spacing:.16em}.s2-plaque>strong{display:block;margin-top:8px;font-family:var(--serif);font-size:clamp(22px,3vw,32px);font-weight:500;overflow-wrap:anywhere}
.s2-bow{position:absolute;left:0;top:38%;width:100%;z-index:5;pointer-events:auto;padding:0;border:0;border-radius:0;cursor:pointer;appearance:none}.s2-bow img{display:block;width:100%;height:auto}
.s2-bow:focus-visible{outline:none;filter:drop-shadow(0 0 4px #C9AA78)}
.opening-instruction{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:20px;right:20px;z-index:10;margin:0;text-align:center;color:#E0C998;font-family:var(--sans);font-size:12px;letter-spacing:.02em;text-shadow:0 1px 5px #0005;pointer-events:none}
@media(max-width:600px){.s1-heading{margin-bottom:36px}.s1-stationery{width:114vw}.gatefold-card{width:min(84vw,52vh);height:70dvh}.s2-stage{padding:18px}.s2-plaque{left:15%;width:70%}.opening-instruction{font-size:11px;bottom:max(28px,env(safe-area-inset-bottom))}}
@media(max-height:500px){.s1-stage{flex-direction:row;gap:0}.s1-heading{width:45%;margin:0}.s1-heading h1{font-size:32px}.s1-stationery{width:55vw}.gatefold-card{height:76dvh;width:52vh}.s2-plaque{padding:8px}.s2-plaque>strong{font-size:20px}}

.luxury-opening[data-texture=linen]{--texture:repeating-linear-gradient(0deg,#ffffff0c 0 1px,#00000009 1px 2px,transparent 2px 4px),repeating-linear-gradient(90deg,#ffffff18 0 1px,transparent 1px 3px)}
.luxury-opening[data-texture=grain]{--texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23887766' opacity='.14' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.luxury-opening[data-pattern=pinstripe]{--pattern:repeating-linear-gradient(90deg,transparent 0 17px,#a28b6238 17px 18px)}
.luxury-opening[data-pattern=botanical]{--pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23958362' stroke-opacity='.3' stroke-width='.8'%3E%3Cpath d='M25 80Q55 48 49 10M38 63Q15 59 24 43Q39 46 38 63M46 47Q69 45 66 29Q48 32 46 47M49 30Q29 28 33 14Q49 16 49 30'/%3E%3C/g%3E%3C/svg%3E")}
.luxury-opening[data-pattern=lace]{--pattern:none;--lace:color-mix(in srgb,var(--paper),white 72%)}
.luxury-opening[data-pattern=floral_cut]{--pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.27' stroke-width='.8'%3E%3Cpath d='M50 82Q5 58 18 33Q23 17 37 25Q48 2 59 25Q84 16 86 37Q95 61 50 82Z'/%3E%3Cpath d='M50 82L20 35M50 82L29 29M50 82L40 26M50 82L50 18M50 82L61 27M50 82L74 29M50 82L84 39'/%3E%3C/g%3E%3C/svg%3E")}
.luxury-opening[data-pattern=embossed]{--pattern:none;--relief:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.8'%3E%3Cpath d='M55 260Q80 110 52 0M66 200Q24 173 27 134M66 176Q102 158 104 107M68 145Q33 121 30 87M65 103Q95 76 91 45M60 67Q30 43 36 17M62 221Q98 212 105 184'/%3E%3C/g%3E%3C/svg%3E")}
/* Photographic paper avoids a synthetic linen grid on the outer envelope. */
.s1-envelope{background-image:var(--pattern)}
.s1-envelope:before{content:'';position:absolute;inset:0;background:url('/assets/images/opening/forest-envelope.png') center/100% 100% no-repeat;mix-blend-mode:luminosity;opacity:.8;pointer-events:none}
.s1-flap,.s1-folds{opacity:0}
.s2-plaque{border-radius:45% 45% 40% 40% / 18% 18% 18% 18%}

/* The envelope edges align with the inner thumb positions of the paired hands. */
.s1-envelope{left:23%;top:22%;width:54%;height:52%;transform:rotate(-3deg);transform-origin:50% 70%;box-shadow:0 12px 22px #0005,inset 0 0 24px #0002}
.s2-bow{background:var(--ribbon,#718CA2);mask:url('/assets/images/opening/satin-bow.png') center/100% 100% no-repeat;isolation:isolate}
.s2-bow img{filter:grayscale(1);mix-blend-mode:luminosity;opacity:.7}

/* Rotate around the grip, so wrists extend toward the side edges. */
.opening-hand-left{transform:rotate(55deg);transform-origin:48% 48%}
.opening-hand-right{transform:rotate(-55deg);transform-origin:52% 48%}
/* Continue the dark sleeves beyond the photograph and out of the viewport. */
.opening-hand:before{content:'';position:absolute;top:99.7%;width:38%;height:150vw;background:repeating-linear-gradient(105deg,#101212 0 1px,#141616 1px 3px);z-index:-1}
.opening-hand-left:before{left:0}.opening-hand-right:before{right:0}

/* Hands hold only the tall gatefold; the first envelope opens at its top hinge. */
.s1-stationery{width:min(640px,94vw);perspective:1400px}
.s1-envelope{left:8%;top:8%;width:84%;height:76%;transform:none;background-color:color-mix(in srgb,var(--paper),black 28%)}
.s1-envelope:before{clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.s1-flap{inset:0;opacity:1;clip-path:polygon(0 0,100% 0,50% 54%);background:var(--paper);transform-origin:center top;backface-visibility:visible;z-index:2}
.s1-flap:before{content:'';position:absolute;inset:0;background:url('/assets/images/opening/forest-envelope.png') center/100% 100%;mix-blend-mode:luminosity;opacity:.8}
.gatefold-card{container-type:inline-size}
.gatefold-card>.opening-hand{width:80%;height:auto;aspect-ratio:1;top:calc(38% + 35cqw);bottom:auto;translate:0 -50%;z-index:6}
.gatefold-card>.opening-hand-left{left:-50%}.gatefold-card>.opening-hand-right{right:-50%}

/* A thick wax rim and raised face catch the light above the paper. */
.luxury-opening .s1-seal{border:0;border-radius:47% 53% 49% 51% / 52% 46% 54% 48%;background:radial-gradient(ellipse at 30% 17%,color-mix(in srgb,var(--wax),white 48%),var(--wax) 48%,color-mix(in srgb,var(--wax),black 35%) 87%);box-shadow:0 6px 0 color-mix(in srgb,var(--wax),black 43%),0 9px 2px #0004,0 15px 20px #0006,inset 2px 3px 3px #fff5,inset -3px -4px 4px #0006;will-change:transform}
.luxury-opening .s1-seal>span{border:0;background:none;box-shadow:none;text-shadow:0 1px 1px #ffffff80,0 -1px 1px #0005}

/* Satin is drawn as continuous paths; no clipped bitmap moves across the card. */
.gatefold-card{perspective:1200px}
.ribbon-art{position:absolute;top:38%;width:100%;aspect-ratio:1.5;pointer-events:none;color:var(--ribbon,#718CA2)}
.ribbon-art svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 2px #0003)}
.satin-light{stop-color:color-mix(in srgb,var(--ribbon,#718CA2),white 40%)}
.satin-base{stop-color:var(--ribbon,#718CA2)}
.satin-shade{stop-color:color-mix(in srgb,var(--ribbon,#718CA2),black 38%)}
.s2-bow.bow-knot{left:0;z-index:7;pointer-events:auto;height:30cqw;aspect-ratio:auto;background:none;mask:none;clip-path:none;border:0}
.s2-bow.bow-knot svg{position:absolute;top:0;left:0;height:66.7cqw;pointer-events:none}
.door-ribbon{position:absolute;width:100%;height:10.5cqw;top:calc(38% + 14cqw);z-index:2;background:linear-gradient(180deg,#ffffff50,#00000017 35%,#ffffff17 70%,#00000035),url("/assets/images/opening/satin-texture.png"),linear-gradient(var(--ribbon,#718CA2),var(--ribbon,#718CA2));background-size:auto,400px 400px,auto;background-blend-mode:normal,luminosity,normal;box-shadow:inset 0 1px #ffffff55,inset 0 -1px #0004,0 2px 3px #0002}
.gatefold-left .door-ribbon,.gatefold-left .door-tail{left:0}
.gatefold-right .door-ribbon,.gatefold-right .door-tail{right:0}
.ribbon-pull{position:absolute;inset:0;z-index:6;pointer-events:none}
.door-tail{width:200%;z-index:2}
.ribbon-pull>.opening-hand{width:70%;height:auto;aspect-ratio:1;top:calc(38% + 69cqw);bottom:auto;translate:0 -50%;z-index:6}
.ribbon-pull>.opening-hand-left{left:-22%;transform:rotate(25deg)}
.ribbon-pull>.opening-hand-right{right:-22%;transform:rotate(-25deg)}

.ribbon-tail{z-index:6}

/* Keep the scene attached to the viewport, including mobile browser chrome changes. */
.luxury-opening{touch-action:none;background:var(--card)}
.luxury-opening .opening-track{height:calc(100svh + 240px)}
.luxury-opening .opening-scene{position:fixed;inset:0;height:100%;width:100%}

.luxury-opening[data-hand=witch] .opening-hand{background-image:url('/assets/images/opening/witch-hands.png')}
.luxury-opening[data-hand=witch] .opening-hand::before{background:repeating-linear-gradient(105deg,#141817 0 1px,#1d2422 1px 3px)}

/* The supplied photograph provides all wax edges, depth and texture. */
.luxury-opening .ceremonial-seal,.envelope-intro .wax-seal{border:0;border-radius:0;padding:0;background:transparent url('/assets/images/opening/stamp.png') center/165% auto no-repeat;box-shadow:none;filter:drop-shadow(0 5px 4px #0005)}
.luxury-opening .ceremonial-seal>span,.envelope-intro .wax-seal>span{width:100%;height:100%;border:0;border-radius:0;box-shadow:none;background:none;color:var(--wax,#C9AA78);font-family:var(--serif,Georgia,serif);font-size:clamp(18px,3vw,26px);letter-spacing:.02em;text-shadow:0 1px 2px #18090b;line-height:1;pointer-events:none}
.envelope-intro:not(.is-opening) .wax-seal{animation:photo-seal-heartbeat 2s ease-in-out infinite}
@keyframes photo-seal-heartbeat{0%,40%,100%{scale:1}10%,28%{scale:1.07}18%{scale:1.015}}
@media(prefers-reduced-motion:reduce){.envelope-intro .wax-seal{animation:none}}