/* Pinturas atrás do letreiro (Fúria de Zeus e Beijo de Afrodite). A caixa continua igual: mesmo tamanho, borda e lâmpadas;
   ela vira uma janela transparente e a pintura inteira fica atrás dela, sem cortar nem esticar. O que sobra da pintura fora
   da caixa aparece por trás, coberta por um véu da cor do fundo do jogo. Posição e fases em cena-foto.js. */
.zeus>.cenaFoto,.s5>.cenaFoto{position:absolute;z-index:0;pointer-events:none;height:0}
.cenaFoto{--veu:#070a24;--veuForca:.62}
.cenaFoto.cfAfrodite{--veu:#f6cfe0;--veuForca:.5}
.cenaFoto img{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:3/2;opacity:0;
  transform:translateY(calc(var(--foco) * -100%)) scale(1);transform-origin:50% calc(var(--foco) * 100%);
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);
  transition:opacity .2s ease .45s,filter .45s ease}
/* a que entra fica por cima e aparece; a que sai só some depois, para nunca ficar um buraco entre as duas */
.cenaFoto[data-fase="1"] .cf1,.cenaFoto[data-fase="2"] .cf2,.cenaFoto[data-fase="3"] .cf3{opacity:1;z-index:1;transition:opacity .45s ease,filter .45s ease}
/* o véu cobre tudo, menos a faixa da caixa */
.cfVeu{position:absolute;left:-1px;right:-1px;top:-60vh;height:120vh;background:var(--veu);opacity:var(--veuForca);
  -webkit-mask-image:linear-gradient(#000 calc(50% - var(--meia,80px) - 2px),transparent calc(50% - var(--meia,80px) + 6px),transparent calc(50% + var(--meia,80px) - 6px),#000 calc(50% + var(--meia,80px) + 2px));
  mask-image:linear-gradient(#000 calc(50% - var(--meia,80px) - 2px),transparent calc(50% - var(--meia,80px) + 6px),transparent calc(50% + var(--meia,80px) - 6px),#000 calc(50% + var(--meia,80px) + 2px))}
/* a caixa vira janela: só o fundo e os desenhos antigos somem; borda, lâmpadas e textos ficam */
.zeCena.comFoto,.afCena.comFoto{background:transparent}
.zeCena.comFoto .zeImagem,.afCena.comFoto .afCenaArte{display:none}
.afCena.comFoto small,.afCena.comFoto>strong{text-shadow:0 1px 2px #4a1532,0 2px 10px #4a1532cc}

/* vida: a 1ª respira, a 2ª pulsa enquanto gira, a 3ª treme no fim do giro e estoura no prêmio */
.cenaFoto .cf1{animation:cfRespira 9s ease-in-out infinite alternate}
@keyframes cfRespira{to{transform:translateY(calc(var(--foco) * -100%)) scale(1.06)}}
.cenaFoto.cfGiro[data-fase="1"] .cf1{animation:cfRespira 9s ease-in-out infinite alternate,cfPisca 1.1s steps(1) infinite}
@keyframes cfPisca{0%,100%{filter:none}12%{filter:brightness(1.6) contrast(1.1)}18%{filter:none}26%{filter:brightness(1.3)}}
.cenaFoto.cfAfrodite.cfGiro[data-fase="1"] .cf1{animation:cfRespira 9s ease-in-out infinite alternate,cfBrilha 1.6s ease-in-out infinite alternate}
@keyframes cfBrilha{to{filter:brightness(1.15) saturate(1.15)}}
.cenaFoto.cfGiro[data-fase="2"] .cf2{animation:cfOlha .7s ease-in-out infinite alternate}
@keyframes cfOlha{from{filter:brightness(1)}to{filter:brightness(1.3) saturate(1.2)}}
.cenaFoto.cfGiro[data-fase="3"] .cf3{animation:cfTreme 1.6s ease-in-out infinite}
@keyframes cfTreme{0%,100%{transform:translateY(calc(var(--foco) * -100%)) scale(1)}50%{transform:translateY(calc(var(--foco) * -100%)) scale(1.035)}}
.cenaFoto.cfPremio[data-fase="3"] .cf3{animation:cfEstoura .32s ease-out 4}
@keyframes cfEstoura{0%,100%{filter:none}30%{filter:brightness(1.9) contrast(1.1)}}
.cenaFoto.cfPremio .cfVeu{animation:cfVeu .32s ease-out 4}
@keyframes cfVeu{30%{opacity:.2}}
.afCena.comFoto{justify-content:flex-end;padding-bottom:clamp(12px,2.6vw,20px)}