* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  background-color: #d3d3d3;
}

body {
  width: 100%;
  height: 100%;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.14;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.35) 0.7px, transparent 0.7px),
    radial-gradient(rgba(0, 0, 0, 0.25) 0.7px, transparent 0.7px);
  background-size:
    6px 6px,
    9px 9px;
}

.envelope-scene,
.open-envelope-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.envelope-scene {
  transition:
    opacity 0.65s ease-in,
    transform 0.65s cubic-bezier(0.4, 0, 1, 1);
}
.envelope-scene.hidden {
  opacity: 0;
  transform: translateY(18vh) scale(0.96);
  pointer-events: none;
}

.open-envelope-scene {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease-out;
}
.open-envelope-scene.visible {
  opacity: 1;
  pointer-events: auto;
}

.open-envelope-scene.dismissed {
  opacity: 0;
  transform: scale(0.88) translateY(6vh);
  pointer-events: none;
  transition:
    opacity 0.5s ease-in,
    transform 0.55s cubic-bezier(0.4, 0, 1, 1);
}