/* Mobile first (spec 4.13): the explorable painting, the paper sheet that rises from the bottom, the firefly on the path. */

/* ---------- the painting you explore */
.panorama { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; }
.panorama.arrastavel { cursor: grab; }
.panorama.arrastando { cursor: grabbing; }
.panorama-pintura, .panorama-frente { position: absolute; left: 0; top: 0; will-change: transform; }
.panorama-pintura img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.panorama-frente { pointer-events: none; }
.ancorado { position: absolute; transform: translate(-50%, -50%); }
.panorama:focus-visible { box-shadow: inset 0 0 0 3px var(--hibisco); }
.dica-arraste { position: absolute; z-index: 6; left: 50%; top: 60%; transform: translateX(-50%); margin: 0; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 24px; padding: 8px 16px 8px 20px; border-radius: 999px; background: rgb(255 252 244 / .92);
  box-shadow: 0 4px 14px rgb(122 90 67 / .2); font: 500 22px var(--f-mao); color: var(--tinta); pointer-events: none; animation: sobe 500ms var(--curva) both; }
.dica-arraste.sai { opacity: 0; transition: opacity 400ms; }
.dica-arraste .mao { width: 26px; height: 26px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 0 6px rgb(232 169 184 / .35); animation: arrasta 1.6s ease-in-out infinite; }
@keyframes arrasta { 0%, 100% { transform: translateX(10px); } 50% { transform: translateX(-10px); } }

/* text that sits over a painting never blocks the drag; only its buttons take touches */
.sobre-pintura { position: relative; z-index: 3; pointer-events: none; }
.sobre-pintura a, .sobre-pintura button, .sobre-pintura input, .sobre-pintura textarea { pointer-events: auto; }
.veu { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ---------- the paper sheet: from the bottom on a phone, centred on a wide screen */
.alca { display: none; }
@media (max-width: 700px) {
  .folha-fundo { align-items: end; padding: 0; }
  .folha { width: 100%; max-height: min(88dvh, calc(var(--vvh, 100dvh) - 12px)); border-radius: 20px 20px 0 0;
    padding: 40px 20px calc(24px + env(safe-area-inset-bottom)); animation: sobe-folha 420ms var(--curva) both; transition: transform 260ms var(--curva), max-height 260ms var(--curva); }
  .folha.cheia { max-height: calc(var(--vvh, 100dvh) - 12px); }
  .folha.puxando { transition: none; }
  .folha-fundo.sai .folha { transform: translateY(100%) !important; opacity: 1; transition: transform 300ms ease-in; }
  .alca { display: grid; place-items: center; position: absolute; top: 0; left: 0; right: 0; height: 44px; touch-action: none; cursor: grab; }
  .alca span { width: 44px; height: 5px; border-radius: 3px; background: rgb(122 90 67 / .35); }
  .folha-fechar { top: 10px; }
  .folha.pequena { border-radius: 20px 20px 0 0; }
  .folha-form textarea, .folha-form input { font-size: 16px; }   /* 16px: the iPhone does not zoom into the field */
}
@keyframes sobe-folha { from { transform: translateY(100%); } }

/* ---------- the garden path: a firefly marks where you are */
.caminho a { position: relative; }
.caminho a[aria-current]::after { content: ''; position: absolute; top: 0; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: #FFF4C2; box-shadow: 0 0 6px 2px rgb(233 196 106 / .9), 0 0 16px 6px rgb(233 196 106 / .45); animation: vagalume 2.6s ease-in-out infinite; }
@keyframes vagalume { 0%, 100% { transform: translate(-6px, 0); opacity: 1; } 50% { transform: translate(6px, -4px); opacity: .55; } }
.caminho a { min-width: 48px; }

@media (prefers-reduced-motion: reduce) {
  .dica-arraste .mao, .caminho a[aria-current]::after { animation: none !important; }
}