/* Envelope */
.envelope-container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  min-height: 400px;
  transition: transform 0.6s ease-out;
}

.envelope-container.sliding-down {
  animation: envelopeSlideDown 0.8s ease-out forwards;
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  animation-fill-mode: forwards;
}

.envelope {
  position: relative;
  width: 100%;
  max-width: 500px;
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
  margin: 0;
}

.envelope-front {
  transform: rotate(-1deg);
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.envelope-front.hidden {
  z-index: 0;
}

.envelope-front.shaking {
  animation: envelopeShake 1s ease-in-out infinite;
}

.envelope-front.flipping {
  animation: envelopeFlip 0.8s ease-in-out forwards;
}

.envelope-back {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(1deg) rotateY(-90deg);
  width: 100%;
  max-width: 500px;
  z-index: 1;
  transition: opacity 0.3s ease 0.4s;
  isolation: isolate;
}

.envelope-back.visible {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  animation: envelopeBackFlip 0.8s ease-in-out forwards;
  animation-delay: 0.4s;
}

.envelope-back.flipping-back {
  animation: envelopeFlipBack 0.8s ease-in-out forwards;
}

.envelope-front.flipping-back {
  animation: envelopeFrontFlipBack 0.8s ease-in-out forwards;
  animation-delay: 0.4s;
  transform: rotate(-1deg) rotateY(90deg);
}

.envelope-front.hidden {
  opacity: 0;
  pointer-events: none;
  transform: rotate(-1deg) rotateY(90deg);
  transition: opacity 0.3s ease, transform 0.8s ease;
}

.envelope:hover {
  transform: rotate(0deg) scale(1.02);
}

.envelope-body {
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  background: linear-gradient(135deg, #e8e0d3 0%, #d4c9b8 50%, #c4b8a5 100%);
  border: 2px solid rgba(139, 120, 93, 0.4);
  border-radius: 2px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 1;
}

.envelope-body .main-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  text-align: center;
  width: 80%;
  margin: 0;
  z-index: 10;
  color: #2c2416;
}

.envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 25%;
  background: linear-gradient(135deg, #e8e0d3 0%, #d4c9b8 50%, #c4b8a5 100%);
  /* background: linear-gradient(135deg, #d4c9b8 0%, #c4b8a5 50%, #b8ab96 100%); */
  /* border: 2px solid rgba(139, 120, 93, 0.88); */
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 10;
  transform-origin: top center;
  transition: transform 0.3s ease;
  cursor: pointer;
  will-change: transform;
}

.envelope-flap-shadow {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 25%;
  background: rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  z-index: 1;
  filter: blur(10px);
  opacity: 0.6;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.envelope-back.visible .envelope-flap:not(.opening):not(.closing) {
  animation: flapTease 2s ease-in-out infinite;
}

.envelope-back.visible
  .envelope-flap:not(.opening):not(.closing)
  ~ .envelope-flap-shadow {
  animation: flapTeaseShadow 2s ease-in-out infinite;
}

.envelope-back .envelope-flap.opening {
  animation: flapOpen 0.6s ease-out forwards;
}

.envelope-back .envelope-flap.closing {
  animation: flapClose 0.6s ease-out forwards;
}

.envelope-back .envelope-flap.opening ~ .envelope-flap-shadow {
  animation: flapOpenShadow 0.6s ease-out forwards;
}

.envelope-back .envelope-flap.closing ~ .envelope-flap-shadow {
  animation: flapCloseShadow 0.6s ease-out forwards;
}

.envelope-front:hover .envelope-flap,
.envelope:not(.envelope-back):hover .envelope-flap {
  transform: rotateX(-15deg);
}

.envelope-back.visible .envelope-flap:not(.opening):not(.closing) {
  /* Prevent hover transform from interfering with visible back flap */
}

.envelope-back.visible:hover .envelope-flap:not(.opening):not(.closing) {
  /* Keep flap visible on hover when back is visible */
  transform: none;
}

.envelope-front:hover .envelope-flap-shadow,
.envelope:not(.envelope-back):hover .envelope-flap-shadow {
  opacity: 0.4;
}

.envelope-back.visible:hover .envelope-flap-shadow {
  /* Keep flap shadow visible on hover when back is visible */
  opacity: 0.5;
}

/* Christmas Stamp */
.envelope-stamp {
  position: absolute;
  top: 8%;
  right: 8%;
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, #dc143c 0%, #c41e3a 100%);
  border: 2px dashed rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: rotate(12deg);
  animation: stamp-wiggle 3s ease-in-out infinite;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Paper texture effect */
  background-image: radial-gradient(
      circle at 20% 30%,
      rgba(255, 255, 255, 0.08) 1px,
      transparent 1px
    ),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, #dc143c 0%, #c41e3a 100%);
  background-size: 12px 12px, 12px 12px, 100% 100%;
}

.envelope-stamp:hover {
  transform: rotate(12deg) scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.envelope-stamp:active {
  transform: rotate(12deg) scale(0.95);
}

@keyframes stamp-wiggle {
  0%,
  100% {
    transform: rotate(12deg);
  }
  50% {
    transform: rotate(8deg);
  }
}

/* Receiver Address (bottom right) */
.envelope-receiver {
  position: absolute;
  bottom: 10%;
  right: 10%;
  text-align: right;
  z-index: 2;
  font-family: "Caveat", cursive;
  color: #2c2416;
}

.envelope-receiver .address-label {
  font-size: 1.2rem;
  opacity: 0.7;
  margin-bottom: 0.3rem;
  font-weight: 400;
}

.envelope-receiver .address-name {
  font-size: 2.5rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(44, 36, 22, 0.5);
  display: inline-block;
  padding-bottom: 0.2rem;
}

/* Sender Address (top left) */
.envelope-sender {
  position: absolute;
  top: 10%;
  left: 10%;
  text-align: left;
  z-index: 2;
  font-family: "Caveat", cursive;
  color: #2c2416;
}

.envelope-sender .address-label {
  font-size: 1.2rem;
  opacity: 0.7;
  margin-bottom: 0.3rem;
  font-weight: 400;
}

.envelope-sender .address-name {
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(44, 36, 22, 0.5);
  display: inline-block;
  padding-bottom: 0.2rem;
}

/* Back of envelope */
.envelope-body-back {
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  background: linear-gradient(135deg, #e8e0d3 0%, #d4c9b8 50%, #c4b8a5 100%);
  /* border: 2px solid rgba(139, 120, 93, 0.4); */
  border-radius: 2px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 0;
}

.envelope-clone-reset {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  transform: none !important;
}

.envelope-front-reset {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: rotate(-1deg) !important;
  animation: none !important;
  animation-play-state: running !important;
}

.envelope-back-reset {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) rotate(1deg) rotateY(-90deg) !important;
  animation: none !important;
}

.envelope-flap-reset {
  transform: none !important;
  animation: none !important;
}

/* Seal on back of envelope */
.envelope-seal {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  animation: seal-pulse 2s ease-in-out infinite;
}

@keyframes seal-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.1);
  }
}