/* Responder ao 🌺 (the letter paper that becomes a paper bird) and the six hidden seeds with their secret letter. */
.responder { display: grid; grid-template-rows: auto auto auto; align-content: start; justify-items: center; gap: 14px; overflow: hidden; }
.responder-fundo { position: absolute; inset: -12px; z-index: -1; background: url(/img/entrada-p.webp) center / cover; filter: blur(3px) saturate(.9); }
.responder-fundo::after { content: ''; position: absolute; inset: 0; background: rgb(247 241 227 / .52); }
.responder-topo { text-align: center; }
.responder .legenda { margin: 2px 0 0; font: 500 21px var(--f-mao); color: var(--madeira); }

.papel-resposta { position: relative; width: min(100%, 560px); display: grid; gap: 4px; padding: 22px 20px 30px; border-radius: 3px;
  box-shadow: 0 12px 30px rgb(122 90 67 / .22), 0 2px 4px rgb(122 90 67 / .12); transition: transform 320ms var(--curva); touch-action: pan-y; }
.papel-resposta.puxando { transition: none; }
.saudacao-carta { margin: 0; font: 500 27px var(--f-mao); color: var(--hibisco); }
#resposta-texto { width: 100%; min-height: max(220px, 38svh); padding: 0 2px; border: 0; resize: none; background: transparent;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgb(122 90 67 / .2) 31px 32px); background-attachment: local;
  font: 500 23px/32px var(--f-mao); color: var(--tinta); outline: none; }
#resposta-texto::placeholder { color: rgb(62 58 53 / .45); }
#resposta-texto:focus-visible { box-shadow: none; }
.conta-letras { margin: 0; justify-self: start; font: 400 14px var(--f-texto); color: rgb(122 90 67 / .8); }
.conta-letras.perto { color: var(--hibisco); }

/* the wax seal on the bottom edge: pull it up to send */
.selo-puxar { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px;
  padding: 0; border: 0; background: none; touch-action: none; cursor: grab; }
.selo-puxar::before { content: ''; position: absolute; inset: -10px -24px; }
.selo { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: rgb(255 214 214 / .85);
  background: radial-gradient(circle at 38% 34%, #E0566A, #A81F33 62%, #84152A); box-shadow: 0 3px 8px rgb(110 20 35 / .35), inset 0 0 0 4px rgb(255 255 255 / .08);
  clip-path: polygon(50% 0, 63% 4%, 75% 2%, 84% 12%, 96% 18%, 97% 32%, 100% 45%, 96% 58%, 99% 71%, 89% 81%, 82% 94%, 68% 95%, 55% 100%, 42% 96%, 29% 99%, 19% 89%, 7% 83%, 5% 69%, 0 56%, 4% 43%, 1% 29%, 11% 19%, 18% 7%, 32% 5%);
  transition: transform 200ms var(--curva); }
.selo-dica { font: 500 16px var(--f-mao); color: var(--madeira); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) { .selo { animation: chama-selo 3.2s ease-in-out infinite; } }
/* while pulled, the seal stops breathing and grows once the letter has gone far enough */
.papel-resposta.puxando .selo { animation: none; }
.papel-resposta.pronta .selo { scale: 1.15; transition: scale 160ms var(--curva); }
@keyframes chama-selo { 50% { transform: translateY(-3px); } }
.responder-acoes { margin-top: 44px; }
.responder-acoes .etiqueta { min-width: 240px; }

.passaro-voo { position: absolute; z-index: 6; width: 120px; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 8px rgb(122 90 67 / .25)); }
.responder-enviada { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; animation: sobe 700ms var(--curva) both; }
.enviada-frase { margin: 0; font: italic 600 34px/1.2 var(--f-titulo); color: var(--hibisco); }
.enviada-sub { margin: 0 0 14px; font: 500 24px/1.3 var(--f-mao); color: var(--tinta); max-width: 26ch; }
.responder-enviada .botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 899px) { body.escrevendo .caminho { display: none; } }
@media (min-width: 900px) { .responder { padding-top: 70px; } }

/* ---- the six seeds: a tiny ruby drop that glints now and then */
.semente-escondida { z-index: 3; padding: 0; border: 0; background: none; aspect-ratio: 20 / 24; touch-action: manipulation; cursor: pointer; }
.semente-escondida::after { content: ''; position: absolute; inset: -18px; }
.semente-escondida svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 2px rgb(255 230 150 / .7)); }
@media (prefers-reduced-motion: no-preference) { .semente-escondida svg { animation: cintila 6s ease-in-out infinite; } }
@keyframes cintila { 0%, 84%, 100% { filter: drop-shadow(0 0 2px rgb(255 230 150 / .7)); } 91% { filter: drop-shadow(0 0 8px rgb(255 242 190 / 1)) brightness(1.3); } }
.correio-topo { position: relative; }
.ferramentas .semente-escondida { position: absolute; right: 10px; bottom: 8px; width: 13px; filter: drop-shadow(0 1px 1px rgb(70 52 34 / .4)); }
.semente-brilho { position: fixed; z-index: 70; width: 0; height: 0; pointer-events: none; }
.semente-brilho i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #FFE9A8; box-shadow: 0 0 8px #FFD36B;
  transform: rotate(var(--a)) translateX(0); animation: faisca 900ms ease-out forwards; }
@keyframes faisca { to { transform: rotate(var(--a)) translateX(36px); opacity: 0; } }

.contador-sementes { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 13px; border-radius: 999px; border: 1px solid rgb(122 90 67 / .3);
  background: rgb(255 252 244 / .9); font: 600 14px var(--f-texto); color: var(--madeira); }
.contador-sementes:disabled { opacity: 1; cursor: default; }
.contador-sementes .mini-semente svg { display: block; width: 12px; height: 14px; }
.contador-sementes.completo { min-height: 44px; border-color: #C9A14A; color: #8A6A1F; box-shadow: 0 0 12px rgb(233 196 106 / .55); cursor: pointer; }
.contador-sementes.pulo { animation: pulo 600ms var(--curva); }
@keyframes pulo { 30% { transform: scale(1.18); } }

/* the secret letter: dark and gold */
.folha.carta-segredo { background: radial-gradient(120% 90% at 50% 0%, #3A2733, #1F161D 70%); color: #F3E3B4; border: 1px solid #C9A14A;
  box-shadow: inset 0 0 0 7px #1F161D, inset 0 0 0 8px rgb(201 161 74 / .55), 0 20px 50px rgb(20 10 15 / .45); }
.carta-segredo .folha-titulo { color: #E9C46A; }
.carta-segredo .folha-fechar { color: #E9C46A; }
.carta-segredo .alca span { background: rgb(233 196 106 / .6); }
.segredo { display: grid; gap: 14px; }
.segredo p { margin: 0; font: 400 17px/1.7 var(--f-texto); color: #F3E9D2; }
.segredo .segredo-abre { font: 500 25px/1.3 var(--f-mao); color: #E9C46A; }
.segredo .assinatura { justify-self: end; color: #E9C46A; font: 500 22px var(--f-mao); }
@media (prefers-reduced-motion: reduce) { .semente-brilho i { animation-duration: 1ms; } .contador-sementes.pulo, .responder-enviada { animation: none; } }
@media (max-height: 500px) and (orientation: landscape) { .responder { overflow-y: auto; } #resposta-texto { min-height: 120px; } .responder-topo .legenda { display: none; } }
@media (max-height: 500px) and (orientation: landscape) {
  .responder { grid-template-columns: 1fr auto; align-items: start; column-gap: 20px; }
  .responder-topo { grid-column: 1 / -1; }
  .papel-resposta { max-height: calc(100dvh - var(--caminho-h) - 120px); overflow: auto; padding-bottom: 70px; }
  .selo-puxar { bottom: 8px; }
  .responder-acoes { margin-top: 0; align-self: center; }
}
.semente-escondida.ancorado::before { content: ''; position: absolute; left: 20%; right: 20%; bottom: -2px; height: 3px; border-radius: 50%; background: rgb(70 52 34 / .35); }