/* A paper envelope, drawn in CSS, before every invitation. */
.intro-overlay.awaiting-envelope{background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--env-light) 90%,transparent),var(--scene-bg));background-color:var(--scene-bg);color:var(--env-ink)}
.awaiting-envelope .intro-still{opacity:.085;filter:blur(7px);transform:scale(1.08);transition:opacity .7s,filter .7s,transform .7s}
.awaiting-envelope .intro-vignette{background:repeating-linear-gradient(0deg,transparent 0 3px,#84765403 3px 4px);opacity:.8}
.awaiting-envelope .intro-brand{color:var(--env-seal);text-shadow:none}.envelope-dark{--scene-bg:#1c2a35;--scene-ink:#eee0bd;--scene-accent:#d4b484;--scene-line:#d4b48433}.envelope-dark.awaiting-envelope{background:radial-gradient(ellipse at 50% 35%,#43505c,#18232d)}
.envelope-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:75px 24px 25px;text-align:center;transition:opacity .45s,transform .7s;z-index:1;pointer-events:none}
.envelope-stage .envelope-trigger{pointer-events:auto}.envelope-opening .envelope-stage .envelope-trigger{pointer-events:none}.intro-overlay .intro-skip,.intro-overlay .intro-brand{z-index:4}
.envelope-eyebrow{font-size:12px;letter-spacing:1px;color:var(--env-seal);margin:0 0 10px;line-height:1.7}.envelope-dark .envelope-eyebrow{color:#d2bf92}
.envelope-heading{font-family:var(--serif);font-size:43px;line-height:1.5;font-weight:400;margin:0}.envelope-heading em{color:var(--env-seal)}.envelope-dark .envelope-heading em{color:#d2bf92}
.envelope-trigger{position:relative;width:min(420px,78vw);aspect-ratio:1.58;height:auto;display:block;background:none;padding:0;border:0;border-radius:5px;margin:48px 0 22px;perspective:1400px;cursor:pointer;color:var(--env-ink);flex-shrink:0;isolation:isolate;outline:none!important;-webkit-tap-highlight-color:transparent}
.envelope-trigger:focus-visible{outline:0!important}.envelope-trigger:focus-visible .envelope-seal{outline:2px solid var(--env-seal);outline-offset:6px}.envelope-trigger:disabled{opacity:1;cursor:default}
.envelope-object{display:block;position:absolute;inset:0;transform:rotate(-4deg);transition:transform .7s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 22px 20px #44362222);transform-style:preserve-3d}
.envelope-trigger:hover:not(:disabled) .envelope-object{transform:rotate(-2deg) translateY(-5px)}
.envelope-back{position:absolute;inset:0;border-radius:5px;background:linear-gradient(140deg,var(--env-crease),var(--env-paper));box-shadow:inset 0 0 0 1px #86765725;z-index:0}
.envelope-pocket{position:absolute;inset:0;background:var(--env-paper);box-shadow:inset 0 0 25px #61503712;border-radius:4px;z-index:2}
.envelope-left-fold,.envelope-right-fold{position:absolute;inset:0;z-index:3;background:linear-gradient(125deg,var(--env-light),var(--env-paper));clip-path:polygon(0 0,58% 59%,0 100%);filter:drop-shadow(1px 0 1px #86765722)}
.envelope-right-fold{clip-path:polygon(100% 0,42% 59%,100% 100%);background:linear-gradient(240deg,var(--env-light),var(--env-paper))}
.envelope-bottom-fold{position:absolute;inset:0;z-index:4;clip-path:polygon(0 100%,50% 43%,100% 100%);background:linear-gradient(0deg,var(--env-paper) 0%,var(--env-light) 100%)}
.envelope-bottom-fold:after{content:'';position:absolute;inset:0;background:linear-gradient(32deg,transparent 49.5%,#ad997422 50%,transparent 50.5%)}
.envelope-flap{position:absolute;top:0;left:0;right:0;height:63%;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(170deg,var(--env-light),var(--env-paper));transform-origin:50% 0;z-index:6;filter:drop-shadow(0 3px 1px #69593c22);backface-visibility:hidden;transition:transform .75s cubic-bezier(.4,0,.3,1) .1s}
.envelope-flap:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 2px,#a8997207 2px 3px)}
.envelope-seal{position:absolute;z-index:8;left:calc(50% - 34px);top:calc(59% - 34px);width:68px;height:68px;border-radius:47% 53% 48% 52%;background:radial-gradient(circle at 32% 23%,color-mix(in srgb,var(--env-seal) 70%,#fff0a6),var(--env-seal) 55%,color-mix(in srgb,var(--env-seal) 70%,#302712));box-shadow:0 5px 8px #32271b33,inset 0 0 0 4px #fff3bd22,inset 0 0 0 6px #3e301c22;display:grid;place-items:center;color:#f9e9bb;transform:rotate(10deg);transition:opacity .25s,transform .4s}
.envelope-seal>span{border:1px solid #ffeac755;display:grid;place-items:center;width:49px;height:49px;border-radius:50%;font-family:var(--serif);font-size:29px;line-height:1}
.envelope-sprig{position:absolute;z-index:7;width:55px;height:113px;left:calc(50% - 14px);top:17%;color:var(--env-seal);opacity:.65;transform:rotate(20deg);transition:opacity .25s,transform .5s}.envelope-sprig svg{display:block;width:100%;height:100%}
.envelope-address{position:absolute;z-index:5;bottom:11%;left:10%;right:10%;font-family:var(--serif);font-size:16px;color:var(--env-ink);opacity:.85}
.envelope-letter{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;inset:8% 8% 5%;background:#fffcf4;color:#776a50;z-index:1;border:1px solid #ded1b7;box-shadow:0 -3px 10px #5143290d;transform:translateY(-20px);transition:transform .85s cubic-bezier(.2,.6,.2,1) .4s,opacity .6s .85s;padding:16px 20px;overflow:hidden;border-radius:3px}
.envelope-letter:before{content:'';position:absolute;inset:8px;border:1px solid #cbbf9e66;pointer-events:none}.letter-ornament{font-size:29px;line-height:1.1;color:var(--env-seal);margin:0 0 6px}.letter-kicker{font-family:var(--serif);font-size:13px}.letter-names{font-family:var(--serif);font-size:31px;line-height:1.5;margin:9px 0 5px;overflow-wrap:anywhere;max-width:100%}.letter-date{font-size:10px;line-height:1.7}
.envelope-names{font-family:var(--serif);font-size:26px;line-height:1.6;margin:0 0 4px;max-width:80vw;overflow-wrap:anywhere;color:var(--env-ink)}.envelope-hint{font-size:12px;line-height:1.8;color:var(--env-seal);margin:5px 0 0}.envelope-hint span{display:inline-block;padding-right:8px;animation:envelopeNudge 2.5s ease-in-out infinite}.envelope-template-name{font-size:10px;color:var(--env-ink);opacity:.5;margin:23px 0 0;letter-spacing:1px}.envelope-template-name span{padding:0 8px}
.envelope-dark .envelope-names{color:#ebdfc6}.envelope-dark .envelope-hint{color:#d4bf95}
.envelope-play-status{position:absolute;bottom:25px;left:20px;right:20px;text-align:center;font-size:11px;color:var(--env-ink);z-index:2;margin:0;min-height:18px}.awaiting-envelope:not(.envelope-opening) .envelope-play-status{visibility:hidden}.intro-overlay.is-playing .envelope-play-status{color:#fff9eb;text-shadow:0 1px 8px #0009}
.envelope-opening .envelope-trigger{pointer-events:none}.envelope-opening .envelope-object{transform:rotate(0deg) translateY(15px)!important}.envelope-opening .envelope-seal{opacity:0;transform:rotate(-15deg) scale(1.3)}.envelope-opening .envelope-sprig{opacity:0;transform:translateY(15px) rotate(30deg)}.envelope-opening .envelope-flap{transform:rotateX(180deg)}.envelope-opening .envelope-letter{transform:translateY(-66%);z-index:5}.envelope-opening .envelope-heading,.envelope-opening .envelope-eyebrow,.envelope-opening .envelope-names,.envelope-opening .envelope-hint,.envelope-opening .envelope-template-name{opacity:0;transition:opacity .35s}.envelope-opening .envelope-stage{animation:envelopeExit .45s ease-in 1s forwards}.is-playing .envelope-stage{visibility:hidden;pointer-events:none}.intro-overlay:not(.awaiting-envelope) .intro-still{filter:none;transform:none;opacity:1}
@keyframes envelopeExit{to{opacity:0;transform:translateY(20px) scale(1.05)}}@keyframes envelopeNudge{50%{transform:translate(-3px,-3px)}}
@media(max-width:520px){.envelope-stage{padding:75px 20px 35px}.envelope-heading{font-size:35px}.envelope-eyebrow{font-size:10px;margin-bottom:8px}.envelope-trigger{width:min(340px,82vw);margin:50px 0 25px}.envelope-seal{width:58px;height:58px;left:calc(50% - 29px);top:calc(59% - 29px)}.envelope-seal>span{width:40px;height:40px;font-size:25px}.envelope-sprig{width:44px;height:92px}.envelope-address{font-size:13px}.envelope-names{font-size:24px}.envelope-hint{font-size:11px}.envelope-template-name{font-size:9px;margin-top:22px}.letter-names{font-size:26px;margin:6px 0}.letter-kicker{font-size:10px}.letter-ornament{font-size:23px;margin-bottom:3px}.letter-date{font-size:8px}.envelope-play-status{bottom:22px}}
@media(max-height:620px){.envelope-stage{padding-top:65px;padding-bottom:24px}.envelope-heading{font-size:30px}.envelope-eyebrow{font-size:10px;margin-bottom:3px}.envelope-trigger{width:min(325px,65vw);margin:28px 0 18px}.envelope-names{font-size:22px}.envelope-template-name{margin-top:12px}.envelope-play-status{bottom:12px}.letter-names{font-size:25px}.letter-ornament{font-size:22px}}
@media(prefers-reduced-motion:reduce){.envelope-hint span,.envelope-opening .envelope-stage{animation:none}.envelope-stage,.envelope-object,.envelope-flap,.envelope-letter,.envelope-seal,.envelope-sprig{transition:none}.envelope-trigger:hover .envelope-object{transform:rotate(-4deg)}}