/* Real paper layers: back, full-length invitation, pocket, and a hinged two-sided flap. */
.intro-overlay{display:none;cursor:pointer}
.js .intro-overlay{display:contents}
.js.is-open .intro-overlay{display:none}
.intro-backdrop{position:fixed;inset:0;z-index:99;background:radial-gradient(ellipse at 45% 35%,#faf9f4,#eeece5 65%,#e3e1d8)}
.intro-backdrop:after,.flap-paper:after,.envelope-bottom:after,.envelope-side:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23807867' filter='url(%23n)' opacity='.55' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:150px;mix-blend-mode:multiply}
.envelope-scene{position:fixed;left:50%;top:calc(var(--intro-height,100svh) / 2);width:min(720px,88vw);height:min(470px,calc(var(--intro-height,100svh) * .65));perspective:1800px;transform:translate(-50%,-50%) translateY(12px)}
.envelope-rear{z-index:100;pointer-events:none}
.envelope-front{z-index:103}
.envelope-flap-layer{z-index:106;pointer-events:none}
.envelope-motion{position:absolute;inset:0;transform-style:preserve-3d}
.envelope-back{position:absolute;inset:0;background:linear-gradient(165deg,#ddd8c9,#eeeadf 60%);border:1px solid #d6d0c2;border-radius:3px;box-shadow:0 25px 35px #5b504825}
.envelope-pocket{position:absolute;inset:0;overflow:hidden;border-radius:3px;filter:drop-shadow(0 -2px 2px #66584118)}
.envelope-side{position:absolute;inset:0;background:linear-gradient(105deg,#e8e3d7,#f4f0e5)}
.envelope-side-left{clip-path:polygon(0 0,55% 55%,0 100%)}
.envelope-side-right{clip-path:polygon(100% 0,45% 55%,100% 100%);background:linear-gradient(260deg,#e9e4d8,#f7f3e9)}
.envelope-bottom{position:absolute;inset:0;background:linear-gradient(178deg,#f3eee2 25%,#f9f5eb);clip-path:polygon(0 100%,0 99.5%,48% 43%,50% 42%,52% 43%,100% 99.5%,100% 100%);border-bottom:1px solid #d8d1c1}
.envelope-flap{position:absolute;left:0;right:0;top:0;height:60%;transform-origin:center top;transform-style:preserve-3d}
.flap-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-front{transform:translateZ(1px)}
.flap-back{transform:rotateY(180deg) translateZ(1px)}
.flap-paper{position:absolute;inset:0;background:linear-gradient(175deg,#fbf8ef,#f3eee2 75%,#e9e1d0);clip-path:polygon(0 0,100% 0,100% 2%,53% 97%,51% 99.5%,49% 99.5%,47% 97%,0 2%);filter:drop-shadow(0 2px 2px #71614b29)}
.flap-back .flap-paper{z-index:1;background:linear-gradient(0deg,#e7e0d2,#f0ebdf 85%);border-top:1px solid #d4cbb9}
.seal-button,.seal-reverse{position:absolute;left:50%;top:var(--seal-y,96%);transform:translate(-50%,-50%);width:var(--seal-size,clamp(110px,19vw,150px));aspect-ratio:1}
.seal-button{z-index:2;background:transparent;border:0;padding:0;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(1px 5px 4px #5f564938) drop-shadow(0 1px 1px #62564920)}
/* The plain reverse shares the front seal's silhouette; paper covers its attached portion. */
.seal-reverse{z-index:0;pointer-events:none;filter:drop-shadow(0 2px 2px #42473138)}
.wax-seal-back{position:absolute;inset:0;transform:scaleX(-1);background:radial-gradient(ellipse at 50% 48%,transparent 49%,#c0c69a66 58%,#454d34aa 65%,transparent 73%),radial-gradient(ellipse at 35% 30%,#adb58c,#818a61 51%,#596343 84%);-webkit-mask:url('./assets/wax-seal-olive.webp') center / contain no-repeat;mask:url('./assets/wax-seal-olive.webp') center / contain no-repeat}
.wax-seal{display:block;width:100%;height:100%;object-fit:contain}
.seal-tap-pointer{position:absolute;right:1%;bottom:-11%;display:block;width:32px;height:38px;color:var(--ink);pointer-events:none;animation:hint-appear .8s ease both}
.seal-tap-pointer[hidden]{display:none}
.seal-tap-pointer svg{display:block;width:100%;height:100%;transform:rotate(-18deg);transform-origin:50% 100%;animation:finger-tap 1.8s ease-in-out infinite}
.seal-button:focus-visible{outline:1px solid #86734e;outline-offset:12px;border-radius:50%}
.intro-tap{position:absolute;top:calc(100% + 44px);left:0;right:0;margin:0;text-align:center;color:#8b816b;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:3px;animation:hint-appear .8s ease both;pointer-events:none}
.intro-tap[hidden]{display:none}
.invitation-window,.invitation-sheet{display:block}
.js.is-closed .invitation-window{visibility:hidden}
.is-opening .invitation-window{display:block;position:fixed;inset:0 0 auto;height:var(--intro-height,100svh);z-index:102;overflow:hidden;animation:paper-window 2.9s both;pointer-events:none}
.is-opening .invitation-sheet{display:block;position:absolute;left:50%;top:0;width:var(--sheet-width);height:auto;height:var(--intro-height,100svh);overflow:hidden;transform-origin:top center;background:var(--paper);border-radius:3px;box-shadow:0 3px 7px #51473522,0 22px 52px #51473538;animation:long-paper-arrival 2.9s both;will-change:transform}
.is-opening .invitation{width:100%;max-width:none;margin:0;visibility:visible;opacity:1;animation:none;transform:none;clip-path:none;box-shadow:none}
.is-opening .envelope-motion{animation:envelope-stage 2.9s both}
.is-opening .envelope-flap{animation:flap-lift .65s both cubic-bezier(.4,0,.25,1)}
.is-opening .envelope-flap-layer{animation:flap-behind-paper .001s .34s both step-end}
.is-opening .intro-backdrop{animation:fade-out .55s 2.35s both ease}
.is-opening .intro-overlay{pointer-events:none}
.is-opening .doves-arrival,.is-opening .hero-intro,.is-opening .hero h1,.is-opening .hero-subtitle,.is-opening .date-line,.is-opening .hearts,.is-opening .castle-scene{animation:none}
/* .65s opening + .5s underside view, then one continuous extraction/zoom. */
@keyframes long-paper-arrival{
  0%{transform:translate(-50%,var(--sheet-start-y)) scale(var(--sheet-scale));border-radius:3px;box-shadow:0 3px 7px #51473522,0 22px 52px #51473538;animation-timing-function:cubic-bezier(.4,0,.25,1)}
  22.4138%,39.6552%{transform:translate(-50%,var(--sheet-open-y)) scale(var(--sheet-scale));animation-timing-function:cubic-bezier(.22,0,.2,1)}
  100%{transform:translate(-50%,0) scale(1);border-radius:0;box-shadow:0 0 0 transparent,0 0 0 transparent}
}
@keyframes envelope-stage{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.4,0,.25,1)}
  22.4138%,39.6552%{transform:translateY(var(--stage-shift));animation-timing-function:cubic-bezier(.3,0,.4,1)}
  69.5172%,100%{transform:translateY(var(--envelope-exit))}
}
@keyframes paper-window{
  0%{clip-path:inset(0 0 var(--window-start-bottom) 0);animation-timing-function:cubic-bezier(.4,0,.25,1)}
  22.4138%,39.6552%{clip-path:inset(0 0 var(--window-open-bottom) 0);animation-timing-function:cubic-bezier(.3,0,.4,1)}
  69.5172%,100%{clip-path:inset(0)}
}
@keyframes flap-lift{from{transform:rotateX(0)}to{transform:rotateX(-180deg)}}
@keyframes flap-behind-paper{from{z-index:106}to{z-index:101}}
@keyframes hint-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes finger-tap{0%,60%,100%{transform:translate(3px,4px) rotate(-18deg)}30%{transform:translate(0,0) rotate(-18deg)}}
@media(max-width:600px){.envelope-scene{width:90vw;height:min(500px,calc(var(--intro-height,100svh) * .62));transform:translate(-50%,-50%) translateY(2px);--seal-size:126px;--seal-y:98%}.envelope-flap{height:54%}.intro-tap{top:calc(100% + 36px)}}
@media(max-height:560px) and (min-width:601px){.envelope-scene{width:min(580px,76vw);height:calc(var(--intro-height,100svh) * .68);transform:translate(-50%,-50%) translateY(-12px);--seal-size:110px}.intro-tap{top:calc(100% + 22px)}}
@media(prefers-reduced-motion:reduce){.is-opening .intro-backdrop,.is-opening .envelope-scene{visibility:hidden}.is-opening .invitation-window{animation:none;clip-path:none}.is-opening .invitation-sheet{animation:none;transform:translate(-50%,0);box-shadow:none}.intro-tap,.seal-tap-pointer,.seal-tap-pointer svg{animation:none}}

/* Keep iOS toolbar changes and rubber-band scrolling out of the opening stage. */
.js.is-closed body,.js.is-opening body{position:fixed;inset:0;width:100%;height:var(--intro-height,100svh);overflow:hidden;overscroll-behavior:none;touch-action:none}
.is-closed .intro-overlay,.is-opening .intro-overlay{touch-action:none}
.doves-arrival,.is-open .doves{animation:none;transform:none}