/* IBV: Igreja Batista em Vicentina, versão 3 (cinematográfica). Direção de arte em direcao-de-arte.md */

:root {
  --azul: #143C8C;      /* proposta, trocar pelo azul oficial */
  --noite: #0A1630;
  --noite-2: #12244D;
  --claro: #F3F6FA;
  --branco: #FFFFFF;
  --tinta: #0B1730;
  --tinta-2: #4A5670;

  --f-titulo: "Anton", "Arial Narrow", Impact, sans-serif;
  --f-texto: "Figtree", system-ui, "Segoe UI", sans-serif;

  --e-1: 8px; --e-2: 16px; --e-3: 24px; --e-4: 40px;
  --e-5: 64px; --e-6: 104px; --e-7: 144px;

  --largura: 1180px;
  --margem: clamp(20px, 5vw, 64px);
  --lado: max(var(--margem), calc((100vw - var(--largura)) / 2));
  --curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--branco); color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--f-texto);
  overflow-x: clip;
}
h1, h2, h3 {
  font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase;
  line-height: 1.02; letter-spacing: .01em; margin: 0; padding-top: .08em;
}
h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); color: var(--azul); }
p { margin: 0; max-width: 58ch; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, dl, dd, figure { margin: 0; padding: 0; list-style: none; }

.pular { position: absolute; left: -999px; top: 0; padding: 12px 16px; background: var(--tinta); color: var(--branco); z-index: 10; }
.pular:focus { left: 0; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.rotulo { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .28em; color: var(--azul); margin-bottom: var(--e-1); }

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 28px;
  background: var(--azul); color: var(--branco); border: 2px solid var(--azul);
  text-decoration: none; font-weight: 600; font-size: .875rem;
  text-transform: uppercase; letter-spacing: .16em; white-space: nowrap;
  transition: background-color .25s var(--curva), color .25s var(--curva), border-color .25s var(--curva);
}
.botao-contorno { background: transparent; border-color: currentColor; color: var(--branco); }
@media (hover: hover) {
  .botao:hover { background: var(--noite); border-color: var(--noite); }
  .botao-contorno:hover { background: var(--branco); border-color: var(--branco); color: var(--azul); }
}

/* Abertura: cortina com a logo, que sobe quando a página está pronta */
.abertura { display: none; }
.js .abertura { display: grid; place-items: center; position: fixed; inset: 0; z-index: 50; background: var(--noite); transition: transform .9s cubic-bezier(.7, 0, .2, 1); }
.abertura img { width: min(46vw, 220px); animation: pulsa 1.4s ease-in-out infinite alternate; }
.pronto .abertura { transform: translate3d(0, -101%, 0); }
@keyframes pulsa { from { opacity: .55; } to { opacity: 1; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Bloco de foto, com vídeo opcional por cima (sem som, em repetição) */
.foto { position: relative; background: var(--noite-2); overflow: hidden; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fundo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.fundo-video.tocando { opacity: 1; }

.preencher { padding: var(--e-2) var(--e-3); border: 2px dashed currentColor; color: var(--tinta-2); max-width: 50ch; }
.preencher strong { font-weight: 600; color: var(--tinta); }

/* O prédio da logo, recortado do arquivo (sem as letras de baixo) */
.predio { position: relative; aspect-ratio: 1090 / 770; overflow: hidden; }
.predio img { position: absolute; max-width: none; width: 117.43%; height: auto; left: -8.26%; top: -11.7%; }
.predio::after { content: ""; position: absolute; left: 30%; width: 18%; top: 96.4%; bottom: 0; background: var(--fundo-predio, var(--noite)); }

/* 1. Capa */
.capa {
  position: relative; background: var(--noite); color: var(--branco);
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; overflow: hidden;
}
/* no computador a imagem ocupa o lado direito e o texto fica no escuro, à esquerda */
.capa-fundo { position: absolute; inset: 0 0 0 36%; will-change: transform; transform-origin: 70% 50%; }
.capa-foto, .capa-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.capa-video { opacity: 0; transition: opacity 1.2s ease; }
.capa-video.tocando { opacity: 1; }
/* escurece o lado do texto para a leitura, como em capa de cinema */
.capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 22, 48, 1) 0%, rgba(10, 22, 48, 1) 36%, rgba(10, 22, 48, .6) 50%, rgba(10, 22, 48, .08) 76%), linear-gradient(180deg, rgba(10, 22, 48, .55) 0%, rgba(10, 22, 48, 0) 22%, rgba(10, 22, 48, 0) 70%, rgba(10, 22, 48, .7) 100%); pointer-events: none; }

.topo-site {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-2) var(--lado);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.marca { display: block; width: 86px; }
.topo-site nav { display: flex; align-items: center; gap: var(--e-3); }
.link-menu { text-decoration: none; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) { .link-menu:hover { text-decoration: underline; text-underline-offset: 8px; } }
.topo-site .botao { min-height: 44px; padding: 0 18px; font-size: .75rem; }

.capa-texto { position: relative; z-index: 2; margin: auto 0; padding: var(--e-5) var(--lado); will-change: transform, opacity; }
h1 { font-size: clamp(3.2rem, 8.6vw, 8rem); line-height: 1; padding: 0; }
.linha { display: block; overflow: hidden; padding-top: .1em; }
/* o título só entra depois que a cortina de abertura sobe */
.linha > span { display: block; }
.js .linha > span { transform: translate3d(0, 110%, 0); }
.js .capa-frase, .js .capa-texto .botao { opacity: 0; }
.pronto .linha > span { animation: sobe-linha 1.1s var(--curva) both .45s; }
.pronto .linha:nth-child(2) > span { animation-delay: .6s; }
.pronto .capa-frase { animation: surge .9s ease both 1.1s; }
.pronto .capa-texto .botao { animation: surge .9s ease both 1.3s; }
@keyframes sobe-linha { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
.capa-frase { margin: var(--e-3) 0 var(--e-4); font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-style: italic; }
@keyframes surge { from { opacity: 0; } to { opacity: 1; } }

/* 2. Letreiro que corre */
.letreiro { background: var(--azul); color: var(--branco); overflow: hidden; padding: var(--e-2) 0; }
.letreiro-faixa { display: flex; align-items: center; gap: var(--e-5); width: max-content; animation: corre 36s linear infinite; }
.letreiro-faixa span { font: 400 clamp(2.2rem, 5vw, 4.2rem)/1.15 var(--f-titulo); text-transform: uppercase; white-space: nowrap; }
.letreiro-faixa .vazada { color: transparent; -webkit-text-stroke: 1.5px var(--branco); }
@keyframes corre { to { transform: translate3d(calc(-50% - var(--e-5) / 2), 0, 0); } }

/* 3. Faixa: convite e duas fotos */
.faixa { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); min-height: 380px; }
.faixa-convite { background: var(--noite); color: var(--branco); padding: var(--e-5) var(--e-4) var(--e-5) var(--lado); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--e-2); }
.faixa-convite h2 { color: inherit; font-size: clamp(2rem, 3.2vw, 2.8rem); }
.faixa-convite .botao { margin-top: var(--e-1); }

/* 4. Atalhos */
.atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); padding: var(--e-6) var(--lado); }
.atalho { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; }
.atalho-icone { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; background: var(--azul); color: var(--branco); display: grid; place-items: center; transition: transform .3s var(--curva); }
.atalho strong { display: block; font-size: 1.25rem; font-weight: 600; color: var(--azul); line-height: 1.2; }
.atalho-texto { display: block; color: var(--tinta-2); font-size: .9375rem; line-height: 1.5; margin-top: 4px; }
@media (hover: hover) { .atalho:hover .atalho-icone { transform: scale(1.08); } }

/* 5. Quem somos */
.quem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--claro); }
.quem-foto { min-height: 560px; }
.quem-texto { padding: var(--e-6) var(--lado) var(--e-6) var(--e-5); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--e-3); }
.quem-texto .rotulo { margin-bottom: calc(var(--e-2) * -1); }

/* 6. Cultos e atividades */
.cultos { padding: var(--e-6) 0 0; }
.cabeca { text-align: center; padding: 0 var(--lado) var(--e-5); }
.cabeca .rotulo { max-width: none; }
.cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--branco); }
.cartao { position: relative; min-height: 600px; display: flex; color: var(--branco); background: var(--noite); overflow: hidden; }
.cartao .foto { position: absolute; inset: 0; }
.cartao .foto img { transition: transform 1.2s var(--curva); }
@media (hover: hover) { .cartao:hover .foto img { transform: scale(1.07); } }
.cartao::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 22, 48, .1) 25%, rgba(10, 22, 48, .95) 90%); pointer-events: none; }
.cartao-texto { position: relative; z-index: 1; margin-top: auto; padding: var(--e-4); }
.cartao-rotulo { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .28em; }
.cartao h3 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); margin: 6px 0 var(--e-2); }
.cartao-hora { font-weight: 600; }

/* 7. A vida na IBV. Sem JavaScript: trilho com rolagem lateral comum. Com JavaScript: palco preso e o trilho anda com a rolagem. */
.galeria { background: var(--noite); color: var(--branco); }
.galeria-palco { overflow-x: auto; }
.trilho { display: flex; align-items: center; gap: var(--e-4); width: max-content; padding: var(--e-5) var(--lado); will-change: transform; }
.trilho-titulo { flex: 0 0 auto; width: min(78vw, 460px); }
.trilho-titulo h2 { color: inherit; font-size: clamp(3.4rem, 8vw, 7rem); }
.trilho-titulo .rotulo { color: inherit; opacity: .8; }
.trilho figure { flex: 0 0 auto; }
.trilho img { width: auto; max-width: none; }
.g-alta img { height: 68vh; }
.g-media img { height: 48vh; }
.g-baixo { align-self: flex-end; }
.g-cima { align-self: flex-start; }
.js:not(.parado) .galeria-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.js:not(.parado) .trilho { height: 86vh; padding-top: 0; padding-bottom: 0; }

/* 8. No que cremos */
.cremos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; background: var(--claro); }
.cremos-desenho { --fundo-predio: var(--azul); background: var(--azul); padding: var(--e-5) 0; display: grid; align-items: center; overflow: hidden; }
.cremos-desenho .predio { width: 112%; margin-left: -14%; }
.cremos-texto { padding: var(--e-6) var(--lado) var(--e-6) var(--e-5); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--e-2); }
.cremos-texto .rotulo { margin-bottom: calc(var(--e-1) * -1); }

/* 9. Mensagens: a imagem abre do centro até a tela inteira */
.abre { background: var(--noite); color: var(--branco); }
.js:not(.parado) .abre { height: 230vh; }
.abre-palco { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.js:not(.parado) .abre-palco { position: sticky; top: 0; }
.abre-imagem { position: absolute; inset: 0; will-change: clip-path; }
.abre-imagem img { width: 100%; height: 100%; object-fit: cover; }
.abre-imagem::after { content: ""; position: absolute; inset: 0; background: rgba(10, 22, 48, .55); }
.abre-texto { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: var(--e-2); padding: 0 var(--lado); }
.abre-texto h2 { color: inherit; font-size: clamp(3.6rem, 12vw, 11rem); }
.abre-texto .rotulo { color: inherit; }
.tela-play { width: 92px; height: 92px; border-radius: 50%; background: var(--branco); color: var(--azul); display: grid; place-items: center; padding-left: 4px; margin-top: var(--e-2); }
.abre-nota { font-size: .9375rem; border: 1.5px dashed rgba(255, 255, 255, .5); padding: 6px 14px; }

/* 10. Dízimos e ofertas */
.ofertas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--claro); }
.ofertas-qr { background: var(--azul); display: grid; place-items: center; padding: var(--e-5) var(--e-3); min-height: 440px; }
.qr { width: min(280px, 70%); aspect-ratio: 1; background: var(--branco); border-radius: 18px; display: grid; place-items: center; text-align: center; color: var(--tinta-2); padding: var(--e-3); box-shadow: 0 18px 40px rgba(10, 22, 48, .35); }
.qr span { border: 2px dashed currentColor; padding: var(--e-2); }
.ofertas-texto { padding: var(--e-6) var(--lado) var(--e-6) var(--e-5); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--e-2); }
.ofertas-texto .rotulo { margin-bottom: calc(var(--e-1) * -1); }

/* 11. Cena final, com vídeo de fundo */
.fecho { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; background: var(--noite); color: var(--branco); overflow: hidden; }
.fecho-fundo { position: absolute; inset: 0; }
.fecho-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fecho-fundo::after { content: ""; position: absolute; inset: 0; background: rgba(10, 22, 48, .62); }
.fecho-texto { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: var(--e-3); padding: var(--e-5) var(--lado); }
.fecho-texto h2 { color: inherit; font-size: clamp(3.4rem, 12.5vw, 12rem); }
.fecho-texto p { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }

/* 12. Rodapé */
.rodape { background: var(--noite); color: var(--branco); padding: var(--e-6) var(--lado) var(--e-4); }
.rodape-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e-5); align-items: center; }
.rodape-logo { width: 100%; max-width: 340px; }
.rodape h2 { color: inherit; font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: var(--e-3); }
.ficha { border-top: 2px solid var(--branco); }
.ficha > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.ficha dt { font-weight: 600; }
.ficha dd { font-size: 1.1875rem; }
.ficha .falta { font-size: 1.0625rem; opacity: .82; }
.rodape-nota { margin-top: var(--e-5); max-width: none; font-size: .9375rem; opacity: .82; }

/* Entradas ao rolar */
.js [data-anima="sobe"] { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity .8s var(--curva), transform .8s var(--curva); }
.js [data-anima].visivel { opacity: 1; transform: none; }
.js [data-anima-grupo] > * { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity .8s var(--curva), transform .8s var(--curva); transition-delay: var(--atraso, 0ms); }
.js [data-anima-grupo].visivel > * { opacity: 1; transform: none; }

/* Telas médias */
@media (max-width: 1100px) {
  .link-menu { display: none; }
}

/* Celular */
@media (max-width: 760px) {
  .marca { width: 68px; }
  .topo-site .botao { padding: 0 12px; letter-spacing: .1em; }
  .capa-fundo { inset: 0; transform-origin: 50% 50%; }
  .capa-foto, .capa-video { object-position: 50% 50%; }
  .capa::after { background: linear-gradient(180deg, rgba(10, 22, 48, .6) 0%, rgba(10, 22, 48, .1) 24%, rgba(10, 22, 48, .2) 45%, rgba(10, 22, 48, .94) 82%); }
  .capa-texto { margin: auto 0 0; padding: var(--e-4) var(--lado) var(--e-5); }
  h1 { font-size: clamp(3rem, 15.5vw, 5rem); }
  .capa-texto .botao { width: 100%; }

  .faixa { grid-template-columns: 1fr 1fr; min-height: 0; }
  .faixa-convite { grid-column: 1 / -1; padding: var(--e-5) var(--lado); }
  .faixa .foto { aspect-ratio: 1; }

  .atalhos { grid-template-columns: 1fr; gap: var(--e-3); padding: var(--e-5) var(--lado); }
  .atalho-icone { width: 68px; height: 68px; }

  .quem, .ofertas, .cremos, .rodape-grade { grid-template-columns: 1fr; }
  .quem-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .quem-texto, .ofertas-texto, .cremos-texto { padding: var(--e-5) var(--lado); }

  .cultos { padding-top: var(--e-5); }
  .cabeca { padding-bottom: var(--e-4); }
  .cartoes { grid-template-columns: 1fr; }
  .cartao { min-height: 460px; }
  .cartao-texto { padding: var(--e-3) var(--lado); }

  .trilho { gap: var(--e-3); }
  .g-alta img { height: 56vh; height: 56svh; }
  .g-media img { height: 42vh; height: 42svh; }

  .cremos-desenho { padding: var(--e-4) 0; }
  .cremos-desenho .predio { width: 100%; margin-left: -6%; }
  .ofertas-qr { min-height: 340px; }
  .rodape { padding-top: var(--e-5); }
  .rodape-logo { max-width: 200px; }
  .ficha > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Modo de foto (site.js): entradas no estado final */
.captura [data-anima], .captura [data-anima-grupo] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.captura .linha > span, .captura .capa-frase, .captura .capa-texto .botao, .captura .letreiro-faixa { animation: none !important; transform: none !important; opacity: 1 !important; }
.captura .abertura { display: none !important; }
.captura { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-anima], .js [data-anima-grupo] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .linha > span, .capa-frase, .capa-texto .botao, .letreiro-faixa { animation: none !important; transform: none !important; opacity: 1 !important; }
  .capa-video, .fundo-video, .abertura { display: none !important; }
  .botao, .atalho-icone, .cartao .foto img { transition: none; }
}