/* The opening short: dusk sky, the camera (a still landscape and a living layer), the sunlight, the painted garden,
   a paper grain over all of it, and the caption written by hand. */
.curta { overflow: hidden; background: #3B3864; animation: curta-vem 700ms ease both; }
.curta.sai { opacity: 0; transition: opacity 600ms ease; }
.curta > * { position: absolute; inset: 0; }
.curta-ceu { background: linear-gradient(#3B3864, #8D7DB6 42%, #D9A9B8 70%, #F3CDB5 86%); }
.camera { transform-origin: 0 0; will-change: transform; }
.curta-fundo, .curta-vivo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }   /* own layers: the still landscape is rasterised once */
.curta-vivo * { transform-box: view-box; transform-origin: 0 0; }
.curta-vivo .luz { transform-box: fill-box; transform-origin: center; }
.curta-vivo .ave-asa-perto, .curta-vivo .ave-asa-longe { transform-box: fill-box; transform-origin: 50% 100%; }
.curta-sol { opacity: 0; background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), #FFFCF2, #FFF4D6 40%, #F9E9CC 100%); }
.curta-jardim { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; opacity: 0; transform-origin: 51.5% 47%; }
.curta-grao { background: url(/img/grao.png); opacity: .55; pointer-events: none; }
.curta-legenda { inset: auto auto calc(10% + env(safe-area-inset-bottom)) 50%; transform: translateX(-50%); margin: 0; width: min(90vw, 640px);
  text-align: center; font: 500 clamp(26px, 6vw, 38px)/1.2 var(--f-mao); color: #FFF9EC; text-shadow: 0 2px 10px rgb(40 34 70 / .6), 0 0 2px rgb(40 34 70 / .4); opacity: 0; text-wrap: balance; }
.curta.retrato .curta-legenda { top: 74%; bottom: auto; }
/* over the light garden the caption becomes ink on a paper ribbon */
.curta-legenda.no-jardim { width: auto; max-width: 92vw; white-space: nowrap; top: 16%; bottom: auto; padding: 4px 22px 8px; border-radius: 999px; background: rgb(255 252 244 / .84); color: var(--tinta); text-shadow: none; font-size: clamp(20px, 5.4vw, 30px); }
.curta.retrato .curta-legenda.no-jardim { top: 14%; bottom: auto; }
.curta-legenda.vem { animation: legenda 4800ms ease both; }
.curta.troca .camera { animation: troca 3000ms ease both; }
.pular { inset: auto 16px calc(16px + env(safe-area-inset-bottom)) auto; }
@keyframes curta-vem { from { opacity: 0; } }
@keyframes legenda { 0% { opacity: 0; transform: translate(-50%, 8px); } 12%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@keyframes troca { 0% { opacity: 0; } 18%, 85% { opacity: 1; } 100% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  .curta-legenda.vem { animation: legenda 3000ms ease both !important; animation-duration: 3000ms !important; }
  .curta.troca .camera { animation-duration: 3000ms !important; }
}