/* Second envelope proposal: olive stationery with the original red wax seal. */
#pre_page.envelope-proposal {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:36px; padding:40px 24px; isolation:isolate; overflow:hidden;
  background:radial-gradient(ellipse at center,#faf6ef 0%,#e9e0d1 100%);
}
.envelope-proposal::before,.envelope-proposal::after {
  content:""; position:absolute; width:230px; height:90%; top:5%; z-index:-1;
  background:url('../images/mw-welcome-graph-left.svg') center/contain no-repeat; opacity:.13;
}
.envelope-proposal::before {left:-65px; transform:rotate(-12deg)}
.envelope-proposal::after {right:-65px; transform:rotate(168deg)}
.envelope-heading {text-align:center; transition:opacity .4s,transform .7s}
.envelope-heading .eyebrow {margin:0 0 16px;color:var(--ink)}
.envelope-names {font:400 clamp(44px,5vw,68px)/1.15 var(--serif);color:var(--ink);margin:0 0 16px}
.envelope-names span {font-family:var(--script);color:#a68f6d;margin:0 7px}
.envelope-heading .envelope-date {color:var(--ink);margin:0}
.envelope-stage {width:min(620px,100%,calc((100svh - 430px)*1.6));perspective:1400px;position:relative;transition:transform .7s ease,opacity .5s ease}
.paper-envelope {position:relative;aspect-ratio:1.6;background:#45452f;border-radius:3px;box-shadow:0 26px 45px #403c302b,0 3px 6px #403c3026;transform-style:flat}
.envelope-lining {position:absolute;inset:10px;background:repeating-linear-gradient(45deg,#bba57d 0 1px,#d9c9a9 1px 10px);border:1px solid #decba4}
.envelope-letter {position:absolute;inset:7% 7% auto;min-height:89%;height:auto;padding:30px 24px;text-align:center;background:var(--paper);border:1px solid #cdbca2;outline:1px solid #cdbca266;outline-offset:-9px;box-shadow:0 0 10px #0001;visibility:hidden;transition:transform .85s cubic-bezier(.22,.7,.2,1) 1.1s,visibility 0s 1.1s;z-index:1}
.envelope-letter .eyebrow {font-size:9px!important;margin:8px 0 14px;color:var(--ink)}
.envelope-letter .letter-names {font:42px/1.2 var(--script);color:var(--ink);margin:0 0 18px}
.envelope-letter p:not([class]) {font:19px/1.4 var(--serif);max-width:230px;margin:18px auto;color:var(--ink)}
.envelope-letter>span {display:block;font:italic 17px/1.5 var(--serif);color:var(--ink)}
.letter-rule {height:1px;width:60px;background:var(--sand);margin:auto}
.envelope-letter #rotuloapi h1 {font:20px/1.2 var(--serif);margin:0 0 8px}
.envelope-pocket {position:absolute;inset:0;background:linear-gradient(160deg,#747257,#55563d);clip-path:polygon(0 100%,50% 42%,100% 100%);z-index:3}
.envelope-fold {position:absolute;inset:0;z-index:2}
.envelope-fold-left {background:linear-gradient(135deg,#6a694f,#58583e);clip-path:polygon(0 0,54% 55%,0 100%)}
.envelope-fold-right {background:linear-gradient(225deg,#65664b,#515239);clip-path:polygon(100% 0,46% 55%,100% 100%)}
.envelope-flap {position:absolute;inset:0 0 auto;height:62%;background:linear-gradient(175deg,#78775b,#616146);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;backface-visibility:visible;z-index:4;filter:drop-shadow(0 3px 2px #26271940);transition:transform .85s cubic-bezier(.4,0,.2,1) .18s}
.envelope-proposal .envelope-seal {position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);margin:0;padding:0;width:94px;height:94px;border:0;background:transparent;box-shadow:none;z-index:5;transition:opacity .3s,transform .4s}
.envelope-proposal .envelope-seal .stamp {display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 3px #26271940)}
.envelope-seal:hover .stamp {filter:drop-shadow(0 6px 5px #26271950)}
.envelope-action {text-align:center;transition:opacity .3s}
.envelope-proposal .btn-pre-page,.envelope-proposal .btn-pre-page:hover {width:auto;min-width:210px;margin:0;padding:12px 24px;gap:15px;color:var(--ink)!important;background:transparent;border:1px solid #4f4c3370}
.envelope-action .btn-pre-page svg {width:20px;height:20px;fill:none;margin:0}
.envelope-action>p {font:italic 16px/1.5 var(--serif);color:#756c59;margin:14px 0 0}
#pre_page.envelope-proposal.is-opening {opacity:0;transition:opacity .45s ease 3.75s;pointer-events:none}
.is-opening .envelope-seal {opacity:0;transform:translate(-50%,-50%) scale(1.2)}
.is-opening .envelope-flap {transform:rotateX(180deg)}
.is-opening .envelope-letter {visibility:visible;transform:translateY(-82%);animation:envelope-letter-front .01s linear 1.95s forwards}
@keyframes envelope-letter-front {to{z-index:4}}
.is-opening .envelope-heading {opacity:0;transform:translateY(-35px)}
.is-opening .envelope-action {opacity:0}
.is-opening .envelope-stage {transform:translateY(70px);transition-delay:.35s}
@media(max-width:600px){
  #pre_page.envelope-proposal {gap:40px;padding:30px 24px}
  .envelope-stage {width:min(620px,100%)}
  .envelope-names {font-size:44px}
  .envelope-heading .eyebrow {font-size:9px!important}
  .envelope-letter {padding:15px 12px}
  .envelope-letter .letter-names {font-size:30px;margin-bottom:10px}
  .envelope-letter .eyebrow {margin:0 0 8px;font-size:8px!important}
  .envelope-letter p:not([class]) {font-size:15px;margin:10px auto;max-width:200px}
  .envelope-letter>span {font-size:13px}
  .envelope-proposal .envelope-seal {width:80px;height:80px}
  .envelope-action>p {font-size:14px}
  .is-opening .envelope-stage {transform:translateY(35px)}
}
@media(max-height:600px){
  #pre_page.envelope-proposal {gap:14px;padding:16px 24px}
  .envelope-heading .eyebrow {display:none}
  .envelope-names {font-size:36px;margin-bottom:6px}
  .envelope-stage {width:min(400px,65vh)}
  .envelope-action>p {display:none}
}
@media(prefers-reduced-motion:reduce){
  #pre_page.envelope-proposal.is-opening {transition:none}
  .envelope-proposal * {transition:none!important}
}
/* After turning, the flap sits behind the letter rather than covering it. */
.is-opening .envelope-flap {animation:envelope-flap-behind .01s linear .95s forwards}
@keyframes envelope-flap-behind {to{z-index:0}}
@media(max-width:600px){
  .envelope-letter .letter-names {font-size:28px;margin-bottom:8px}
  .envelope-letter .eyebrow {margin-bottom:6px}
  .envelope-letter p:not([class]) {font-size:14px;line-height:1.3;margin:8px auto}
}

/* Retain proposal 2, using the original textured paper and red wax seal. */
.paper-envelope {box-shadow:0 28px 45px #403c302b,0 10px 15px #403c3026,0 2px 4px #403c3030}
/* The original PNGs include the paper grain, rounded tips and fold shadows. */
.envelope-flap {background:url('../images/mw-env-top-layer.png') center/100% 100% no-repeat;clip-path:none;filter:none}
.envelope-pocket {inset:auto 0 0;height:58%;background:url('../images/mw-env-bottom-layer.png') center/100% 100% no-repeat;clip-path:none;filter:drop-shadow(0 -1px 1px #22241840)}
.envelope-fold-left,.envelope-fold-right {background-image:linear-gradient(160deg,#ffffff08,#24261918),url('../images/mw-env-middle-layer.png');background-size:cover}
.envelope-fold-left {filter:drop-shadow(2px 0 2px #22241855)}
.envelope-fold-right {filter:drop-shadow(-2px 0 2px #22241855)}
@media(min-width:601px) and (min-height:601px){#pre_page.envelope-proposal {padding-block:64px}}

/* Let the paper grow with its contents, keeping the date inside the frame. */
@media(max-height:600px){
  .envelope-letter {padding:14px 12px}
  .envelope-letter .eyebrow {margin:0 0 6px;font-size:8px!important}
  .envelope-letter .letter-names {font-size:26px;margin-bottom:8px}
  .envelope-letter p:not([class]) {font-size:14px;line-height:1.3;margin:8px auto}
  .envelope-letter>span {font-size:12px}
}