/*
 * p-aniversarios.css — componentes exclusivos da página /aniversarios/.
 * Depende de style.css e pages.css (tokens, .eyebrow, .section-top, .gold-frame,
 * .artwork-window, .link-arrow, .empty-frame já carregados antes).
 */

/* ---------- Como funciona (.manifesto.intro) ---------- */
/* Os parágrafos de .intro não têm margem própria (reset global); sem isso, o segundo
   parágrafo colava no primeiro e o link colava no segundo. */
#como-funciona p + p { margin-top: 18px }
#como-funciona .link-arrow { margin-top: 30px }

/* ---------- O que entra na tela (.aniversario-tela) ---------- */
.aniversario-tela { padding: 96px 7% 100px; background: #faf8f1 }

.aniversario-tela-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.aniversario-tela-list li {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid #dcd6c2;
}

.aniversario-tela-list li:last-child { border-bottom: 1px solid #dcd6c2 }

.aniversario-tela-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 34px;
  color: var(--gold);
  line-height: 1;
}

.aniversario-tela-body h3 {
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 22px);
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 8px;
}

.aniversario-tela-body p {
  font-size: 15px;
  line-height: 1.75;
  color: #57614e;
  max-width: 58ch;
  margin: 0;
}

@media (max-width: 1050px) { .aniversario-tela { padding: 74px 6% 78px } }

@media (max-width: 700px) {
  .aniversario-tela { padding: 62px 6% 66px }
  .aniversario-tela-list li { grid-template-columns: 40px 1fr; gap: 14px; padding: 20px 0 }
  .aniversario-tela-num { font-size: 26px }
}

/* Reforça a cor sálvia do itálico do título (herdava o tom pálido padrão de .section-top) */
#a-tela .section-top h2 em { color: #758365 }

/* Imagem ao lado da lista: some no mobile/tablet, aparece só a partir do desktop */
.aniversario-tela-image { display: none }

@media (min-width: 1051px) {
  .aniversario-tela-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 6%;
    align-items: start;
  }
  .aniversario-tela-list { max-width: none }
  /* Moldura alinhada ao topo (eyebrow) da coluna de texto; altura proporcional,
     calibrada para não passar do fim da lista de três itens. */
  .aniversario-tela-image { display: block }
  .aniversario-tela-image .artwork-window { height: auto; aspect-ratio: 8 / 15 }
}

/* ---------- Faixa processo → entrega (.aniversario-diptico) ---------- */
.aniversario-diptico {
  padding: 100px 7% 104px;
  background: radial-gradient(ellipse at 45% 10%, #334938 0, #1c3027 65%, #1b2d24 100%);
  color: #e9e8d9;
  text-align: center;
}

.aniversario-diptico .eyebrow { color: #c6bc98 }

.aniversario-diptico h2 { color: #f0e9ce }

.aniversario-diptico-intro {
  max-width: 60ch;
  margin: 18px auto 0;
  font-size: 15px;
  line-height: 1.8;
  color: #cfd3bd;
}

.aniversario-diptico-grid {
  margin: 52px auto 0;
  max-width: 860px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  text-align: left;
}

.aniversario-diptico-grid figure { margin: 0 }

.aniversario-diptico-grid figcaption {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.aniversario-diptico-step {
  font-size: 10px;
  letter-spacing: 2px;
  color: #bbaa79;
  padding-top: 6px;
  white-space: nowrap;
}

.aniversario-diptico-grid figcaption p {
  font-size: 13px;
  line-height: 1.7;
  color: #d7dcc4;
  margin: 0;
}

@media (max-width: 1050px) { .aniversario-diptico { padding: 78px 6% 82px } }

@media (max-width: 700px) {
  .aniversario-diptico { padding: 62px 6% 66px }
  .aniversario-diptico-grid { grid-template-columns: 1fr; gap: 36px; max-width: 340px }
}

/* ---------- Bloco do artista (.aniversario-artista reaproveita a grade .artist da home) ---------- */
/* Padding e fundo já vêm de .artist em style.css, idênticos aos que a seção tinha antes. */

/* Retrato é vertical (731x1300); a home usa foto horizontal, então ajustamos o enquadramento
   para manter o rosto visível dentro da caixa baixa e larga de .artist-image>img. */
.aniversario-artista .artist-image > img,
.aniversario-artista .artist-image > :where(picture) > img { object-position: 50% 40% }

.aniversario-artista-links {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
}

/* Revisão do coordenador: h2 fora de .section-top herdava tamanho de texto. */
.aniversario-diptico h2 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -1.1px; margin: 16px 0 20px }
@media (max-width: 700px) { .aniversario-diptico h2 { font-size: 38px } }

/* ---------- Efeito próprio: "revelação" no díptico ----------
   Cada foto abre como um véu que se recolhe de cima para baixo, na ordem da
   legenda (01 · REVELAÇÃO antes de 02 · PRESENTE) — eco do momento em que a
   pintura é mostrada e depois entregue. Usa a mesma classe .fx-visible que
   fx-reveal.js já aplica em .aniversario-diptico (main > section); nenhum
   observer/JS próprio. Sem .js (JS desligado) o véu nem existe — as fotos
   aparecem direto, como qualquer outra imagem da página. */
.js .aniversario-diptico-grid figure .artwork-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #1b2d24;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform .9s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.js .aniversario-diptico-grid figure:nth-child(2) .artwork-window::after { transition-delay: .35s }

.js .aniversario-diptico.fx-visible .aniversario-diptico-grid figure .artwork-window::after {
  transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .aniversario-diptico-grid figure .artwork-window::after {
    transition: none;
    transform: scaleY(0);
  }
}