/* A pillar-box red field by day, airmail night after dark; one sealed envelope, and the letter inside it. Without
   a script the letter lies open as it ends; with one it starts sealed (.js) and opens once (.opened). */
:root {
  --field: #a93421;
  --deep: #7a2114;
  --print: rgb(0 0 0 / 0.2);
  --ink: #23201b;
  --fold: #e9dec2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --field: #131a36;
    --deep: #080b1c;
    --print: rgb(246 239 220 / 0.12);
  }
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 0.55rem;
  background: repeating-linear-gradient(
    135deg,
    #c8402a 0 1rem,
    #f6efdc 1rem 2rem,
    #27418a 2rem 3rem,
    #f6efdc 3rem 4rem
  );
}
.stamp {
  position: absolute;
  top: 1.4rem;
  right: max(1.25rem, 4vw);
  width: clamp(8.5rem, 20vw, 12rem);
  rotate: 3deg;
  font:
    8.5px "DM Mono",
    monospace;
  fill: currentColor;
}
.stamp .ring {
  transform-origin: 50px 58px;
}
.stamp .perforation {
  fill: none;
  stroke: var(--field);
  stroke-width: 5;
  stroke-dasharray: 0 8;
  stroke-linecap: round;
}
.stamp .value {
  fill: #27418a;
  letter-spacing: 0.08em;
}
.stamp .cancel {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  opacity: 0.7;
}
.tag {
  color: var(--cream);
}
main {
  padding-top: 3rem;
}
h1 {
  max-width: 11ch;
  font-size: clamp(2.6rem, 7.5vw, 5.25rem);
  text-wrap: balance;
}
h1 em {
  color: var(--ball);
}
.envelope {
  --w: min(86vw, 26rem);
  position: relative;
  width: var(--w);
  aspect-ratio: 3 / 2;
  margin-top: calc(var(--w) * 0.56);
  color: var(--ink);
  filter: drop-shadow(0 1.2rem 1.6rem rgb(0 0 0 / 0.35));
}
.envelope > * {
  position: absolute;
  inset: 0;
}
.back {
  background: #d8cba8;
  border-radius: 0.4rem;
}
.letter {
  inset: -72% 5% auto;
  z-index: 6;
  height: max(140%, 18.5rem);
  display: grid;
  align-content: start;
  gap: 0.7em;
  padding: clamp(1rem, 5vw, 1.5rem);
  background: var(--cream);
  border-radius: 0.2rem;
  box-shadow: 0 0.3rem 1rem rgb(0 0 0 / 0.2);
  rotate: -1.5deg;
  font-size: clamp(0.94rem, 2.6vw, 1.06rem);
  text-align: left;
  outline: none;
}
.front {
  z-index: 3;
  width: 100%;
  height: 100%;
  fill: var(--cream);
  stroke: rgb(0 0 0 / 0.12);
}
.front .side {
  fill: var(--fold);
}
.flap {
  z-index: 1;
  height: 56%;
  background: #dfd3b3;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  transform: perspective(40rem) rotateX(180deg);
}
.seal {
  inset: 56% auto auto 50%;
  z-index: 5;
  width: 3.2rem;
  height: 3.2rem;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c8402a, #8a1c12 70%);
  box-shadow:
    inset 0 0 0 0.22rem rgb(0 0 0 / 0.15),
    0 0.15rem 0.3rem rgb(0 0 0 / 0.4);
  opacity: 0;
}
.seal svg {
  width: 55%;
  fill: rgb(0 0 0 / 0.32);
}
.break {
  display: none;
  margin-top: 1.5rem;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.js .break {
  display: block;
}
.js .envelope:not(.opened) {
  margin-top: 2.5rem;
  cursor: pointer;
}
.js .envelope:not(.opened) .letter {
  inset-block-start: 6%;
  z-index: 2;
  height: 88%;
  rotate: 0deg;
  visibility: hidden;
}
.js .envelope:not(.opened) .flap {
  z-index: 4;
  background: var(--fold);
  transform: none;
}
.js .envelope:not(.opened) .seal {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  h1 {
    animation: rise 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .envelope {
    transition: margin-top 0.9s 0.5s cubic-bezier(0.3, 0.8, 0.3, 1);
    animation: arrive 1.1s 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
  }
  .stamp {
    animation: thump 0.3s 1.5s cubic-bezier(0.3, 1.5, 0.5, 1) both;
  }
  .stamp .ring {
    animation: turn 70s linear infinite;
  }
  .opened .seal {
    animation: crack 0.4s both;
  }
  .opened .flap {
    animation: lift 0.6s 0.25s both;
  }
  .opened .letter {
    animation: unfold 1.4s 0.7s cubic-bezier(0.3, 0.8, 0.3, 1) both;
  }
  .opened .letter p {
    animation: rise 0.9s 1.8s both;
  }
  .js .envelope:not(.opened) .seal {
    animation: beat 2.4s 2.5s ease-in-out infinite;
  }
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: translate(40vw, -12vh) rotate(16deg);
  }
}
@keyframes thump {
  from {
    opacity: 0;
    scale: 1.6;
  }
}
@keyframes turn {
  to {
    rotate: 1turn;
  }
}
@keyframes beat {
  50% {
    scale: 1.09;
  }
}
@keyframes crack {
  from {
    opacity: 1;
  }
  to {
    scale: 0.6;
    rotate: 30deg;
  }
}
@keyframes lift {
  from {
    z-index: 4;
    background: var(--fold);
    transform: perspective(40rem) rotateX(0deg);
  }
  49% {
    z-index: 4;
  }
}
@keyframes unfold {
  from {
    inset-block-start: 6%;
    z-index: 2;
    height: 88%;
    rotate: 0deg;
  }
  45% {
    inset-block-start: -86%;
    z-index: 2;
    height: 88%;
    rotate: 0deg;
  }
}