@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap);

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  font-family: "Quicksand", sans-serif;
  background: linear-gradient(to bottom right, #000000, #000000, #000000);
  color: #ff2222;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 1rem;
  margin-top: 50px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.envelope {
  --duration: 1000ms;

  --shadow-width: calc(var(--envelope-width) * 0.85);
  --shadow-blur: 15px;

  --envelope-width: 300px;
  --envelope-height: 175px;
  --envelope-clr-bg: #d14d44;
  --envelope-clr-bg-side: #c24e46;
  --envelope-clr-bg-bottom: #e15349;
  --envelope-clr-bg-top: #d14d44;
  --envelope-clr-txt: #fff;

  --envelope-transform: rotateY(0deg);
  --envelope-transform-hover: rotateY(180deg);
  --evelope-rotate-delay: calc(var(--duration) / 1);
  --evelope-rotate-delay-hover: 0ms;

  --letter-clr-bg: #fff;
  --letter-clr-text: #b91300;
  --letter-font-size: 1rem;
  --letter-delay: 0ms;
  --letter-delay-hover: calc(var(--duration) * 1.25);

  --letter-height: calc(var(--envelope-height) - 2rem);
  --letter-height-hover: calc(var(--envelope-height) * 1.75);

  --fold-rotate: rotateX(0deg);
  --fold-zindex-hover: 0;
  --fold-rotate-hover: rotateX(180deg);
  --fold-delay: calc(var(--duration) / 2);
  --fold-delay-hover: calc(var(--duration) * .75);

  --front-font-size: 1rem;
  --snowman-width: 50px;
  --bells-width: 30px;

  position: relative;
  height: var(--envelope-height);
  width: var(--envelope-width);
  perspective: 1000px;
  cursor: pointer;
}

@media (min-width: 720px) {
  .envelope {
    --envelope-width: 600px;
    --envelope-height: 350px;
    --letter-font-size: 1.6rem;
    --snowman-width: 130px;
    --bells-width: 60px;
    --front-font-size: 1.25rem;
  }
}

/* sombra */
.envelope::after {
  content: "";
  position: absolute;
  top: 110%;
  left: 50%;
  width: var(--shadow-width);
  height: 40px;
  transition: var(--duration) ease-in-out;
  transition-delay: var(--evelope-rotate-delay);
  transform: var(--shadow-transform);
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(71, 5, 5, 0.432);
  filter: blur(var(--shadow-blur));
}

/* estado abierto al hacer click */
.envelope.open {
  --envelope-transform: var(--envelope-transform-hover, 0deg);
  --evelope-rotate-delay: var(--evelope-rotate-delay-hover);
  --shadow-transform: rotateY(180deg);
  --fold-rotate: var(--fold-rotate-hover);
  --fold-delay: var(--fold-delay-hover);
  --fold-zindex: var(--fold-zindex-hover);
  --letter-height: var(--letter-height-hover);
  --letter-delay: var(--letter-delay-hover);
}

.envelope-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: var(--duration) ease-in-out;
  transition-delay: var(--evelope-rotate-delay);
  transform-style: preserve-3d;
  transform: var(--envelope-transform);
  display: grid;
}

.envelope-front,
.envelope-back {
  position: relative;
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  background-color: var(--envelope-clr-bg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  isolation: isolate;
}

.envelope-front {
  color: var(--envelope-clr-txt);
  display: grid;
  place-content: center;
}
.envelope-front .postage-stamp {
  position: absolute;
  top: 1em;
  right: 0.5em;
  width: 15%;
}
.envelope-front .address {
  text-align: left;
  font-size: var(--front-font-size);
}
.envelope-front .address > p > span:first-child {
  font-family: system-ui;
  font-weight: 200;
}
.envelope-front .address > p > span:last-of-type {
  font-weight: 800;
}

.envelope-back {
  transform: rotateY(180deg);
}
/* pliegues */
.envelope-back::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: conic-gradient(
    transparent 60deg,
    var(--envelope-clr-bg-side) 60deg 120deg,
    var(--envelope-clr-bg-bottom) 120deg 240deg,
    var(--envelope-clr-bg-side) 240deg 300deg,
    transparent 300deg
  );
}
.envelope-back .top-fold {
  position: absolute;
  inset: 0;
  z-index: var(--fold-zindex, 10);
  background-color: var(--envelope-clr-bg-top);
  clip-path: polygon(0% 0%, 50% 55%, 100% 0%);
  transform: var(--fold-rotate);
  transform-origin: top;
  transition: var(--duration) ease-in-out;
  transition-delay: var(--fold-delay);
}

.letter {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 90%;
  height: var(--letter-height);
  font-size: var(--letter-font-size);
  transform: translateX(-50%);
  background: var(--letter-clr-bg);
  z-index: 2;
  padding: 2em 3em;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  transition: var(--duration) ease-in-out;
  transition-delay: var(--letter-delay);
  overflow: hidden;
}
.letter p {
  margin: 0;
  font-weight: bold;
  width: 32ch;
  color: var(--letter-clr-text);
}

.custom-image {
  width: 100px;
  height: 100px;
  object-fit: contain; 
}
.custom-image2 {
  width: 150px;
  height: 150px;
  object-fit: contain; 
}

.highlight {
  display: block; 
  margin-top: 10px; 
  font-size: 1.8rem;  
  font-weight: bold; 
}

.letter-button {
  display: none; /* oculto hasta que la carta se abra */
  margin-top: 15px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 20px;
  background: linear-gradient(90deg, #ff8c00, #ffd700);
  color: #000;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  transition: transform 0.2s ease;
}

.letter-button:hover {
  transform: scale(1.1);
}


.button-container {
  margin-top: 20px;
  text-align: center;
}

.letter-button {
  display: none; /* oculto hasta que la carta se abra */
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 20px;
  background: linear-gradient(90deg, #ff8c00, #ffd700);
  color: #000;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  transition: transform 0.2s ease, opacity 0.5s ease;
  opacity: 0; /* para animación */
}

.letter-button {
  display: none;
  opacity: 0;
}

.envelope.open ~ .letter-button {
  display: inline-block;
  opacity: 1;
}


/*corazones lluvia*/
.heart {
  position: fixed;
  top: -20px;
  font-size: 24px;
  color: red;
  animation: fall 3s linear forwards;
  pointer-events: none;
  z-index: 9999;
}

@keyframes fall {
  to {
    transform: translateY(110vh);
    opacity: 0;
  }
}