/* ==========================================================
   FINAL: a carta que se escreve sozinha
   ========================================================== */

#final { overflow: hidden; }
#final .miolo { position: relative; z-index: 1; }

.final__botao { margin-top: 2rem; }

.carta-final {
  position: relative;
  margin-top: 2.4rem;
  padding: 2.2rem 1.4rem 2rem 2.4rem;
  background:
    linear-gradient(90deg, transparent 1.6rem, var(--margem) 1.6rem calc(1.6rem + 2px), transparent calc(1.6rem + 2px)),
    repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), var(--pauta) calc(2rem - 1px) 2rem) 0 1.75rem,
    #fffefb;
  border-radius: 3px;
  box-shadow: var(--sombra-alta);
  transform: rotate(-.8deg);
  transform-origin: 50% 0;
  animation: desdobrar-carta .8s cubic-bezier(.3, .7, .3, 1.1) both;
}

.carta-final .washi { top: -12px; left: 50%; margin-left: -50px; --l: 100px; --r: 3deg; }

@keyframes desdobrar-carta {
  from { opacity: 0; transform: perspective(900px) rotateX(-70deg) rotate(-.8deg); }
}

.carta-final__texto {
  min-height: 12rem;
  white-space: pre-line;
  font-size: clamp(1rem, 4.3vw, 1.12rem);
  line-height: 2rem;
}

/* o cursor da caneta enquanto escreve */
.carta-final__texto.escrevendo::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -.15em;
  background: var(--caneta);
  animation: piscar .8s steps(1) infinite;
}

@keyframes piscar { 50% { opacity: 0; } }

.carta-final__assinatura {
  margin-top: 1rem;
  text-align: right;
  font-size: clamp(1.3rem, 6vw, 1.6rem);
  color: var(--batom);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .9s ease, transform .9s ease;
}

.assinada .carta-final__assinatura { opacity: 1; transform: none; }