/*
 * Firsts Autumn Wedding — Maison MG envelope 2.7.0.
 * Physical arch flap, opaque split reveal and one baked family signet.
 * Автор Бородин Павел - Первые - firsts.ru
 */

.fwg-envelope-gate{
  position:fixed;
  z-index:1000000;
  inset:0;
  overflow:hidden;
  background:transparent;
  isolation:isolate;
  touch-action:none;
  contain:strict;
}
.fwg-envelope-gate.is-opening{pointer-events:auto;touch-action:none}
.fwg-envelope-gate.is-opened{pointer-events:none;touch-action:pan-y}
.fwg-envelope-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:transparent;
  isolation:isolate;
}
.firsts-autumn-wedding .fwg-envelope{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  color:#4f382e;
  cursor:pointer;
  opacity:1;
  touch-action:manipulation;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.firsts-autumn-wedding .fwg-envelope:disabled{opacity:1}
.firsts-autumn-wedding .fwg-envelope:focus-visible{outline:2px solid #b98b45;outline-offset:-12px}

.fwg-envelope__upper,
.fwg-envelope__lower{
  position:absolute;
  left:0;
  width:100%;
  height:50.2%;
  transform:translate3d(0,0,0);
}
.fwg-envelope__upper{z-index:2;top:0;overflow:visible;perspective:220vh;perspective-origin:50% 95%;transform-style:preserve-3d}
.fwg-envelope__lower{z-index:1;bottom:0;overflow:hidden}
.fwg-envelope__skin{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  background-color:#f6f0e8;
  background-image:
    linear-gradient(116deg,rgba(255,255,255,.18),rgba(113,78,55,.025)),
    url('../images/envelope-paper-grain-2.7.webp?v=2.7.0');
  background-size:auto,420px 420px;
  box-shadow:inset 0 0 92px rgba(92,58,39,.055);
}
.fwg-envelope__upper .fwg-envelope__skin::before,
.fwg-envelope__upper .fwg-envelope__skin::after,
.fwg-envelope__lower .fwg-envelope__skin::before,
.fwg-envelope__lower .fwg-envelope__skin::after{
  content:"";
  position:absolute;
  display:block;
  pointer-events:none;
}
.fwg-envelope__upper .fwg-envelope__skin::before{inset:18px 18px -1px;border:1px solid rgba(177,133,65,.48);border-bottom:0}
.fwg-envelope__upper .fwg-envelope__skin::after{inset:26px 26px -1px;border:1px solid rgba(213,179,110,.28);border-bottom:0}
.fwg-envelope__lower .fwg-envelope__skin::before{inset:-1px 18px 18px;border:1px solid rgba(177,133,65,.48);border-top:0}
.fwg-envelope__lower .fwg-envelope__skin::after{inset:-1px 26px 26px;border:1px solid rgba(213,179,110,.28);border-top:0}

.fwg-envelope__flap{
  position:absolute;
  z-index:4;
  top:0;
  left:0;
  width:100%;
  height:199.2%;
  display:block;
  transform:rotateX(0deg) translateZ(.1px);
  transform-origin:50% 0;
  transform-style:preserve-3d;
}
.fwg-envelope__flap-face{
  position:absolute;
  inset:0;
  display:block;
  overflow:visible;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.fwg-envelope__flap-face--front{z-index:2;transform:translateZ(.2px)}
.fwg-envelope__flap-face--back{z-index:1;transform:rotateX(180deg) translateZ(.1px)}
.fwg-envelope__flap-picture{position:absolute;inset:0;display:block}
.fwg-envelope__flap-art{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none!important;object-fit:fill;pointer-events:none}
.fwg-envelope__occasion{
  position:absolute;
  z-index:2;
  top:17.5%;
  left:50%;
  width:max-content;
  max-width:84vw;
  color:#765b42;
  font:normal 400 clamp(13px,1.04vw,17px)/1.2 "Firsts Reading",Georgia,serif;
  letter-spacing:.31em;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
  transform:translateX(-50%) translateZ(.5px);
}
.fwg-envelope__occasion::after{
  content:"";
  display:block;
  width:78px;
  height:1px;
  margin:12px auto 0;
  background:linear-gradient(90deg,transparent,#ba8e45 20%,#efd394 50%,#ba8e45 80%,transparent);
}

.fwg-envelope__seal{
  position:absolute;
  z-index:3;
  top:48.4%;
  left:50%;
  display:block;
  width:clamp(176px,19vw,372px);
  aspect-ratio:717/760;
  overflow:visible;
  transform:translate3d(-50%,-50%,1px) scale(1);
  transform-origin:50% 50%;
}
.fwg-envelope__seal img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none!important;
  object-fit:contain;
  filter:drop-shadow(0 14px 13px rgba(56,27,18,.28));
}
.fwg-envelope__seal-glint{
  position:absolute;
  z-index:2;
  inset:10% 9%;
  display:block;
  overflow:hidden;
  border-radius:44%;
  opacity:0;
  background:linear-gradient(104deg,transparent 33%,rgba(255,235,174,.08) 43%,rgba(255,238,178,.82) 49%,rgba(255,255,229,.92) 51%,rgba(255,229,154,.16) 57%,transparent 67%);
  transform:translate3d(-155%,0,0) skewX(-12deg);
}

.fwg-envelope__release-line{
  position:absolute;
  z-index:5;
  top:50%;
  left:50%;
  display:block;
  width:min(76vw,1020px);
  height:2px;
  opacity:0;
  background:linear-gradient(90deg,transparent,#ab7a2e 10%,#ffe7a6 30%,transparent 32%,transparent 68%,#ffe7a6 70%,#ab7a2e 90%,transparent);
  transform:translate3d(-50%,-50%,0) scaleX(0);
  transform-origin:50% 50%;
}
.fwg-envelope__prompt{
  position:absolute;
  z-index:6;
  left:50%;
  top:calc(48.4% + clamp(166px,11.4vw,205px));
  display:block;
  width:max-content;
  max-width:84vw;
  color:#5e493d;
  font:italic 400 clamp(13px,.96vw,16px)/1.2 "Firsts Reading",Georgia,serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.82);
  transform:translate3d(-50%,0,0);
  transition:opacity .18s ease,transform .18s ease;
}
.fwg-envelope__prompt::before{content:"";display:block;width:42px;height:1px;margin:0 auto 10px;background:linear-gradient(90deg,transparent,#bd9148,transparent)}

.fwg-envelope-gate.is-primed .fwg-envelope__upper,
.fwg-envelope-gate.is-primed .fwg-envelope__lower,
.fwg-envelope-gate.is-primed .fwg-envelope__flap,
.fwg-envelope-gate.is-primed .fwg-envelope__seal{will-change:transform}
.fwg-envelope-gate.is-opening .fwg-envelope__prompt{opacity:0;transform:translate3d(-50%,7px,0)}
.fwg-envelope-gate.is-opening .fwg-envelope__seal{animation:fwg270-seal-press .38s cubic-bezier(.22,.64,.25,1) both}
.fwg-envelope-gate.is-opening .fwg-envelope__seal-glint{animation:fwg270-seal-glint .54s .06s cubic-bezier(.26,.62,.28,1) both}
.fwg-envelope-gate.is-opening .fwg-envelope__release-line{animation:fwg270-release-line .78s .22s cubic-bezier(.22,.65,.22,1) both}
.fwg-envelope-gate.is-opening .fwg-envelope__flap{animation:fwg270-flap-open .86s .36s cubic-bezier(.34,.05,.18,1) both}
.fwg-envelope-gate.is-opening .fwg-envelope__upper{animation:fwg270-upper-exit 1.12s .96s cubic-bezier(.62,0,.18,1) both}
.fwg-envelope-gate.is-opening .fwg-envelope__lower{animation:fwg270-lower-exit 1.18s .90s cubic-bezier(.62,0,.18,1) both}

@keyframes fwg270-seal-press{
  0%{transform:translate3d(-50%,-50%,1px) scale(1)}
  42%{transform:translate3d(-50%,calc(-50% + 3px),1px) scale(.965)}
  100%{transform:translate3d(-50%,-50%,1px) scale(1.015)}
}
@keyframes fwg270-seal-glint{
  0%{opacity:0;transform:translate3d(-155%,0,0) skewX(-12deg)}
  14%{opacity:.92}
  78%{opacity:.88}
  100%{opacity:0;transform:translate3d(155%,0,0) skewX(-12deg)}
}
@keyframes fwg270-release-line{
  0%{opacity:0;transform:translate3d(-50%,-50%,0) scaleX(0)}
  22%{opacity:.94}
  64%{opacity:1;transform:translate3d(-50%,-50%,0) scaleX(1)}
  100%{opacity:0;transform:translate3d(-50%,-50%,0) scaleX(1)}
}
@keyframes fwg270-flap-open{
  0%{transform:rotateX(0deg) translateZ(.1px)}
  18%{transform:rotateX(10deg) translateZ(.1px)}
  68%{transform:rotateX(126deg) translateZ(.1px)}
  100%{transform:rotateX(174deg) translateZ(.1px)}
}
@keyframes fwg270-upper-exit{to{transform:translate3d(0,-104%,0)}}
@keyframes fwg270-lower-exit{to{transform:translate3d(0,104%,0)}}

@media(max-width:767px),(max-width:900px) and (orientation:portrait){
  .fwg-envelope__upper .fwg-envelope__skin::before{inset:10px 10px -1px}
  .fwg-envelope__upper .fwg-envelope__skin::after{inset:16px 16px -1px}
  .fwg-envelope__lower .fwg-envelope__skin::before{inset:-1px 10px 10px}
  .fwg-envelope__lower .fwg-envelope__skin::after{inset:-1px 16px 16px}
  .fwg-envelope__occasion{top:15.5%;font-size:10px;letter-spacing:.25em}
  .fwg-envelope__occasion::after{width:54px;margin-top:9px}
  .fwg-envelope__seal{top:46.8%;width:clamp(154px,43vw,176px)}
  .fwg-envelope__prompt{top:calc(46.8% + clamp(150px,42vw,178px));font-size:10px;letter-spacing:.18em}
  .fwg-envelope__release-line{width:86vw;background:linear-gradient(90deg,transparent,#ab7a2e 8%,#ffe7a6 18%,transparent 21%,transparent 79%,#ffe7a6 82%,#ab7a2e 92%,transparent)}
}

@media(max-height:430px) and (orientation:landscape){
  .fwg-envelope__occasion{top:10%}
  .fwg-envelope__seal{top:44%;width:clamp(132px,41vh,176px)}
  .fwg-envelope__prompt{top:calc(44% + clamp(95px,30vh,116px))}
}

@media(prefers-reduced-motion:reduce){
  .fwg-envelope-gate.is-opening{opacity:0;transition:opacity .18s linear}
  .fwg-envelope-gate.is-opening .fwg-envelope__prompt{transition:none}
  .fwg-envelope-gate.is-opening .fwg-envelope__seal,.fwg-envelope-gate.is-opening .fwg-envelope__seal-glint,.fwg-envelope-gate.is-opening .fwg-envelope__release-line,.fwg-envelope-gate.is-opening .fwg-envelope__flap{animation:none!important}
  .fwg-envelope-gate.is-opening .fwg-envelope__upper,.fwg-envelope-gate.is-opening .fwg-envelope__lower{animation:none!important;transform:none!important}
}