/* =========================================================
   MUSICALWORLD — INDEX: TOPO TRANSPARENTE (BARRA DO SISTEMA)
   Arquivo: css/index/index-topo-transparente.css

   Carregar POR ÚLTIMO no index.html (depois de aviso-composicoes.css).

   Objetivo: nenhum elemento pode pintar uma superfície opaca
   ou com desfoque na região superior da tela, para que o feed
   passe visível por trás da barra do sistema (hora, sinal, Wi-Fi).

   Só altera aparência; não mexe em lógica.
========================================================= */

/* 0. CASCA NOVA — mesma base da teste-topo.html (funciona no iPhone).
      html/body NÃO podem ter overflow próprio: no iOS isso cria um
      contêiner de rolagem e o conteúdo deixa de passar atrás da
      barra do sistema. O corte horizontal passa para o container. */
html,
body {
    overflow: visible !important;
    height: auto !important;
}

.app-container {
    overflow-x: clip;
}

/* 1. Conteúdo principal: sem backdrop-filter.
      Uma camada de desfoque do tamanho da página inteira cria
      uma superfície própria e faz o topo parecer "preso". */
.main-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 2. Camadas fixas que ficam no DOM o tempo todo.
      Mesmo invisíveis (opacity 0 / visibility hidden), elas
      cobrem a tela inteira e encostam no topo. O Safari/WebView
      pode usá-las para pintar a barra do sistema.
      Fechadas, passam a ficar FORA da tela (embaixo). */

.search-overlay:not(.ativo) {
    transform: translateY(100%);
}

.feed-publicacao-artistica-modal:not(.feed-publicacao-artistica-modal--aberto) {
    transform: translateY(100%);
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0s linear 0.2s;
}

/* 3. O cabeçalho já é transparente no celular; reforço para
      garantir que nenhum estado de rolagem devolva fundo. */
@media (max-width: 768px) {
    .navbar,
    .navbar.cabecalho-em-subida {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }
}