/* Flores do convite no site: o ramo de plumas, folhas secas, eucalipto e flores brancas, e as sombras de folhas.
   Cada ramo é uma caixa sem tamanho posta no ponto de onde as hastes saem; 1em do ramo é 100 unidades do desenho,
   por isso o tamanho do ramo inteiro muda só com --ramo. As medidas de cada haste vêm no fim deste ficheiro,
   geradas por scripts/flores.mjs. Sem a classe "anim" (sem JavaScript ou com menos movimento pedido) fica tudo parado. */

.ramo {
  position: absolute; width: 0; height: 0; pointer-events: none;
  font-size: var(--ramo, 56px);
  transform: skewX(calc(var(--vento, 0deg) * var(--sentido, 1)));
  transform-origin: 0 0;
}
.ramo-espelho { scale: -1 1; --sentido: -1; }
.fp { position: absolute; display: block; max-width: none; overflow: visible; }

/* Sombras de folhas no canto de cima da página, por trás de tudo (até do topo), como no convite.
   Para ficarem por trás, o corpo, o topo e o herói deixam ver o fundo do <html>, que é da mesma cor. */
body, .topo, #inicio { background: transparent; }
.sombras-folhas {
  position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: min(100vh, 980px);
  overflow: hidden; pointer-events: none;
}
.sombras-folhas img {
  position: absolute; top: 0; right: 0; width: min(66vw, 1000px); height: auto; opacity: 0.14;
  transform-origin: 100% 0;
  -webkit-mask-image: radial-gradient(115% 110% at 100% 0, #000 52%, transparent 96%);
  mask-image: radial-gradient(115% 110% at 100% 0, #000 52%, transparent 96%);
}

/* Herói: ramo no canto do painel (por baixo do texto da esquerda), raminho à direita. */
#inicio { position: relative; overflow-x: hidden; overflow-x: clip; }
.lado-a { position: relative; z-index: 3; }
.ramo-heroi { left: 6.5%; bottom: 0; z-index: 2; --ramo: 9.6cqw; }
.raminho-heroi { display: none; }
.cartao-data { position: relative; }
.raminho-data { right: 13%; bottom: 0; z-index: 1; --ramo: clamp(34px, 3.3vw, 46px); }

/* Sementes de capim que se soltam do ramo (só com movimento). */
.sementes { display: none; }

/* Confirmar: um raminho a subir do canto, por trás do texto. */
.sec-destaque { position: relative; overflow: hidden; }
.sec-destaque > .sec-dentro { position: relative; z-index: 1; }
.raminho-confirmar { left: 3%; bottom: -0.1em; z-index: 0; --ramo: clamp(40px, 5vw, 66px); }

/* Rodapé: um ramo em cada canto, as plumas claras sobre o chocolate. */
.rodape { position: relative; overflow: hidden; }
.rodape-dentro { position: relative; z-index: 1; }
.ramo-rodape { bottom: -0.15em; z-index: 0; --ramo: clamp(34px, 4.4vw, 60px); }
.ramo-rodape-esq { left: 4%; }
.ramo-rodape-dir { right: 4%; }

@media (max-width: 960px) {
  .sombras-folhas img { width: 128vw; right: -22vw; opacity: 0.12; }
  /* No ecrã estreito o ramo inclina-se um pouco para dentro, para as plumas não fugirem pela margem. */
  .ramo-heroi { left: 4%; rotate: 15deg; --ramo: 10.4cqi; }
  .raminho-heroi { display: block; right: -2%; bottom: 50%; --ramo: 8.6cqi; }
  .raminho-data { display: none; }
  /* No telemóvel o raminho do "Vão estar connosco?" sobe do lado direito, ao lado do título. */
  .raminho-confirmar { left: auto; right: -4%; bottom: auto; top: 230px; scale: 1 1; --sentido: 1; --ramo: 30px; }
  .ramo-rodape { --ramo: 31px; }
  .ramo-rodape-esq { left: -5%; }
  .ramo-rodape-dir { right: -5%; }
}

/* ---------- Movimento ---------- */

@keyframes fp-cresce { from { scale: 0; opacity: 0; } 35% { opacity: 1; } }
@keyframes fp-abre { from { scale: 0; opacity: 0; } 65% { scale: 1.1; opacity: 1; } }
@keyframes fp-balanca { from { rotate: calc(var(--g) * -1); } to { rotate: var(--g); } }
@keyframes sombras-entram { from { opacity: 0; } }
@keyframes sombras-vento {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  30% { rotate: 1.6deg; translate: -14px 6px; }
  55% { rotate: 0.4deg; translate: -4px 2px; }
  78% { rotate: -1deg; translate: 8px -4px; }
}
@keyframes semente-voa {
  0% { opacity: 0; translate: 0 0; rotate: 0deg; }
  12% { opacity: 0.9; }
  80% { opacity: 0.7; }
  100% { opacity: 0; translate: var(--sx) var(--sy); rotate: 220deg; }
}

/* O ramo do herói nasce quando o painel e a fotografia já subiram (movimento.css: 0,35 s e 0,55 s). */
.anim .ramo-heroi .fp, .anim .raminho-heroi .fp, .anim .raminho-data .fp {
  animation: fp-cresce 1.3s var(--saida) calc(var(--inicio, 1.05s) + var(--d)) both, fp-balanca var(--b) ease-in-out var(--f) infinite alternate;
}
.anim .raminho-heroi { --inicio: 1.5s; }
.anim .raminho-data { --inicio: 1.9s; }
.anim .ramo-heroi .fp-flor, .anim .raminho-heroi .fp-flor, .anim .raminho-data .fp-flor {
  animation-name: fp-abre, fp-balanca; animation-duration: 0.9s, var(--b);
}

/* Os outros ramos esperam pelo ecrã (movimento.js põe .visivel). */
.anim [data-flores] .fp { scale: 0; opacity: 0; }
.anim [data-flores].visivel .fp {
  scale: 1; opacity: 1;
  animation: fp-cresce 1.3s var(--saida) var(--d) backwards, fp-balanca var(--b) ease-in-out var(--f) infinite alternate;
}
.anim [data-flores].visivel .fp-flor { animation-name: fp-abre, fp-balanca; animation-duration: 0.9s, var(--b); }

/* Longe do ecrã, o balanço pára (movimento.js põe .parado). Tem de pesar tanto como a regra de cima. */
.anim .ramo.parado .fp, .anim .sombras-folhas.parado img, .anim .sementes.parado i { animation-play-state: paused; }

.anim .sombras-folhas { animation: sombras-entram 2.4s ease 0.3s both; }
.anim .sombras-folhas img { animation: sombras-vento 17s ease-in-out infinite; will-change: rotate, translate; }

.anim .sementes { display: block; position: absolute; left: 6.5%; bottom: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
.anim .sementes i {
  position: absolute; left: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 248, 0.95) 0%, rgba(255, 248, 238, 0.6) 30%, rgba(240, 226, 204, 0) 70%);
  opacity: 0;
  animation: semente-voa var(--t, 11s) linear var(--a, 3s) infinite;
}
.anim .sementes i:nth-child(1) { left: -40px; bottom: 230px; --sx: 260px; --sy: -190px; --t: 12s; --a: 2.6s; }
.anim .sementes i:nth-child(2) { left: 10px; bottom: 300px; --sx: 340px; --sy: -150px; --t: 14s; --a: 5.2s; width: 5px; height: 5px; }
.anim .sementes i:nth-child(3) { left: -80px; bottom: 180px; --sx: 210px; --sy: -260px; --t: 11s; --a: 8.4s; }
.anim .sementes i:nth-child(4) { left: 40px; bottom: 250px; --sx: 380px; --sy: -110px; --t: 16s; --a: 3.9s; width: 6px; height: 6px; }
.anim .sementes i:nth-child(5) { left: -10px; bottom: 340px; --sx: 300px; --sy: -230px; --t: 13s; --a: 10.5s; width: 4px; height: 4px; }
.anim .sementes i:nth-child(6) { left: -60px; bottom: 270px; --sx: 240px; --sy: -300px; --t: 15s; --a: 7s; }

@media (max-width: 960px) {
  .anim .sementes { left: 5%; }
  .anim .sementes i { scale: 0.8; }
  .anim .sementes i:nth-child(n) { --sx: 170px; }
  .anim .sementes i:nth-child(odd) { --sy: -150px; }
  .anim .sementes i:nth-child(even) { --sy: -200px; }
}

/* Gerado por scripts/flores.mjs: medidas, ângulos e tempos de cada haste. */
.fp-r1 { left: -0.96em; bottom: -0.04em; width: 1.92em; height: 6.02em; transform: rotate(-28deg); transform-origin: 50% 99.34%; --d: 0s; --g: 1.96deg; --b: 6.43s; --f: -5.53s; }
.fp-r2 { left: -0.92em; bottom: -0.04em; width: 1.84em; height: 6.78em; transform: rotate(-8deg); transform-origin: 50% 99.41%; --d: 0.07s; --g: 1.8deg; --b: 8.41s; --f: -6.18s; }
.fp-r3 { left: -1.02em; bottom: -0.04em; width: 2.04em; height: 4.84em; transform: rotate(-46deg); transform-origin: 50% 99.17%; --d: 0.14s; --g: 2.57deg; --b: 6.68s; --f: -4.38s; }
.fp-r4 { left: -0.92em; bottom: -0.04em; width: 1.84em; height: 5.14em; transform: rotate(10deg); transform-origin: 50% 99.22%; --d: 0.21s; --g: 2.12deg; --b: 5.36s; --f: -2.81s; }
.fp-r5 { left: -0.8em; bottom: -0.04em; width: 1.6em; height: 5.36em; transform: rotate(-18deg); transform-origin: 50% 99.25%; --d: 0.28s; --g: 2.29deg; --b: 5.35s; --f: -0.96s; }
.fp-r6 { left: -0.52em; bottom: -0.04em; width: 1.04em; height: 3.7em; transform: rotate(-36deg); transform-origin: 50% 98.92%; --d: 0.32s; --g: 1.24deg; --b: 6.82s; --f: -5.33s; }
.fp-r7 { left: -0.46em; bottom: -0.04em; width: 0.92em; height: 3.1em; transform: rotate(20deg); transform-origin: 50% 98.71%; --d: 0.39s; --g: 0.95deg; --b: 5.79s; --f: -5.71s; }
.fp-r8 { left: -0.42em; bottom: -0.04em; width: 0.84em; height: 2.8em; transform: rotate(-14deg); transform-origin: 50% 98.57%; --d: 0.46s; --g: 1.14deg; --b: 6.29s; --f: -5.38s; }
.fp-r9 { left: -0.4em; bottom: -0.04em; width: 0.8em; height: 2.6em; transform: rotate(-55deg); transform-origin: 50% 98.46%; --d: 0.53s; --g: 1.19deg; --b: 6.3s; --f: -4s; }
.fp-r10 { left: -0.64em; bottom: -0.04em; width: 1.28em; height: 3.36em; transform: rotate(-52deg); transform-origin: 50% 98.81%; --d: 0.46s; --g: 2.01deg; --b: 6.46s; --f: -0.23s; }
.fp-r11 { left: -0.6em; bottom: -0.04em; width: 1.2em; height: 3.08em; transform: rotate(30deg); transform-origin: 50% 98.7%; --d: 0.53s; --g: 1.93deg; --b: 7.61s; --f: -5.14s; }
.fp-r12 { left: -0.56em; bottom: -0.04em; width: 1.12em; height: 2.7em; transform: rotate(-32deg); transform-origin: 50% 98.52%; --d: 0.6s; --g: 1.42deg; --b: 7.79s; --f: -2.71s; }
.fp-r13 { left: -0.14em; bottom: -0.04em; width: 0.28em; height: 4.26em; transform: rotate(-26deg); transform-origin: 50% 99.06%; --d: 0.56s; --g: 2.49deg; --b: 8.02s; --f: -5.35s; }
.fp-r14 { left: -0.14em; bottom: -0.04em; width: 0.28em; height: 3.86em; transform: rotate(2deg); transform-origin: 50% 98.96%; --d: 0.63s; --g: 2.74deg; --b: 6.22s; --f: -4.27s; }
.fp-r15 { left: -0.14em; bottom: -0.04em; width: 0.28em; height: 4.56em; transform: rotate(-12deg); transform-origin: 50% 99.12%; --d: 0.7s; --g: 2.67deg; --b: 6.57s; --f: -2.2s; }
.fp-r16 { left: -0.14em; bottom: -0.04em; width: 0.28em; height: 3.56em; transform: rotate(-41deg); transform-origin: 50% 98.88%; --d: 0.77s; --g: 3deg; --b: 8.43s; --f: -5.71s; }
.fp-r17 { left: -0.01em; bottom: 1.67em; width: 1.65em; height: 1.65em; transform: rotate(12deg); transform-origin: 50% 50%; --d: 0.78s; --g: 5.6deg; --b: 5.29s; --f: -3.9s; }
.fp-r18 { left: -1em; bottom: 0.84em; width: 1.31em; height: 1.31em; transform: rotate(30deg); transform-origin: 50% 50%; --d: 0.92s; --g: 6.24deg; --b: 6.81s; --f: -1.24s; }
.fp-r19 { left: 0.95em; bottom: 0.65em; width: 1.1em; height: 1.1em; transform: rotate(4deg); transform-origin: 50% 50%; --d: 1.06s; --g: 6.73deg; --b: 5.73s; --f: -5.67s; }
.fp-m1 { left: -0.8em; bottom: -0.04em; width: 1.6em; height: 5.36em; transform: rotate(-14deg); transform-origin: 50% 99.25%; --d: 0s; --g: 1.86deg; --b: 7.15s; --f: -4.37s; }
.fp-m2 { left: -1.02em; bottom: -0.04em; width: 2.04em; height: 4.84em; transform: rotate(-34deg); transform-origin: 50% 99.17%; --d: 0.07s; --g: 2.36deg; --b: 6.89s; --f: -5.48s; }
.fp-m3 { left: -0.52em; bottom: -0.04em; width: 1.04em; height: 3.7em; transform: rotate(-26deg); transform-origin: 50% 98.92%; --d: 0.32s; --g: 0.9deg; --b: 6.25s; --f: -0.7s; }
.fp-m4 { left: -0.56em; bottom: -0.04em; width: 1.12em; height: 2.7em; transform: rotate(-4deg); transform-origin: 50% 98.52%; --d: 0.46s; --g: 1.84deg; --b: 8.4s; --f: -0.41s; }
.fp-m5 { left: -0.14em; bottom: -0.04em; width: 0.28em; height: 3.56em; transform: rotate(-22deg); transform-origin: 50% 98.88%; --d: 0.56s; --g: 2.83deg; --b: 6.74s; --f: -5.98s; }
.fp-m6 { left: -0.69em; bottom: 0.49em; width: 0.93em; height: 0.93em; transform: rotate(18deg); transform-origin: 50% 50%; --d: 0.78s; --g: 5.38deg; --b: 8.25s; --f: -6.87s; }