.tela {
    transition: opacity 300ms ease;
}

/* =========================================================
   Feedback de clique (global): "pop" ao tocar em botoes, abas de menu,
   setas, lupas e filtros. O JS adiciona .is-pressed no pointerdown e
   remove no animationend.
   A animacao roda no <img> INTERNO (que nao tem animacao de entrada nem
   transform), entao nao conflita com a entrada do botao (sem flash) e nao
   encolhe a ponto de mostrar o fundo atras (sem "cortes").
   ========================================================= */
.is-pressed img {
    animation: btnPress 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btnPress {
    0%   { transform: scale(1); }
    30%  { transform: scale(0.97); }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* =========================================================
   #tela-descanso
   Entrada elegante + loop de atracao. Dispara via .active,
   entao toca ao abrir e sempre que a tela voltar.
   ========================================================= */

/* Fundo: push-in cinematografico (entra ampliado/escuro e recua/clareia)
   e depois segue em Ken Burns lento. */
#tela-descanso.active .descanso-bg {
    transform-origin: 50% 45%;
    animation:
        descansoBgIn 2.8s cubic-bezier(0.16, 1, 0.3, 1) both,
        descansoZoom 22s ease-in-out 2.8s infinite alternate;
}

/* Glare: um brilho diagonal varre a tela inteira uma vez na abertura. */
#tela-descanso.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%);
    transform: translateX(-110%);
    animation: descansoSweep 1.7s ease-in 0.35s both;
}

/* Logo: pop com overshoot saindo do desfoque, depois flutua de leve.
   Entrada (transform+filter+opacity) -> float (transform) assume no fim. */
#tela-descanso.active .descanso-logo {
    animation:
        descansoLogoIn 1.5s cubic-bezier(0.34, 1.56, 0.42, 1) 0.4s both,
        descansoLogoFloat 7s ease-in-out 2s infinite;
}

/* "Toque para iniciar": sobe com pop e fica pulsando (respiracao). */
#tela-descanso.active .descanso-start {
    animation:
        descansoStartIn 0.9s cubic-bezier(0.34, 1.56, 0.42, 1) 1.8s both,
        descansoStartPulse 2.4s ease-in-out 2.8s infinite;
}

@keyframes descansoBgIn {
    from { transform: scale(1.16); filter: brightness(0.68) saturate(0.85); }
    to   { transform: scale(1);    filter: brightness(1) saturate(1); }
}

@keyframes descansoZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

@keyframes descansoSweep {
    0%   { transform: translateX(-110%); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}

@keyframes descansoLogoIn {
    0%   { opacity: 0; filter: blur(22px); transform: scale(0.72); }
    60%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0);    transform: scale(1); }
}

@keyframes descansoLogoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.1vh); }
}

@keyframes descansoStartIn {
    from { opacity: 0; transform: translateY(2.8vh) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes descansoStartPulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.4;  transform: scale(1.06); }
}

/* =========================================================
   #tela-menu
   Lado esquerdo entra deslizando (painel + mulher com Ken Burns);
   os 5 botoes da direita entram em cascata (stagger).
   ========================================================= */

/* Painel laranja da esquerda: revela por mascara (wipe da esquerda). */
#tela-menu.active .menu-retangulo {
    animation: menuPanelWipe 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Mulher: entra com parallax (vem de mais longe) + zoom-out saindo do
   desfoque; depois segue em Ken Burns lento. Cria profundidade. */
#tela-menu.active .menu-mulher {
    transform-origin: 40% 50%;
    animation:
        menuWomanIn 1.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both,
        menuWomanZoom 22s ease-in-out 2.1s infinite alternate;
}

/* Glare: brilho diagonal varre a tela uma vez na abertura. */
#tela-menu.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
    transform: translateX(-110%);
    animation: menuSweep 2s ease-in 0.5s both;
}

/* Linhas decorativas: fade suave. */
#tela-menu.active .menu-line {
    animation: menuFade 1.1s ease-out 0.6s both;
}

/* Logo: foco (blur -> nitido) + leve escala; depois flutua de leve. */
#tela-menu.active .menu-logo {
    animation:
        menuLogoIn 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both,
        menuLogoFloat 7s ease-in-out 2.3s infinite;
}

/* Frase: sobe com fade, depois do logo. */
#tela-menu.active .menu-frase {
    animation: menuRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1.15s both;
}

/* Botoes: entram da direita com pop (desliza + escala), em cascata longa. */
#tela-menu.active .menu-btn {
    animation: menuBtnIn 0.85s cubic-bezier(0.34, 1.56, 0.42, 1) both;
}

#tela-menu.active .menu-btn-projeto       { animation-delay: 1.20s; }
#tela-menu.active .menu-btn-localizacao   { animation-delay: 1.35s; }
#tela-menu.active .menu-btn-galeria       { animation-delay: 1.50s; }
#tela-menu.active .menu-btn-filme         { animation-delay: 1.65s; }
#tela-menu.active .menu-btn-institucional { animation-delay: 1.80s; }

@keyframes menuPanelWipe {
    from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-1.5vw); }
    to   { opacity: 1; clip-path: inset(0 0 0 0);     transform: translateX(0); }
}

@keyframes menuWomanIn {
    from { opacity: 0; transform: translateX(-5vw) scale(1.09); filter: blur(9px); }
    to   { opacity: 1; transform: translateX(0) scale(1);       filter: blur(0); }
}

@keyframes menuWomanZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}

@keyframes menuSweep {
    0%   { transform: translateX(-110%); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}

@keyframes menuFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes menuLogoIn {
    0%   { opacity: 0; filter: blur(16px); transform: scale(0.85); }
    60%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0);    transform: scale(1); }
}

@keyframes menuLogoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.9vh); }
}

@keyframes menuRise {
    from { opacity: 0; transform: translateY(2.8vh); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes menuBtnIn {
    from { opacity: 0; transform: translateX(5vw) scale(0.9); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* =========================================================
   #tela-institucional
   Revelacao encadeada: painel surge -> banner do logo ->
   coluna de texto em sequencia (com o traco "desenhando") ->
   os 3 itens em cascata (icone da pop, texto desliza).
   ========================================================= */

#tela-institucional.active .inst-painel {
    animation: instPanelIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#tela-institucional.active .inst-retangulo {
    animation: instRetangIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#tela-institucional.active .inst-line-top-right,
#tela-institucional.active .inst-line-bottom-left {
    animation: instFade 1s ease-out 0.3s both;
}

/* Glare: brilho diagonal varre a tela uma vez. */
#tela-institucional.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
    transform: translateX(-110%);
    animation: instSweep 2s ease-in 0.4s both;
}

/* Banner do logo: desliza da esquerda. */
#tela-institucional.active .inst-logo {
    animation: instLogoIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* Coluna de texto (esquerda) em sequencia. */
#tela-institucional.active .inst-overline {
    animation: instRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

#tela-institucional.active .inst-overline-traco {
    transform-origin: left center;
    animation: instUnderline 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.68s both;
}

#tela-institucional.active .inst-titulo {
    animation: instTituloIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}

#tela-institucional.active .inst-desc {
    animation: instRise 1s cubic-bezier(0.22, 1, 0.36, 1) 1s both;
}

/* Itens da direita: cascata (icone pop + texto desliza). */
#tela-institucional.active .inst-item-icone {
    animation: instIconPop 0.7s cubic-bezier(0.34, 1.56, 0.42, 1) both;
}

#tela-institucional.active .inst-item-titulo,
#tela-institucional.active .inst-item-desc {
    animation: instTextIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#tela-institucional.active .inst-item-1 .inst-item-icone { animation-delay: 0.95s; }
#tela-institucional.active .inst-item-1 .inst-item-titulo,
#tela-institucional.active .inst-item-1 .inst-item-desc  { animation-delay: 1.03s; }

#tela-institucional.active .inst-item-2 .inst-item-icone { animation-delay: 1.20s; }
#tela-institucional.active .inst-item-2 .inst-item-titulo,
#tela-institucional.active .inst-item-2 .inst-item-desc  { animation-delay: 1.28s; }

#tela-institucional.active .inst-item-3 .inst-item-icone { animation-delay: 1.45s; }
#tela-institucional.active .inst-item-3 .inst-item-titulo,
#tela-institucional.active .inst-item-3 .inst-item-desc  { animation-delay: 1.53s; }

/* X: fade suave. */
#tela-institucional.active .inst-close {
    animation: instFade 0.7s ease-out 0.4s both;
}

@keyframes instPanelIn {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes instRetangIn {
    from { opacity: 0; transform: translateX(3vw); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes instSweep {
    0%   { transform: translateX(-110%); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}

@keyframes instLogoIn {
    from { opacity: 0; transform: translateX(-3vw); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes instRise {
    from { opacity: 0; transform: translateY(2vh); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes instUnderline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes instTituloIn {
    0%   { opacity: 0; filter: blur(14px); transform: scale(0.92); }
    60%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0);    transform: scale(1); }
}

@keyframes instIconPop {
    from { opacity: 0; transform: scale(0.55); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes instTextIn {
    from { opacity: 0; transform: translateX(1.6vw); }
    to   { opacity: 1; transform: translateX(0); }
}

/* =========================================================
   #tela-filme
   Painel do video surge, decorativos entram, o Play da pop e
   fica pulsando (respiracao) com a mao em leve toque.
   Play e mao sao centralizados por transform -> o translate
   base fica embutido nos keyframes.
   ========================================================= */

#tela-filme.active .filme-retangulo {
    animation: filmeRetangIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#tela-filme.active #filme-container {
    animation: filmePanelIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

#tela-filme.active .filme-line-top-right,
#tela-filme.active .filme-line-bottom-left {
    animation: filmeFade 1s ease-out 0.3s both;
}

/* Glare: brilho diagonal varre a tela uma vez. */
#tela-filme.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
    transform: translateX(-110%);
    animation: filmeSweep 2s ease-in 0.4s both;
}

/* Play: pop na entrada + pulsacao continua (respiracao). */
#tela-filme.active .filme-play {
    animation:
        filmePlayIn 0.7s cubic-bezier(0.34, 1.56, 0.42, 1) 0.7s both,
        filmePlayPulse 2.2s ease-in-out 1.5s infinite;
}

/* Mao: entra com o play e da um leve toque (bob) continuo. */
#tela-filme.active .filme-mao {
    animation:
        filmeMaoIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both,
        filmeMaoBob 2.2s ease-in-out 1.6s infinite;
}

#tela-filme.active .filme-close {
    animation: filmeFade 0.7s ease-out 0.35s both;
}

@keyframes filmeRetangIn {
    from { opacity: 0; transform: translateX(3vw); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes filmePanelIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes filmeSweep {
    0%   { transform: translateX(-110%); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}

@keyframes filmeFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* translate(-50%,-50%) preserva a centralizacao original do Play. */
@keyframes filmePlayIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes filmePlayPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.09); }
}

/* A mao mantem o offset original (translate -50%) + o movimento. */
@keyframes filmeMaoIn {
    from { opacity: 0; transform: translate(-50%, -50%) translateY(1.2vh); }
    to   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}

@keyframes filmeMaoBob {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(0.8vh); }
}

/* =========================================================
   #tela-galeria
   Entrada: a foto revela com zoom-out, o card de titulo desliza
   da esquerda e as setas dao pop. Ao navegar (classe .galeria-trocando
   via JS), a foto e o titulo fazem um crossfade com leve zoom.
   ========================================================= */

#tela-galeria.active .galeria-retangulo {
    animation: galeriaFade 1s ease-out both;
}

#tela-galeria.active .galeria-line-top-left,
#tela-galeria.active .galeria-line-bottom-right {
    animation: galeriaFade 1s ease-out 0.3s both;
}

#tela-galeria.active .galeria-foto {
    animation: galeriaFotoIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Glare: brilho diagonal varre a tela uma vez. */
#tela-galeria.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
    transform: translateX(-110%);
    animation: galeriaSweep 2s ease-in 0.4s both;
}

#tela-galeria.active .galeria-titulo-card {
    animation: galeriaCardIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

#tela-galeria.active .galeria-seta {
    animation: galeriaSetaIn 0.7s cubic-bezier(0.34, 1.56, 0.42, 1) both;
}

#tela-galeria.active .galeria-seta-esquerda { animation-delay: 0.9s; }
#tela-galeria.active .galeria-seta-direita  { animation-delay: 1s; }

#tela-galeria.active .galeria-close {
    animation: galeriaFade 0.7s ease-out 0.35s both;
}

/* Troca de titulo ao navegar (maior especificidade -> vence a entrada).
   A foto nova nao anima: ela ja aparece pronta sob o fade da anterior. */
#tela-galeria.active .galeria-foto.galeria-trocando {
    animation: none;
}

#tela-galeria.active .galeria-titulo-card.galeria-trocando {
    animation: galeriaCardSwap 0.5s ease both;
}

/* Troca de foto: fade simples — a anterior esmaece por cima da nova. */
#tela-galeria.active .galeria-foto-anterior.galeria-fade {
    animation: galeriaFotoFade 0.5s ease both;
}

@keyframes galeriaFotoFade {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes galeriaFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes galeriaFotoIn {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes galeriaSweep {
    0%   { transform: translateX(-110%); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}

@keyframes galeriaCardIn {
    from { opacity: 0; transform: translateX(-2.5vw); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes galeriaSetaIn {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes galeriaCardSwap {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =========================================================
   #tela-localizacao-mapa
   Painel revela, titulo sobe, o marcador central da pop e os
   8 pins "caem" no mapa em cascata.
   ========================================================= */

#tela-localizacao-mapa.active .localizacao-retangulo,
#tela-localizacao-mapa.active .localizacao-line-top-left,
#tela-localizacao-mapa.active .localizacao-line-bottom-right {
    animation: localFade 1s ease-out 0.25s both;
}

#tela-localizacao-mapa.active .localizacao-painel {
    animation: localPanelIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#tela-localizacao-mapa.active .localizacao-titulo {
    animation: localRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

#tela-localizacao-mapa.active .localizacao-pin-logo {
    animation: localPinDrop 0.7s cubic-bezier(0.34, 1.56, 0.42, 1) 0.55s both;
}

#tela-localizacao-mapa.active .localizacao-pin {
    animation: localPinDrop 0.6s cubic-bezier(0.34, 1.56, 0.42, 1) both;
}

#tela-localizacao-mapa.active .localizacao-pin-01 { animation-delay: 0.85s; }
#tela-localizacao-mapa.active .localizacao-pin-02 { animation-delay: 0.95s; }
#tela-localizacao-mapa.active .localizacao-pin-03 { animation-delay: 1.05s; }
#tela-localizacao-mapa.active .localizacao-pin-04 { animation-delay: 1.15s; }
#tela-localizacao-mapa.active .localizacao-pin-05 { animation-delay: 1.25s; }
#tela-localizacao-mapa.active .localizacao-pin-06 { animation-delay: 1.35s; }
#tela-localizacao-mapa.active .localizacao-pin-07 { animation-delay: 1.45s; }
#tela-localizacao-mapa.active .localizacao-pin-08 { animation-delay: 1.55s; }

#tela-localizacao-mapa.active .localizacao-menu-btn {
    animation: localMenuIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

#tela-localizacao-mapa.active .localizacao-close {
    animation: localFade 0.7s ease-out 0.35s both;
}

#tela-localizacao-mapa.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
    transform: translateX(-110%);
    animation: localSweep 2s ease-in 0.4s both;
}

@keyframes localFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes localPanelIn {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes localRise {
    from { opacity: 0; transform: translateY(2vh); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes localPinDrop {
    from { opacity: 0; transform: translateY(-3vh) scale(0.8); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes localMenuIn {
    from { opacity: 0; transform: translateX(3vw); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes localSweep {
    0%   { transform: translateX(-110%); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}

/* =========================================================
   #tela-localizacao-convivencias
   Painel + faixa entram, os 5 filtros pipocam em cascata e o
   menu desliza. Os cards de lugares ganham entrada ao escolher
   a categoria (classe .conv-cards-in aplicada via JS).
   ========================================================= */

#tela-localizacao-convivencias.active .convivencias-retangulo,
#tela-localizacao-convivencias.active .convivencias-line-left {
    animation: localFade 1s ease-out 0.2s both;
}

#tela-localizacao-convivencias.active .convivencias-painel {
    animation: localPanelIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#tela-localizacao-convivencias.active .convivencias-faixa {
    animation: convFaixaIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

#tela-localizacao-convivencias.active .convivencias-desc {
    animation: localFade 0.9s ease-out 0.6s both;
}

#tela-localizacao-convivencias.active .convivencias-proximo {
    animation: localFade 0.9s ease-out 0.75s both;
}

#tela-localizacao-convivencias.active .convivencias-filtro {
    animation: convFiltroIn 0.7s cubic-bezier(0.34, 1.56, 0.42, 1) both;
}

#tela-localizacao-convivencias.active .convivencias-filtro-cultura       { animation-delay: 0.7s; }
#tela-localizacao-convivencias.active .convivencias-filtro-saude         { animation-delay: 0.8s; }
#tela-localizacao-convivencias.active .convivencias-filtro-ensino        { animation-delay: 0.9s; }
#tela-localizacao-convivencias.active .convivencias-filtro-supermercados { animation-delay: 1s; }
#tela-localizacao-convivencias.active .convivencias-filtro-servicos      { animation-delay: 1.1s; }

#tela-localizacao-convivencias.active .convivencias-menu-btn {
    animation: localMenuIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

#tela-localizacao-convivencias.active .convivencias-close {
    animation: localFade 0.7s ease-out 0.35s both;
}

#tela-localizacao-convivencias.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
    transform: translateX(-110%);
    animation: localSweep 2s ease-in 0.4s both;
}

/* Cards de lugares: entram ao selecionar a categoria (nao no rotacionar). */
#convivencias-carrossel.conv-cards-in .convivencias-card {
    animation: convCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#convivencias-carrossel.conv-cards-in .convivencias-card:nth-child(1) { animation-delay: 0s; }
#convivencias-carrossel.conv-cards-in .convivencias-card:nth-child(2) { animation-delay: 0.07s; }
#convivencias-carrossel.conv-cards-in .convivencias-card:nth-child(3) { animation-delay: 0.14s; }
#convivencias-carrossel.conv-cards-in .convivencias-card:nth-child(4) { animation-delay: 0.21s; }
#convivencias-carrossel.conv-cards-in .convivencias-card:nth-child(5) { animation-delay: 0.28s; }
#convivencias-carrossel.conv-cards-in .convivencias-card:nth-child(6) { animation-delay: 0.35s; }

@keyframes convFaixaIn {
    from { opacity: 0; transform: translateX(-3vw); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes convFiltroIn {
    from { opacity: 0; transform: translateY(2.4vh) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes convCardIn {
    from { opacity: 0; transform: translateY(2.4vh) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Tutorial da mao (convivencias): surge subindo -> filtro SAUDE -> toque
   (liga) -> seta "proximo" -> toque (rotaciona) -> volta ao filtro -> toque
   (desliga, limpa tudo) -> some. Duracao 7s.
   Os cliques (JS) sao sincronizados com os "toques" (dips de escala). */
.convivencias-mao.conv-tutorial {
    animation: convTutorialHand 7s ease-in-out both;
}

/* =========================================================
   #tela-projeto-implantacao / -unidades / -comparativo
   Entrada da tela + revelacao do conteudo. O conteudo do
   pavimento/unidade ativo anima tanto na entrada quanto ao
   trocar de estado (regra ligada a .floor-active / .unidade-active).
   ========================================================= */

/* ---- Implantacao ---- */
#tela-projeto-implantacao.active .implantacao-painel {
    animation: projPanelIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#tela-projeto-implantacao.active .implantacao-retangulo,
#tela-projeto-implantacao.active .implantacao-line-top-left,
#tela-projeto-implantacao.active .implantacao-line-bottom-right {
    animation: projFade 1s ease-out 0.25s both;
}

#tela-projeto-implantacao.active .implantacao-menu-btn {
    animation: projMenuIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

#tela-projeto-implantacao.active .implantacao-close,
#tela-projeto-implantacao.active .implantacao-seta {
    animation: projFade 0.7s ease-out 0.35s both;
}

/* conteudo do pavimento ativo (entrada + troca) */
#tela-projeto-implantacao.active .implantacao-planta.floor-active {
    animation: projPlantaIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#tela-projeto-implantacao.active .implantacao-titulo.floor-active,
#tela-projeto-implantacao.active .implantacao-bolotario.floor-active {
    animation: projFade 0.6s ease-out 0.1s both;
}

#tela-projeto-implantacao.active .implantacao-lupa.floor-active {
    animation: projFade 0.6s ease-out 0.35s both;
}

/* Tutorial da mao (implantacao): surge por baixo -> pin 01 -> toque (abre o
   card) -> pausa -> toque (fecha o card) -> some. Duracao 4.5s.
   Cliques (JS) sincronizados com os "toques" (dips de escala). */
.implantacao-mao-tutorial.impl-tutorial {
    animation: implantaTutorialHand 4.5s ease-in-out both;
}

@keyframes implantaTutorialHand {
    0%   { left: 43.53vw; top: 52vh;    opacity: 0; transform: scale(1); }
    9%   { left: 43.53vw; top: 45.84vh; opacity: 1; transform: scale(1); }
    18%  { transform: scale(1); }
    /* 1o toque (~24% * 4.5s ~= 1.05s) -> abre o card */
    23%  { transform: scale(0.82); }
    28%  { transform: scale(1); }
    60%  { transform: scale(1); }
    /* 2o toque (~66% * 4.5s ~= 2.95s) -> fecha o card */
    65%  { transform: scale(0.82); }
    70%  { transform: scale(1); }
    82%  { left: 43.53vw; top: 45.84vh; opacity: 1; }
    100% { left: 43.53vw; top: 52vh;    opacity: 0; transform: scale(1); }
}

/* Tutorial da mao (comparativo): surge na 1a planta -> toque (abre) ->
   vai a 2a planta -> toque (abre) -> toque (fecha a 2a) -> volta a 1a ->
   toque (fecha a 1a) -> vai ao "?" -> toque (abre a gaveta) -> some.
   Duracao 11s. Movimentos com ease-in-out suave; cliques (JS) sincronizados
   com os "toques" (dips de escala). */
.comparativo-mao-tutorial.comp-tutorial {
    animation: comparativoTutorialHand 11s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes comparativoTutorialHand {
    0%   { opacity: 0; transform: translate(0, 2vh) scale(1); }
    6%   { opacity: 1; transform: translate(0, 0) scale(1); }
    /* toque 1 (~10% -> 1.1s): abre planta 1 */
    10%  { transform: translate(0, 0) scale(0.86); }
    14%  { transform: translate(0, 0) scale(1); }
    /* vai a planta 2 */
    24%  { transform: translate(11.46vw, -1.4vh) scale(1); }
    /* toque 2 (~28% -> 3.08s): abre planta 2 */
    28%  { transform: translate(11.46vw, -1.4vh) scale(0.86); }
    32%  { transform: translate(11.46vw, -1.4vh) scale(1); }
    40%  { transform: translate(11.46vw, -1.4vh) scale(1); }
    /* toque 3 (~44% -> 4.84s): fecha planta 2 */
    44%  { transform: translate(11.46vw, -1.4vh) scale(0.86); }
    48%  { transform: translate(11.46vw, -1.4vh) scale(1); }
    /* volta a planta 1 */
    58%  { transform: translate(0, 0) scale(1); }
    /* toque 4 (~62% -> 6.82s): fecha planta 1 */
    62%  { transform: translate(0, 0) scale(0.86); }
    66%  { transform: translate(0, 0) scale(1); }
    /* vai ao "?" (canto esquerdo) */
    78%  { opacity: 1; transform: translate(-29.48vw, -54.23vh) scale(1); }
    /* toque 5 (~82% -> 9.02s): abre a gaveta de duvida */
    82%  { transform: translate(-29.48vw, -54.23vh) scale(0.86); }
    86%  { opacity: 1; transform: translate(-29.48vw, -54.23vh) scale(1); }
    94%  { opacity: 1; transform: translate(-29.48vw, -54.23vh) scale(1); }
    100% { opacity: 0; transform: translate(-29.48vw, -54.23vh) scale(1); }
}

#tela-projeto-implantacao.active .implantacao-pin.floor-active {
    animation: projPinPop 0.5s cubic-bezier(0.34, 1.56, 0.42, 1) 0.25s both;
}

#tela-projeto-implantacao.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
    transform: translateX(-110%);
    animation: projSweep 2s ease-in 0.4s both;
}

/* ---- Pavimentos ---- */
#tela-projeto-pavimento.active .pavimento-painel {
    animation: projPanelIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#tela-projeto-pavimento.active .pavimento-retangulo,
#tela-projeto-pavimento.active .pavimento-line-top-left,
#tela-projeto-pavimento.active .pavimento-line-bottom-right {
    animation: projFade 1s ease-out 0.25s both;
}

#tela-projeto-pavimento.active .pavimento-menu-btn {
    animation: projMenuIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

#tela-projeto-pavimento.active .pavimento-close,
#tela-projeto-pavimento.active .pavimento-seta {
    animation: projFade 0.7s ease-out 0.35s both;
}

/* conteudo do pavimento ativo (entrada + troca via setas) */
#tela-projeto-pavimento.active .pavimento-planta.pav-active {
    animation: projPlantaIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#tela-projeto-pavimento.active .pavimento-titulo.pav-active {
    animation: projFade 0.6s ease-out 0.1s both;
}

#tela-projeto-pavimento.active .pavimento-lupa.pav-active {
    animation: projFade 0.6s ease-out 0.35s both;
}

/* ---- Unidades ---- */
#tela-projeto-unidades.active .unidades-painel {
    animation: projPanelIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#tela-projeto-unidades.active .unidades-retangulo,
#tela-projeto-unidades.active .unidades-line-top-right,
#tela-projeto-unidades.active .unidades-line-bottom-left {
    animation: projFade 1s ease-out 0.25s both;
}

#tela-projeto-unidades.active .unidades-menu-btn {
    animation: projMenuIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

#tela-projeto-unidades.active .unidades-close,
#tela-projeto-unidades.active .unidades-seta {
    animation: projFade 0.7s ease-out 0.35s both;
}

/* conteudo da unidade ativa (entrada + troca) */
#tela-projeto-unidades.active .unidades-planta.unidade-active {
    animation: projPlantaIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#tela-projeto-unidades.active .unidades-titulo.unidade-active,
#tela-projeto-unidades.active .unidades-desc.unidade-active {
    animation: projRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

#tela-projeto-unidades.active .unidades-lupa.unidade-active,
#tela-projeto-unidades.active .unidades-mao.unidade-active {
    animation: projFade 0.6s ease-out 0.35s both;
}

#tela-projeto-unidades.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
    transform: translateX(-110%);
    animation: projSweep 2s ease-in 0.4s both;
}

/* ---- Comparativo ---- */
#tela-projeto-comparativo.active .comparativo-painel {
    animation: projPanelIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#tela-projeto-comparativo.active .comparativo-retangulo,
#tela-projeto-comparativo.active .comparativo-line-top-right,
#tela-projeto-comparativo.active .comparativo-line-bottom-right {
    animation: projFade 1s ease-out 0.25s both;
}

#tela-projeto-comparativo.active .comparativo-duvida {
    animation: projRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

#tela-projeto-comparativo.active .comparativo-mini-base {
    animation: projFade 0.8s ease-out 0.35s both;
}

/* backwards (nao both): segura o estado inicial durante o delay, mas NAO fica
   preso no fim -> libera os estados de selecao/tap sem precisar de !important. */
#tela-projeto-comparativo.active .comparativo-mini {
    animation: projMiniPop 0.6s cubic-bezier(0.34, 1.56, 0.42, 1) backwards;
}

#tela-projeto-comparativo.active .comparativo-mini-2750 { animation-delay: 0.55s; }
#tela-projeto-comparativo.active .comparativo-mini-30   { animation-delay: 0.65s; }
#tela-projeto-comparativo.active .comparativo-mini-3850 { animation-delay: 0.75s; }
#tela-projeto-comparativo.active .comparativo-mini-47   { animation-delay: 0.85s; }

/* Toque na miniatura: press rapido (afunda e volta com leve overshoot).
   O JS adiciona .comparativo-mini-tap no clique e remove no animationend. */
.comparativo-mini.comparativo-mini-tap {
    animation: comparativoMiniTap 0.32s cubic-bezier(0.34, 1.56, 0.42, 1);
}

@keyframes comparativoMiniTap {
    0%   { transform: scale(1); }
    30%  { transform: scale(0.88); }
    70%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

#tela-projeto-comparativo.active .comparativo-menu-btn {
    animation: projMenuIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

#tela-projeto-comparativo.active .comparativo-close {
    animation: projFade 0.7s ease-out 0.35s both;
}

#tela-projeto-comparativo.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
    transform: translateX(-110%);
    animation: projSweep 2s ease-in 0.4s both;
}

@keyframes projFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes projPanelIn {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes projRise {
    from { opacity: 0; transform: translateY(2vh); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes projPlantaIn {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes projPinPop {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes projMenuIn {
    from { opacity: 0; transform: translateX(3vw); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes projMiniPop {
    from { opacity: 0; transform: translateY(2vh) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes projSweep {
    0%   { transform: translateX(-110%); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}

@keyframes convTutorialHand {
    /* surge subindo por baixo, ate o filtro SAUDE */
    0%   { left: 47.25vw; top: 84vh;    opacity: 0; transform: scale(1); }
    6%   { left: 47.25vw; top: 77.86vh; opacity: 1; transform: scale(1); }
    13%  { left: 47.25vw; top: 77.86vh; transform: scale(1); }
    /* 1o toque no filtro (~18% * 7s ~= 1.26s) -> liga SAUDE */
    16%  { transform: scale(0.8); }
    20%  { transform: scale(1); }
    24%  { left: 47.25vw; top: 77.86vh; }
    /* viagem ate a seta "proximo" */
    38%  { left: 73.57vw; top: 38.91vh; transform: scale(1); }
    /* 2o toque na seta (~44% * 7s ~= 3.08s) -> rotaciona */
    42%  { transform: scale(0.8); }
    46%  { transform: scale(1); }
    52%  { left: 73.57vw; top: 38.91vh; }
    /* volta ao filtro SAUDE */
    68%  { left: 47.25vw; top: 77.86vh; transform: scale(1); }
    /* 3o toque no filtro (~74% * 7s ~= 5.18s) -> desliga e limpa */
    72%  { transform: scale(0.8); }
    76%  { transform: scale(1); }
    84%  { left: 47.25vw; top: 77.86vh; opacity: 1; }
    /* some (desce um pouco e desaparece) */
    100% { left: 47.25vw; top: 84vh;    opacity: 0; }
}

/* =========================================================
   Pin cards (implantacao) e Zoom: entrada e saida.
   A saida usa a classe .fechando (mantem display:block ate
   a animacao terminar), aplicada pelo script.js.
   ========================================================= */

.implantacao-pin-card.active {
    animation: pinCardIn 0.32s cubic-bezier(0.34, 1.56, 0.42, 1) both;
}

.implantacao-pin-card.fechando {
    display: block;
    animation: pinCardOut 0.22s ease-in both;
}

@keyframes pinCardIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pinCardOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.9); }
}

.zoom-overlay.active {
    animation: zoomOverlayIn 0.28s ease-out both;
}

.zoom-overlay.active .zoom-overlay-img {
    animation: zoomImgIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.zoom-overlay.fechando {
    display: block;
    animation: zoomOverlayOut 0.25s ease-in both;
}

.zoom-overlay.fechando .zoom-overlay-img {
    animation: zoomImgOut 0.25s ease-in both;
}

@keyframes zoomOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes zoomOverlayOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes zoomImgIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes zoomImgOut {
    from { transform: scale(1); }
    to   { transform: scale(0.96); }
}