/* ==========================================================================
   Portal — acabamento extra (carrega depois de portal.css, que já tem a "camada de suavidade").
   Só acrescenta: carrossel de banners em fade, entrada escalonada da home, sublinhado animado
   no menu e títulos de seção com filete dourado. Respeita "reduzir movimento".
   Para desfazer, basta remover o <link> de portal-polish.css em _partials.php.
   ========================================================================== */

@keyframes fx-subir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fx-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes fx-flutua { to { transform: translate(-4%, 6%) scale(1.08); } }

/* ----- Banners: troca em fade, leve zoom na imagem ativa e texto que sobe ----- */
.banners-home .carousel-item { transition: opacity .9s var(--curva, ease); }
.banners-home .carousel-item.active .banner-img { animation: fx-kenburns 9s ease-out both; }
.banners-home .carousel-item { overflow: hidden; }
.banners-home .carousel-item.active .banner-texto h2 { animation: fx-subir .7s var(--curva, ease) .15s both; }
.banners-home .carousel-item.active .banner-texto p  { animation: fx-subir .7s var(--curva, ease) .3s both; }
.banners-home .carousel-item.active .banner-texto .btn-pp { animation: fx-subir .7s var(--curva, ease) .45s both; }
.banners-home .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; border: 0; margin: 0 4px; transition: width .35s var(--curva, ease), opacity .35s; }
.banners-home .carousel-indicators .active { width: 30px; border-radius: 6px; }
.banners-home .carousel-control-prev, .banners-home .carousel-control-next { transition: opacity .3s; }

/* ----- Home: entrada escalonada do versículo e brilho suave ao fundo ----- */
.heroi .versiculo p      { animation: fx-subir .9s var(--curva, ease) .05s both; }
.heroi .versiculo footer { animation: fx-subir .9s var(--curva, ease) .3s both; }
.heroi-lado > :nth-child(1) { animation: fx-subir .9s var(--curva, ease) .2s both; }
.heroi-lado > :nth-child(2) { animation: fx-subir .9s var(--curva, ease) .32s both; }
.heroi-lado > :nth-child(3) { animation: fx-subir .9s var(--curva, ease) .44s both; }
.heroi::before { content: ""; position: absolute; top: -20%; right: -10%; width: 55vw; height: 55vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(201, 168, 76, .16), transparent 62%); pointer-events: none; animation: fx-flutua 14s ease-in-out infinite alternate; }

/* ----- Menu: sublinhado dourado que cresce ao passar o mouse ----- */
.topo .nav-link { position: relative; }
.topo .nav-link:not(.ativo)::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 0; height: 2px; background: var(--ouro);
  transform: translateX(-50%); transition: width .3s var(--curva, ease); }
.topo .nav-link:not(.ativo):hover::after { width: calc(100% - 1.7rem); }

/* ----- Títulos de seção com filete dourado ----- */
.cabeca h2 { position: relative; padding-bottom: .7rem; }
.cabeca h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--ouro); transition: width .5s var(--curva, ease); }
.cabeca:hover h2::after { width: 84px; }

/* ----- Botões: seta que avança, e redes do rodapé que sobem ----- */
.btn-pp i { transition: transform .3s var(--curva, ease); }
.btn-pp:hover i.bi-arrow-right, .btn-pp:hover i.bi-box-arrow-up-right { transform: translateX(3px); }
.rodape-site .redes a { display: inline-flex; transition: transform .3s var(--curva, ease), color .25s; }
.rodape-site .redes a:hover { transform: translateY(-3px) scale(1.1); }

/* ----- Imagens que carregam: aparecem em fade ----- */
img[loading="lazy"] { transition: opacity .6s var(--curva, ease); }

@media (prefers-reduced-motion: reduce) {
  .banners-home .carousel-item.active .banner-img, .heroi::before { animation: none; }
  .heroi .versiculo p, .heroi .versiculo footer, .heroi-lado > *, .banners-home .banner-texto * { animation: none !important; }
}