html.envelope-pending {overflow:hidden;}
html.envelope-pending .invitation,html.envelope-pending .site-nav {visibility:hidden;}
.envelope-intro {position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:auto;background:radial-gradient(ellipse at 50% 40%,#f8eee0,#e5d6c1);padding:28px 20px;}
.envelope-scene {width:min(88vw,620px);text-align:center;color:#765231;perspective:1200px;}
.envelope-kicker {font:12px/1.6 Georgia,serif;letter-spacing:.25em;text-transform:uppercase;margin-bottom:32px;}
.envelope {position:relative;width:100%;aspect-ratio:1.45;border-radius:5px;background:#651d2d;box-shadow:0 25px 55px #3a102b30,0 2px 5px #41101b40;isolation:isolate;}
.envelope::before,.envelope-flap,.envelope-folds {background-color:#792d3f;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72 .38' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.28' filter='url(%23n)'/%3E%3C/svg%3E"),repeating-linear-gradient(32deg,#f5d6c719 0 .65px,transparent .8px 2.3px),repeating-linear-gradient(122deg,#270c181c 0 .7px,transparent .9px 2.6px),linear-gradient(125deg,#943c50,#652335);background-blend-mode:soft-light,normal,multiply,normal;}
.envelope::before {content:'';position:absolute;inset:0;border-radius:5px;}
.envelope-letter {position:absolute;inset:12% 8%;background:#fffaf1;border:1px solid #d2b67e;display:grid;place-items:center;color:#957444;font:italic clamp(19px,4vw,32px) Georgia,serif;transition:transform .8s ease .3s;}
.envelope-folds {position:absolute;inset:0;clip-path:polygon(0 0,50% 53%,100% 0,100% 100%,0 100%);z-index:2;}
.envelope-folds::after {content:'';position:absolute;inset:0;background:linear-gradient(34deg,transparent 49.8%,#e7b98c30 50%,transparent 50.3%),linear-gradient(-34deg,transparent 49.8%,#23061055 50%,transparent 50.3%);}
.envelope-flap {position:absolute;inset:0 0 43%;clip-path:polygon(0 0,100% 0,98% 7%,54% 96%,50% 100%,46% 96%,2% 7%);transform-origin:top;transition:transform .8s ease;z-index:4;box-shadow:inset 0 2px 1px #e9aeab55;background-color:#863447;}
.envelope-folds::before {content:'';position:absolute;inset:0;background:linear-gradient(151deg,transparent 48%,#27091250 49%,transparent 51%);opacity:.6;}
.wax-seal {position:absolute;z-index:5;left:50%;top:49%;transform:translate(-50%,-50%);width:clamp(78px,19vw,116px);aspect-ratio:1;border-radius:48% 52% 47% 51%;border:2px solid #c79c56;background:radial-gradient(circle at 32% 24%,#edd29b,#b98b43 54%,#906528 85%);box-shadow:inset 0 0 0 5px #d8ae6355,inset 2px 3px 6px #fff0c988,inset -3px -4px 5px #68440d66,0 5px 8px #270e1780;cursor:pointer;padding:14%;padding:12px;transition:opacity .25s,transform .4s;}
.wax-seal {border-radius:44% 52% 43% 48% / 48% 43% 54% 45%;border-color:#ac8248;background:radial-gradient(ellipse at 32% 24%,#d8bb88,#b18b54 54%,#8e6536 85%);box-shadow:inset 0 0 0 4px #d8b88866,inset 2px 3px 4px #fae1af80,inset -3px -4px 5px #67421b88,0 4px 7px #270e1780;}
.wax-seal img {width:100%;height:100%;object-fit:contain;filter:sepia(1) saturate(.7) brightness(.60);mix-blend-mode:multiply;}
.wax-seal:focus-visible {outline:3px solid #fff6d4;outline-offset:6px;}
.envelope-prompt {margin:28px 0 8px;font:22px/1.4 Georgia,serif;}
.envelope-hint,.offline-ready {font:13px/1.6 system-ui,sans-serif;letter-spacing:.02em;}
.offline-ready {display:none;}
.envelope-intro.opening .envelope-flap {transform:rotateX(180deg);}
.envelope-intro.opening .wax-seal {opacity:0;transform:translate(-50%,-50%) scale(1.1);pointer-events:none;}
.envelope-intro.opening .envelope-letter {transform:translateY(-20%);}
.envelope-intro.leaving {opacity:0;transition:opacity .35s;pointer-events:none;}
.offline-banner {display:none;text-align:center;padding:10px 16px;color:#765231;font:13px/1.5 system-ui,sans-serif;background:#fff8ed;}
html.offline-mode .offline-banner {display:block;}
html.offline-mode .envelope-intro,html.offline-mode .page:not(.overview),html.offline-mode .site-nav a[data-language] {display:none!important;}
html.offline-mode .invitation,html.offline-mode .site-nav {visibility:visible;}
html.offline-mode {overflow:auto;}
@media(prefers-reduced-motion:reduce){.envelope-flap,.envelope-letter,.wax-seal,.envelope-intro.leaving{transition:none!important;}}

/* Hinged paper construction: two flap faces, a pocket and a separate insert. */
.envelope {perspective:1100px;}
.envelope-flap {inset:0 0 43%;clip-path:none;background:none;box-shadow:none;filter:none;
 transform-style:preserve-3d;transform:rotateX(0deg);transition:transform 1.15s cubic-bezier(.35,.05,.2,1) .25s;}
.envelope-flap::before,.envelope-flap::after {content:'';position:absolute;inset:0;
 clip-path:polygon(0 0,100% 0,99% 7%,54% 96%,50% 100%,46% 96%,1% 7%);
 backface-visibility:hidden;border-top:1px solid #d4959555;}
.envelope-flap::before {background-color:#8b364a;background-image:repeating-linear-gradient(32deg,#f5d6c71c 0 .65px,transparent .8px 2.3px),repeating-linear-gradient(122deg,#270c181c 0 .7px,transparent .9px 2.6px),linear-gradient(150deg,#963e51,#72263a);filter:drop-shadow(0 5px 3px #25071388);}
.envelope-flap::after {transform:rotateX(180deg);clip-path:polygon(0 100%,100% 100%,99% 93%,54% 4%,50% 0,46% 4%,1% 93%);background:repeating-linear-gradient(35deg,#cfb67f20 0 1px,transparent 1px 3px),linear-gradient(#cdb68a,#efdfba);}
.envelope-folds::before {background:linear-gradient(180deg,#290e2033,transparent 15%);opacity:1;}
.envelope-folds::after {background:linear-gradient(34deg,transparent 49.8%,#e7b98c24 50%,transparent 50.3%),linear-gradient(-34deg,transparent 49.8%,#23061033 50%,transparent 50.3%);}
.envelope-letter {inset:7% 7% 4%;border-radius:2px;z-index:1;box-shadow:0 0 7px #2d091d30;
 background:repeating-linear-gradient(80deg,#c6b88a06 0 1px,transparent 1px 3px),#fffaf1;
 transition:transform 1.1s cubic-bezier(.22,.61,.36,1) 1.15s,box-shadow 1s 1.15s;}
.envelope-letter::before {content:'';position:absolute;inset:8%;border:1px solid #b99a6166;}
.envelope-intro.opening .envelope-flap {transform:rotateX(-175deg);}
.envelope-intro.opening .envelope-letter {transform:translateY(-48%);box-shadow:0 10px 22px #2d091d25;}
.envelope-intro.opening .wax-seal {transform:translate(-46%,-40%) rotate(9deg) scale(1.05);}
.envelope-intro.opening .envelope-hint,.envelope-intro.opening .envelope-prompt {opacity:0;transition:opacity .3s;}
.envelope-intro.leaving {transition:opacity .65s ease;}
@media(prefers-reduced-motion:reduce){.envelope-flap,.envelope-letter{transition:none!important;}}

/* Matte cotton-canvas weave; the flap and pocket use the same material. */
.envelope::before,.envelope-folds,.envelope-flap::before {
 background-color:#743141;
 background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.4' filter='url(%23n)'/%3E%3C/svg%3E"),
  repeating-linear-gradient(0deg,#edc3b22e 0 .85px,#3b182119 1px 1.6px,transparent 1.7px 3.5px),
  repeating-linear-gradient(90deg,#e2baaa25 0 1px,#34111d26 1.2px 1.8px,transparent 2px 3.8px),
  linear-gradient(135deg,#8d4653,#702d3d);
 background-blend-mode:soft-light,soft-light,multiply,normal;
}
.envelope-flap::before {filter:drop-shadow(0 3px 2px #25071366);}
/* Pooled wax: asymmetric overflow rim around a recessed stamp impression. */
.wax-seal {width:clamp(90px,22vw,124px);border:0;padding:14px;isolation:isolate;
 border-radius:43% 51% 40% 49% / 48% 39% 53% 43%;
 background:conic-gradient(from 25deg,#af772c,#f2ce79 13%,#c8953e 27%,#916024 41%,#e4b55a 58%,#f6d78f 72%,#b77e2e 87%,#af772c);
 box-shadow:inset 2px 3px 3px #ffedb777,inset -2px -3px 3px #72501899,0 5px 7px #250b1b88;
}
.wax-seal::before {content:'';position:absolute;z-index:-1;inset:-5% -7% -6% -5%;
 border-radius:39% 53% 42% 54% / 46% 42% 55% 47%;transform:rotate(-13deg);
 background:radial-gradient(ellipse at 20% 15%,#f4d38b,transparent 35%),conic-gradient(#ce9a45,#efd18c,#ad782c,#d6a64f,#f1ca74,#a57026,#ce9a45);
 box-shadow:inset 1px 2px 2px #fff1c67a,inset -2px -3px 2px #76501c88,1px 3px 3px #2e101744;
}
.wax-seal::after {content:'';position:absolute;inset:10%;border-radius:48% 46% 49% 47%;z-index:0;
 background:radial-gradient(ellipse at 40% 30%,#e3bd73,#c5994e 72%,#aa7934);
 box-shadow:inset 1px 2px 3px #77521f99,0 1px 1px #ffe4a0aa;
}
.wax-seal img {position:relative;z-index:1;filter:sepia(1) saturate(.8) brightness(.5) drop-shadow(0 1px 0 #ffe7ad);opacity:.9;}

/* Four independent panels hinge away from the central invitation. */
.envelope-panel {position:absolute;inset:0;z-index:3;backface-visibility:visible;
 background-color:#743141;background-image:repeating-linear-gradient(0deg,#edc3b22e 0 .85px,#3b182119 1px 1.6px,transparent 1.7px 3.5px),repeating-linear-gradient(90deg,#e2baaa25 0 1px,#34111d26 1.2px 1.8px,transparent 2px 3.8px),linear-gradient(135deg,#8d4653,#702d3d);
 transition:transform 1.2s cubic-bezier(.35,.05,.2,1);}
.envelope-left {clip-path:polygon(0 0,54% 50%,0 100%);transform-origin:left center;transition-delay:.6s;}
.envelope-right {clip-path:polygon(100% 0,46% 50%,100% 100%);transform-origin:right center;transition-delay:.75s;}
.envelope-bottom {clip-path:polygon(0 100%,50% 43%,100% 100%);transform-origin:center bottom;transition-delay:1s;}
.envelope-intro.opening .envelope-left {transform:rotateY(-165deg);}
.envelope-intro.opening .envelope-right {transform:rotateY(165deg);}
.envelope-intro.opening .envelope-bottom {transform:rotateX(165deg);}
.envelope-intro.opening .envelope-letter {transform:translateY(0) scale(1.04);transition-delay:1.65s;}
.envelope-intro.opening .envelope {box-shadow:0 8px 24px #3a102b18;transition:box-shadow 1s;}
@media(prefers-reduced-motion:reduce){.envelope-panel{transition:none!important;}}
.envelope-letter {overflow:hidden;}
.insert-mountains {position:absolute;left:5%;bottom:10%;width:90%;height:65%;object-fit:contain;opacity:.23;mix-blend-mode:multiply;pointer-events:none;}
.insert-names {position:relative;z-index:1;font-size:clamp(18px,4.3vw,30px);align-self:start;margin-top:23%;}
.cover-revealing .cover-animation-stage {background:#fefefe;}
.cover-revealing .cover-animation-stage > img:not(.cover-drawing-layer),.cover-revealing > .text-update {visibility:hidden!important;}
