/* Reusable brand motif recipes: ticket edges, checker band, photo treatments. */
:root{
  --checker-unit:60.909px;
  --checker-h:70.179px;
}

/* The ticket ("bilhete") shape — geometry lifted from assets/ticket-bilhete.svg:
   a concave quarter-circle bite out of each corner (r 14.435) plus 3px half-moon
   scallops down the left and right edges at a 10px pitch. Built as a composite
   CSS mask so it holds at any button size instead of stretching an SVG. */
.vc-ticket-edge{
  mask-image:
    radial-gradient(circle var(--ticket-corner-r) at 0 0, transparent 99.5%, #000 100%),
    radial-gradient(circle var(--ticket-corner-r) at 100% 0, transparent 99.5%, #000 100%),
    radial-gradient(circle var(--ticket-corner-r) at 0 100%, transparent 99.5%, #000 100%),
    radial-gradient(circle var(--ticket-corner-r) at 100% 100%, transparent 99.5%, #000 100%),
    radial-gradient(circle var(--ticket-notch-r) at 0 50%, transparent 99.5%, #000 100%),
    radial-gradient(circle var(--ticket-notch-r) at 100% 50%, transparent 99.5%, #000 100%);
  mask-size:100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% var(--ticket-notch-pitch), 100% var(--ticket-notch-pitch);
  mask-position:0 0, 0 0, 0 0, 0 0, 0 center, 0 center;
  mask-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y;
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* Green/cream checkerboard band — the "bandeirinha" section divider. */
.vc-checker{
  height:var(--checker-h);
  background:
    repeating-conic-gradient(from 90deg at calc(var(--checker-unit)/2) 50%,
      var(--vc-green) 0 25%, transparent 0 50%) 0 0/var(--checker-unit) var(--checker-h);
  background-color:var(--vc-cream);
}

/* Archive photography is desaturated; product photography stays full colour. */
.vc-photo-archive{filter:grayscale(1) contrast(1.04)}