/* CifraPulse — engraving / guilloché background system.
   Served statically from /public so the SVG url()s are not processed by the
   webpack css-loader. Patterns are tinted with the live theme accent
   (--accent, defined in the app stylesheet) via CSS masking, so they follow
   light/dark automatically. */

:root {
  --cp-bg-guilloche-radial: url('/brand/engraving/guilloche-radial-02.svg');
  --cp-bg-guilloche-wave: url('/brand/engraving/guilloche-wave-01.svg');
  --cp-bg-security-frame: url('/brand/engraving/guilloche-frame-02.svg');
  --cp-bg-banknote-pattern: url('/brand/engraving/guilloche-rosette-01.svg');
}

.cp-engrave {
  background-color: var(--accent);
  -webkit-mask: var(--eng-src) center / contain no-repeat;
  mask: var(--eng-src) center / contain no-repeat;
  pointer-events: none;
}
.cp-engrave-radial  { --eng-src: url('/brand/hero/hero-cifrapulse-radial.svg'); }
.cp-engrave-rosette { --eng-src: url('/brand/engraving/guilloche-rosette-01.svg'); }
.cp-engrave-seal    { --eng-src: url('/brand/engraving/guilloche-rosette-02.svg'); }
.cp-engrave-network { --eng-src: url('/brand/hero/hero-signal-network.svg'); }
.cp-engrave-grid    { --eng-src: url('/brand/hero/hero-engraving-grid.svg'); }
.cp-engrave-wave    { --eng-src: url('/brand/hero/hero-currency-wave.svg'); }