.envelope {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 3 / 2;
  margin: 230px auto 0;
  color: var(--ink);
  font: 13px / 1.45 var(--sys);
}
.letter {
  position: absolute;
  inset: 8% 6%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 40px rgb(0 0 0 / 0.25);
}
.letter h3 {
  font-size: 16px;
}
.letter .chat-heading {
  flex-wrap: wrap;
}
.address {
  display: flex;
  gap: 8px;
  align-items: center;
  width: fit-content;
  padding: 6px;
  border-radius: 12px;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.receipt {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgb(0 0 0 / 0.035);
}
.receipt small {
  font-size: 10px;
  color: rgb(0 0 0 / 0.4);
}
dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  margin: 6px 0;
}
.envelope-back,
.envelope-front,
.flap {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: #ece2c6;
}
.envelope-back {
  box-shadow: 0 40px 80px rgb(0 0 0 / 0.4);
}
.envelope-front {
  z-index: 3;
  background: linear-gradient(160deg, #f6efdc, #e9dcb9);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}
.flap {
  height: 56%;
  z-index: 5;
  transform-origin: 50% 0;
  background: linear-gradient(#efe4c4, #e3d4ab);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.seal {
  position: absolute;
  left: calc(50% - 34px);
  top: calc(56% - 34px);
  z-index: 6;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #f3d2c8;
  background: radial-gradient(circle at 34% 30%, #cf5a3f, #a93421 55%, #7f2216);
  box-shadow:
    0 4px 10px rgb(80 15 5 / 0.45),
    inset 0 0 0 3px rgb(255 255 255 / 0.12);
  touch-action: none;
}
.seal .icon {
  width: 36px;
  height: 36px;
}
.opened .flap {
  transform: rotateX(180deg);
  z-index: 1;
}
.opened .letter {
  top: -96%;
  z-index: 4;
}
.opened .seal {
  opacity: 0;
  pointer-events: none;
}
.seal-hint {
  grid-column: 1 / -1;
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .flap {
    transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .letter {
    transition: top 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .seal {
    transition:
      opacity 0.6s,
      transform 0.7s;
  }
}