/* ============================================================
   LA PERFORATION — the BCE Vision differentiating motif.
   Everything the brand ships is a sheet torn out of a public
   registry: edges perforated with short VERTICAL TICKS, dividers
   made of the same ticks, and rubber stamps whose fill is the
   same hatching at a tighter pitch. One stroke vocabulary,
   three densities: 8px (perforation) · 5px (stamp fill) ·
   12px (background hatch).
   ============================================================ */

:root{--perf-tick:1.4px; --perf-len:7px; --hatch-pitch:5px}

/* --- 1. Perforated edges. Add to any surface. --- */
.bv-perf-t{background-image:repeating-linear-gradient(90deg,var(--perf-color) 0 var(--perf-tick),transparent var(--perf-tick) var(--perf-pitch));background-size:100% var(--perf-len);background-repeat:repeat-x;background-position:top left}
.bv-perf-b{background-image:repeating-linear-gradient(90deg,var(--perf-color) 0 var(--perf-tick),transparent var(--perf-tick) var(--perf-pitch));background-size:100% var(--perf-len);background-repeat:repeat-x;background-position:bottom left}
.bv-perf-l{background-image:repeating-linear-gradient(180deg,var(--perf-color) 0 var(--perf-tick),transparent var(--perf-tick) var(--perf-pitch));background-size:var(--perf-len) 100%;background-repeat:repeat-y;background-position:left top}
.bv-perf-r{background-image:repeating-linear-gradient(180deg,var(--perf-color) 0 var(--perf-tick),transparent var(--perf-tick) var(--perf-pitch));background-size:var(--perf-len) 100%;background-repeat:repeat-y;background-position:right top}
.bv-perf-x{background-image:repeating-linear-gradient(90deg,var(--perf-color) 0 var(--perf-tick),transparent var(--perf-tick) var(--perf-pitch)),repeating-linear-gradient(90deg,var(--perf-color) 0 var(--perf-tick),transparent var(--perf-tick) var(--perf-pitch));background-size:100% var(--perf-len);background-repeat:repeat-x;background-position:top left,bottom left}
.bv-perf-y{background-image:repeating-linear-gradient(180deg,var(--perf-color) 0 var(--perf-tick),transparent var(--perf-tick) var(--perf-pitch)),repeating-linear-gradient(180deg,var(--perf-color) 0 var(--perf-tick),transparent var(--perf-tick) var(--perf-pitch));background-size:var(--perf-len) 100%;background-repeat:repeat-y;background-position:left top,right top}

/* --- 2. Punch row: a standalone divider of vertical ticks. --- */
.bv-punchline{height:var(--perf-len);background-image:repeating-linear-gradient(90deg,var(--perf-color) 0 var(--perf-tick),transparent var(--perf-tick) var(--perf-pitch));background-repeat:repeat-x}
.bv-punchline--brand{background-image:repeating-linear-gradient(90deg,var(--magenta-400) 0 var(--perf-tick),transparent var(--perf-tick) var(--perf-pitch))}
.bv-punchline--accent{background-image:repeating-linear-gradient(90deg,var(--lime-600) 0 var(--perf-tick),transparent var(--perf-tick) var(--perf-pitch))}

/* --- 3. Ticket: the canonical card. Torn top and bottom. --- */
.bv-ticket{position:relative;background:var(--surface-card);border-left:1px solid var(--border-hairline);border-right:1px solid var(--border-hairline);padding:20px 20px}
.bv-ticket::before,.bv-ticket::after{content:"";position:absolute;left:0;right:0;height:var(--perf-len);background-image:repeating-linear-gradient(90deg,var(--perf-color) 0 var(--perf-tick),transparent var(--perf-tick) var(--perf-pitch));background-repeat:repeat-x}
.bv-ticket::before{top:calc(var(--perf-len) / -2)}
.bv-ticket::after{bottom:calc(var(--perf-len) / -2)}

/* --- 4. Hatch fill: the same stroke, tighter. Stamp interiors, chips. --- */
.bv-hatch{background-image:repeating-linear-gradient(90deg,color-mix(in oklch,currentColor 16%,transparent) 0 1px,transparent 1px var(--hatch-pitch))}

/* --- 5. Stamp: solid rule, hatched interior, slight tilt. --- */
.bv-stamp{display:inline-flex;align-items:center;gap:6px;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;padding:5px 9px;border:1.5px solid currentColor;border-radius:var(--radius-1);color:var(--magenta-600);transform:rotate(-2.5deg);white-space:nowrap;background-image:repeating-linear-gradient(90deg,color-mix(in oklch,currentColor 16%,transparent) 0 1px,transparent 1px var(--hatch-pitch))}
.bv-stamp--solid{border-width:2px}
.bv-stamp--plain{background-image:none}
.bv-stamp--ink{color:var(--ink-700)}
.bv-stamp--accent{color:var(--lime-700)}
.bv-stamp--right{transform:rotate(2deg)}
.bv-stamp--animate{animation:bv-stamp-in var(--dur-4) var(--ease-stamp) both}

/* --- 6. Registry identifier: always mono, always tabular. --- */
.bv-reg{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-reg)}
.bv-reg--muted{color:var(--text-muted)}

/* --- 7. Hatched background field, for hero + empty states. --- */
.bv-field{background-color:var(--surface-page);background-image:repeating-linear-gradient(90deg,var(--ink-100) 0 1px,transparent 1px 32px)}
.bv-field--inverse{background-color:var(--ink-950);background-image:repeating-linear-gradient(90deg,var(--ink-800) 0 1px,transparent 1px 32px)}
.bv-field--brand{background-color:var(--magenta-500);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 32px)}

/* --- 8. Poinçon tile: the mark's silhouette, staggered, at 8.5%.
       No lettering by design — a background-image SVG cannot reach the
       webfont, and a fallback monospace "BV" would not match Logomark. --- */
.bv-tile{background-image:url("../assets/pattern-registry.svg");background-size:132px 132px;background-repeat:repeat}
.bv-tile--inverse{background-image:url("../assets/pattern-registry-inverse.svg")}

/* --- 9. Underline mark: the lime highlighter under key words. --- */
.bv-mark{background:linear-gradient(to top,var(--lime-500) 0 .34em,transparent .34em);padding:0 .06em}

/* --- 10. Logo: the fringe collapses from lockup to icon. --- */
@keyframes bv-fringe-in{from{transform:scaleY(.2);opacity:0}to{transform:scaleY(1);opacity:1}}