.envelope {
  position: relative;
  display: block;
  width: min(88vw, 460px);
  aspect-ratio: 1.38;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.envelope > span { position: absolute; display: block; }

.env-shadow {
  inset: 0;
  border-radius: 6px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.08), 0 12px 24px -8px rgb(0 0 0 / 0.3);
  z-index: 0;
}

.env-back {
  left: 0;
  right: 0;
  top: -56%;
  bottom: 0;
  background:
    linear-gradient(transparent, rgb(0 0 0 / 0.12) 35.9%, rgb(0 0 0 / 0.28) 35.9%, transparent 64%),
    var(--liner-tile, none),
    var(--liner);
  clip-path: polygon(2px 35.9%, 2px 35.9%, 50% 35.9%, calc(100% - 2px) 35.9%, calc(100% - 2px) 35.9%, calc(100% - 2px) calc(100% - 2px), 2px calc(100% - 2px));
  z-index: 1;
}

.sealed .env-back {
  clip-path: polygon(2px calc(35.9% + 3px), 2px calc(35.9% + 3px), 50% calc(35.9% + 3px), calc(100% - 2px) calc(35.9% + 3px), calc(100% - 2px) calc(35.9% + 3px), calc(100% - 2px) calc(100% - 2px), 2px calc(100% - 2px));
}

.flap-open .env-back {
  clip-path: none;
  -webkit-mask: var(--env-back-open-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--env-back-open-mask) 0 0 / 100% 100% no-repeat;
}

.env-card {
  left: 50%;
  top: 55%;
  width: 62%;
  aspect-ratio: 5 / 7;
  transform: translate(-50%, -50%) rotate(-90deg);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
  z-index: 2;
}

.env-card svg { display: block; width: 100%; height: 100%; }

.env-pocket {
  inset: 0;
  border-radius: 6px;
  background: var(--env-tex) center / cover, var(--env);
  background-blend-mode: multiply;
  -webkit-mask: var(--env-pocket-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--env-pocket-mask) 0 0 / 100% 100% no-repeat;
  z-index: 3;
}

.env-pocket svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--fold, 1); }

.fold-cast { fill: none; stroke: rgb(0 0 0 / 0.18); stroke-width: 0.9; }

.fold-line { fill: none; stroke: rgb(255 255 255 / 0.16); stroke-width: 1px; vector-effect: non-scaling-stroke; }

.env-to {
  position: absolute;
  inset: auto 0 13%;
  text-align: center;
  padding: 0 9%;
  font-family: 'Homemade Apple', cursive;
  font-size: calc(clamp(18px, 5.2vw, 28px) * var(--to-scale, 1));
  line-height: 1.6;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: var(--env-ink);
}

.env-flap-shadow {
  inset: 0 0 auto;
  height: 64%;
  background: rgb(30 20 10 / 0.34);
  -webkit-mask: var(--env-flap-shadow-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--env-flap-shadow-mask) 0 0 / 100% 100% no-repeat;
  z-index: 4;
}

.env-flap {
  inset: 0 0 auto;
  height: 56%;
  transform-origin: 50% 0;
  transform: perspective(1100px) rotateX(0deg);
  z-index: 5;
}

.flap-out, .flap-in {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--env-flap-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--env-flap-mask) 0 0 / 100% 100% no-repeat;
}

.flap-out {
  background: linear-gradient(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0) 55%, rgb(0 0 0 / 0.05)), var(--env-tex) top / 100% auto, var(--env);
  background-blend-mode: normal, multiply;
  border-radius: 6px 6px 0 0;
}

.flap-in {
  -webkit-mask: var(--env-flap-up-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--env-flap-up-mask) 0 0 / 100% 100% no-repeat;
  background:
    linear-gradient(transparent, rgb(0 0 0 / 0.12)),
    var(--liner-tile, none),
    var(--liner);
}

.flap-in { transform: scaleY(-1); opacity: 0; }

.seal {
  left: 50%;
  top: 53%;
  width: 16%;
  aspect-ratio: 1;
  display: block !important;
  filter: drop-shadow(0 1.5px 1.5px rgb(0 0 0 / 0.28)) drop-shadow(0 3px 6px rgb(0 0 0 / 0.16));
  transform: translate(-50%, -50%);
  z-index: 6;
}

.seal svg { display: block; width: 100%; height: 100%; overflow: visible; }