/* "Para os dias de medo": the firefly jar on the stump, the line a firefly turns into, and the breathing veil. */
.pote { overflow: hidden; }
.pote-topo { text-align: center; }
.pote-topo .titulo, .pote .legenda { text-shadow: 0 0 18px rgb(255 252 244 / .95), 0 0 6px rgb(255 252 244 / .9); }
.pote .legenda { margin: 2px 0 0; font: 500 21px var(--f-mao); color: var(--madeira); }

/* the jar, anchored by its base on the stump */
.pote-caixa { --boca-y: -14%; --boca-w: 62%; z-index: 2; }
.pote-caixa.ancorado { transform: translate(-50%, -100%); }
.pote-caixa::before { content: ''; position: absolute; z-index: -1; left: -30%; right: -30%; top: 10%; bottom: -10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(246 216 140 / .5), rgb(246 216 140 / 0)); animation: respira-luz 4.5s ease-in-out infinite; }
@keyframes respira-luz { 50% { opacity: .55; transform: scale(.94); } }
.pote-sombra { position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -4px; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(70 52 34 / .45), rgb(70 52 34 / 0)); }
.pote-vidro { display: block; width: 100%; padding: 0; border: 0; background: none; touch-action: manipulation; }
.pote-vidro img { display: block; width: 100%; filter: drop-shadow(0 1px 1px rgb(70 52 34 / .3)); }
.pote-vidro:active img { transform: scale(.98); }

/* the cork sits in the jar's mouth; sideways twisting wiggles it and lifts it out a little at a time */
.rolha { position: absolute; left: 50%; top: var(--boca-y); width: var(--boca-w); padding: 0; border: 0; background: none;
  transform: translate(-50%, var(--sobe, 0%)) rotate(var(--gira, 0deg)); transition: transform 300ms var(--curva); touch-action: none; cursor: grab; }
.rolha::after { content: ''; position: absolute; inset: -40% -30%; }          /* a thumb-sized grip around a small cork */
.rolha img { display: block; width: 100%; pointer-events: none; }
.rolha.girando { transition: none; cursor: grabbing; }
.pote-caixa.aberto .rolha { animation: salta 900ms cubic-bezier(.3,.6,.4,1) forwards; cursor: default; }
/* it pops up and lands on its side on the stump, next to the jar */
@keyframes salta {
  0% { transform: translate(-50%, var(--sobe, 0%)) rotate(0deg); }
  45% { transform: translate(22.6%, -90%) rotate(160deg); }
  100% { transform: translate(66%, 300%) rotate(262deg); }
}

/* a firefly in flight, and the line it becomes */
.vagalume-voo { position: absolute; z-index: 6; width: 38px; pointer-events: none; transform: translate(-50%, -50%);
  filter: saturate(.8) hue-rotate(-12deg) drop-shadow(0 0 8px rgb(246 216 140 / .95)) drop-shadow(0 0 16px rgb(233 196 106 / .6)); }
.frase-vagalume { position: absolute; z-index: 4; left: 50%; top: 31%; width: min(86vw, 520px); margin: 0; transform: translateX(-50%);
  text-align: center; font: 500 28px/1.3 var(--f-mao); color: var(--tinta); pointer-events: none; opacity: 0;
  padding: 10px 20px 12px; border-radius: 18px; background: rgb(255 252 244 / .84); box-shadow: 0 4px 16px rgb(122 90 67 / .14); text-wrap: balance; }
.frase-vagalume:empty { visibility: hidden; }
.frase-vagalume.mostra { animation: acende 1200ms var(--curva) forwards; }
@keyframes acende { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.pote-acoes { position: absolute; left: 0; right: 0; bottom: calc(var(--caminho-h) + 14px + env(safe-area-inset-bottom)); display: grid; justify-items: center; }
.pote-acoes .etiqueta { min-width: 220px; }

/* breathing: a soft veil over everything, one firefly in the middle */
.respirar { position: fixed; z-index: 40; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px;
  background: rgb(247 241 227 / .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: veu-entra 600ms var(--curva) both; }
@keyframes veu-entra { from { opacity: 0; } }
.respirar-convite { margin: 0; padding: 2px 16px; border-radius: 999px; background: rgb(255 252 244 / .7); font: italic 600 28px var(--f-titulo); color: var(--hibisco); }
.vagalume-centro { --ar: 0; position: relative; width: 170px; height: 170px; display: grid; place-items: center; will-change: transform; }
.vagalume-centro .halo { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(246 216 140 / .95), rgb(233 196 106 / .35) 55%, rgb(233 196 106 / 0));
  opacity: calc(.25 + var(--ar) * .75); }
.vagalume-centro img { position: relative; width: 52%; filter: drop-shadow(0 0 8px rgb(233 196 106 / .8)) saturate(.8) hue-rotate(-12deg); }
.respirar .palavra { margin: 0; min-height: 46px; padding: 0 18px; border-radius: 999px; background: rgb(255 252 244 / .6); font: 500 38px var(--f-mao); color: var(--madeira); }
.respirar .palavra.vem { animation: sobe 500ms var(--curva) both; }
.respirar .parar { min-width: 140px; margin-top: 8px; }

@media (min-width: 900px) {
  .frase-vagalume { top: 27%; font-size: 32px; }
  .pote-acoes { bottom: calc(var(--caminho-h) + 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .pote-caixa::before { animation: none; }
  .pote-caixa.aberto .rolha { animation-duration: 1ms; }
  .frase-vagalume.mostra { animation: acende-quieto 900ms ease forwards; }
}
@keyframes acende-quieto { from { opacity: 0; } to { opacity: 1; } }
@media (max-height: 500px) and (orientation: landscape) { .pote-acoes { left: auto; right: 20px; bottom: auto; top: 46%; } .pote .legenda { display: none; } .frase-vagalume { top: 22%; font-size: 22px; } }

body:has(.respirar) .frase-vagalume, body:has(.respirar) .pote-topo, body:has(.respirar) .pote-acoes { visibility: hidden; }
@media (min-width: 900px) { .respirar { place-content: start center; padding-top: 7vh; gap: 12px; } .respirar .vagalume-centro { width: 150px; height: 150px; } }
/* the comfort line is a paper tag, not a card */
.frase-vagalume { border-radius: 4px; background: #FFFCF4 url(/img/papel-creme.webp) center / cover; border: 1px solid rgb(122 90 67 / .2); }
.frase-vagalume { width: min(78vw, 330px); }