/* ============================================================
   PADRÃO KANNON — PREENCHIMENTO DE MARCA (supergrafismo)
   Um motivo da identidade vira textura de fundo, COLORIDA pelos
   tokens da marca. É o "fundo de designer": discreto, derivado da
   marca, aparecendo de formas distintas em seções distintas.

   Trocar por cliente = trocar SÓ o motivo (--k-motif) e a cor herda
   de --brand. Pensado pra automação: a plataforma escolhe 1 motivo
   por nicho e o resto se ajusta sozinho.

   Motivos prontos em patterns/:
     motif-eco  (ondas)   motif-dots (pontos)  motif-cross (+)
     motif-arch (arcos)   motif-topo (curvas)  motif-grid  (grade)

   Carrega DEPOIS de tokens/components.
   ============================================================ */

:root {
  /* motivo padrão da marca Kannon = ondas (eco/escuta) */
  --k-motif:         url(patterns/motif-eco.svg);
  --k-motif-size:    180px;   /* densidade do ladrilho            */
  --k-motif-color:   var(--brand);
  --k-motif-opacity: 0.05;    /* textura, não decoração que se lê */
}

/* ---- BASE: textura ladrilhada num container ----------------- */
/* o conteúdo do container fica acima do fundo automaticamente */
.k-fill { position: relative; isolation: isolate; }
.k-fill > * { position: relative; z-index: 1; }
.k-fill::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--k-motif-color);
  opacity: var(--k-motif-opacity);
  -webkit-mask: var(--k-motif) 0 0 / var(--k-motif-size) repeat;
          mask: var(--k-motif) 0 0 / var(--k-motif-size) repeat;
}

/* ---- MODOS DE COR ------------------------------------------- */
/* sobre bloco escuro: motivo claro, um pouco mais visível */
.k-fill--dark   { --k-motif-color: #fff; --k-motif-opacity: 0.07; }
/* tom-sobre-tom sobre bloco na cor da marca (claro sobre brand) */
.k-fill--brand  { --k-motif-color: #fff; --k-motif-opacity: 0.12; }

/* ---- DENSIDADE / FORÇA -------------------------------------- */
.k-fill--dense  { --k-motif-size: 110px; }
.k-fill--airy   { --k-motif-size: 300px; }
.k-fill--soft   { --k-motif-opacity: 0.035; }
.k-fill--loud   { --k-motif-opacity: 0.09; }

/* ---- MARCA D'ÁGUA GIGANTE (1 motivo só, sangrando no canto) -- */
/* uso de "designer": um símbolo enorme atrás de um título/CTA    */
.k-fill--mark::before {
  background: var(--k-motif-color);
  opacity: var(--k-mark-opacity, 0.06);
  -webkit-mask: var(--k-motif) var(--k-mark-pos, right -6% top -14%)
                / var(--k-mark-size, 460px) no-repeat;
          mask: var(--k-motif) var(--k-mark-pos, right -6% top -14%)
                / var(--k-mark-size, 460px) no-repeat;
}
.k-fill--mark.k-fill--dark  { --k-mark-opacity: 0.08; }
.k-fill--mark.k-fill--brand { --k-mark-opacity: 0.14; }

/* ---- FAIXA: motivo só numa tira (divisória entre seções) ----- */
.k-fill--band::before {
  inset: 0 0 auto 0; height: var(--k-band-h, 96px);
  -webkit-mask: var(--k-motif) 0 0 / var(--k-motif-size) repeat-x;
          mask: var(--k-motif) 0 0 / var(--k-motif-size) repeat-x;
  /* esmaece pra baixo pra virar transição, não parede */
  -webkit-mask-composite: source-in;
}

/* ---- back-compat: .k-pattern (catálogo/vitrine antigos) ------ */
/* mapeia o nome antigo pro novo motor; respeita --pat-* legados  */
.k-pattern { position: relative; isolation: isolate; }
.k-pattern > * { position: relative; z-index: 1; }
.k-pattern::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--pat-color, var(--k-motif-color));
  opacity: var(--pat-opacity, var(--k-motif-opacity));
  -webkit-mask: var(--pat-src, var(--k-motif)) 0 0 / var(--pat-size, var(--k-motif-size)) repeat;
          mask: var(--pat-src, var(--k-motif)) 0 0 / var(--pat-size, var(--k-motif-size)) repeat;
}
.k-pattern--dark::before { --pat-color: #fff; opacity: var(--pat-opacity, 0.07); }