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

   IDEIA: hoje cada secção tem a sua própria imagem de fundo — .music usa
   themes-bg.jpg, .portal usa icons-bg.jpg, .bottom usa bottom-bg.jpg. Ao
   rolar nota-se a emenda entre elas.

   Aqui há UMA textura só, presa ao ecrã, e as secções passam a ser vidros
   coloridos por cima. Como o fundo não se mexe e o conteúdo sobe, o efeito
   de paralaxe é imediato — sem JS e sem background-attachment:fixed (que o
   iOS ignora e que custa a desenhar em ecrãs grandes).
   ========================================================================== */

/* §1 — A textura, presa ao ecrã ======================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--fundo, url("/uploads/images/icons-bg.jpg")) center / cover no-repeat;
  /* Escurece o suficiente para o texto se ler por cima em qualquer secção */
  filter: brightness(.55) saturate(.9);
}

/* Um véu por cima da textura: fecha os cantos e dá profundidade. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(115% 85% at 50% 40%, transparent 45%, rgba(5, 3, 2, .85) 100%),
    linear-gradient(rgba(8, 5, 3, .35), rgba(8, 5, 3, .55));
}

/* §2 — As secções deixam de ter fundo próprio ========================= */
/* Ficam só com o gradiente, para a textura de baixo se ver através. */
.music, .portal, .bottom {
  background-image: linear-gradient(rgba(4, 3, 2, .30), rgba(4, 3, 2, .60)) !important;
  background-color: transparent !important;
}

/* §3 — Correntes nas ombreiras ======================================== */
/* Um SVG que se repete na vertical, preso ao ecrã como o fundo. Escondem-se
   abaixo dos 992px: num telemóvel roubavam largura ao conteúdo. */
.corrente {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 44px;
  z-index: 3;
  pointer-events: none;
  background: url("/img/corrente.svg") repeat-y center top / 44px 64px;
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, .95));
}
.corrente--esq { left: 0 }
.corrente--dir { right: 0 }

/* A madeira da ombreira, por trás da corrente */
.corrente::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #16100a, #2a1c11 45%, #0d0906);
}

@media (max-width: 991px) { .corrente { display: none } }

/* §4 — Deriva lenta do fundo (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 estarmos a descer por uma parede em vez de a olhar de frente.

   Usa scroll-driven animations nativas — corre no compositor, fora da
   thread principal. Onde não houver suporte, fica simplesmente estático:
   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.08) translateY(-1.5%) }
    to   { transform: scale(1.08) translateY(1.5%) }
  }

  /* As correntes descem um pouco mais depressa que o fundo. São dois
     ritmos diferentes — é isso que faz a profundidade, não a velocidade. */
  .corrente {
    animation: corrente-desce linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes corrente-desce {
    from { background-position-y: 0 }
    to   { background-position-y: 220px }
  }
}

/* §5 — Menos movimento =============================================== */
@media (prefers-reduced-motion: reduce) {
  body::before, .corrente { animation: none !important }
}