.ocean-scene{position:relative;isolation:isolate;overflow:hidden;background:#07111e;color:#ded5bd;min-height:690px;border-radius:4px;margin:24px 0;font-family:Georgia,'Times New Roman',serif}.atmosphere,.veil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.veil{background:linear-gradient(180deg,rgba(4,12,24,.2),rgba(4,12,24,.05) 40%,rgba(3,8,17,.65));z-index:-1}.scene-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px;font:10px/1.4 Arial,sans-serif;letter-spacing:.23em;color:#c7b58a}.quiet{background:none;border:0;color:#d9c9a2;font:12px/1.4 Arial,sans-serif;padding:12px 0;min-height:44px;cursor:pointer;letter-spacing:.02em}.quiet:hover{text-decoration:underline}.prologue{display:flex;gap:12px;align-items:center;justify-content:center;margin:20px 18px 0;transition:opacity .5s}.prologue p{font:italic 17px/1.5 Georgia,serif;text-align:center;margin:0;color:#ece1c4}.hairline{height:1px;width:24px;background:#9d8852;opacity:.55}.theatre{position:relative;height:465px;max-width:540px;margin:auto;perspective:1200px}.envelope{position:absolute;width:82%;max-width:370px;aspect-ratio:1.52;left:50%;top:145px;transform:translateX(-50%) rotate(-3deg);filter:drop-shadow(0 22px 19px #0009);transition:transform 1.4s cubic-bezier(.2,.7,.2,1),opacity 1s}.envelope-back,.inner-lining,.left-fold,.right-fold,.bottom-fold,.flap,.edge-light{position:absolute;inset:0;border-radius:3px}.envelope-back{background:linear-gradient(120deg,#182e48,#0c192e);border:1px solid #5d688066}.inner-lining{inset:3px;background:repeating-linear-gradient(60deg,#9b885c22 0 1px,transparent 1px 7px),#101a2b}.left-fold{background:linear-gradient(120deg,#243b56,#14283e);clip-path:polygon(0 0,54% 56%,0 100%);filter:drop-shadow(1px 0 1px #000)}.right-fold{background:linear-gradient(235deg,#1b304c,#0d1d33);clip-path:polygon(100% 0,46% 56%,100% 100%)}.bottom-fold{background:linear-gradient(165deg,#233b55,#10243b 66%,#112036);clip-path:polygon(0 100%,0 97%,50% 45%,100% 97%,100% 100%);border-bottom:1px solid #76809577}.flap{z-index:3;transform-origin:top;transition:transform .85s ease-in-out;background:linear-gradient(170deg,#2a415d,#162c46 60%,#0d1c30);clip-path:polygon(0 0,100% 0,50% 58%);backface-visibility:visible;border-top:1px solid #8791a06b}.edge-light{pointer-events:none;background:repeating-linear-gradient(0deg,#f7e1b504 0 1px,transparent 1px 3px);border:1px solid #8d9caa26}.seal{position:absolute;z-index:5;left:50%;top:calc(145px + min(27vw, 123px));transform:translate(-50%,-50%) rotate(-3deg);width:67px;height:67px;border:0;cursor:pointer;padding:6px;color:#483215;border-radius:44% 51% 47% 50%/48% 44% 55% 48%;background:radial-gradient(ellipse at 28% 20%,#d0b474,#967238 48%,#62451f 77%,#c5a261 83%,#715027);box-shadow:0 4px 6px #0009,inset 0 0 1px 2px #ba9a62;transition:filter .2s,scale .2s}.seal:hover{filter:brightness(1.15);scale:1.05}.seal-ring{display:block;border:1px solid #66482099;border-radius:50%;box-shadow:inset 0 1px 3px #382b1999,0 1px 1px #e4c98a99;width:100%;height:100%;padding:7px}.seal svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;filter:drop-shadow(0 1px #d5b575)}.invitation{position:absolute;z-index:1;left:50%;top:70px;width:min(82%,330px);color:#322f2a;background:linear-gradient(110deg,#eee1c7,#fcf5e6 42%,#eee3cd);padding:12px;opacity:0;transform:translate(-50%,100px) scale(.77) rotate(-3deg);box-shadow:0 14px 50px #0007;pointer-events:none;border-radius:2px}.paper-border{border:1px solid #aa915d80;outline:1px solid #bda87644;outline-offset:4px;padding:17px 12px 14px;text-align:center;background:repeating-linear-gradient(90deg,#846f3b03 0 1px,transparent 1px 3px)}.letter-mark{color:#9c7c41;font-size:24px;line-height:1}.letter-eyebrow{font:9px/1.5 Arial,sans-serif;text-transform:uppercase;letter-spacing:.23em;margin:11px 0;color:#7c6439}.invitation h2{font:normal 36px/1.08 Georgia,serif;letter-spacing:-.03em;margin:12px 0 15px}.letter-rule{width:38px;height:1px;background:#aa8d54;margin:0 auto 17px}.letter-copy{font:15px/1.6 Georgia,serif;margin:0}.letter-last{font:italic 15px/1.55 Georgia,serif;margin:14px 0 20px}.accept{border:1px solid #877145;background:#11283d;color:#f1e4c9;padding:14px 10px;width:100%;font:12px/1.3 Arial,sans-serif;cursor:pointer;min-height:46px}.accept span{margin-left:8px}.signature{font:italic 13px/1.2 Georgia,serif;color:#857044;margin:16px 0 3px}.phase-opening .flap,.phase-open .flap{transform:rotateX(180deg)}.phase-opening .invitation{animation:reveal 1.5s .35s both}.phase-open .invitation{z-index:6;opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}.phase-opening .envelope,.phase-open .envelope{transform:translate(-50%,105px) rotate(1deg) scale(.92);opacity:.6}.phase-open .prologue,.phase-opening .prologue{opacity:.65}.phase-arrival .envelope,.phase-arrival .invitation,.phase-arrival .prologue{opacity:0;pointer-events:none}.arrival{position:absolute;inset:60px 24px 0;text-align:center;animation:arrive .8s ease both;max-width:360px;margin:auto}.arrival-mark{font-size:38px;color:#bea368}.arrival .letter-eyebrow{color:#c4af7d;margin-top:22px}.arrival h2{font:normal 37px/1.15 Georgia,serif;color:#f2e5c7;margin:20px 0}.arrival p:not(.letter-eyebrow){font:16px/1.7 Georgia,serif;color:#ded7c6}.arrival .small{font:12px/1.6 Arial,sans-serif!important;color:#b6b9bd!important}.again{font:12px/1.4 Arial,sans-serif;background:#142a3d;color:#eadcba;border:1px solid #9a8555;padding:14px 18px;margin-top:15px;cursor:pointer;min-height:44px}.scene-bottom{text-align:center;position:relative;padding:12px 20px 30px;min-height:96px}.scene-bottom p{font:14px/1.5 Georgia,serif;margin:0 0 8px;color:#ebdfc3}.scene-bottom span{font:10px/1.5 Arial,sans-serif;letter-spacing:.14em;color:#aca68f}.preview-notes{font:14px/1.7 var(--ds-font-text,Arial,sans-serif)}.preview-notes summary{cursor:pointer;min-height:44px;padding:10px 0}.preview-notes ul{padding-left:20px}.preview-notes li{padding:5px 0}.ocean-scene button:focus-visible{outline:3px solid #f1d899;outline-offset:5px}@keyframes reveal{0%{opacity:0;transform:translate(-50%,100px) scale(.77) rotate(-3deg);z-index:1}35%{opacity:1;transform:translate(-50%,-55px) scale(.85) rotate(-1deg);z-index:1}65%{z-index:6;transform:translate(-50%,-35px) scale(1)}100%{z-index:6;opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(min-width:768px){.ocean-scene{min-height:735px}.scene-top{padding:25px 34px}.prologue{margin-top:20px}.theatre{height:490px}.envelope{top:155px}.seal{top:278px}.invitation{top:56px;width:340px}.paper-border{padding:22px 18px}.invitation h2{font-size:42px}.letter-copy,.letter-last{font-size:16px}.scene-bottom{padding-top:25px}}@media(max-width:359px){.scene-top{padding:16px;letter-spacing:.12em;font-size:9px}.prologue p{font-size:15px}.theatre{height:475px}.envelope{top:158px}.seal{top:240px;width:59px;height:59px}.invitation{width:90%;top:55px;padding:10px}.paper-border{padding:17px 10px}.invitation h2{font-size:33px}.letter-copy,.letter-last{font-size:14px}.ocean-scene{min-height:690px}}@media(prefers-reduced-motion:reduce){.envelope,.flap{transition:none}.phase-opening .invitation{animation:none;opacity:1;z-index:6;transform:translate(-50%,0)}.arrival{animation:none}}
/* Keep the revealed card clear of the replay control at every width. */
.theatre{height:570px}.scene-bottom{z-index:7}.phase-open .envelope{opacity:.28}.phase-open .scene-bottom{padding-top:16px}.ocean-scene{min-height:795px}
@media(min-width:768px){.theatre{height:595px}.ocean-scene{min-height:840px}}
@media(max-width:359px){.theatre{height:560px}.ocean-scene{min-height:775px}}
/* Scene first on phones, with notes below rather than an extra title. */
.invitation-preview .file-card{padding-top:0}.ocean-scene{margin:0 0 12px;min-height:0}.scene-top{justify-content:center;font:15px/1.5 Georgia,serif;letter-spacing:0;padding:20px 12px 12px}.prologue{margin-top:8px}.prologue p{font-size:16px}.signature{font:14px/1.4 Georgia,serif;letter-spacing:0}.phase-closed .theatre{height:clamp(230px,calc(100svh - 370px),400px)}.phase-closed .envelope{top:55px}.phase-closed .seal{top:calc(55px + min(23vw,123px))}.scene-bottom{min-height:70px;padding:8px 14px 20px}.phase-open .theatre,.phase-opening .theatre{height:560px}.phase-arrival .theatre{height:480px}.preview-notes summary{font-size:13px}.invitation-preview .file-closing{font-size:12px}
@media(min-width:768px){.scene-top{padding:24px 12px 12px;font-size:18px}.prologue{margin-top:16px}.phase-closed .theatre{height:450px}.phase-closed .envelope{top:85px}.phase-closed .seal{top:208px}.phase-open .theatre,.phase-opening .theatre{height:595px}.phase-arrival .theatre{height:500px}.ocean-scene{min-height:0}}
@media(max-width:359px){.scene-top{font-size:14px}.phase-closed .seal{top:calc(55px + 23vw)}.phase-open .theatre,.phase-opening .theatre{height:560px}.ocean-scene{min-height:0}}
@media(max-width:767px){.phase-closed .theatre{height:340px}}
@media(max-width:359px){.phase-closed .theatre{height:230px}.phase-closed .envelope{top:34px}.phase-closed .seal{top:calc(34px + 23vw)}}
.ocean-scene{background:#07111e}.atmosphere{z-index:0!important;max-height:none!important;object-fit:cover!important;height:100%!important}.veil{z-index:1!important}.scene-top,.prologue,.scene-bottom{position:relative;z-index:2}.theatre{z-index:3}.scene-bottom{z-index:4}
.backdrop-art{position:absolute!important;inset:0!important;width:100%!important;height:1100px!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center!important;z-index:0;pointer-events:none}.scene-top,.prologue,.theatre,.scene-bottom{position:relative}

/* Tactile detail: laid paper, folded edges and pressed antique wax. */
.envelope-back,.left-fold,.right-fold,.bottom-fold,.flap{background-blend-mode:soft-light,normal;background-image:url("./paper-grain.svg"),linear-gradient(150deg,#2b425e,#10233b 68%,#0b1a2d);background-size:160px 160px,100% 100%}
.left-fold{background-image:url("./paper-grain.svg"),linear-gradient(115deg,#2d435c,#182e47 65%,#101d31)}
.right-fold{background-image:url("./paper-grain.svg"),linear-gradient(240deg,#233951,#0f2036)}
.bottom-fold{background-image:url("./paper-grain.svg"),linear-gradient(165deg,#2a4059,#11273f 66%,#112036)}
.flap{background-image:url("./paper-grain.svg"),linear-gradient(170deg,#314963,#192f49 60%,#0d1c30)}
.envelope-frame{position:absolute;inset:9px;border:1px solid #b6a47635;z-index:4;pointer-events:none;border-radius:1px;box-shadow:inset 0 0 0 3px #10203633,0 0 0 1px #07101d44}
.envelope-corner{position:absolute;width:20px;height:20px;z-index:4;pointer-events:none;border-color:#c7b07977;border-style:solid;border-width:0}
.corner-tl{top:9px;left:9px;border-top-width:1px;border-left-width:1px}.corner-tr{top:9px;right:9px;border-top-width:1px;border-right-width:1px}.corner-bl{bottom:9px;left:9px;border-bottom-width:1px;border-left-width:1px}.corner-br{bottom:9px;right:9px;border-bottom-width:1px;border-right-width:1px}
.flap-crease{position:absolute;z-index:4;inset:0;clip-path:polygon(0 0,50% 58%,100% 0,100% .6%,50% 58.8%,0 .6%);background:linear-gradient(90deg,#b1bac15e,#131e2e99 50%,#a1acb64f);pointer-events:none;transition:opacity .6s}
.fold-crease{position:absolute;z-index:2;inset:0;background:#8999a42e;pointer-events:none}.left-crease{clip-path:polygon(0 97%,50% 45%,50.3% 45.4%,0 98%)}.right-crease{clip-path:polygon(100% 97%,50% 45%,49.7% 45.4%,100% 98%)}
.envelope-monogram{position:absolute;z-index:4;bottom:13px;left:50%;transform:translateX(-50%);font:15px/1 Georgia,serif;color:#baa16c80;text-shadow:0 1px #050e1899;pointer-events:none}
.phase-opening .flap-crease,.phase-open .flap-crease{opacity:0}
.seal{background:radial-gradient(ellipse at 24% 18%,#dfc38a 0%,#ac8a4c 23%,#937037 48%,#67491f 75%,#d4b374 80%,#745125 87%);box-shadow:0 5px 7px #000a,0 1px 1px #dbc08099,inset 1px 2px 2px #f1d29499,inset -2px -3px 3px #3d2b17aa;border:1px solid #b18c4e;isolation:isolate}
.seal::before{content:"";position:absolute;inset:3px;border:1px solid #e0bd7666;border-radius:44% 48% 47% 43%;pointer-events:none;box-shadow:inset 0 0 3px #4c351b80}
.seal::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:url("./paper-grain.svg");background-size:85px;mix-blend-mode:soft-light;opacity:.45}
.seal-ring{position:relative;z-index:1;border:1px solid #5b3e1bbc;outline:1px solid #d5b57477;outline-offset:2px;box-shadow:inset 0 2px 3px #382819bb,0 1px 1px #f4d99b99}
.seal svg{stroke-width:1.8;filter:drop-shadow(0 1px 0 #edd29a) drop-shadow(0 -1px 0 #54391d)}
/* Isolated October 24 envelope construction. Original remains unchanged. */
.theatre{height:430px;max-width:570px;perspective:1400px;transition:height 1s}.envelope{width:82%;max-width:380px;aspect-ratio:1.56;top:118px;transform:translateX(-50%) rotate(-3deg);filter:drop-shadow(0 20px 16px #0009);transition:transform 1s,top 1s;isolation:isolate;overflow:visible}
.envelope-back{z-index:0;background:linear-gradient(145deg,#334d6b,#11263d);border:2px solid #526783;box-shadow:0 3px 0 #0b1728,0 5px 0 #33465e,inset 0 0 0 5px #223c57,inset 0 0 0 6px #a8935b66}
.inner-lining{z-index:1;background:repeating-linear-gradient(45deg,#9f884744 0 1px,transparent 1px 8px),#122236;inset:4px}
.left-fold,.right-fold,.bottom-fold{z-index:4;border-radius:2px;pointer-events:none}.left-fold{clip-path:polygon(0 0,54% 54%,0 100%);background:linear-gradient(130deg,#3b5775,#1a314d);filter:none}.right-fold{clip-path:polygon(100% 0,46% 54%,100% 100%);background:linear-gradient(240deg,#2d4867,#152c46)}.bottom-fold{clip-path:polygon(0 100%,0 97%,50% 44%,100% 97%,100% 100%);background:linear-gradient(155deg,#314c6a,#162d48 80%);border-bottom:2px solid #72809388;box-shadow:inset 0 -7px 0 #ad96662b}
.flap{z-index:6;clip-path:polygon(0 0,100% 0,100% 2%,50% 60%,0 2%);background:linear-gradient(170deg,#49617d,#233e5c 52%,#10263e);border-top:2px solid #8693a066;transform-origin:50% 0;transition:transform .95s cubic-bezier(.3,.1,.25,1),filter .8s;backface-visibility:visible;filter:drop-shadow(0 3px 2px #0009)}
.envelope-frame,.edge-light,.flap-crease,.fold-crease,.envelope-corner,.envelope-monogram{z-index:7;pointer-events:none}.envelope-frame{inset:8px;border-color:#bea66b66}.flap-crease{display:none}.fold-crease{opacity:.35}.envelope-monogram{bottom:14px}.seal{z-index:9;top:calc(118px + min(26.3vw, 122px));width:66px;height:66px;transition:opacity .4s,transform .65s}
.invitation{z-index:2;top:17%;left:50%;width:88%;max-width:none;max-height:70%;overflow:hidden;padding:10px;opacity:1;transform:translate(-50%,0);pointer-events:none;box-shadow:0 -3px 0 #fff2dc,0 -5px 0 #ae9562,0 8px 15px #0006;transition:transform 1s cubic-bezier(.3,.1,.2,1),max-height 1s,width 1s,top 1s;transform-origin:50% 0}.invitation .paper-border{padding:16px 10px}.invitation .letter-mark{font-size:22px}.invitation h2{font-size:34px}.invitation .paper-border:before{content:'';position:absolute;left:6px;right:6px;top:150px;border-top:1px solid #a58d5733;box-shadow:0 1px #fff9}
.peek-touch{display:none;position:absolute;z-index:3;left:6%;top:-15%;height:28%;width:88%;border:0;background:transparent;color:transparent;cursor:pointer}.peek-touch:focus-visible{outline:2px solid #ead69d;outline-offset:5px}.phase-peek .envelope,.phase-extract .envelope,.phase-read .envelope{transform:translateX(-50%) rotate(0deg)}.phase-peek .flap,.phase-extract .flap,.phase-read .flap{transform:rotateX(180deg);z-index:1;filter:brightness(.75)}.phase-peek .seal,.phase-extract .seal,.phase-read .seal{opacity:0;pointer-events:none;transform:translate(-50%,15px) rotate(10deg) scale(.9)}
.phase-peek .invitation{transform:translate(-50%,-45%);transition-delay:.5s}.phase-peek .peek-touch{display:block}.phase-extract .theatre,.phase-read .theatre{height:610px}.phase-extract .envelope{top:285px}.phase-extract .invitation{transform:translate(-50%,-120%);max-height:70%;transition:transform .95s,top 1s}.phase-read .envelope{top:315px}.phase-read .invitation{z-index:10;top:-250px;width:90%;max-height:560px;transform:translate(-50%,0);pointer-events:auto;transition:transform .9s,top 1s,max-height 1s,width 1s;box-shadow:0 20px 45px #0009}.phase-read .paper-border{padding:17px 12px 14px}.phase-read .envelope-back,.phase-read .inner-lining,.phase-read .left-fold,.phase-read .right-fold,.phase-read .bottom-fold,.phase-read .flap{opacity:.65}.phase-read .invitation:focus{outline:none}.scene-bottom{position:relative;top:auto!important;transform:none!important;margin:0 auto;padding:10px 15px 30px}.scene-bottom p{font:normal 24px/1.4 Georgia,serif;margin:0 0 10px}.scene-bottom span{font:11px/1.5 Arial,sans-serif;letter-spacing:.15em}.scene-top{justify-content:center}.prologue{margin-top:12px}.backdrop-art{object-fit:cover}
@media(max-width:400px){.theatre{height:365px}.envelope{top:110px}.seal{top:calc(110px + 26vw)}.phase-extract .theatre,.phase-read .theatre{height:600px}.scene-bottom p{font-size:23px}.prologue p{font-size:16px}.phase-read .envelope{top:310px}.phase-read .invitation{top:-245px}.invitation h2{font-size:31px}.letter-copy{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01s!important;transition-delay:0s!important}}
.invitation{max-height:none!important;height:444px;overflow:visible!important;background:none;padding:0;box-shadow:none!important}.invitation .paper-border{height:444px;border:0;outline:0;padding:0!important;background:none;position:relative;perspective:1000px}.invitation .paper-border:before{display:none}.paper-upper,.paper-lower{position:absolute;left:0;width:100%;height:222px;padding:17px 12px 10px;background:linear-gradient(110deg,#eee1c7,#fcf5e6 42%,#eee3cd);border:1px solid #aa915d80;outline:1px solid #bda87644;outline-offset:-6px;box-shadow:0 1px 0 #ffffe8,0 -2px 0 #ae9562}.paper-upper{top:0;z-index:0}.paper-lower{top:222px;transform-origin:50% 0;transform:rotateX(-180deg);backface-visibility:hidden;z-index:1;transition:transform 1.05s cubic-bezier(.25,.1,.2,1)}.paper-upper:after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(110deg,#eee1c7,#fcf5e6 42%,#eee3cd);border:1px solid #aa915d80;outline:1px solid #bda87644;outline-offset:-7px;opacity:1;transition:opacity .4s .45s}.phase-read .paper-upper:after{opacity:0;pointer-events:none}.phase-read .paper-lower{transform:rotateX(0deg)}.phase-read .paper-upper{box-shadow:0 12px 20px #0005}.phase-read .paper-lower{box-shadow:0 18px 25px #0006;border-top-color:#ad966644}.phase-extract .invitation{top:-250px;transform:translate(-50%,0)}.phase-peek .invitation{transform:translate(-50%,-95px)}.phase-read .invitation{max-height:none}.paper-lower .letter-copy{font-size:14px;line-height:1.45;margin:0}.paper-lower .letter-last{font-size:14px;margin:10px 0 12px}.paper-lower .accept{padding:12px 6px;min-height:44px}.paper-lower .signature{margin:12px 0 0}.paper-upper .letter-rule{margin-bottom:0}.paper-upper h2{margin-top:12px}
.paper-lower{height:238px}.invitation,.invitation .paper-border{height:460px}.paper-lower .signature{font-size:12px;line-height:1.4}.phase-read .theatre{height:625px}.phase-read .invitation{top:-245px}
.phase-closed .invitation{visibility:hidden}.phase-peek .invitation,.phase-extract .invitation,.phase-read .invitation{visibility:visible}.phase-peek .envelope-frame,.phase-extract .envelope-frame,.phase-read .envelope-frame{border-top-color:transparent}.phase-peek .corner-tl,.phase-peek .corner-tr,.phase-extract .corner-tl,.phase-extract .corner-tr,.phase-read .corner-tl,.phase-read .corner-tr{opacity:0}
.phase-peek .invitation{animation:paper-reveal .01s .6s both}@keyframes paper-reveal{from{visibility:hidden}to{visibility:visible}}
.phase-closed .envelope,.phase-peek .envelope{clip-path:polygon(-100% -300%,200% -300%,200% 102%,-100% 102%)}.phase-peek .invitation{animation:none}
/* Keep the raised flap and extracted paper clear of the prologue. */
.theatre{margin-top:44px}
/* A + C: real paper surfaces and contact-driven weight, no magical effects. */
.envelope-back,.left-fold,.right-fold,.bottom-fold,.flap{background-image:url('./linen.svg'),var(--paper-tone);background-size:140px 140px,100% 100%;background-blend-mode:soft-light,normal}
.envelope-back{--paper-tone:linear-gradient(145deg,#354e69,#172c44);box-shadow:0 2px 0 #9c9b8255,0 4px 0 #101c2d,0 6px 0 #3e5167,inset 0 0 0 5px #223c57,inset 0 0 0 6px #a8935b66}
.left-fold{--paper-tone:linear-gradient(130deg,#405b78 0%,#2c4662 48%,#1b304a 99%)}.right-fold{--paper-tone:linear-gradient(240deg,#354f6b,#192e47)}.bottom-fold{--paper-tone:linear-gradient(160deg,#38536d,#203851 55%,#162c44 100%)}.flap{--paper-tone:linear-gradient(177deg,#4b637c 0%,#314b67 26%,#243e59 52%,#142c46 70%)}
.left-fold:after,.right-fold:after,.bottom-fold:after{content:'';position:absolute;inset:0;pointer-events:none}.left-fold:after{background:linear-gradient(43deg,transparent 48.7%,#09192b66 49.3%,#9fa38b55 49.8%,transparent 50.5%)}.right-fold:after{background:linear-gradient(-43deg,transparent 48.7%,#09192b77 49.3%,#87948755 49.8%,transparent 50.5%)}.bottom-fold:after{background:linear-gradient(180deg,#d0b58233,transparent 32%,#07192b33 100%);box-shadow:inset 0 -4px 5px #091a2b55}
.flap{transition:transform 1.1s cubic-bezier(.28,.04,.2,1),filter 1s}.flap:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#010a1466,transparent 4%,transparent 53%,#a8a18a66 58%,#07182b88 60%,transparent 63%)}
.phase-peek .flap,.phase-extract .flap,.phase-read .flap{filter:brightness(.84);--paper-tone:linear-gradient(180deg,#273d54,#344e68 72%,#82908c)}
.phase-peek .seal,.phase-extract .seal,.phase-read .seal{opacity:1;transform:translate(calc(-50% + min(30vw,150px)),min(31vw,150px)) rotate(24deg) rotateX(18deg) scale(.72);box-shadow:0 3px 4px #000a,inset 1px 2px 2px #f1d29499,inset -2px -3px 3px #3d2b17aa;transition:transform .95s cubic-bezier(.3,.05,.25,1),box-shadow .9s}
.phase-peek .seal{animation:seal-release 1s both}@keyframes seal-release{0%{transform:translate(-50%,-50%) rotate(-3deg)}25%{transform:translate(calc(-50% + 12px),-67%) rotate(12deg) rotateY(-28deg);filter:brightness(1.1)}100%{transform:translate(calc(-50% + min(30vw,150px)),min(31vw,150px)) rotate(24deg) rotateX(18deg) scale(.72)}}
.paper-upper,.paper-lower,.paper-upper:after{background-image:url('./linen.svg'),linear-gradient(110deg,#e8d9b9,#fbf1dc 42%,#eadcbe);background-size:130px,100% 100%;background-blend-mode:multiply,normal}.paper-upper:after{content:'✧';display:flex;align-items:center;justify-content:center;font:42px/1 Georgia,serif;color:#ad945c66;text-shadow:0 1px #fff8;box-shadow:inset 0 -7px 12px #ac8e5320,inset 0 3px 9px #fff6}
.paper-lower{background-image:url('./linen.svg'),linear-gradient(180deg,#c7af7c55,transparent 8%,transparent 90%,#c7af7c22),linear-gradient(110deg,#e8d9b9,#fbf1dc 42%,#eadcbe);border-top:1px solid #b1945d99;transition:transform 1.2s cubic-bezier(.23,.72,.24,1)}
.phase-extract .invitation{animation:paper-lift 1s both}@keyframes paper-lift{0%{transform:translate(-50%,0) rotateX(0deg);filter:drop-shadow(0 3px 2px #0004)}45%{transform:translate(-50%,0) rotateX(7deg) rotate(-1.2deg);filter:drop-shadow(0 16px 9px #0006)}100%{transform:translate(-50%,0) rotateX(0deg) rotate(.4deg);filter:drop-shadow(0 10px 9px #0006)}}
.phase-read .invitation{transform:translate(-50%,0) rotate(0deg);filter:drop-shadow(0 10px 9px #0006)}.phase-read .paper-upper{box-shadow:0 5px 9px #0004,inset 0 -3px 7px #ac8e5320}.phase-read .paper-lower{box-shadow:0 12px 18px #0005,inset 0 5px 9px #ac8e5322}.phase-peek .invitation{transition:transform 1.15s cubic-bezier(.24,.08,.2,1);transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.phase-peek .seal,.phase-extract .seal,.phase-read .seal{animation:none!important}.phase-extract .invitation{animation:none!important}}
.phase-peek .seal{transform:translate(calc(-50% + min(31vw,150px)),48px) rotate(24deg) rotateX(18deg) scale(.72)}
@keyframes seal-release{0%{transform:translate(-50%,-50%) rotate(-3deg)}25%{transform:translate(calc(-50% + 12px),-67%) rotate(12deg) rotateY(-28deg);filter:brightness(1.1)}100%{transform:translate(calc(-50% + min(31vw,150px)),48px) rotate(24deg) rotateX(18deg) scale(.72)}}
.phase-extract .seal,.phase-read .seal{z-index:0;opacity:.8;transform:translate(calc(-50% + min(31vw,150px)),48px) rotate(24deg) rotateX(18deg) scale(.72)}
.phase-extract .seal,.phase-read .seal{z-index:0;opacity:.9;transform:translate(calc(-50% + min(31vw,150px)),320px) rotate(32deg) rotateX(35deg) scale(.65);transition:transform 1.3s cubic-bezier(.32,.1,.3,1),opacity .6s}
/* Printed nautical engraving on the back of the folded letter only. */
.paper-upper:after{content:'';background-image:url('./marine-engraving.svg'),url('./linen.svg'),linear-gradient(110deg,#e8d9b9,#fbf1dc 42%,#eadcbe);background-size:100% 100%,130px,100% 100%;background-repeat:no-repeat,repeat,no-repeat;background-blend-mode:multiply,multiply,normal}
/* A + B nautical print, kept on the envelope rather than the reading face. */
.envelope:after{content:'';position:absolute;inset:0;z-index:7;pointer-events:none;background:url('./envelope-navigation.svg') center/100% 100% no-repeat;opacity:.85;transition:opacity 1s}.phase-read .envelope:after{opacity:.4}
/* One continuous extraction: paper stays in place as the pocket yields downward. */
.envelope{transition:transform 1.2s cubic-bezier(.22,.61,.36,1),top 1.5s cubic-bezier(.22,.61,.36,1)}
.phase-extract .envelope{top:315px}.phase-extract .invitation{top:-245px;transform:translate(-50%,0);animation:none;transition:top 1.5s cubic-bezier(.22,.61,.36,1),transform 1.5s cubic-bezier(.22,.61,.36,1);filter:drop-shadow(0 10px 9px #0006)}
.phase-read .invitation{transition:top 1.5s cubic-bezier(.22,.61,.36,1),transform 1.5s cubic-bezier(.22,.61,.36,1)}
.paper-upper:after{transition:opacity .8s .15s}.paper-lower{transition:transform 1.3s cubic-bezier(.22,.61,.36,1)}
@media(max-width:400px){.phase-extract .envelope{top:310px}}
/* Do not dissolve the printed reverse through the words as the fold turns. */
.paper-upper:after{transition:opacity .18s ease .06s}
.phase-peek .flap{transition-delay:.12s}.phase-peek .invitation{transition-delay:.55s}
.phase-extract .seal,.phase-read .seal{transition:transform 1.5s cubic-bezier(.22,.61,.36,1),opacity .6s}
/* The pocket contains both folded paper faces behind its lower seam. */
.phase-closed .envelope,.phase-peek .envelope{clip-path:polygon(-100% -300%,200% -300%,200% 100%,-100% 100%)}
.envelope-base{position:absolute;left:0;right:0;bottom:-1px;height:8px;z-index:8;pointer-events:none;background:linear-gradient(180deg,#314961,#1c3249 42%,#0e2134 70%,#647483 80%,#263c52);border-radius:0 0 2px 2px}
/* Clearance belongs to the lifted flap, not to the final reading pose. */
.theatre{transition:height 1.5s cubic-bezier(.22,.61,.36,1),margin-top 1.5s cubic-bezier(.22,.61,.36,1)}
.phase-extract .theatre,.phase-read .theatre{margin-top:-28px;height:590px}

/* Approved touch, reader and short exit improvements. */
.phase-peek .peek-touch{left:6%;width:88%;padding:0;touch-action:manipulation}
.ocean-scene{transition:opacity .26s ease}
.ocean-scene.is-leaving{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.ocean-scene{transition:none}}

/* Suppress native blue tap flash on envelope controls; keyboard focus remains. */
.seal,.peek-touch{-webkit-tap-highlight-color:transparent}

.accept{-webkit-tap-highlight-color:transparent}