/* Movimento do convite.
   Tudo aqui depende da classe "anim" no <html>, que inicio.js só coloca quando há JavaScript e quem
   visita não pediu menos movimento. Sem ela, a página fica exactamente como está, estática.
   Só se animam transformações, opacidade, recortes e traços de SVG: nada mexe no layout. */

:root {
  --saida: cubic-bezier(0.16, 1, 0.3, 1);
  --vaivem: cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes surgir { from { opacity: 0; transform: translate3d(0, var(--de, 24px), 0); } }
@keyframes letra-sobe { from { transform: translate3d(0, 108%, 0); } }
@keyframes painel-cresce { from { transform: scaleY(0); } }
@keyframes foto-sobe { from { opacity: 0; transform: translate3d(0, 10%, 0) scale(0.97); } }
@keyframes anel-abre { from { opacity: 0; transform: scale(0.6) rotate(-14deg); } }
@keyframes tracar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes encher { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes largar-traco { from { stroke-opacity: 1; } to { stroke-opacity: 0; } }
@keyframes estalo { from { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.08); } }
@keyframes faixa-desce { from { transform: translate3d(0, -100%, 0); } }
@keyframes folha-entra { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.97); } }
@keyframes fundo-entra { from { opacity: 0; } }

/* Ordem das letras e dos filhos (o CSP não deixa usar style="" no HTML). */
.letra:nth-child(2), .lado-a-fim > :nth-child(2) { --i: 1; }
.letra:nth-child(3), .lado-a-fim > :nth-child(3) { --i: 2; }
.letra:nth-child(4), .lado-a-fim > :nth-child(4) { --i: 3; }
.letra:nth-child(5) { --i: 4; }
.letra:nth-child(6) { --i: 5; }
.letra:nth-child(7) { --i: 6; }
.letra:nth-child(8) { --i: 7; }
.letra:nth-child(9) { --i: 8; }
.letra:nth-child(10) { --i: 9; }
.letra:nth-child(11) { --i: 10; }
.letra:nth-child(12) { --i: 11; }

/* Espessura do traço da escrita, em unidades da letra (1000 por em), para dar cerca de 1,4 px. */
.e-largo { --traco: 10; }
.e-movel { --traco: 12; }
.titulo-historia .script { --traco: 15; }
.titulo-dia .script { --traco: 13; }
.titulo-programa .script { --traco: 17; }
.script-confirmar { --traco: 26; }
.rodape-script { --traco: 24; }

/* ---------- Topo: entrada ao abrir a página (só CSS, começa no primeiro desenho) ---------- */

.anim .topo-dentro { --de: -14px; animation: surgir 0.8s var(--saida) both; }
.anim .heroi .selo { animation: surgir 0.8s var(--saida) 0.1s both; }

/* Os nomes sobem de trás de uma linha invisível, letra a letra. */
.anim .nome-a, .anim .nome-b { clip-path: inset(-40% -8% 0 -8%); }
.anim .nome-a .letra { animation: letra-sobe 1.05s var(--saida) both; animation-delay: calc(0.15s + var(--i, 0) * 55ms); }
.anim .nome-b .letra { animation: letra-sobe 1.05s var(--saida) both; animation-delay: calc(0.34s + var(--i, 0) * 60ms); }

/* O painel cresce de baixo e o casal sobe por dentro dele. */
.anim .painel { transform-origin: 50% 100%; animation: painel-cresce 1.05s var(--saida) 0.35s both; }
.anim .foto-casal img { animation: foto-sobe 1.3s var(--saida) 0.55s both; }

/* O "&" escreve-se: primeiro o traço, depois a tinta. */
.anim .heroi .escrita path {
  stroke: currentColor; stroke-width: var(--traco, 12); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1;
  animation: tracar 1.5s var(--vaivem) 0.95s both, encher 0.8s ease 2.05s both, largar-traco 0.8s ease 2.05s both;
}

.anim .contagem-rotulo { animation: surgir 0.8s var(--saida) 0.6s both; }
.anim .contagem-num { font-variant-numeric: tabular-nums; animation: surgir 0.9s var(--saida) 0.7s both; }
.anim .onda path { stroke-dasharray: 1 1; animation: tracar 1.4s var(--vaivem) 1s both; }
.anim .lado-a-fim > * { animation: surgir 0.9s var(--saida) both; animation-delay: calc(1s + var(--i, 0) * 90ms); }
.anim .cartao-data { --de: 36px; animation: surgir 1s var(--saida) 0.75s both; }
.anim .cartao-data-foto { animation: anel-abre 1s var(--saida) 1.05s both; }

/* Faixa do convite pessoal: desce quando aparece. */
.anim .faixa:not([hidden]) { animation: faixa-desce 0.8s var(--saida) both; }

/* ---------- Entradas ao fazer scroll (movimento.js põe .visivel) ---------- */

.anim [data-revelar] {
  opacity: 0; transform: translate3d(0, 36px, 0);
  transition: opacity 0.9s var(--saida), transform 1.1s var(--saida);
  transition-delay: var(--atraso, 0s);
}
.anim [data-revelar].visivel { opacity: 1; transform: none; }
.anim .intro[data-revelar], .anim .rodape-linha[data-revelar] { --atraso: 0.15s; }
.anim .cartao-rsvp[data-revelar] { --atraso: 0.2s; }

.anim [data-revelar-grupo] > * {
  opacity: 0; transform: translate3d(0, 40px, 0);
  transition: opacity 0.8s var(--saida), transform 1s var(--saida);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.anim [data-revelar-grupo].visivel > * { opacity: 1; transform: none; }

/* Palavras em escrita dentro dos títulos: desenham-se depois de o título chegar. */
.anim [data-revelar] .escrita path, .anim [data-revelar-grupo] .escrita path {
  stroke: currentColor; stroke-width: var(--traco, 14); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1;
  transition: stroke-dashoffset 0.75s var(--vaivem), fill-opacity 0.7s ease, stroke-opacity 0.7s ease;
  transition-delay: calc(0.35s + var(--i, 0) * 80ms), calc(0.5s + var(--n, 1) * 80ms), calc(0.5s + var(--n, 1) * 80ms);
}
.anim .visivel .escrita path, .anim .escrita.visivel path, .anim [data-revelar].visivel .escrita path {
  stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0;
}

/* A fotografia do jardim abre-se como uma janela e desliza lá dentro (paralaxe em movimento.js). */
.anim .historia-foto {
  border-radius: 44px; overflow: hidden;
  clip-path: inset(14% 12% 14% 12% round 44px);
  transition: clip-path 1.5s var(--saida);
}
.anim .historia-foto.visivel { clip-path: inset(0 0 0 0 round 44px); }
.anim .historia-img { transform: scale(1.1); will-change: transform; }

/* Os nomes do rodapé sobem letra a letra. */
.anim [data-letras] > [aria-hidden] { display: inline-block; clip-path: inset(-40% -4% 0 -4%); }
.anim [data-letras] .letra { transform: translate3d(0, 108%, 0); transition: transform 1s var(--saida); transition-delay: calc(var(--i, 0) * 45ms); }
.anim [data-letras].visivel .letra { transform: none; }

/* ---------- Linhas que se desenham com o scroll ---------- */

/* Entre secções, a linha recta dá lugar a um fio desenhado à mão. */
.anim .sec-linha { border-top-color: transparent; }
.anim .sec-linha > .sec-dentro { position: relative; }
.fio {
  position: absolute; top: 0; left: var(--margem); width: calc(100% - 2 * var(--margem)); height: 24px;
  transform: translateY(-50%); overflow: visible; pointer-events: none;
}
.fio path { fill: none; stroke: var(--laranja); stroke-width: 1.6; stroke-linecap: round; }

/* Programa: um fio liga os momentos e acende cada um quando lá chega. */
.anim .programa { position: relative; }
.fio-programa { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.fio-programa path { fill: none; stroke: var(--laranja); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.anim .com-linha .momento-icone {
  position: relative; z-index: 2; background: inherit;
  transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease, transform 0.6s var(--saida);
}
.anim .com-linha .momento .momento-icone.aceso { background: var(--laranja); border-color: var(--laranja); color: var(--chocolate); transform: scale(1.1); }

/* ---------- Pormenores ---------- */

/* Confirmação enviada: o círculo estala e o visto desenha-se. */
.anim .rsvp-feito:not([hidden]) .feito-icone { animation: estalo 0.65s var(--saida) both; }
.anim .rsvp-feito:not([hidden]) .feito-icone .i { stroke-dasharray: 1 1; animation: tracar 0.6s var(--vaivem) 0.3s both; }
.anim .rsvp-feito:not([hidden]) > :not(.feito-icone) { animation: surgir 0.7s var(--saida) 0.2s both; }

/* Folha do calendário. */
.anim .folha[open] { animation: folha-entra 0.5s var(--saida); }
.anim .folha[open]::backdrop { animation: fundo-entra 0.4s ease; }

/* Setas dos botões avançam um pouco. */
.anim .botao .i { transition: transform 0.35s var(--saida); }
.anim .botao:hover svg:has(use[href="#i-seta"]) { transform: translateX(4px); }

@media (max-width: 960px) {
  .anim .historia-foto { border-radius: 36px; clip-path: inset(10% 8% 10% 8% round 36px); }
  .anim .historia-foto.visivel { clip-path: inset(0 0 0 0 round 36px); }
  .anim .cartao-data { --de: 28px; }
  /* No telemóvel a lista é vertical: os ícones começam apagados e acendem com a linha. */
  .anim .com-linha .momento-icone,
  .anim .com-linha .momento:first-child .momento-icone,
  .anim .com-linha .momento:last-child .momento-icone { background: var(--creme); border-color: var(--chocolate); color: var(--chocolate); }
}