/* ==========================================================
   ABERTURA: envelope kraft com lacre de cera (e cadeado opcional)
   ========================================================== */

#abertura {
  --env-l: min(84vw, 380px);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  overflow: hidden auto;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, .75), transparent 62%),
    var(--grao),
    var(--papel-2);
  transition: opacity .75s ease, visibility .75s;
}

#abertura.saindo { opacity: 0; visibility: hidden; }

.abertura__palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  max-width: 26rem;
  text-align: center;
  transition: transform .75s cubic-bezier(.5, 0, .3, 1);
}

#abertura.saindo .abertura__palco { transform: scale(1.12) translateY(-16px); }

/* ---------- envelope ---------- */

.envelope {
  position: relative;
  width: var(--env-l);
  aspect-ratio: 10 / 7;
  margin-top: calc(var(--env-l) * .4);
  perspective: 1100px;
}

.envelope__costas {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
  background: var(--fibra), #c99f73;
  box-shadow: 0 26px 38px -22px rgba(58, 39, 49, .55), 0 2px 4px rgba(58, 39, 49, .12);
}

.envelope__carta {
  position: absolute;
  z-index: 2;
  left: 6%;
  right: 6%;
  top: 6%;
  height: 88%;
  padding: 1rem 1.1rem;
  border-radius: 3px;
  text-align: left;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(1.7rem - 1px), var(--pauta) calc(1.7rem - 1px) 1.7rem) 0 calc(1rem - 3px),
    #fffefb;
  box-shadow: 0 1px 3px rgba(58, 39, 49, .15);
  transition: transform .9s cubic-bezier(.3, .7, .3, 1);
}

.envelope__carta p {
  font-size: clamp(.9rem, 3.9vw, 1.05rem);
  line-height: 1.7rem;
}

.carta-fora .envelope__carta { transform: translateY(-60%); }

/* a parte da frente (bolso), com as dobras laterais e de baixo */
.envelope__frente {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 -1px 1px rgba(90, 55, 25, .18));
}

.envelope__frente::before,
.envelope__frente::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
}

/* dobras laterais */
.envelope__frente::before {
  background: var(--fibra), #e2c29b;
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}

/* dobra de baixo, um tom mais escuro */
.envelope__frente::after {
  background: var(--fibra), #d8b48a;
  clip-path: polygon(0 100%, 50% 47%, 100% 100%);
}

/* aba de cima que gira pra abrir */
.envelope__aba {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 0;
  height: 57%;
  background: var(--fibra), linear-gradient(180deg, #d4ab7f, #dcb88f);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform .7s cubic-bezier(.5, 0, .3, 1), z-index 0s .35s;
}

.aberto .envelope__aba {
  z-index: 1;
  transform: rotateX(180deg);
}

/* ---------- lacre de cera ---------- */

.lacre {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 55%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  box-shadow: 0 4px 9px -1px rgba(80, 0, 20, .4);
  animation: lacre-respira 2.6s ease-in-out infinite;
  transition: box-shadow .2s ease;
}

.lacre:focus-visible { outline-offset: 6px; border-radius: 50%; }

/* inteiro até o toque; na quebra, some e as duas metades caem */
.lacre__inteiro { z-index: 1; }
.quebrado .lacre__inteiro { opacity: 0; }

.lacre__metade {
  position: absolute;
  inset: 0;
  transition: transform .8s cubic-bezier(.5, 0, .75, .45), opacity .8s ease;
}

.lacre__metade--esq { clip-path: polygon(0 0, 53% 0, 45% 28%, 57% 52%, 46% 76%, 54% 100%, 0 100%); }
.lacre__metade--dir { clip-path: polygon(53% 0, 100% 0, 100% 100%, 54% 100%, 46% 76%, 57% 52%, 45% 28%); }

.lacre__cera {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 47% 53% 49% 51% / 53% 47% 53% 47%;
  background: radial-gradient(circle at 34% 30%, #ec6a90 0 10%, #c92a5a 40%, #96143c 82%);
  box-shadow:
    inset 0 0 0 5px rgba(120, 10, 40, .32),
    inset 0 -4px 7px rgba(70, 0, 18, .38);
}

.lacre__cera::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 196, 210, .35);
}

.lacre__letra {
  position: relative;
  font-family: var(--fonte-mao);
  font-size: 1.55rem;
  line-height: 1;
  color: #85112f;
  text-shadow: 0 1px 0 rgba(255, 175, 195, .6), 0 -1px 0 rgba(50, 0, 12, .5);
  transform: translateY(-2px);
}

.rachando .lacre { animation: lacre-racha .28s ease-in-out; }

.quebrado .lacre { animation: none; pointer-events: none; box-shadow: none; }
.quebrado .lacre__metade--esq { transform: translate(-22px, 90px) rotate(-30deg); opacity: 0; }
.quebrado .lacre__metade--dir { transform: translate(18px, 100px) rotate(26deg); opacity: 0; }

@keyframes lacre-respira {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes lacre-racha {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg) scale(1.04); }
  75% { transform: rotate(6deg) scale(1.04); }
}

/* ---------- textos embaixo ---------- */

.abertura__rotulo {
  margin-top: .6rem;
  font-size: clamp(1.15rem, 5.2vw, 1.45rem);
  font-weight: 400;
}

.abertura__dica { min-height: 1.5em; }

.abertura__entrar {
  animation: entrar-surgir .6s cubic-bezier(.3, .7, .3, 1.3) both;
}

@keyframes entrar-surgir {
  from { opacity: 0; transform: translateY(10px) rotate(-1.5deg) scale(.9); }
  to { opacity: 1; transform: translateY(0) rotate(-1.5deg) scale(1); }
}

/* ---------- cadeado ---------- */

.cadeado {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 2.2rem 1.4rem 1.6rem;
  background: var(--grao), #fffefb;
  border-radius: 4px;
  box-shadow: var(--sombra-alta);
  transform: rotate(-1deg);
  transition: opacity .5s ease, transform .5s ease;
}

.cadeado::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  width: 96px;
  height: 1.55rem;
  margin-left: -48px;
  background: repeating-linear-gradient(-45deg, rgba(242, 155, 184, .78) 0 5px, rgba(255, 228, 236, .78) 5px 10px);
  transform: rotate(3deg);
}

.cadeado__icone {
  width: 52px;
  height: auto;
  color: var(--batom);
  overflow: visible;
}

.cadeado__haste { transition: transform .5s cubic-bezier(.3, .7, .3, 1.4); }
.destrancado .cadeado__haste { transform: translateY(-7px) rotate(-14deg); transform-origin: 13px 25px; }
.destrancado { opacity: 0; transform: rotate(-1deg) translateY(-14px) scale(.96); }

.cadeado__rotulo { font-size: 1.05rem; }

.cadeado__campo {
  width: min(100%, 15rem);
  padding: .5rem .4rem .3rem;
  border: 0;
  border-bottom: 2px dashed var(--caneta);
  background: transparent;
  text-align: center;
  font-family: var(--fonte-mao);
  font-size: 1.25rem;
  color: var(--caneta);
  outline: none;
}

.cadeado__campo:focus { border-bottom-style: solid; }

.cadeado__dica { min-height: 1.8em; font-size: .92rem; color: var(--batom); }

.cadeado.errou { animation: tremer .45s ease; }

@keyframes tremer {
  0%, 100% { transform: rotate(-1deg) translateX(0); }
  20% { transform: rotate(-1deg) translateX(-9px); }
  40% { transform: rotate(-1deg) translateX(8px); }
  60% { transform: rotate(-1deg) translateX(-5px); }
  80% { transform: rotate(-1deg) translateX(3px); }
}