/* Banner da home · leitura do texto sobre a imagem (protótipo aprovado em 30/10/2026; tema UDI 0.1.38).
   Só vale para banners com a aba Leitura (VRK Igreja 0.2.47+): sem data-fundo, o banner fica como era.
   Atributos no .bn: data-fundo (degrade | suave | atmosfera | veu | caixa | nenhum), data-pos (esq | centro | dir),
   data-cel (sobre | abaixo | imagem), data-tom (claro | escuro). Variáveis: --int (0 a 1, intensidade),
   --cor (r, g, b do fundo: navy/creme do DS, ou a cor da imagem no "veu"), --fx/--fy e --mfx/--mfy (ponto de foco). */

.bn { --int: .6; --cor: 4, 22, 70; --dir: 90deg; }
.bn[data-tom="escuro"] { --cor: 248, 246, 241; } /* branco quebrado neutro, sem o creme amarelado */
.bn[data-fundo="veu"] { --cor: var(--cor-img, 4, 22, 70); }
.bn[data-fundo] .bn__img--d { object-position: var(--fx, 50%) var(--fy, 50%); }
.bn[data-pos="dir"] { --dir: 270deg; }

/* véu: um só elemento, o desenho muda pelo modo */
.bn[data-fundo] .bn__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: none; }
.bn:is([data-fundo="degrade"], [data-fundo="veu"]) .bn__veil {
  background: linear-gradient(var(--dir), rgba(var(--cor), calc(.92 * var(--int))) 0%, rgba(var(--cor), calc(.62 * var(--int))) 30%, rgba(var(--cor), calc(.22 * var(--int))) 50%, rgba(var(--cor), 0) 66%); }
.bn[data-fundo="suave"] .bn__veil {
  background: linear-gradient(var(--dir), rgba(var(--cor), calc(.6 * var(--int))) 0%, rgba(var(--cor), calc(.32 * var(--int))) 26%, rgba(var(--cor), calc(.1 * var(--int))) 42%, rgba(var(--cor), 0) 56%); }
.bn[data-pos="centro"]:is([data-fundo="degrade"], [data-fundo="veu"]) .bn__veil { background: radial-gradient(60% 75% at 50% 50%, rgba(var(--cor), calc(.85 * var(--int))) 0%, rgba(var(--cor), calc(.45 * var(--int))) 45%, rgba(var(--cor), 0) 80%); }
.bn[data-pos="centro"][data-fundo="suave"] .bn__veil { background: radial-gradient(55% 70% at 50% 50%, rgba(var(--cor), calc(.55 * var(--int))) 0%, rgba(var(--cor), 0) 75%); }

/* atmosfera: a própria imagem, desfocada, do lado do texto, que se dissolve na foto. Regulável (0.1.41):
   --afx/--afy foco (que parte da imagem vira atmosfera; no celular --amfx/--amfy), --azoom aproximação,
   --ablur desfoque, --acob cobertura (o quanto tinge), --aalc até onde vai e --aborda a suavidade da borda
   (no celular --amalc), data-atm-esp espelhada. Sem eles, a atmosfera de sempre. */
.bn__atm { display: none; position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; --a-ate: var(--aalc, 68%); --a-solido: max(0%, calc(var(--a-ate) - var(--aborda, 34%))); }
.bn[data-fundo="atmosfera"] .bn__atm { display: block;
  -webkit-mask-image: linear-gradient(var(--dir), #000 0%, #000 var(--a-solido), transparent var(--a-ate)); mask-image: linear-gradient(var(--dir), #000 0%, #000 var(--a-solido), transparent var(--a-ate)); }
.bn[data-pos="centro"][data-fundo="atmosfera"] .bn__atm { -webkit-mask-image: radial-gradient(calc(var(--a-ate) * .85) calc(var(--a-ate) * 1.05) at 50% 50%, #000 0%, #000 var(--a-solido), transparent 100%); mask-image: radial-gradient(calc(var(--a-ate) * .85) calc(var(--a-ate) * 1.05) at 50% 50%, #000 0%, #000 var(--a-solido), transparent 100%); }
.bn__atm img { position: absolute; inset: calc(-2 * var(--ablur, 42px)); width: calc(100% + 4 * var(--ablur, 42px)); height: calc(100% + 4 * var(--ablur, 42px)); object-fit: cover;
  object-position: var(--afx, 50%) var(--afy, 50%); transform-origin: var(--afx, 50%) var(--afy, 50%); filter: blur(var(--ablur, 42px)) saturate(1.15); transform: scale(var(--azoom, 1.1)); }
.bn[data-atm-esp] .bn__atm img { transform: scale(calc(-1 * var(--azoom, 1.1)), var(--azoom, 1.1)); }
.bn__atm::after { content: ''; position: absolute; inset: 0; background: rgba(var(--cor), var(--acob, calc(.25 + .5 * var(--int)))); }

/* caixa: um bloco de vidro só atrás do texto */
.bn__bloco { display: grid; justify-items: inherit; gap: 14px; }
.bn[data-fundo="caixa"] .bn__bloco { padding: 28px 32px 30px; border-radius: 18px; background: rgba(var(--cor), calc(.35 + .5 * var(--int)));
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 18px 40px -24px rgba(var(--vi-banner-leitura-sombra-rgb), .5); max-width: min(620px, 100%); }

/* posição do texto */
.bn[data-pos="centro"] .bn__txt .wrap { justify-items: center; text-align: center; }
.bn[data-pos="centro"] .bn__title, .bn[data-pos="centro"] .bn__sub { margin-inline: auto; }
.bn[data-pos="dir"] .bn__txt .wrap { justify-items: end; text-align: right; }
.bn[data-pos="dir"] .bn__bloco, .bn[data-pos="centro"] .bn__bloco { justify-items: inherit; }

/* ── celular ── */
@container (max-width: 760px) {
  .bn[data-fundo] { --dir: 0deg; aspect-ratio: 3 / 4; background: rgb(var(--cor)); }
  .bn[data-fundo] .bn__txt .wrap { justify-items: start; text-align: left; }
  .bn[data-fundo] .bn__title, .bn[data-fundo] .bn__sub { margin-inline: 0; }
  .bn[data-fundo] .bn__img--m { object-position: var(--mfx, 50%) var(--mfy, 30%); }
  .bn[data-fundo] .bn__veil { background: none; }
  /* no celular, o tom, a cor da imagem e o botão automático são os lidos na arte do celular */
  .bn[data-fundo][data-tom-m="claro"] { --cor: 4, 22, 70; }
  .bn[data-fundo][data-tom-m="escuro"] { --cor: 248, 246, 241; }
  .bn[data-fundo="veu"][data-tom-m] { --cor: var(--cor-img-m, var(--cor-img, 4, 22, 70)); } /* depois do tom do celular, para valer a cor da arte */
  .bn[data-fundo][data-tom-m="claro"] .bn__title { color: #fff; }
  .bn[data-fundo][data-tom-m="claro"] .bn__sub { color: rgba(255, 255, 255, .85); }
  .bn[data-fundo][data-tom-m="escuro"] .bn__title { color: var(--vi-titulo); }
  .bn[data-fundo][data-tom-m="escuro"] .bn__sub { color: var(--vi-texto); }
  .bn[data-fundo][data-tom-m="claro"] .bn__ouro { background: linear-gradient(90deg, var(--vi-destaque-300) 0%, var(--vi-destaque-500) 25%, var(--vi-destaque-600) 50%, var(--vi-destaque-500) 75%, var(--vi-destaque-300) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: vi-gold-flow var(--vi-dur-marca, 8s) linear infinite; }
  .bn[data-fundo][data-tom-m="escuro"] .bn__ouro { background: none; color: var(--vi-destaque-800); -webkit-text-fill-color: currentColor; animation: none; }
  .bn[data-fundo] .bn__btn, .bn[data-fundo] .bn__btn:hover { background: var(--btn-m, var(--btn, var(--vi-acao-600))); color: var(--btn-txt-m, var(--btn-txt, #fff)); }

  /* texto sobre a imagem: a foto inteira; o fundo escolhido sobe de baixo */
  .bn[data-cel="sobre"] .bn__img { height: 100%; }
  .bn[data-cel="sobre"] .bn__veil { inset: 0; height: auto; }
  /* no celular o texto ocupa mais da altura: o fundo sobe mais e é um pouco mais forte para a mesma intensidade */
  .bn[data-cel="sobre"] { --im: min(1, calc(var(--int) * 1.35)); }
  .bn[data-cel="sobre"]:is([data-fundo="degrade"], [data-fundo="veu"]) .bn__veil { background: linear-gradient(0deg, rgba(var(--cor), calc(.96 * var(--im))) 0%, rgba(var(--cor), calc(.86 * var(--im))) 30%, rgba(var(--cor), calc(.55 * var(--im))) 52%, rgba(var(--cor), calc(.18 * var(--im))) 68%, rgba(var(--cor), 0) 82%); }
  .bn[data-cel="sobre"][data-fundo="suave"] .bn__veil { background: linear-gradient(0deg, rgba(var(--cor), calc(.8 * var(--im))) 0%, rgba(var(--cor), calc(.55 * var(--im))) 30%, rgba(var(--cor), calc(.15 * var(--im))) 56%, rgba(var(--cor), 0) 72%); }
  .bn[data-cel="sobre"][data-fundo="atmosfera"] .bn__atm { --a-ate: var(--amalc, 80%); -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 var(--a-solido), transparent var(--a-ate)); mask-image: linear-gradient(0deg, #000 0%, #000 var(--a-solido), transparent var(--a-ate)); }
  .bn[data-fundo="atmosfera"] .bn__atm img { object-position: var(--amfx, var(--afx, 50%)) var(--amfy, var(--afy, 50%)); transform-origin: var(--amfx, var(--afx, 50%)) var(--amfy, var(--afy, 50%)); }

  /* texto abaixo da imagem: a foto em cima, uma faixa da mesma cor embaixo, com passagem longa e suave */
  .bn[data-cel="abaixo"] .bn__img { height: 60%; }
  .bn[data-cel="abaixo"] .bn__atm { display: none; }
  .bn[data-cel="abaixo"] .bn__veil { inset: 30% 0 auto 0; height: 31%;
    background: linear-gradient(180deg, rgba(var(--cor), 0) 0%, rgba(var(--cor), .18) 30%, rgba(var(--cor), .55) 62%, rgba(var(--cor), .88) 85%, rgb(var(--cor)) 100%) !important; }
  .bn[data-cel="abaixo"][data-fundo="caixa"] .bn__bloco { padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* só a imagem: a arte do celular já traz o texto */
  .bn[data-cel="imagem"] .bn__img { height: 100%; }
  .bn[data-cel="imagem"] :is(.bn__veil, .bn__atm, .bn__txt) { display: none; }

  .bn[data-fundo="caixa"][data-cel="sobre"] .bn__bloco { padding: 20px 20px 22px; border-radius: 16px; }
}

/* botão: cor escolhida (ou a automática, que garante contraste com o fundo) e o texto que lê sobre ela */
.bn[data-fundo] .bn__btn { background: var(--btn, var(--vi-acao-600)); color: var(--btn-txt, #fff); }
.bn[data-fundo] .bn__btn:hover { background: var(--btn, var(--vi-acao-600)); filter: brightness(.92); }

/* textura sobre a imagem: as mesmas do VRK Artes (assets/js/texturas.js, mesmas sementes), salvas em WebP em
   assets/img/texturas/: grão fino, grão de filme, papel (fibras de algodão), tela (trama) e meio-tom (retícula).
   Cada uma com o modo de mistura do Artes, que funciona sobre fundo claro e escuro. Parada (não anima).
   data-tex-onde="fundo": só do lado do texto, dissolvendo como o fundo. */
.bn__tex { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--tex-int, .35); background-repeat: repeat; }
.bn[data-tex]:not([data-tex="nenhuma"]) .bn__tex { display: block; }
.bn[data-tex="grao"] .bn__tex { background-image: url(../img/texturas/grao.webp); background-size: 256px; mix-blend-mode: overlay; }
.bn[data-tex="filme"] .bn__tex { background-image: url(../img/texturas/filme.webp); background-size: 256px; mix-blend-mode: overlay; }
.bn[data-tex="papel"] .bn__tex { background-image: url(../img/texturas/papel.webp); background-size: 512px; mix-blend-mode: multiply; }
.bn[data-tex="tela"] .bn__tex { background-image: url(../img/texturas/tela.webp); background-size: 24px; mix-blend-mode: soft-light; }
.bn[data-tex="meiotom"] .bn__tex { background-image: url(../img/texturas/meiotom.webp); background-size: 14px; mix-blend-mode: soft-light; }
.bn[data-tex-onde="fundo"] .bn__tex { -webkit-mask-image: linear-gradient(var(--dir), #000 0%, #000 34%, transparent 64%); mask-image: linear-gradient(var(--dir), #000 0%, #000 34%, transparent 64%); }
.bn[data-tex-onde="fundo"][data-pos="centro"] .bn__tex { -webkit-mask-image: radial-gradient(55% 70% at 50% 50%, #000 0%, #000 40%, transparent 78%); mask-image: radial-gradient(55% 70% at 50% 50%, #000 0%, #000 40%, transparent 78%); }
@container (max-width: 760px) {
  .bn[data-tex-onde="fundo"] .bn__tex { -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 45%, transparent 78%); mask-image: linear-gradient(0deg, #000 0%, #000 45%, transparent 78%); }
  .bn[data-cel="imagem"] .bn__tex { display: none; }
}

/* ── animação: entra quando o banner aparece no carrossel (o carrossel põe aria-hidden="true" nos outros) ──
   data-anim (nenhuma | subir | aparecer | lado | foco), data-ordem (seq | junto), data-mov (parada | zoom | pan),
   data-ritmo (calmo | normal). Com "reduzir movimento", nada se mexe. */
.bn { --t: .9s; --passo: .16s; --mov: 14s; }
.bn[data-ritmo="calmo"] { --t: 1.4s; --passo: .26s; --mov: 22s; }
.bn[data-ordem="junto"] { --passo: 0s; }
@keyframes bn-subir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes bn-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes bn-lado { from { opacity: 0; transform: translateX(var(--lado, -36px)); } to { opacity: 1; transform: none; } }
@keyframes bn-foco { from { opacity: 0; filter: blur(10px); transform: scale(1.03); } to { opacity: 1; filter: none; transform: none; } }
@keyframes bn-zoom { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes bn-pan { from { transform: scale(1.08) translateX(-2.5%); } to { transform: scale(1.08) translateX(2.5%); } }
.bn[data-pos="dir"] { --lado: 36px; }
.bn[data-pos="centro"] { --lado: 0px; }
.bn[data-anim]:not([aria-hidden="true"]):not([data-anim="nenhuma"]) :is(.bn__title, .bn__sub, .bn__btn) { animation: var(--anim) var(--t) cubic-bezier(.2, .7, .2, 1) both; }
.bn[data-anim="subir"] { --anim: bn-subir; }
.bn[data-anim="aparecer"] { --anim: bn-aparecer; }
.bn[data-anim="lado"] { --anim: bn-lado; }
.bn[data-anim="foco"] { --anim: bn-foco; }
.bn[data-anim] .bn__title { animation-delay: .15s !important; }
.bn[data-anim] .bn__sub { animation-delay: calc(.15s + var(--passo)) !important; }
.bn[data-anim] .bn__btn { animation-delay: calc(.15s + 2 * var(--passo)) !important; }
.bn[data-fundo="caixa"][data-anim]:not([aria-hidden="true"]):not([data-anim="nenhuma"]) .bn__bloco { animation: bn-aparecer var(--t) ease both; }
.bn:not([aria-hidden="true"])[data-mov="zoom"]  .bn__img { animation: bn-zoom var(--mov) ease-out both; }
.bn:not([aria-hidden="true"])[data-mov="pan"]  .bn__img { animation: bn-pan var(--mov) ease-in-out both alternate infinite; }
@media (prefers-reduced-motion: reduce) {
  .bn :is(.bn__title, .bn__sub, .bn__btn, .bn__bloco, .bn__img, .bn__atm img) { animation: none !important; }
}