/* SEMEIA — fundos com textura, divisores de seção e elementos decorativos.
   Requer tokens/tokens.css e css/base.css. Os caminhos são relativos a esta pasta (css/).
   Documentação: docs/texturas-e-elementos.md */

/* ================= FUNDOS COM TEXTURA =================
   Some sobre a cor da seção: <section class="secao secao--salvia fundo-raminhos"> */

/* grão de papel: ruído bem leve gerado por filtro SVG (não baixa arquivo) */
.fundo-papel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .16 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
.fundo-raminhos { background-image: url("../assets/texturas/raminhos.svg"); background-size: 180px; }
.fundo-coracoes { background-image: url("../assets/texturas/coracoes.svg"); background-size: 200px; }
.fundo-pontos   { background-image: url("../assets/texturas/pontos.svg"); background-size: 28px; }
.fundo-confete  { background-image: url("../assets/texturas/confete.svg"); background-size: 260px; }
.fundo-listras  { background-image: url("../assets/texturas/listras.svg"); background-size: 40px; }
.fundo-xadrez   { background-image: url("../assets/texturas/xadrez.svg"); background-size: 48px; }
.secao--verde.fundo-raminhos { background-image: url("../assets/texturas/raminhos-sobre-verde.svg"); }

/* aquarela: manchas suaves nas cores da marca (só CSS) */
.fundo-aquarela {
  background-image:
    radial-gradient(38rem 26rem at 8% 12%, color-mix(in srgb, var(--salvia) 34%, transparent), transparent 70%),
    radial-gradient(34rem 24rem at 96% 30%, color-mix(in srgb, var(--rosa) 42%, transparent), transparent 70%),
    radial-gradient(30rem 22rem at 60% 100%, color-mix(in srgb, var(--amarelo) 28%, transparent), transparent 70%);
}
.fundo-amanhecer { background-image: linear-gradient(180deg, var(--amarelo-100), var(--creme) 55%, var(--salvia-100)); }
.fundo-ceu       { background-image: linear-gradient(180deg, #E6F0F6, var(--creme) 70%); }

/* textura só nas bordas: desbota para o centro, onde fica o texto */
.fundo-desbotado { position: relative; isolation: isolate; }
.fundo-desbotado::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, var(--fundo-centro, var(--creme)) 35%, transparent 80%);
}

/* ================= DIVISORES DE SEÇÃO =================
   Coloque no fim de uma seção; --divisor-cor = cor da PRÓXIMA seção. */
.divisor {
  display: block; width: 100%; height: clamp(2.5rem, 6vw, 5rem);
  background: var(--divisor-cor, var(--papel));
  -webkit-mask: var(--divisor-forma) center bottom / 100% 100% no-repeat;
          mask: var(--divisor-forma) center bottom / 100% 100% no-repeat;
  margin-bottom: -1px;
}
.divisor--onda      { --divisor-forma: url("../assets/divisores/onda.svg"); }
.divisor--colinas   { --divisor-forma: url("../assets/divisores/colinas.svg"); height: clamp(3rem, 8vw, 7rem); }
.divisor--pincelada { --divisor-forma: url("../assets/divisores/pincelada.svg"); height: clamp(1.75rem, 4vw, 3.5rem); }
.divisor--festonado { --divisor-forma: url("../assets/divisores/festonado.svg"); height: clamp(1.25rem, 2.6vw, 2.5rem); }
.divisor--invertido { transform: scaleY(-1); margin-bottom: 0; margin-top: -1px; }

/* colinas ilustradas em 3 tons de verde (rodapé de seção, como na tampa da caixa) */
.colinas { display: block; width: 100%; aspect-ratio: 1440 / 220; background: url("../assets/divisores/colinas-cor.svg") center bottom / 100% 100% no-repeat; }

/* linha divisória com coração */
.linha-coracao { display: flex; align-items: center; gap: var(--e-4); color: var(--terracota); max-width: 22rem; margin-inline: auto; }
.linha-coracao::before, .linha-coracao::after { content: ""; flex: 1; height: 1px; background: currentColor; }

/* ================= ELEMENTOS DECORATIVOS =================
   <img class="enfeite enfeite--canto-se" src="assets/elementos/canto-folhas.svg" alt=""> dentro de .com-enfeites */
.com-enfeites { position: relative; isolation: isolate; overflow: clip; }
.enfeite { position: absolute; z-index: -1; pointer-events: none; user-select: none; width: var(--enfeite-tamanho, clamp(4rem, 10vw, 9rem)); height: auto; opacity: var(--enfeite-opacidade, 1); }
.enfeite--frente { z-index: 1; }
.enfeite--canto-se { top: 0; left: 0; }
.enfeite--canto-sd { top: 0; right: 0; transform: scaleX(-1); }
.enfeite--canto-ie { bottom: 0; left: 0; transform: scaleY(-1); }
.enfeite--canto-id { bottom: 0; right: 0; transform: scale(-1); }
.enfeite--pequeno { --enfeite-tamanho: clamp(1.75rem, 4vw, 3rem); }
.enfeite--grande  { --enfeite-tamanho: clamp(8rem, 20vw, 16rem); }
.enfeite--suave   { --enfeite-opacidade: .45; }
@media (max-width: 639px) { .enfeite--so-desktop { display: none; } }

/* flutuação leve para nuvens, corações e brilhos */
@keyframes flutuar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.flutua { animation: flutuar 5s ease-in-out infinite; }
.flutua--devagar { animation-duration: 8s; }

/* mancha de aquarela atrás de uma imagem: <div class="mancha mancha--rosa"><img …></div> */
.mancha { position: relative; isolation: isolate; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.mancha::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--mancha-cor, var(--salvia-100));
  -webkit-mask: var(--mancha-forma, url("../assets/elementos/mancha-1.svg")) center / contain no-repeat;
          mask: var(--mancha-forma, url("../assets/elementos/mancha-1.svg")) center / contain no-repeat;
}
.mancha > img { width: 78%; height: 78%; object-fit: contain; }
.mancha--2 { --mancha-forma: url("../assets/elementos/mancha-2.svg"); }
.mancha--3 { --mancha-forma: url("../assets/elementos/mancha-3.svg"); }
.mancha--rosa    { --mancha-cor: var(--rosa); }
.mancha--amarelo { --mancha-cor: var(--amarelo-100); }
.mancha--salvia  { --mancha-cor: var(--salvia); }

/* sublinhado e círculo "feitos à mão" numa palavra do título */
.grifo { position: relative; white-space: nowrap; }
.grifo::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.28em; height: 0.42em;
  background: url("../assets/elementos/sublinhado.svg") center / 100% 100% no-repeat;
}
.grifo--circulo::after { inset: -0.22em -0.35em; height: auto; background-image: url("../assets/elementos/circulo-a-mao.svg"); }

/* faixa de pincelada atrás de uma frase curta */
.pincelada {
  display: inline-block; padding: 0.35em 1.4em; position: relative; isolation: isolate;
}
.pincelada::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pincelada-cor, var(--papel));
  -webkit-mask: url("../assets/elementos/pincelada.svg") center / 100% 100% no-repeat;
          mask: url("../assets/elementos/pincelada.svg") center / 100% 100% no-repeat;
}
.pincelada--amarelo { --pincelada-cor: var(--amarelo); }
.pincelada--rosa    { --pincelada-cor: var(--rosa); }

/* superfícies */
.cartao { background: var(--cor-superficie); border: 1px solid var(--linha); border-radius: var(--raio-md); padding: var(--e-5); box-shadow: var(--sombra-1); }
.cartao--pontilhado { border: 2px dashed var(--terracota); box-shadow: none; background: var(--papel); }
.cartao--costura { outline: 1.5px dashed var(--linha); outline-offset: -0.6rem; }   /* "costura" como no ícone e no selo */

@media (prefers-reduced-motion: reduce) { .flutua { animation: none; } }