:root {
  --bg: rgb(253, 209, 209);
  --bg-accent: rgb(255, 142, 150);
  --envelope: rgb(247, 134, 155);
  --envelope-light: #ff9aad;
  --flap: #ca3f59;
  --heart: #ff85a2;
  --text: #c24a68;
  --wax: #6b1a1a;
}

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(circle, var(--bg) 0 35%, var(--bg-accent) 100%);
}

.open-toggle {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dim-layer,
.background-floating {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.dim-layer {
  z-index: 1;
  background-color: transparent;
  transition: background-color 1s ease;
}

.open-toggle:checked ~ .dim-layer {
  background-color: rgb(0 0 0 / 0.3);
}

.background-floating {
  z-index: 0;
  overflow: hidden;
}

.app {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}

/* Intro gif and speech bubbles */
.gif-label {
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  min-width: 180px;
  transform: translateX(-50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.open-toggle:checked ~ .app .gif-label {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-20px);
}

.open-toggle:not(:checked) ~ .app .gif-label {
  transition-delay: 1s;
}

.angry-gif {
  width: 150px;
  height: 150px;
  object-fit: contain;
}

.speech-bubble {
  position: absolute;
  top: 0;
  z-index: 3;
  width: max-content;
  max-width: 140px;
  padding: 10px 15px;
  border-radius: 20px;
  color: #fff;
  background-color: var(--envelope);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
  font-size: 0.9em;
  font-weight: 700;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background-color: var(--envelope);
  transform: rotate(45deg);
}

.speech-bubble:not(.speech-bubble-secondary) {
  left: 10%;
  transform: translate(-60%, -60%);
}

.speech-bubble:not(.speech-bubble-secondary)::after {
  right: 16px;
}

.speech-bubble-secondary {
  top: 10%;
  left: 90%;
  transform: translate(-30%, -80%);
}

.speech-bubble-secondary::after {
  left: 16px;
}

/* Envelope */
.envelope-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 3s ease-in-out infinite;
}

.open-toggle:checked ~ .app .envelope-wrapper {
  animation: none;
}

#envelope {
  position: relative;
  display: block;
  width: 280px;
  height: 180px;
  border-radius: 0 0 6px 6px;
  background-color: var(--flap);
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.1);
  cursor: pointer;
}

.open-toggle:focus-visible ~ .app #envelope {
  outline: 3px solid rgb(255 255 255 / 0.9);
  outline-offset: 8px;
}

.front {
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
}

.flap {
  z-index: 5;
  border-top: 98px solid var(--flap);
  border-right: 140px solid transparent;
  border-bottom: 82px solid transparent;
  border-left: 140px solid transparent;
  pointer-events: none;
  transform: rotateX(0deg);
  transform-origin: top;
  transition: transform 0.4s 1s ease, z-index 0s 1s;
}

.open-toggle:checked ~ .app .flap {
  z-index: 1;
  transform: rotateX(180deg);
  transition: transform 0.4s ease, z-index 0.6s;
}

.pocket {
  z-index: 6;
  border-top: 90px solid transparent;
  border-right: 140px solid var(--envelope);
  border-bottom: 90px solid var(--envelope-light);
  border-left: 140px solid var(--envelope);
  border-radius: 0 0 6px 6px;
}

.wax-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--wax);
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease-in-out 1.3s;
}

.open-toggle:checked ~ .app .wax-seal {
  opacity: 0;
  transition-delay: 0s;
}

.heart-stamp {
  position: absolute;
  top: 25%;
  left: 15%;
  transform: translate(-15%, -25%);
  transform-origin: 0 100%;
}

.heart-stamp::before,
.heart-stamp::after {
  content: "";
  position: absolute;
  top: 0;
  left: 17.5px;
  width: 17.5px;
  height: 28px;
  border-radius: 17.5px 17.5px 0 0;
  background: var(--heart);
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart-stamp::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

/* Letter */
.letter {
  position: absolute;
  top: 60%;
  left: 50%;
  z-index: 1;
  width: 90%;
  height: 100%;
  padding: 30px 20px 0;
  overflow: visible;
  border: 1px solid rgb(0 0 0 / 0.15);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  background-color: #ffe7ec;
  background-image:
    linear-gradient(180deg, rgb(230 230 230 / 0.7) 25%, rgb(255 231 236 / 0.7) 55%, rgb(255 231 236 / 0.8) 100%),
    url("images/letter.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 2px 26px rgb(0 0 0 / 0.08);
  transform: translate(-50%, -50%);
}

.open-toggle:checked ~ .app .letter {
  z-index: 2;
  opacity: 1;
  transform: translate(-50%, -60%);
  animation: openLetter 1s forwards 0.5s;
}

body.has-interacted .open-toggle:not(:checked) ~ .app .letter {
  animation: closeLetter 1s both;
}

.message {
  position: relative;
  top: 45%;
  left: 50%;
  z-index: 2;
  color: var(--text);
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: 0.6em;
  line-height: 1;
  text-align: left;
  overflow-wrap: break-word;
  transform: translate(-50%, -50%);
}

.message p {
  margin: 0;
  text-shadow: 0 2px 3px rgb(0 0 0 / 0.2);
}

.message p + p {
  margin-top: 0.4rem;
}

.corner {
  position: absolute;
  right: -40px;
  bottom: -100px;
  z-index: 10;
  width: 70%;
  height: 70%;
  opacity: 0;
  transform: rotate(-25deg);
  transition: opacity 0.2s ease-in-out;
}

.open-toggle:checked ~ .app .corner {
  opacity: 1;
  transition: opacity 1s ease-in-out 1s;
}

.corner-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 2px solid rgb(82 26 68 / 0.68);
  border-radius: 5px;
  background: #fff0f5;
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.5);
  transform: scale(0.6);
  transition: transform 2s ease-in-out;
}

.corner-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.open-toggle:checked ~ .app .corner-card {
  transform: scale(1.05);
}

/* Hearts and sparkles */
.hearts,
.sparkles {
  position: absolute;
  top: 90px;
  right: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

.heart,
.sparkle {
  position: absolute;
  bottom: 10px;
  left: var(--left);
  opacity: 0;
  pointer-events: none;
  font-size: 2rem;
  line-height: 1;
}

.heart {
  font-size: calc(2rem * var(--scale, 1));
}

.heart::before,
.sparkle::before {
  display: block;
}

.heart::before {
  content: "💖";
}

.sparkle::before {
  content: "✨";
}

.a1 { --left: 10%; --scale: 0.6; --delay: 0s; --x: -18px; --rotate: -15deg; }
.a2 { --left: 30%; --scale: 0.8; --delay: 0.08s; --x: 12px; --rotate: 10deg; }
.a3 { --left: 50%; --scale: 0.9; --delay: 0.16s; --x: -8px; --rotate: -8deg; }
.a4 { --left: 70%; --scale: 0.7; --delay: 0.12s; --x: 16px; --rotate: 12deg; }
.a5 { --left: 15%; --scale: 0.8; --delay: 0.04s; --x: -10px; --rotate: -20deg; }
.a6 { --left: 35%; --scale: 1; --delay: 0.2s; --x: 14px; --rotate: 20deg; }

.s1 { --left: 20%; --delay: 0.05s; --x: -8px; --rotate: -10deg; }
.s2 { --left: 40%; --delay: 0.1s; --x: 6px; --rotate: 6deg; }
.s3 { --left: 60%; --delay: 0.15s; --x: -6px; --rotate: -6deg; }
.s4 { --left: 70%; --delay: 0.12s; --x: 10px; --rotate: 8deg; }
.s5 { --left: 75%; --delay: 0.08s; --x: -4px; --rotate: -8deg; }
.s6 { --left: 80%; --delay: 0.18s; --x: 8px; --rotate: 12deg; }

.open-toggle:checked ~ .app .heart {
  opacity: 1;
  animation: riseUp 1.8s cubic-bezier(0.25, 0.8, 0.25, 1) var(--delay, 0s) forwards;
}

.open-toggle:checked ~ .app .sparkle {
  opacity: 1;
  animation: sparkleBurst 2s ease-out var(--delay, 0s) forwards;
}

.floating-emojis {
  position: absolute;
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgb(194 74 104 / 1));
  animation: dreamyFloat 16s ease-in-out infinite;
}

.bottom-note {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  color: var(--text);
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: 0.5rem;
}

.wavy-text,
.wavy-char {
  display: inline-block;
}

.wavy-char {
  animation: wobble 1.2s ease-in-out infinite;
}

@keyframes dreamyFloat {
  0%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(0.75) rotate(0deg);
  }

  12% { opacity: 0.45; }

  25% {
    transform: translate(34px, -26px) scale(0.95) rotate(12deg);
  }

  45% {
    opacity: 0.3;
    transform: translate(-28px, 18px) scale(1.1) rotate(-10deg);
  }

  65% {
    transform: translate(42px, 32px) scale(0.9) rotate(18deg);
  }

  85% {
    opacity: 0.25;
    transform: translate(-18px, -34px) scale(1.05) rotate(-14deg);
  }
}

@keyframes float {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes openLetter {
  0% {
    z-index: 2;
    opacity: 1;
    transform: translate(-50%, -60%);
  }

  50% {
    z-index: 2;
    opacity: 1;
    transform: translate(-50%, -200%);
  }

  100% {
    z-index: 20;
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.5);
  }
}

@keyframes closeLetter {
  0% {
    z-index: 20;
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.5);
  }

  50% {
    z-index: 2;
    opacity: 1;
    transform: translate(-50%, -200%);
  }

  88% {
    z-index: 2;
    opacity: 1;
    transform: translate(-50%, -60%);
  }

  100% {
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
}

@keyframes riseUp {
  0% {
    opacity: 0;
    transform: translate(var(--x, 0), 0) scale(0.8) rotate(var(--rotate, 0));
  }

  25% {
    opacity: 1;
    transform: translate(var(--x, 0), -40px) scale(1.05) rotate(var(--rotate, 0));
  }

  60% {
    transform: translate(calc(var(--x, 0) * 1.2), -90px) scale(1.1) rotate(calc(var(--rotate, 0) * 1.2));
  }

  100% {
    opacity: 0;
    transform: translate(calc(var(--x, 0) * 1.4), -130px) scale(1.3) rotate(calc(var(--rotate, 0) * 1.4));
  }
}

@keyframes sparkleBurst {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }

  40% {
    opacity: 1;
    transform: translateY(-40px) scale(1.2);
  }

  100% {
    opacity: 0;
    transform: translateY(-90px) scale(0.9);
  }
}

@keyframes wobble {
  0%,
  100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-1px) rotate(-0.1deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-1px) rotate(0.1deg); }
}

@media (max-width: 600px) {
  .envelope-wrapper {
    width: 100%;
    padding: 0 10px;
  }

  .letter {
    width: 80%;
    padding: 20px;
  }

  .message {
    font-size: 0.55em;
    line-height: 1.1;
  }

  .open-toggle:checked ~ .app .letter {
    animation-name: openLetterMobile;
  }

  body.has-interacted .open-toggle:not(:checked) ~ .app .letter {
    animation-name: closeLetterMobile;
  }

  @keyframes openLetterMobile {
    0% {
      z-index: 2;
      opacity: 1;
      transform: translate(-50%, -60%);
    }

    50% {
      z-index: 2;
      opacity: 1;
      transform: translate(-50%, -150%);
    }

    100% {
      z-index: 20;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.5);
    }
  }

  @keyframes closeLetterMobile {
    0% {
      z-index: 20;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.5);
    }

    50% {
      z-index: 2;
      opacity: 1;
      transform: translate(-50%, -150%);
    }

    88% {
      z-index: 2;
      opacity: 1;
      transform: translate(-50%, -60%);
    }

    100% {
      z-index: 1;
      opacity: 0;
      transform: translate(-50%, -50%);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}