/* A single photographic envelope, separated into hinged, permanently opaque layers.
   Anime.js controls the transforms. There is no closed/open image crossfade. */

/* Intro start pose (= first keyframe in script.js): far above-left, closer to the camera,
   turned. Uses the individual translate/rotate/scale properties so it composes with the
   stage's own transform instead of replacing it. */
.intro-pending .invitation-stage{translate:-110vw -105vh;rotate:-24deg;scale:1.33}
.intro-pending .envelope-caption,.intro-pending .envelope-date{opacity:0}
.invitation{position:fixed;inset:0;z-index:60;overflow:auto;scrollbar-gutter:stable both-edges;overflow-anchor:none;isolation:isolate;background:radial-gradient(ellipse at 48% 42%,#a36b3620 5%,#160d0866 65%,#100906c4 100%),#302016 url('assets/dark-wood.jpg') center/cover;perspective:1800px}

.invitation-stage{position:absolute;left:50%;top:50%;width:min(88vw,840px,112svh);aspect-ratio:3/2;transform:translate(-50%,-50%) rotateX(8deg) rotateY(-6deg) rotateZ(-1.5deg);transform-style:flat;perspective:1400px;perspective-origin:50% 15%}
.back-motion{position:absolute;inset:0;z-index:1;transform-origin:60% 35%;pointer-events:none}
.envelope-shell{position:absolute;inset:0;z-index:6;transform-origin:60% 35%}
.pocket-motion{position:absolute;inset:0;z-index:4;transform-origin:60% 35%}
.envelope-back{position:absolute;inset:6.2% 3%;z-index:1;background:radial-gradient(ellipse at 50% 60%,#c7a27c,#96734f);box-shadow:0 20px 40px #542e2840;border-radius:3px}
.envelope-flap-paper,.envelope-pocket{position:absolute;inset:0;background:url('assets/envelope.png') center/100% 100% no-repeat;filter:brightness(.94) saturate(1.15)}
.envelope-flap-paper:after,.envelope-pocket:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#d69a6826 15%,#6b321e66 100%);mix-blend-mode:multiply}
/* Safari/WebKit: no nested preserve-3d or backface-visibility. The flap is one flat
   plane with its own perspective() in the transform (set by script.js); JS swaps the
   visible face at 90deg, so every engine projects lid and seal identically. */
.envelope-flap{position:absolute;inset:0;z-index:6;transform-origin:50% 6.2%;transform:perspective(1400px) rotateX(0deg);will-change:transform}
.flap-front,.flap-rear{position:absolute;inset:0}
.flap-rear,.envelope-flap.is-flipped .flap-front{visibility:hidden}
.envelope-flap.is-flipped .flap-rear{visibility:visible}
.flap-front{filter:drop-shadow(0 4px 3px #55331c66);clip-path:inset(6.2% 3% 6% round 3px)}
.flap-rear{clip-path:polygon(3% 6.2%,97% 6.2%,50% 69.5%);background:radial-gradient(ellipse at 50% 40%,#dfba94,#b68a63);background-blend-mode:multiply;background-image:url('assets/paper.svg'),radial-gradient(ellipse at 50% 40%,#dfba94,#b68a63)}
.envelope-flap-paper{clip-path:polygon(3% 6.2%,97% 6.2%,50% 69.5%)}
.envelope-pocket{z-index:4;clip-path:polygon(3% 6.2%,50% 34%,97% 6.2%,97% 94%,3% 94%);background-size:500% 500%;background-position:50% 91%;box-shadow:inset 0 -2px 3px #66432933}
.pocket-motion{clip-path:inset(6.2% 3% 6% round 3px)}

/* The channel clips the tucked letter at the envelope's lower and side edges.
   The letter is present inside the envelope before the hinged flap is raised. */
.paper-channel{position:absolute;inset:-200% 4% 9%;z-index:3;overflow:clip;clip-path:inset(0);contain:paint;isolation:isolate;pointer-events:none}
.envelope-letter{position:absolute;left:5.32%;bottom:0;width:89.36%;height:clamp(560px,72svh,690px);background:linear-gradient(105deg,#f7e5c7,#edcfaa);border:1px solid #d8b58b;border-radius:2px;box-shadow:0 2px 5px #4f392329,0 12px 28px #4d392324;transform:translateY(84%);visibility:hidden;overflow:clip;pointer-events:auto;will-change:transform}
.envelope-letter:before{content:'';position:absolute;inset:0;pointer-events:none;background:url('assets/paper.svg');opacity:.8}
/* The tucked lower edge is physically hidden: do not give Firefox a border or
   outer shadow primitive to paint beyond the moving sheet's own clip. */
.paper-channel>.envelope-letter{border-bottom-color:transparent;box-shadow:none}
.paper-content{position:relative;max-width:580px;margin:0 auto;padding:35px 48px 130px;text-align:center}
.paper-monogram{font:calc(42px*var(--script-scale))/1.1 var(--script);color:var(--sage-dark);margin:0 0 12px}
.paper-content .eyebrow{font-size:9px;margin-bottom:12px}
.paper-content h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em}
.paper-greeting{font:italic 16px/1.55 var(--serif);color:var(--muted);margin-top:15px}
.paper-content label{display:block;text-align:left;margin:22px 0 0;font-size:11px;letter-spacing:.06em}
.paper-password{display:flex;flex-direction:column;gap:11px}
.paper-password input{background:#fff8e78c!important;border-color:#bca77f!important;min-height:45px!important}
.paper-password .button{width:100%;font-size:18px;min-height:44px;padding:10px 15px}
.paper-demo{margin:10px 0 0;font-size:10px}
.paper-content .text-button{font-size:10px;margin-top:12px}
.seal-button{position:absolute;z-index:8;top:66%;left:50%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;padding:0;background:transparent}
.seal-button picture{display:contents}
.wax-seal{width:100%;height:100%;object-fit:contain;filter:drop-shadow(1px 4px 3px #402d2744);transition:transform .3s}
.seal-button:hover .wax-seal{transform:scale(1.015)}
.seal-button:focus-visible{outline:2px solid var(--sage-dark);border-radius:50%;outline-offset:6px}
.envelope-caption{position:absolute;top:103%;left:0;right:0;text-align:center}
.envelope-caption p{color:#f0ddc2;font:italic clamp(23px,3vw,32px)/1.3 var(--serif)}
.envelope-caption>span{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;margin-top:16px;color:#edd8bd}
.envelope-date{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);font:12px var(--serif);letter-spacing:.3em;white-space:nowrap;color:#edd8bd}
/* Target geometry is measured while invisible, before the timeline starts. */
.invitation.is-layout .invitation-stage{top:calc(66% + var(--stage-shift,0px));width:min(88vw,800px,80svh);transform:translate(-50%,-50%) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
.invitation.is-layout .envelope-letter{transform:translateY(calc(-18% - var(--paper-lift,0px)))}
.invitation.is-expanding,.invitation.is-dropping{pointer-events:none;overflow:hidden}
.paper-flight{position:fixed;z-index:70;pointer-events:none;will-change:left,top,width,height}
.paper-flight>.envelope-letter{position:absolute;left:0;top:0;bottom:auto;width:100%;height:100%;transform:none;visibility:visible;z-index:1}
.invitation.is-revealing{background:transparent}
.invitation.is-revealing:before{display:none}
.invitation.is-gone{visibility:hidden;pointer-events:none}
body.invitation-closed #site{visibility:hidden}
.invitation-closed>.skip-link{visibility:hidden}
@media(max-width:640px){
 .invitation-stage{width:min(94vw,84svh)}
 .invitation.is-layout .invitation-stage{width:min(96vw,82svh);top:calc(max(69%,calc(615px - 27vw)) + var(--stage-shift,0px))}
 .envelope-letter{left:2.66%;width:94.68%;height:515px}
 .paper-content{padding:26px 24px 110px}.paper-monogram{font-size:calc(33px*var(--script-scale));margin-bottom:10px}.paper-content h2{font-size:28px}.paper-greeting{font-size:14px;margin-top:13px}.paper-content label{margin-top:18px}.paper-content .eyebrow{font-size:8px}.paper-password .button{font-size:17px}.paper-demo{font-size:9px}.envelope-caption{top:108%}.envelope-caption>span{font-size:8px;letter-spacing:.13em}.envelope-date{bottom:7%;font-size:10px}.seal-button{width:24%}
}
@media(max-height:560px) and (min-width:641px){
 .invitation.is-layout .invitation-stage{top:calc(76% + var(--stage-shift,0px));width:min(62vw,65svh)}
 .paper-content{padding:16px 22px 100px}.paper-monogram{font-size:calc(28px*var(--script-scale));margin-bottom:5px}.paper-content .eyebrow{margin-bottom:5px}.paper-content h2{font-size:26px}.paper-greeting{margin-top:6px;font-size:13px}.paper-content label{margin-top:10px}
}

/* Moving cast shadow sits above the sheet and pocket, below the raised flap. */
.fold-shadow{position:absolute;z-index:5;left:3%;right:3%;top:6.2%;height:65%;pointer-events:none;transform-origin:50% 0;opacity:0;filter:blur(9px);will-change:transform,opacity}
.fold-shadow>span{display:block;width:100%;height:100%;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,#291507b8,#36201299 40%,#29150733)}
.flap-rear:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#35201580,transparent 72%);opacity:var(--fold-shade,0);pointer-events:none}
/* Decorative 3D planes never intercept the seal or form hit targets. */
.envelope-back,.envelope-pocket,.pocket-motion,.envelope-flap-paper,.flap-rear{pointer-events:none}
.seal-button{pointer-events:auto}
.envelope-shell,.envelope-flap,.flap-front{pointer-events:none}

.invitation[data-phase="closed"] .invitation-stage{cursor:pointer}

/* Explicit paint clipping includes the tucked sheet's borders and box shadows.
   The channel ends safely INSIDE the photographed envelope, not at its edge. */
.paper-monogram{display:flex;align-items:baseline;justify-content:center;white-space:nowrap}
.paper-monogram{padding-right:var(--mono-trail)}
/* Script glyphs bleed past their boxes (entry strokes, swashes, descenders):
   clip only the growing right edge instead of overflow:hidden on every side. */
.name-rest{display:inline-block;width:0;opacity:0;overflow:visible;clip-path:inset(-60% -.25em -60% -.6em);white-space:nowrap;flex-shrink:0}
.name-amp{display:inline-block;margin:0 var(--amp-after) 0 var(--amp-before)}
.paper-details .eyebrow{margin-top:16px}