/* A letter opens, closes, and leaves. All controls recover if motion is skipped. */
.js .masthead,.js .invitation>*,.js .letter-wrap,.js .site-footer{animation:none}
.letter{outline:none}.letter-wrap[data-state=sent]>.letter{visibility:hidden;pointer-events:none}
.link-arrow{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.research-links .link-arrow{width:13px;height:13px;transition:transform .4s var(--ease)}.research-links a:hover .link-arrow{transform:translate(2px,-2px)}
.preview-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#ece6d5;border-left:2px solid #b9a47c;margin:-4px 0 14px;padding:7px 10px}
.preview-tools .service-note{background:none;border:0;margin:0;padding:0;flex:1}
.preview-animation{color:#635d49;border:0;background:none;padding:3px 0;font-size:10px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.preview-animation:hover{color:var(--ink)}
.sent-panel{padding:60px 24px;min-height:460px;text-align:center;outline:none;animation:success-arrive .75s var(--ease) both;color:var(--white)}
.sent-panel h2{font-size:clamp(40px,4vw,62px);letter-spacing:-2px;margin-top:28px;line-height:1.08}
.sent-panel>p:not(.paper-eyebrow){color:var(--muted);font-size:13px;margin-top:20px;max-width:360px}
.sent-mark{width:76px;height:76px;border-color:#bed2c450;background:#bdd3c407;margin:0 auto;box-shadow:none}
.sent-mark svg{stroke:var(--sage);width:38px;height:38px}.sent-reference{opacity:.65}
.sent-actions{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:38px;flex-wrap:wrap}
.write-again,.sent-home{display:inline-flex;align-items:center;justify-content:center;gap:15px;font-size:12px;line-height:1.4;min-height:46px;transition:background .3s,transform .3s,color .3s}
.write-again{color:var(--night);border:1px solid var(--sage);background:var(--sage);padding:12px 19px;margin:0;border-radius:2px}.write-again:hover{background:#cadbd2;transform:translateY(-2px)}
.sent-home{color:var(--muted);padding:12px 0;border-bottom:1px solid #b7cdc538}.sent-home:hover{color:var(--white)}
.sent-actions .link-arrow{width:14px;height:14px}
.motion-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mail-scene{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 48%,#304a45de,#14232cf5 75%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:clip;perspective:1200px;pointer-events:none}
.motion-active .site-shell{pointer-events:none}
.scene-halo{position:absolute;left:50%;top:50%;width:min(70vw,620px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#bdd3b216,transparent 68%);filter:blur(20px)}
.scene-anchor{position:absolute;left:50%;top:54%;width:280px;height:180px;transform:translate(-50%,-50%);perspective:1000px}
.mail-envelope{position:relative;width:280px;height:180px;transform-style:preserve-3d;filter:drop-shadow(0 28px 26px #07161d45)}
.envelope-back{position:absolute;inset:0;background:linear-gradient(135deg,#c6cdbb,#d5d8c6);border-radius:3px;z-index:0}
.paper-window{position:absolute;left:0;right:0;bottom:0;top:-240px;overflow:hidden;z-index:1;perspective:1000px}
.envelope-paper{position:absolute;top:40px;left:23px;width:234px;height:240px;perspective:1000px;filter:drop-shadow(0 3px 7px #30443d20)}
.paper-upper,.paper-lower{position:absolute;left:0;right:0;height:50%;background:#f5f2e8;padding:26px 27px;box-sizing:border-box}
.paper-upper{top:0;transform-origin:center bottom;backface-visibility:visible;border-bottom:1px solid #ccd0c21f;z-index:2;background:linear-gradient(115deg,#f8f6ef,#eeecdf)}
.paper-lower{bottom:0;padding-top:25px;z-index:1}.paper-upper span{display:block;font:italic 24px/1 Georgia,serif;color:#6d8b76;margin-bottom:20px}
.envelope-paper i{display:block;height:1px;background:#b5bda8;margin-bottom:12px;opacity:.55}.envelope-paper i:last-child{width:64%}.paper-lower i:nth-child(2){width:83%}
.envelope-front{position:absolute;inset:0;width:280px;height:180px;z-index:3;overflow:visible;border-radius:3px}
.envelope-flap{position:absolute;left:0;top:0;width:280px;height:128px;transform-origin:center top;clip-path:polygon(0 0,100% 0,50% 85%);background:linear-gradient(180deg,#e8e8da,#d6dccb);z-index:4;backface-visibility:visible}
.envelope-seal{position:absolute;left:calc(50% - 18px);top:83px;width:36px;height:36px;border-radius:50%;z-index:5;display:grid;place-items:center;background:#648372;color:#edf0e1;font:italic 14px Georgia,serif;box-shadow:0 2px 7px #2d49343d,inset 0 0 0 3px #b3c1a323}
.flight-trail{position:absolute;left:50%;top:calc(54% - 230px);width:min(650px,70vw);height:280px;fill:none;stroke:#c5dbcd;stroke-width:1;stroke-linecap:round;stroke-dasharray:720;stroke-dashoffset:720;opacity:0;z-index:-1}
.mail-scene[data-scene=entry] .envelope-flap{transform:rotateX(0deg)}.mail-scene[data-scene=send] .envelope-flap{transform:rotateX(180deg)}
.mail-scene[data-scene=entry] .envelope-paper{transform:translateY(220px)}.mail-scene[data-scene=send] .envelope-paper{transform:translateY(0)}
.mail-scene[data-scene=send] .envelope-seal{opacity:0}
/* Four drifting canopy layers: varied pools of light and uneven gusts. */
.light-ribbon{position:absolute;inset:-9%;pointer-events:none;opacity:.7;mix-blend-mode:screen;filter:blur(10px);will-change:transform,opacity;background-repeat:no-repeat;animation:canopy-drift 5.2s linear infinite alternate;background-image:radial-gradient(ellipse 45px 66px at 12% 80%,#cddfc2ad 0%,#b8d2b8ad 18%,transparent 75%),radial-gradient(ellipse 69px 61px at 72% 83%,#cddfc2ad 0%,#b8d2b8ad 18%,transparent 75%),radial-gradient(ellipse 98px 38px at 94% 91%,#cddfc2ad 0%,#b8d2b8ad 18%,transparent 75%),radial-gradient(ellipse 51px 70px at 91% 47%,#cddfc248 0%,#b8d2b848 18%,transparent 75%),radial-gradient(ellipse 110px 125px at 84% 7%,#cddfc248 0%,#b8d2b848 18%,transparent 75%),radial-gradient(ellipse 79px 30px at 61% 5%,#cddfc260 0%,#b8d2b860 18%,transparent 75%),radial-gradient(ellipse 62px 114px at 14% 68%,#cddfc235 0%,#b8d2b835 18%,transparent 75%),radial-gradient(ellipse 56px 66px at 56% 36%,#cddfc260 0%,#b8d2b860 18%,transparent 75%),radial-gradient(ellipse 84px 103px at 31% 51%,#cddfc248 0%,#b8d2b848 18%,transparent 75%),radial-gradient(ellipse 85px 111px at 47% 79%,#cddfc248 0%,#b8d2b848 18%,transparent 75%),radial-gradient(ellipse 95px 64px at 41% 56%,#cddfc248 0%,#b8d2b848 18%,transparent 75%),radial-gradient(ellipse 27px 29px at 61% 31%,#cddfc260 0%,#b8d2b860 18%,transparent 75%),radial-gradient(ellipse 70px 31px at 56% 11%,#cddfc248 0%,#b8d2b848 18%,transparent 75%),radial-gradient(ellipse 78px 84px at 41% 11%,#cddfc235 0%,#b8d2b835 18%,transparent 75%)}
.ribbon-two{filter:blur(17px);animation:canopy-drift 6.7s linear -3.1s infinite alternate-reverse;background-image:radial-gradient(ellipse 84px 92px at 87% 73%,#cddfc279 0%,#b8d2b879 18%,transparent 75%),radial-gradient(ellipse 85px 93px at 32% 19%,#cddfc2ad 0%,#b8d2b8ad 18%,transparent 75%),radial-gradient(ellipse 80px 64px at 13% 37%,#cddfc279 0%,#b8d2b879 18%,transparent 75%),radial-gradient(ellipse 60px 105px at 10% 14%,#cddfc260 0%,#b8d2b860 18%,transparent 75%),radial-gradient(ellipse 52px 46px at 91% 50%,#cddfc298 0%,#b8d2b898 18%,transparent 75%),radial-gradient(ellipse 34px 75px at 37% 22%,#cddfc2ad 0%,#b8d2b8ad 18%,transparent 75%),radial-gradient(ellipse 104px 85px at 4% 10%,#cddfc248 0%,#b8d2b848 18%,transparent 75%),radial-gradient(ellipse 62px 47px at 77% 6%,#cddfc298 0%,#b8d2b898 18%,transparent 75%),radial-gradient(ellipse 37px 63px at 89% 31%,#cddfc279 0%,#b8d2b879 18%,transparent 75%),radial-gradient(ellipse 97px 105px at 33% 49%,#cddfc248 0%,#b8d2b848 18%,transparent 75%),radial-gradient(ellipse 101px 85px at 3% 71%,#cddfc248 0%,#b8d2b848 18%,transparent 75%),radial-gradient(ellipse 98px 120px at 51% 17%,#cddfc2ad 0%,#b8d2b8ad 18%,transparent 75%)}
.light-ribbon::before{content:'';position:absolute;inset:0;background-repeat:no-repeat;will-change:transform,opacity;animation:canopy-flicker 3.8s linear -1.6s infinite alternate;background-image:radial-gradient(ellipse 111px 60px at 45% 93%,#cddfc279 0%,#b8d2b879 18%,transparent 75%),radial-gradient(ellipse 57px 25px at 75% 26%,#cddfc2ad 0%,#b8d2b8ad 18%,transparent 75%),radial-gradient(ellipse 88px 87px at 64% 25%,#cddfc279 0%,#b8d2b879 18%,transparent 75%),radial-gradient(ellipse 25px 67px at 52% 96%,#cddfc235 0%,#b8d2b835 18%,transparent 75%),radial-gradient(ellipse 94px 76px at 27% 69%,#cddfc260 0%,#b8d2b860 18%,transparent 75%),radial-gradient(ellipse 90px 117px at 61% 8%,#cddfc248 0%,#b8d2b848 18%,transparent 75%),radial-gradient(ellipse 25px 113px at 81% 45%,#cddfc260 0%,#b8d2b860 18%,transparent 75%),radial-gradient(ellipse 30px 38px at 89% 78%,#cddfc235 0%,#b8d2b835 18%,transparent 75%),radial-gradient(ellipse 37px 26px at 55% 9%,#cddfc260 0%,#b8d2b860 18%,transparent 75%),radial-gradient(ellipse 90px 103px at 81% 95%,#cddfc2ad 0%,#b8d2b8ad 18%,transparent 75%)}
.ribbon-two::before{animation-duration:4.6s;animation-delay:-2.7s;animation-direction:alternate-reverse;background-image:radial-gradient(ellipse 23px 94px at 43% 49%,#cddfc235 0%,#b8d2b835 18%,transparent 75%),radial-gradient(ellipse 106px 36px at 70% 28%,#cddfc248 0%,#b8d2b848 18%,transparent 75%),radial-gradient(ellipse 31px 111px at 38% 53%,#cddfc235 0%,#b8d2b835 18%,transparent 75%),radial-gradient(ellipse 41px 25px at 41% 34%,#cddfc298 0%,#b8d2b898 18%,transparent 75%),radial-gradient(ellipse 63px 108px at 16% 22%,#cddfc235 0%,#b8d2b835 18%,transparent 75%),radial-gradient(ellipse 92px 64px at 96% 88%,#cddfc235 0%,#b8d2b835 18%,transparent 75%),radial-gradient(ellipse 40px 79px at 73% 90%,#cddfc2ad 0%,#b8d2b8ad 18%,transparent 75%),radial-gradient(ellipse 53px 102px at 11% 84%,#cddfc2ad 0%,#b8d2b8ad 18%,transparent 75%),radial-gradient(ellipse 75px 35px at 60% 18%,#cddfc298 0%,#b8d2b898 18%,transparent 75%),radial-gradient(ellipse 110px 96px at 57% 75%,#cddfc298 0%,#b8d2b898 18%,transparent 75%)}
.page-hidden .light-ribbon,.page-hidden .light-ribbon::before{animation-play-state:paused}
@keyframes canopy-drift{
0%{opacity:.42;transform:translate(-2%,-1%) rotate(-2deg);animation-timing-function:cubic-bezier(.55,.05,.7,.55)}
24%{opacity:.82;transform:translate(2.5%,1.2%) rotate(1deg);animation-timing-function:cubic-bezier(.16,.7,.35,1)}
39%{opacity:.64;transform:translate(3.2%,.5%) rotate(1.4deg);animation-timing-function:cubic-bezier(.65,0,.8,.5)}
70%{opacity:.94;transform:translate(-1.5%,2.2%) rotate(-1.3deg);animation-timing-function:cubic-bezier(.12,.65,.3,1)}
100%{opacity:.53;transform:translate(-3%,-.8%) rotate(-2.5deg)}}
@keyframes canopy-flicker{
0%{opacity:.35;transform:translate(-1%,2%) scale(.94);animation-timing-function:ease-in}
30%{opacity:.9;transform:translate(3%,-2%) scale(1.06);animation-timing-function:ease-out}
48%{opacity:.55;transform:translate(3.6%,-1.4%) scale(1.02);animation-timing-function:ease-in}
78%{opacity:1;transform:translate(-2%,1%) scale(.97);animation-timing-function:ease-out}
100%{opacity:.48;transform:translate(-2.8%,1.6%) scale(.95)}}
@media(max-width:850px),(max-height:550px){.light-ribbon,.glow{display:none;will-change:auto}}
@keyframes success-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:850px){.sent-panel{min-height:400px;padding-block:48px}.sent-panel h2{font-size:48px}.sent-actions{gap:24px}}
@media(max-width:480px){.scene-anchor{scale:.84}.preview-tools{gap:8px;padding:7px 8px}.preview-tools .service-note{font-size:9px}.preview-animation{font-size:9px}.sent-panel{padding:36px 12px;min-height:390px}.sent-panel h2{font-size:42px}.sent-panel>p:not(.paper-eyebrow){font-size:12px}.sent-actions{gap:17px;margin-top:28px}.write-again,.sent-home{font-size:11px}.write-again{padding-inline:13px;gap:10px}.sent-home{gap:8px}}
@media(max-height:550px){.scene-anchor{scale:.7;top:62%}}
@media(prefers-reduced-motion:reduce){.light-ribbon{display:none;will-change:auto}.sent-panel{animation:none}.sent-mark svg{stroke-dashoffset:0}}

.motion-active .letter-wrap{z-index:50}.motion-active .letter{will-change:transform,opacity;backface-visibility:hidden}
.paper-upper,.paper-lower{padding:0;overflow:hidden}.paper-upper>span,.paper-upper>i,.paper-lower>i{display:none}
.paper-replica{position:absolute;left:0;width:234px;height:240px;pointer-events:none}
.mail-scene .letter-replica{position:absolute;left:0;top:0;transform-origin:0 0;padding:inherit;box-shadow:none;margin:0;min-height:0;max-height:none;overflow:hidden;transition:none;animation:none}
.mail-scene .letter-replica{padding:28px 34px 22px}
.mail-scene[data-scene=send] .envelope-flap{z-index:0}
@media(max-width:850px){.mail-scene .letter-replica{padding:32px 35px 26px}}
@media(max-width:480px){.mail-scene .letter-replica{padding:26px 22px 23px}}
@media(max-width:350px){.mail-scene .letter-replica{padding-inline:17px}}

/* Keep the letter's footprint; the confirmation replaces it without moving the page. */
.letter-wrap>.sent-panel{position:absolute;left:0;right:0;top:0;min-height:0;padding:40px 16px}
@media(max-width:480px){.letter-wrap>.sent-panel{padding:28px 12px}.sent-panel h2{font-size:36px;letter-spacing:-1.5px}}

html,body,.site-shell,.letter-wrap{overflow-anchor:none}

@media(max-width:850px){.scene-anchor{top:50%}.flight-trail{top:calc(50% - 230px)}}
@media(max-width:850px) and (max-height:550px){.scene-anchor{scale:.6}}

/* A folded sheet has an unprinted reverse, not mirrored form contents. */
.paper-upper{transform-style:preserve-3d;overflow:visible;background:transparent;border:0}
.paper-upper>.paper-replica{height:120px;overflow:hidden;background:var(--paper);backface-visibility:hidden;transform:translateZ(.15px)}
.paper-upper::after{content:'';position:absolute;inset:0;background:#fffefa;transform:rotateX(180deg) translateZ(.15px);backface-visibility:hidden;pointer-events:none}

/* Translate in viewport coordinates before scaling the envelope. */
.scene-anchor{scale:none;transform:translate(-50%,-50%) scale(var(--envelope-scale,1))}
@media(max-width:480px){.scene-anchor{--envelope-scale:.84}}
@media(max-height:550px){.scene-anchor{--envelope-scale:.7}}
@media(max-width:850px) and (max-height:550px){.scene-anchor{--envelope-scale:.6}}

/* Independently randomized pools are animated by the page's external script. */
.light-ribbon,.ribbon-two{background-image:none;filter:none}
.light-ribbon::before{content:none}
.light-spot{position:absolute;left:50%;top:50%;width:100px;height:100px;opacity:0;border-radius:50%;background:radial-gradient(ellipse,#d5e2c5 0%,#b8d2b8 18%,transparent 74%);will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.light-spot{will-change:auto}}

/* A slower canopy sway while each pool keeps its own random rhythm. */
.light-ribbon{animation-duration:8s}.ribbon-two{animation-duration:10s}
