/*
 * ============================================================
 * styles.css — bio-igreja
 * ============================================================
 * FUNÇÃO DESTE ARQUIVO:
 * Estilos principais da página bio-igreja. Define a aparência
 * visual de todos os componentes: animações, layout,
 * seção de perfil, lista de links e footer.
 *
 * ESTRUTURA DO ARQUIVO (ordem visual de cima para baixo):
 *  1. Animações (@keyframes)
 *  2. Base (html, body)
 *  3. Blobs decorativos de fundo
 *  4. Layout principal (.page-wrapper)
 *  5. Seção de perfil (avatar + nome)
 *  6. Lista de links
 *  7. Botões de link
 *  8. Footer
 *
 * DEPENDÊNCIAS:
 *  - css/reset.css  → carregado antes no HTML (zera padrões)
 *  - css/tokens.css → carregado antes no HTML (variáveis CSS)
 *  Ambos são carregados como <link> separados no index.html.
 * ============================================================
 */


/* =========================================================
   1. ANIMAÇÕES (@keyframes)
   ========================================================= */

/*
 * fade-in-up — Entrada de baixo para cima com fade.
 * Usado na maioria dos elementos para a sensação de "aparição elegante".
 */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * float — Levitação suave em loop.
 * Aplicado no avatar: sobe 8px e volta continuamente.
 * 0% e 100% iguais garantem loop sem saltos visíveis.
 */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}


/* =========================================================
   2. BASE
   ========================================================= */

html {
  font-family: var(--font-body);
  color: var(--color-text);  /* navy #17334E — todos os textos herdam */
}

body {
  min-height: 100vh;

  /* Gradiente diagonal em 3 stops:
   * branco puro → azul céu claro (#EDF7FC) → toque quente de amarelo (#FFF8AF).
   * Cria profundidade visual e incorpora as duas cores de temperatura
   * opostas da marca (frio azul + quente dourado).
   * background-attachment: fixed = parallax sutil ao rolar. */
  background: linear-gradient(165deg,
    #ffffff                       0%,
    var(--color-bg)               58%,
    rgba(255, 248, 175, 0.35)    100%
  );
  background-attachment: fixed;

  position: relative;
  overflow-x: hidden;
}


/* =========================================================
   3. BLOBS DECORATIVOS DE FUNDO
   =========================================================
   Dois blobs com cores opostas da marca criam equilíbrio:
   - Superior esquerdo: azul frio (#0098DA) — cor primária
   - Inferior direito:  dourado quente (#FEC749) — cor de destaque
   ========================================================= */

.blob {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
}

/* Azul primário da marca — frio, superior */
.blob--top-left {
  width: 260px;
  height: 260px;
  top: 96px;
  left: -40px;
  background: rgba(0, 152, 218, 0.18);
}

/* Dourado da marca — quente, inferior. Equilibra o azul do topo. */
.blob--bottom-right {
  width: 300px;
  height: 300px;
  bottom: 96px;
  right: -48px;
  background: rgba(254, 199, 73, 0.16);
}


/* =========================================================
   4. LAYOUT PRINCIPAL
   ========================================================= */

.page-wrapper {
  position: relative;
  z-index: 1;       /* acima dos blobs */
  max-width: 28rem; /* ~448px — foco mobile */
  margin: 0 auto;
  padding: 48px 20px 32px;
}


/* =========================================================
   5. SEÇÃO DE PERFIL
   =========================================================
   Avatar flutuante + nome em Playfair Display azul.
   ========================================================= */

.profile-section {
  text-align: center;
  margin-bottom: 40px;
  animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Avatar-wrap: entrada + float infinito em sequência */
.avatar-wrap {
  display: inline-block;
  margin-bottom: 20px;
  animation:
    fade-in-up 0.6s 0.05s cubic-bezier(0.16, 1, 0.3, 1) both,
    float      3s   0.6s  ease-in-out                    infinite;
}

.avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;

  /* Borda dourada da marca */
  border: 4px solid var(--color-gold);

  /* Anel externo suave em dourado — halo que reforça a borda sem poluir */
  box-shadow: 0 0 0 6px rgba(254, 199, 73, 0.22);

  /* object-fit: contain preserva o logo inteiro sem cortar */
  object-fit: contain;

  /* Fundo azul primário — visível nos cantos transparentes do logo PNG */
  background: var(--color-primary);

  display: block;
}

/* Nome da igreja: Playfair Display no azul primário da marca.
 * O contraste entre a serifa elegante e o azul vibrante cria
 * o destaque visual mais forte da página. */
.profile-name {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 8vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-primary);  /* #0098DA — azul vibrante da marca */
  animation: fade-in-up 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* =========================================================
   6. LISTA DE LINKS
   ========================================================= */

.links-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}


/* =========================================================
   7. BOTÕES DE LINK
   =========================================================
   Estrutura: icon-wrap (40×40) | label (flex:1) | seta
   ========================================================= */

.link-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);

  /* Borda azul sutil — reforça a cor primária mesmo em repouso */
  border: 1px solid var(--color-border-strong);
  background: rgba(255, 255, 255, 0.92);

  /* Sombra com o navy da marca */
  box-shadow: 0 2px 10px -4px rgba(23, 51, 78, 0.12);
  text-decoration: none;
  color: var(--color-text);

  transition:
    transform      0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color   0.25s ease,
    background     0.25s ease,
    color          0.25s ease,
    box-shadow     0.25s ease;
}

/* Hover: elevação sutil + borda azul mais forte — sem troca de fundo */
.link-btn:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.98);
  color: var(--color-text);
  box-shadow:
    0 6px 20px -4px rgba(0, 152, 218, 0.22),
    0 2px 8px  -2px rgba(23, 51, 78, 0.10);
}

/* Contêiner do ícone SVG: fundo com tinte leve do azul primário */
.link-btn__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-md);

  /* Leve tinte do azul primário — mais vivo que o fundo neutro */
  background: rgba(0, 152, 218, 0.08);
  transition: background 0.25s ease;
}

/* No hover, reforça levemente o tinte azul do icon-wrap */
.link-btn:hover .link-btn__icon-wrap {
  background: rgba(0, 152, 218, 0.14);
}

/* Tamanho fixo do SVG — sem override de cor (cada ícone usa suas cores de marca) */
.link-btn__icon-wrap svg {
  width: 20px;
  height: 20px;
}

/* Icon-wrap com imagem PNG/WEBP/AVIF — sem padding, overflow oculto para
   respeitar o border-radius do contêiner e recortar a imagem em arco */
.link-btn__icon-wrap--image {
  background: transparent;
  overflow: hidden;
  padding: 0;
}
.link-btn__icon-wrap--image img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  display: block;
}
.link-btn:hover .link-btn__icon-wrap--image {
  background: transparent;
}

/* Label: ocupa todo o espaço entre ícone e seta */
.link-btn__label {
  flex: 1;
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  text-align: left;
}

/* Seta diagonal — semitransparente em repouso */
.link-btn__arrow {
  display: flex;
  align-items: center;
  opacity: 0.45;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* No hover: mais visível em azul primário e desloca +2px/-2px */
.link-btn:hover .link-btn__arrow {
  opacity: 1;
  color: var(--color-primary);
  transform: translate(2px, -2px);
}

.link-btn__arrow svg {
  width: 16px;
  height: 16px;
}

/* Delays escalonados: cada botão aparece 50ms após o anterior */
.links-list li:nth-child(1) .link-btn { animation: fade-in-up 0.6s 0.20s cubic-bezier(0.16, 1, 0.3, 1) both; }
.links-list li:nth-child(2) .link-btn { animation: fade-in-up 0.6s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }
.links-list li:nth-child(3) .link-btn { animation: fade-in-up 0.6s 0.30s cubic-bezier(0.16, 1, 0.3, 1) both; }
.links-list li:nth-child(4) .link-btn { animation: fade-in-up 0.6s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }


/* =========================================================
   8. FOOTER
   =========================================================
   Separador dourado + copyright em navy muted.
   O dourado no topo do footer fecha visualmente a página
   na mesma cor quente que o blob inferior.
   ========================================================= */

.site-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);

  /* Linha dourada acima: eco da borda do avatar e do blob inferior */
  border-top: 1px solid rgba(254, 199, 73, 0.35);
  padding: 16px 0 8px;
  animation: fade-in-up 0.6s 0.40s cubic-bezier(0.16, 1, 0.3, 1) both;
}