/*======================================================================
  LaVuRS — Camada de textura de fundo
  ----------------------------------------------------------------------
  Uma composição contínua que atravessa a página inteira usando três
  famílias de arte (em images/decorative/backdrop/):

    · topography — curvas de nível. É a "espinha" silenciosa: escala
      grande, opacidade mínima, dá profundidade sem chamar atenção.
    · leafs      — ramos botânicos em aquarela. São os acentos
      editoriais, sempre sangrando por uma borda da seção.
    · dots       — nuvens de pontos. Marcam ritmo e transição entre
      blocos, em escala menor.

  A composição alterna o lado do elemento principal a cada seção
  (direita → esquerda → direita…), criando um ziguezague que amarra a
  página de cima a baixo. Cada seção recebe no máximo duas camadas:
  ::before é o elemento principal e ::after o contrapeso.

  Nada aqui é interativo: as camadas ficam em z-index 0, sem eventos de
  ponteiro, e o conteúdo (.lv-container) sobe para z-index 1. A arte é
  recortada pela própria caixa do pseudo-elemento, então não é preciso
  overflow: hidden nas seções — o que quebraria position: sticky e já
  causou regressão neste projeto.
======================================================================*/

:root {
    /* Tiers de opacidade — mantêm o conjunto coerente. Fundos escuros
       precisam de valores menores porque a arte é clara. */
    --lv-texture-topo: 0.10;
    --lv-texture-topo-inverse: 0.16;
    --lv-texture-botanic: 0.13;
    --lv-texture-botanic-inverse: 0.16;
    --lv-texture-dots: 0.42;
    --lv-texture-dots-inverse: 0.32;
}

/* ---------- Base ---------- */

.lv-section {
    position: relative;
}

.lv-section>.lv-container,
.lv-footer>.lv-container {
    position: relative;
    z-index: 1;
}

#eventos::before,
#eventos::after,
#projetos::before,
#projetos::after,
#news::before,
#news::after,
#acervos::before,
#acervos::after,
#acoes-sociais::before,
#acoes-sociais::after,
#acesso-informacao::before,
#acesso-informacao::after,
#sobre::before,
#sobre::after,
.lv-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
}

/* ---------- Agenda de eventos (fundo branco) — peso à direita ---------- */

#eventos::before {
    background-image: url('../images/decorative/backdrop/topography2.webp');
    background-size: clamp(520px, 62vw, 1100px) auto;
    background-position: right -160px top -40px;
    opacity: var(--lv-texture-topo);
}

#eventos::after {
    background-image: url('../images/decorative/backdrop/dots3.webp');
    background-size: clamp(240px, 26vw, 420px) auto;
    background-position: left -150px bottom -140px;
    opacity: var(--lv-texture-dots);
}

/* ---------- Projetos (fundo verde) — peso à esquerda ---------- */

#projetos::before {
    background-image: url('../images/decorative/backdrop/leafs3.webp');
    background-size: clamp(280px, 30vw, 460px) auto;
    background-position: left -150px top 180px;
    opacity: var(--lv-texture-botanic-inverse);
}

#projetos::after {
    background-image: url('../images/decorative/backdrop/topography1.webp');
    background-size: clamp(400px, 48vw, 760px) auto;
    background-position: right -180px bottom -120px;
    opacity: var(--lv-texture-topo-inverse);
}

/* ---------- Notícias (offwhite) — peso à direita ---------- */

#news::before {
    background-image: url('../images/decorative/backdrop/dots1.webp');
    background-size: clamp(260px, 28vw, 440px) auto;
    background-position: right -140px top -200px;
    opacity: var(--lv-texture-dots);
}

#news::after {
    background-image: url('../images/decorative/backdrop/leafs1.webp');
    background-size: clamp(320px, 36vw, 600px) auto;
    background-position: left -170px bottom -90px;
    opacity: var(--lv-texture-botanic);
}

/* ---------- Acervos (offwhite) — peso à esquerda ---------- */

#acervos::before {
    background-image: url('../images/decorative/backdrop/topography3.webp');
    background-size: clamp(200px, 22vw, 360px) auto;
    background-position: left -110px center;
    opacity: var(--lv-texture-topo);
}

#acervos::after {
    background-image: url('../images/decorative/backdrop/dots2.webp');
    background-size: clamp(120px, 13vw, 200px) auto;
    background-position: right -60px top 60px;
    opacity: var(--lv-texture-dots);
}

/* ---------- Ações sociais — peso à direita ---------- */

#acoes-sociais::before {
    background-image: url('../images/decorative/backdrop/leafs2.webp');
    background-size: clamp(300px, 32vw, 520px) auto;
    background-position: right -140px bottom -150px;
    opacity: var(--lv-texture-botanic);
}

#acoes-sociais::after {
    background-image: url('../images/decorative/backdrop/topography2.webp');
    background-size: clamp(460px, 55vw, 900px) auto;
    background-position: left -220px top -120px;
    opacity: var(--lv-texture-topo);
}

/* ---------- Acesso à informação (offwhite) — peso à esquerda ---------- */

#acesso-informacao::before {
    background-image: url('../images/decorative/backdrop/topography1.webp');
    background-size: clamp(380px, 44vw, 700px) auto;
    background-position: left -200px bottom -140px;
    opacity: var(--lv-texture-topo);
}

#acesso-informacao::after {
    background-image: url('../images/decorative/backdrop/dots3.webp');
    background-size: clamp(240px, 26vw, 420px) auto;
    background-position: right -90px top -70px;
    opacity: var(--lv-texture-dots);
}

/* ---------- Quem somos — peso à direita, fechando o ziguezague ---------- */

#sobre::before {
    background-image: url('../images/decorative/backdrop/leafs1.webp');
    background-size: clamp(320px, 36vw, 580px) auto;
    background-position: right -190px bottom -110px;
    opacity: var(--lv-texture-botanic);
}

#sobre::after {
    background-image: url('../images/decorative/backdrop/dots1.webp');
    background-size: clamp(220px, 24vw, 380px) auto;
    background-position: left -170px top -190px;
    opacity: var(--lv-texture-dots);
}

/* ---------- Rodapé — contrapeso do ramo em SVG que já existe à esquerda ---------- */

.lv-footer::after {
    background-image: url('../images/decorative/backdrop/topography2.webp');
    background-size: clamp(420px, 50vw, 860px) auto;
    background-position: right -200px bottom -120px;
    opacity: var(--lv-texture-topo);
}

/* ---------- Responsivo ----------
   Em telas estreitas a arte compete com o texto e pesa no download que
   mais importa. Fica só a camada principal, menor e mais discreta. */

@media (max-width: 900px) {
    :root {
        --lv-texture-topo: 0.07;
        --lv-texture-topo-inverse: 0.12;
        --lv-texture-botanic: 0.09;
        --lv-texture-botanic-inverse: 0.12;
        --lv-texture-dots: 0.35;
        --lv-texture-dots-inverse: 0.24;
    }

    #eventos::after,
    #news::after,
    #acervos::after,
    #acoes-sociais::after,
    #acesso-informacao::after,
    #sobre::after,
    .lv-footer::after {
        display: none;
    }
}

@media print {

    #eventos::before,
    #eventos::after,
    #projetos::before,
    #projetos::after,
    #news::before,
    #news::after,
    #acervos::before,
    #acervos::after,
    #acoes-sociais::before,
    #acoes-sociais::after,
    #acesso-informacao::before,
    #acesso-informacao::after,
    #sobre::before,
    #sobre::after,
    .lv-footer::after {
        display: none;
    }
}