/* ==========================================================================
   Picä Tumilho — o fundo do site
   Carregar DEPOIS do site.css (senão os fundos das secções ganham).

   MODELO: o fundo é UM só, opaco, sempre visível e sempre igual — é a
   imagem do site. O que é transparente são os FUNDOS DAS SECÇÕES, para
   esta imagem se ver através de todas. Como a camada é fixa ao ecrã e o
   conteúdo sobe, o efeito de paralaxe sai de graça, sem JS.

   Sem véu e sem filtro por cima: a imagem aparece como ela é (o
   BackgroundSite.png já traz a vinheta e as correntes desenhadas).
   ========================================================================== */

/* §1 — A imagem do site, presa ao ecrã ================================= */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--fundo, url("/uploads/images/BackgroundSite.png")) center / cover no-repeat;
  /* OPACA: nada de filtro nem de véu por cima. */
}

/* §2 — NENHUMA secção tem fundo próprio =============================== */
/* É isto que faz o fundo parecer contínuo: as secções não pintam nada, e
   por isso não há emendas nem enquadramentos diferentes de secção para
   secção. Se um dia uma secção precisar mesmo de fundo próprio, usa-se a
   coluna site_sections.backpage — como exceção, não como regra. */
.section,
.section.hero, .section.music, .section.portal, .section.bottom,
.page-content, main {
  background: transparent !important;
}

/* §3 — Deriva lenta (opcional) ======================================== */
/* Com o fundo preso, a paralaxe já é máxima: ele não se mexe de todo. Isto
   acrescenta uma deriva quase impercetível ao longo da página, que dá a
   sensação de descer por uma parede em vez de a olhar de frente.
   Scroll-driven animations nativas — correm no compositor. Onde não houver
   suporte fica estático e ninguém dá por falta. */
@supports (animation-timeline: scroll()) {
  body::before {
    animation: fundo-deriva linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes fundo-deriva {
    from { transform: scale(1.06) translateY(-1.2%) }
    to   { transform: scale(1.06) translateY(1.2%) }
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important }
}