/* Telegrama de Eros — kit de ornamento v3 (site e card usam o mesmo).
   Material único: papel de carta antigo sobre damasco em relevo; ornamento = ouro em relevo
   (luz do alto à esquerda); figura pintada graduada para a paleta; pérolas, renda e laço de organza.
   Caminhos relativos a este arquivo (public/arte/). Ver docs/arte.md. */

/* emoji 15% maior que a letra em volta (nomes e mensagens manuscritas) — só pictogramas, o ♡ fica na letra */
@font-face { font-family: 'Emoji Maior'; src: local('Segoe UI Emoji'), local('Noto Color Emoji'), local('Apple Color Emoji');
  size-adjust: 115%; unicode-range: U+1F000-1FAFF, U+2700-27BF, U+FE0F, U+200D; }

:root {
  /* paleta */
  --papel: #fbf3e8;
  --papel-sombra: #ead8c8;
  --damasco: #f1dbd3;
  --rosa-cha: #e9c6be;
  --rosa: #e3a9b0;
  --rosa-funda: #b9737c;
  --ouro-claro: #f2e2b0;
  --ouro: #b48b45;
  --ouro-escuro: #6e4f1f;
  --tinta: #3b2129;
  --tinta-suave: #6b464e;
  --linha: #a8706b;          /* sublinhado de campo (3:1 no papel) */
  --pauta: #e5c9c2;          /* pautas, só decoração */
  --vermelho: #a51e2d;       /* só coração, selo, carimbo e lacre */
  --sombra: 90 47 42;        /* rgb da sombra assada (#5a2f2a) */

  /* letras */
  --f-titulo: 'Pinyon Script', 'Dancing Script', cursive;
  --f-rotulo: 'Cinzel', 'Cormorant Garamond', serif;
  --f-texto: 'Cormorant Garamond', Georgia, serif;
  --f-mao: 'Emoji Maior', 'Dancing Script', 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', cursive;
  --f-emoji: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji';

  /* moldura dourada (moldura de entalhe: filete escuro, luz, ouro, sombra) */
  --moldura:
    0 0 0 1px #5f4219,
    0 0 0 2.5px #f6e7b8,
    0 0 0 4.5px #c9a35a,
    0 0 0 6px #7d5a26,
    0 0 0 7px #f2e2b0,
    0 0 0 8px #6e4f1f,
    2px 4px 6px 8px rgb(var(--sombra) / .22),
    inset 0 0 0 1px #6e4f1f,
    inset 0 0 0 2px #f2e2b0,
    inset 1px 2px 5px 2px rgb(var(--sombra) / .22);
}

/* ---------- fundo: damasco em relevo + mancha de aquarela ---------- */
.damasco {
  background-color: var(--damasco);
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgb(255 246 242 / .55), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgb(214 160 160 / .22), transparent 70%),
    url(./damasco.webp);
  background-size: auto, auto, 312px auto;
}

/* ---------- folha de papel com moldura, pérolas e cantos ---------- */
/* receita única de sombra (a mesma que vem assada nas peças raster: para baixo-direita, #5A2F2A) */
:root { --sombra-peca: drop-shadow(2px 4px 3px rgb(var(--sombra) / .28)); }

/* papel: grão + vinheta envelhecida + relevo seco (marca da chapa) + borda de papel feito à mão (deckle) */
.folha {
  position: relative;
  box-shadow: 3px 8px 22px rgb(var(--sombra) / .24), 1px 2px 4px rgb(var(--sombra) / .16);
  isolation: isolate;
}
.folha::before {
  /* (display: contents no pai também esconde isto: ver .folha-fronte no celular) */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--papel);
  background-image:
    radial-gradient(130% 95% at 50% 45%, transparent 55%, rgb(200 150 120 / .18) 86%, rgb(170 110 90 / .32) 100%),
    url(./papel.webp);
  background-size: auto, 512px;
  /* marca da chapa: filete afundado (luz embaixo-direita, sombra em cima-esquerda) a 6 px da borda */
  box-shadow: inset 0 0 0 6px transparent, inset 1px 1px 0 6px rgb(var(--sombra) / .10), inset -1px -1px 0 6px rgb(255 255 255 / .7);
  -webkit-mask-box-image: url(./deckle.webp) 12 round;
}
/* moldura entalhada em folha de ouro (moldura-ouro.webp: perfil + fio de contas, mesma luz do kit) */
.folha > .moldura {
  position: absolute; inset: var(--recuo, 16px); pointer-events: none; z-index: 1;
  border: var(--moldura-l, 16px) solid transparent;
  border-image: url(./moldura-ouro.webp) 36 stretch;
  filter: drop-shadow(1px 2px 2px rgb(var(--sombra) / .3));
}
/* fio de pérolas logo por dentro da moldura */
.folha > .moldura::before {
  content: ""; position: absolute; inset: 4px;
  background:
    url(./perolas.svg) top left / var(--perola, 14px) var(--perola, 14px) repeat-x,
    url(./perolas.svg) bottom left / var(--perola, 14px) var(--perola, 14px) repeat-x,
    url(./perolas-v.svg) top left / var(--perola, 14px) var(--perola, 14px) repeat-y,
    url(./perolas-v.svg) top right / var(--perola, 14px) var(--perola, 14px) repeat-y;
  background-origin: border-box;
}
/* cantos de rocalha dourada (ouro-canto.webp aponta para o alto-esquerda) */
.canto {
  position: absolute; z-index: 3; pointer-events: none; width: var(--canto, 120px); height: auto;
}
.canto.se { left: calc(var(--recuo, 16px) - var(--canto, 120px) * .22); top: calc(var(--recuo, 16px) - var(--canto, 120px) * .2); }
.canto.sd { right: calc(var(--recuo, 16px) - var(--canto, 120px) * .22); top: calc(var(--recuo, 16px) - var(--canto, 120px) * .2); transform: scaleX(-1); }
.canto.ie { left: calc(var(--recuo, 16px) - var(--canto, 120px) * .22); bottom: calc(var(--recuo, 16px) - var(--canto, 120px) * .2); transform: scaleY(-1); }
.canto.id { right: calc(var(--recuo, 16px) - var(--canto, 120px) * .22); bottom: calc(var(--recuo, 16px) - var(--canto, 120px) * .2); transform: scale(-1, -1); }

/* orla de renda saindo por baixo da folha (como um papel rendado / doily) */
.folha > .orla {
  position: absolute; inset: calc(var(--orla, 18px) * -1); z-index: -2; pointer-events: none;
  --r: var(--renda, 26px);
  background:
    url(./renda-cima.svg) left top / calc(var(--r) * 1.4615) var(--r) repeat-x,
    url(./renda.svg) left bottom / calc(var(--r) * 1.4615) var(--r) repeat-x,
    url(./renda-v.svg) left top / var(--r) calc(var(--r) * 1.4615) repeat-y,
    url(./renda-dir.svg) right top / var(--r) calc(var(--r) * 1.4615) repeat-y;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  filter: drop-shadow(1px 2px 2px rgb(var(--sombra) / .18));
}

/* ---------- divisores ---------- */
/* filete fino de ouro com fleurão no meio (❦) */
.filete { display: flex; align-items: center; gap: 8px; height: 24px; }
.filete::before, .filete::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #b48b45 18%, #c9a35a 50%, #b48b45 82%, transparent); box-shadow: 0 1px 0 rgb(255 255 255 / .7); }
.filete > i { width: 40px; height: 24px; flex: none; background: url(./fleurao.svg) center / contain no-repeat; }
/* versalete entre filetes finos */
.versalete-filetado { display: flex; align-items: center; justify-content: center; gap: 12px; }
.versalete-filetado::before, .versalete-filetado::after { content: ""; width: 32px; height: 1px; background: #b48b45; box-shadow: 0 1px 0 rgb(255 255 255 / .7); }
.renda { height: 26px; background: url(./renda.svg) center top / 38px 26px repeat-x; }
.grega { height: 16px; background: url(./grega.svg) center / 28px 16px repeat-x; }
.perolas { height: 14px; background: url(./perolas.svg) center / 14px 14px repeat-x; }

/* ---------- janela em arco com a pintura dentro (a figura mora DENTRO da moldura) ---------- */
.janela {
  position: relative; overflow: hidden;
  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
  box-shadow: var(--moldura);
  background: #e9d6c6;
  outline: 0;
}
.janela > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.janela::after { /* vidro do quadro: sombra interna do entalhe e véu de papel */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 6px 18px rgb(var(--sombra) / .45), inset 0 -2px 6px rgb(var(--sombra) / .3);
  background: radial-gradient(120% 90% at 50% 100%, transparent 60%, rgb(251 238 230 / .25));
}

/* ---------- textos ---------- */
.rotulo { font-family: var(--f-rotulo); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ouro-escuro); }
.titulo-script { font-family: var(--f-titulo); font-weight: 400; color: var(--tinta); line-height: 1; }
.mao { font-family: var(--f-mao); font-weight: 500; color: var(--tinta); }
.emoji { font-family: var(--f-emoji); }

/* fio de pérolas acompanhando o arco da janela (desenhado por arcoDePerolas() em JS) */
.arco-perolas { position: absolute; pointer-events: none; overflow: visible; z-index: 4; }