/* ============================================================
   VERSÃO C — a estrutura da A com as flores da B como detalhe

   Aqui as flores NÃO tomam a página: elas moram nas bordas, nos
   gradientes e atrás dos cartões. O hero continua sendo a foto de
   vocês com o texto passando atrás — as roseiras entram só nas
   faixas pervinca de cima e de baixo, que já eram área vazia.

   Mesmo padrão da versão B: pranchas de Pierre-Joseph Redouté
   ("Les Roses", 1817-1824), domínio público via Wikimedia.
   ============================================================ */

.tema-c {
  --toile: url("assets/toile.webp");
  --toile-claro: url("assets/toile-claro.webp");
  --ladrilho: clamp(300px, 34vw, 500px);
}

/* ---------- hero: moldura de flores, fundo intacto ---------- */

/* Moldura, não fundo. A máscara elíptica esvazia o miolo, então a flor
   nunca chega perto do casal nem compete com a foto: ela só encosta na
   borda e some. z-index 4 = acima dos gradientes, abaixo da tipografia
   (--z-tipo é 5), para o nome continuar limpo por cima. */
.tema-c .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background-image: var(--toile);
  background-size: var(--ladrilho);
  mix-blend-mode: multiply;
  /* com os véus mais curtos a foto do ambiente aparece atrás — a flor tem
     que ceder, senão volta a parecer padrão de fundo e não detalhe */
  opacity: 0.17;
  pointer-events: none;
  /* raio menor que a metade da caixa + parada transparente alta = a flor
     só existe na faixa de fora. Raio grande demais espalha o padrão pelo
     miolo todo, que foi o erro da primeira tentativa. */
  mask-image: radial-gradient(ellipse 52% 48% at 50% 50%, transparent 69%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 52% 48% at 50% 50%, transparent 69%, #000 100%);
}

/* ---------- faixa de flores entre as seções ---------- */

.tema-c .faixa-toile {
  height: clamp(3.5rem, 8vw, 5.5rem);
  background-image: var(--toile);
  background-size: var(--ladrilho);
  border-block: 1px solid var(--linha);
  opacity: 0.85;
}

/* ---------- seções claras ganham um fundo discreto ---------- */

.tema-c .historia,
.tema-c .presentes-previa,
.tema-c .rsvp-chamada { position: relative; isolation: isolate; }
.tema-c .historia::before,
.tema-c .presentes-previa::before,
.tema-c .rsvp-chamada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--toile-claro);
  background-size: var(--ladrilho);
  opacity: 0.3;
  pointer-events: none;
}
/* nas pontas o padrão some, para o texto do meio ficar limpo */
.tema-c .historia::before {
  mask-image: linear-gradient(to bottom, #000, transparent 38%, transparent 62%, #000);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 38%, transparent 62%, #000);
}

/* ---------- cantos floridos nos blocos de cartão ---------- */

.tema-c .convite-corpo,
.tema-c .local-info,
.tema-c .doacao-cartao { position: relative; }
.tema-c .convite-corpo::before,
.tema-c .local-info::before {
  content: "";
  position: absolute;
  top: calc(var(--e4) * -1);
  right: calc(var(--e4) * -1);
  width: clamp(6rem, 14vw, 10rem);
  aspect-ratio: 1;
  background-image: var(--toile);
  background-size: cover;
  mask-image: radial-gradient(circle at 70% 30%, #000 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 30%, transparent 72%);
  opacity: 0.55;
  pointer-events: none;
}
.tema-c .local-info::before { opacity: 0.35; }

/* ---------- palavra e fecho: padrão por cima do véu ---------- */

.tema-c .palavra .cena-veu::after,
.tema-c .fecho-veu::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--toile);
  background-size: var(--ladrilho);
  filter: invert(1) hue-rotate(180deg);
  opacity: 0.14;
  pointer-events: none;
}

/* o fecho fecha o site como o hero abre: mesma moldura, mesmo recuo do
   miolo — a flor emoldura o casal em vez de passar por cima dele */
.tema-c .fecho-veu::after {
  opacity: 0.26;
  mask-image: radial-gradient(ellipse 54% 50% at 50% 50%, transparent 66%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 54% 50% at 50% 50%, transparent 66%, #000 100%);
}

/* ---------- loja e álbum ---------- */

.tema-c .album-topo {
  background-image: var(--toile);
  background-size: var(--ladrilho);
}
.tema-c .album-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(180 196 234 / 0.72);
  pointer-events: none;
}
.tema-c .album-topo { position: relative; isolation: isolate; }
.tema-c .album-topo > * { position: relative; }

/* ---------- cortina ---------- */

.tema-c .cortina::before {
  background-image: var(--toile-claro);
  background-size: var(--ladrilho);
  opacity: 0.4;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  .tema-c .hero::after { opacity: 0.2; }
}