/* Shared sender/recipient artwork. The existing 280 × 180 geometry,
   animation transforms, stacking order and card masks stay in the base CSS. */
:root {
  --envelope-lining: #c1b696;
  --envelope-fold: #9c9479;
  --envelope-paper: #e9dfc6;
  --envelope-left: #d6c9aa;
  --envelope-right: #dfd4b9;
  --envelope-ink: #535b45;
  --envelope-rose: #a45e77;
  --envelope-wax-light: #dca0af;
  --envelope-wax: #bf788f;
  --envelope-wax-dark: #9c566f;
  --envelope-grain: url('promise-paper-texture-v40.png');
}

.env-back, .recipient-env-back {
  background: var(--envelope-lining);
  background-image: var(--envelope-grain);
  background-blend-mode: multiply;
  background-size: cover;
  border: 1px solid var(--envelope-fold);
  border-radius: 3px 4px 7px 5px;
  box-shadow: 0 2px 3px #514a3020, 0 9px 17px -7px #514a302b;
}

/* The triangular flap still rotates around the same top-center hinge. */
.env-flap, .recipient-env-flap {
  width: 280px;
  height: 180px;
  border: 0;
  background: var(--envelope-fold);
  clip-path: polygon(0 0, 100% 0, 50% 55%);
}
.env-flap::before, .recipient-env-flap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--envelope-paper) var(--envelope-grain) center / cover;
  background-blend-mode: multiply;
  clip-path: polygon(1px 1px, 279px 1px, 140px 97px);
}

/* Opaque paper folds cover both the PNG and the descending emoji. */
.env-pocket, .recipient-env-pocket {
  width: 280px;
  height: 180px;
  border: 0;
  border-radius: 3px 4px 7px 5px;
  background: linear-gradient(90deg, var(--envelope-left) 50%, var(--envelope-right) 50%), var(--envelope-grain);
  background-size: cover;
  background-blend-mode: multiply;
  clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--envelope-fold);
}
.env-pocket::before, .recipient-env-pocket::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--envelope-fold);
  clip-path: polygon(0 100%, 50% 49%, 100% 100%);
}
.env-pocket::after, .recipient-env-pocket::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--envelope-paper) var(--envelope-grain) center / cover;
  background-blend-mode: multiply;
  clip-path: polygon(2px 179px, 140px 90px, 278px 179px);
}

/* An imperfect wax edge and impressed ring keep the little p legible as a mark. */
.env-seal, .recipient-env-seal {
  border-radius: 46% 51% 44% 49% / 48% 44% 53% 47%;
  color: #fff5ed;
  background: radial-gradient(circle at 35% 25%, var(--envelope-wax-light), var(--envelope-wax) 60%, var(--envelope-wax-dark));
  box-shadow: inset 1px 2px 2px #fff5ed50, inset -1px -2px 2px #74344e25, 0 2px 3px #51402b30;
}
.env-seal::before, .recipient-env-seal::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid #8e4a6359;
  border-radius: 50%;
  box-shadow: 0 1px 0 #ffe0df70, inset 0 1px 0 #ffe0df50;
}
.env-label {
  top: 139px;
  color: var(--envelope-ink);
  font: 17px/1.3 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  text-shadow: none;
}
/* Printed on the pocket, so it disappears with the paper when the card opens. */
.env-pocket, .recipient-env-pocket { isolation: isolate; }
.env-pocket::after, .recipient-env-pocket::after {
  content: '♡';
  display: flex;
  align-items: flex-end;
  padding: 0 0 8px 55px;
  box-sizing: border-box;
  color: var(--envelope-rose);
  font: 22px/1 Georgia, serif;
}
.envelope-share:disabled { opacity: .72; }