/* The fairies' sweetshop, and the bem-me-quer hidden in the greenhouse. */
.doceria { overflow: hidden; }
.doceria-topo { text-align: center; }
.doceria-topo .titulo, .doceria .legenda { text-shadow: 0 0 18px rgb(255 252 244 / .95); }
.doceria .legenda { margin: 2px 0 0; font: 500 21px var(--f-mao); color: var(--madeira); }
.doce { z-index: 2; display: block; padding: 0; border: 0; background: none; touch-action: manipulation; }
.doce.ancorado { transform: translate(-50%, -100%); }
.doce::after { content: ''; position: absolute; inset: -8px -6px; }   /* a thumb-sized grip even when the painting is small */   /* anchored by the base: the sweet sits on the counter top */
/* a soft contact shadow on the wood, so it rests instead of hovering */
.doce::before { content: ''; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -3px; height: 9px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(92 60 38 / .42), rgb(92 60 38 / 0)); }
.doce img { display: block; width: 100%; aspect-ratio: 6 / 5; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 1px 1px rgb(92 60 38 / .35)); transform-origin: 50% 100%; transition: transform 250ms var(--curva); }
@media (hover: hover) { .doce:hover img { transform: translateY(-4px) scale(1.05); } }
.doce:focus-visible img { transform: translateY(-4px) scale(1.05); }
.doce:active img { transform: scale(.96); }
.doce .nome-doce { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  font: 500 15px/1 var(--f-mao); color: var(--tinta); padding: 3px 7px; border-radius: 999px; background: rgb(255 252 244 / .9); white-space: nowrap; }
/* a phone on its side: the painting is too small for five names, so they show on the note instead */
@media (max-height: 500px) { .doce .nome-doce { display: none; } }
@media (min-width: 900px) { .doce .nome-doce { font-size: 20px; top: calc(100% + 9px); } }
.doce-aberto { display: grid; justify-items: center; gap: 10px; }
.doce-grande { width: 120px; height: 120px; object-fit: contain; animation: desembrulha 700ms var(--curva) both; }
@keyframes desembrulha { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
.bilhete-texto { margin: 0; font: 500 24px/1.35 var(--f-mao); color: var(--tinta); text-align: center; max-width: 30ch; }
.doce-aberto .assinatura { justify-self: end; margin: 0; }
.receita { width: 100%; margin-top: 8px; padding: 16px 18px; border-radius: 4px; background: var(--creme); border: 1px solid rgb(122 90 67 / .25); box-shadow: 0 2px 6px rgb(122 90 67 / .12); }
.receita ul { list-style: none; padding-left: 4px; }
.receita ul li::before { content: '✦ '; color: var(--hibisco); font-size: .8em; }
.receita li { max-width: 58ch; }
.receita h3 { margin: 0 0 6px; font: italic 600 22px var(--f-titulo); color: var(--hibisco); }
.receita ul, .receita ol { margin: 6px 0; padding-left: 1.3em; font: 400 16px/1.6 var(--f-texto); }
.receita ul li { text-indent: -1.1em; }

/* the bem-me-quer: a glowing hibiscus on a pot in the greenhouse, found by exploring */
.abrir-bemmequer { z-index: 3; padding: 0; border: 0; background: none; touch-action: manipulation; }
.abrir-bemmequer::before { content: ''; position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 236 170 / .95), rgb(255 236 170 / 0)); animation: chama-luz 2.8s ease-in-out infinite; }
.abrir-bemmequer img { position: relative; width: 100%; animation: chama 2.8s ease-in-out infinite; }
@keyframes chama { 50% { transform: scale(1.08) rotate(-4deg); } }
@keyframes chama-luz { 50% { opacity: .55; transform: scale(1.15); } }
.bemmequer { display: grid; justify-items: center; gap: 8px; text-align: center; }
.flor-caixa { width: min(78vw, 320px); aspect-ratio: 1; }
.flor-bemmequer { width: 100%; height: 100%; overflow: visible; }
.flor-bemmequer .petala { cursor: grab; touch-action: none; transform-box: view-box; transform-origin: 0 0; outline: none; }
.flor-bemmequer .petala:focus-visible path:first-child { stroke: var(--hibisco); stroke-width: 3; }
.flor-bemmequer .coracao { transform: scale(0) rotate(-40deg); opacity: 0; transform-origin: 0 0; transform-box: view-box; transition: transform 900ms var(--curva), opacity 400ms; pointer-events: none; }
.flor-bemmequer.amou .coracao { transform: scale(1) rotate(0deg); opacity: 1; }
.flor-bemmequer.amou .miolo { opacity: 0; transition: opacity 300ms; }
.bemmequer .palavra { margin: 0; min-height: 40px; font: 500 34px var(--f-mao); color: var(--hibisco); }
.bemmequer .palavra.vem { animation: sobe 380ms var(--curva) both; }
.bemmequer .resultado { margin: -8px 0 0; font: 500 24px/1.35 var(--f-mao); color: var(--tinta); max-width: 26ch; animation: sobe 600ms var(--curva) both; }
@media (prefers-reduced-motion: reduce) { .abrir-bemmequer img, .abrir-bemmequer::before { animation: none; } }