/* ─── ENVELOPE WRAPPER ───────────────────────────── */
.envelope-scene {
  perspective: 1200px;
  animation:
    pageLoad 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both,
    float     7s ease-in-out 1.4s infinite;
}

/* ─── ENVELOPE ──────────────────────────────────── */
.envelope {
  position: relative;
  width: 640px;
  height: 454px;
  perspective: 1000px;    /* 3D context for .flap-top (direct child) */
  border-radius: 3px;
  box-shadow:
    0 6px 12px  color-mix(in srgb, var(--black) 25%, transparent),
    0 22px 50px color-mix(in srgb, var(--black) 50%, transparent),
    0 60px 120px color-mix(in srgb, var(--black) 35%, transparent);
}

.envelope {
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
              box-shadow 0.35s ease;
}

.envelope:not(.opening):hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 10px 20px  color-mix(in srgb, var(--black) 30%, transparent),
    0 30px 65px  color-mix(in srgb, var(--black) 58%, transparent),
    0 72px 140px color-mix(in srgb, var(--black) 42%, transparent);
}

/* ─── OPENING STATE ──────────────────────────────── */
.envelope.opening .flap-top {
  animation: flapOpen 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.envelope.opening .wax-seal {
  animation: sealBreak 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both;
}

.envelope.opening .letter {
  animation: letterEmerge 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s forwards;
}

.envelope.opening .stamp-area {
  animation: stampRipAway 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

.envelope.opening .return-address {
  animation: none;
  opacity: 0;
  transition: opacity 0.25s ease 0.1s;
}

/* ─── ENVELOPE INTERIOR ─────────────────────────── */
.envelope-interior {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-700) 65%, var(--navy-900) 100%);
  border-radius: 2px;
  z-index: 0;
}

/* ─── PAPER BASE ────────────────────────────────── */
.envelope-body {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  z-index: 1;
  background:
    linear-gradient(158deg,
      var(--cream-200)  0%,
      var(--cream-300) 55%,
      var(--cream-400) 100%
    );
  overflow: hidden;
  clip-path: polygon(0% 0%, 50% 50%, 100% 0%, 100% 100%, 0% 100%);
}

/* Paper grain texture */
.envelope-body::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: multiply;
}

/* Inner decorative lining (diamond pattern — visible at fold edges) */
.envelope-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient( 45deg, transparent, transparent 10px, color-mix(in srgb, var(--navy-700) 4.5%, transparent) 10px, color-mix(in srgb, var(--navy-700) 4.5%, transparent) 11px),
    repeating-linear-gradient(-45deg, transparent, transparent 10px, color-mix(in srgb, var(--navy-700) 4.5%, transparent) 10px, color-mix(in srgb, var(--navy-700) 4.5%, transparent) 11px);
}

/* ─── ENVELOPE FLAPS ────────────────────────────── */

/* Bottom flap */
.flap-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 230px;
  background: linear-gradient(175deg, var(--cream-400) 0%, var(--cream-500) 100%);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  filter: brightness(0.91);
  z-index: 3;
}

/* Left flap */
.flap-left {
  position: absolute;
  top: 0; left: 0;
  width: 50%; height: 100%;
  background: linear-gradient(95deg, var(--cream-300) 0%, var(--cream-200) 100%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
  filter: brightness(0.95);
  z-index: 3;
}

/* Right flap */
.flap-right {
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  background: linear-gradient(265deg, var(--cream-300) 0%, var(--cream-200) 100%);
  clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
  filter: brightness(0.89);
  z-index: 3;
}

/* Top flap (sealing flap — the one with the wax seal) */
.flap-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 270px;
  transform-origin: top center;   /* hinge at top edge for 3D rotation */
  background: linear-gradient(172deg,
    var(--cream-100)  0%,
    var(--cream-200) 50%,
    var(--cream-300) 100%
  );
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  z-index: 3;
}

/* Fold crease shadow on top flap bottom edge */
.flap-top::after {
  content: '';
  position: absolute;
  bottom: 0; left: 5%; right: 5%;
  height: 20px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--amber-800) 8%, transparent));
}

/* ─── ENVELOPE OUTER BORDER ─────────────────────── */
.envelope-border {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--amber-600) 22%, transparent);
  z-index: 15;
  pointer-events: none;
}

/* Inner shadow for depth */
.envelope-inner-shadow {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--amber-800) 6%, transparent);
  z-index: 15;
  pointer-events: none;
}

/* ─── RETURN ADDRESS ─────────────────────────────── */
.return-address {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
  animation: stampFadeIn 0.8s ease 1.2s both;
}

.return-label {
  font-family: 'Playfair Display', serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--amber-900) 32%, transparent);
  margin-bottom: 3px;
}

.return-name {
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  color: color-mix(in srgb, var(--amber-900) 45%, transparent);
  letter-spacing: 0.03em;
}

/* ─── POSTAGE STAMP ─────────────────────────────── */
.stamp-area {
  position: absolute;
  top: 28px;
  right: 32px;
  z-index: 10;
  animation: stampFadeIn 0.8s ease 1.0s both;
}

.stamp {
  position: relative;
  width: 76px;
  height: 74px;
  background: linear-gradient(148deg, var(--cream-100), var(--cream-300));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
}

/* Perforated stamp border via repeating radial gradients */
.stamp::before {
  content: '';
  position: absolute;
  inset: -5px;
  background-color: transparent;
  background-image:
    /* top edge holes */
    radial-gradient(circle at 5px  0px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 15px 0px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 25px 0px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 35px 0px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 45px 0px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 55px 0px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 65px 0px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 75px 0px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 85px 0px, var(--cream-200) 3.5px, transparent 3.5px),
    /* bottom edge holes */
    radial-gradient(circle at 5px  84px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 15px 84px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 25px 84px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 35px 84px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 45px 84px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 55px 84px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 65px 84px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 75px 84px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 85px 84px, var(--cream-200) 3.5px, transparent 3.5px),
    /* left edge holes */
    radial-gradient(circle at 0px 5px,  var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 0px 16px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 0px 27px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 0px 38px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 0px 49px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 0px 60px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 0px 71px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 0px 82px, var(--cream-200) 3.5px, transparent 3.5px),
    /* right edge holes */
    radial-gradient(circle at 86px 5px,  var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 86px 16px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 86px 27px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 86px 38px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 86px 49px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 86px 60px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 86px 71px, var(--cream-200) 3.5px, transparent 3.5px),
    radial-gradient(circle at 86px 82px, var(--cream-200) 3.5px, transparent 3.5px);
}

.stamp-inner-frame {
  width: 64px;
  height: 60px;
  border: 1px solid color-mix(in srgb, var(--amber-600) 50%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cream-100) 80%, transparent), color-mix(in srgb, var(--cream-300) 60%, transparent));
}

.stamp-text {
  font-family: 'Playfair Display', serif;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-700);
  text-align: center;
  line-height: 1.5;
}

.stamp-year {
  font-family: 'Playfair Display', serif;
  font-size: 9px;
  font-weight: 300;
  color: var(--amber-800);
  letter-spacing: 0.06em;
}

/* ─── ADDRESS AREA ──────────────────────────────── */
.address-block {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5;
  white-space: nowrap;
  animation: stampFadeIn 1s ease 1.1s both;
}

.address-name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 20px;
  color: color-mix(in srgb, var(--amber-900) 52%, transparent);
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 5px;
}

.address-detail {
  font-family: 'Playfair Display', serif;
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--amber-900) 32%, transparent);
}

/* ─── DIVIDER ORNAMENT ──────────────────────────── */
.ornament {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  z-index: 5;
  opacity: 0.45;
}

.ornament-line {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber-600));
}

.ornament-line:last-child {
  transform: scaleX(-1);
}

.ornament-diamond {
  width: 5px;
  height: 5px;
  background: var(--amber-600);
  transform: rotate(45deg);
}

/* ─── WAX SEAL ──────────────────────────────────── */
.wax-seal {
  position: absolute;
  top: 227px; /* sits exactly on the fold line */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  animation: sealDrop 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) 0.5s both;
  filter:
    drop-shadow(0 1px  3px  color-mix(in srgb, var(--red-950) 30%, transparent))
    drop-shadow(0 5px  12px color-mix(in srgb, var(--red-950) 45%, transparent))
    drop-shadow(0 12px 30px color-mix(in srgb, var(--red-950) 38%, transparent))
    drop-shadow(0 22px 52px color-mix(in srgb, var(--red-950) 22%, transparent));
}

.wax-body {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 46% 54% 42% 58% / 54% 44% 56% 46%;
  clip-path: path("M 52,6 C 62,4 74,8 80,16 C 86,24 91,30 92,40 C 93,50 90,60 86,68 C 82,76 76,84 68,88 C 60,92 50,95 40,93 C 30,91 20,86 14,78 C 8,70 4,60 4,50 C 4,40 8,30 14,22 C 20,14 28,8 36,6 C 42,4 48,6 52,6 Z");
  background:
    radial-gradient(ellipse 42% 32% at 28% 20%, color-mix(in srgb, var(--red-400) 52%, transparent) 0%, transparent 100%),
    radial-gradient(circle at 52% 54%, var(--red-900) 0%, transparent 38%),
    radial-gradient(ellipse 95% 90% at 50% 55%, transparent 60%, color-mix(in srgb, var(--amber-800) 18%, transparent) 100%),
    radial-gradient(ellipse 90% 84% at 50% 48%,
      var(--red-700) 12%,
      var(--red-800) 48%,
      var(--red-900) 78%,
      var(--red-950) 100%
    );
  box-shadow:
    inset 0 3px  7px color-mix(in srgb, var(--red-100) 22%, transparent),
    inset 0 -4px 8px color-mix(in srgb, var(--black) 55%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Specular gloss — pooled wax catching light */
.wax-body::before {
  content: '';
  position: absolute;
  top:  10%;
  left: 16%;
  width:  40%;
  height: 32%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--red-50) 48%, transparent) 0%, color-mix(in srgb, var(--red-200) 18%, transparent) 55%, transparent 100%);
  border-radius: 50%;
  transform: rotate(-22deg);
}

/* Embossed ring — raised rim inside seal */
.wax-body::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--red-200) 24%, transparent);
  box-shadow:
    inset 0 0 10px color-mix(in srgb, var(--black) 30%, transparent),
    0 0 4px color-mix(in srgb, var(--red-600) 20%, transparent);
}

.seal-logo {
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 2;
  /* Embossed impression: deep shadow below + catch-light above */
  filter:
    drop-shadow(0 2px 2px color-mix(in srgb, var(--black) 80%, transparent))
    drop-shadow(0 -1px 1px color-mix(in srgb, var(--red-300) 50%, transparent));
  opacity: 0.82;
}