/* ------------------------------------------------------------------
   Behaving.co — Motif system
   ------------------------------------------------------------------
   The circle motif comes from the logo: two overlapping circles.
   We take that vocabulary and scale it up as background texture.

   Three variants, all hairline strokes, all inherited from the mark:

     .motif-ripple  — concentric arcs radiating from a focal point
     .motif-arc     — one giant cropped circle peeking into the frame
     .motif-overlap — two overlapping circles, large, cropped

   Intensity is controlled by --motif-opacity (default 0.07).
   Colour is controlled by --motif-stroke (default navy).
   ------------------------------------------------------------------ */

:root {
  --motif-stroke: #1B2A4A;
  --motif-opacity: 0.07;
  --motif-stroke-width: 1;
}
[data-theme="dark"] {
  --motif-stroke: #F8F6F2;
  --motif-opacity: 0.08;
}

.motif {
  position: relative;
  isolation: isolate;
}
.motif::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  opacity: var(--motif-opacity);
}
.motif > * { position: relative; z-index: 1; }

/* Ripple — concentric arcs from bottom-right. SVG inline for crispness. */
.motif-ripple::before {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' fill='none' stroke='%231B2A4A' stroke-width='1.2'>\
<circle cx='1100' cy='720' r='120'/>\
<circle cx='1100' cy='720' r='220'/>\
<circle cx='1100' cy='720' r='340'/>\
<circle cx='1100' cy='720' r='480'/>\
<circle cx='1100' cy='720' r='640'/>\
<circle cx='1100' cy='720' r='820'/>\
<circle cx='1100' cy='720' r='1020'/>\
</svg>");
  background-position: bottom right;
  background-size: cover;
}

/* Arc — one giant cropped circle, top-left. */
.motif-arc::before {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' fill='none' stroke='%231B2A4A' stroke-width='1.2'>\
<circle cx='-120' cy='-80' r='680'/>\
</svg>");
  background-position: top left;
  background-size: cover;
}

/* Overlap — the logo geometry, massive. Navy + amber overlap. */
.motif-overlap::before {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' fill='none' stroke-width='1.2'>\
<circle cx='380' cy='420' r='520' stroke='%231B2A4A'/>\
<circle cx='760' cy='420' r='520' stroke='%23D4883A'/>\
</svg>");
  background-position: center;
  background-size: cover;
  opacity: calc(var(--motif-opacity) * 1.6);
}

/* Inverted — use on navy surfaces; switches stroke to off-white. */
.motif.on-navy::before {
  filter: invert(1) hue-rotate(180deg);
  opacity: calc(var(--motif-opacity) * 1.3);
}

.motif-off::before { display: none; }