/* crystal.css — Forcepush "crystal" hover animation for filled navy buttons
 * (owner spec, 2026-10-01; Round 3 restoration same day).
 *
 * B25 engine CSS, ported VERBATIM from the live site (products/client/repos/
 * portfolio/site/index.html, "B25 · system pasów kryształu" block) — same
 * rules, unchanged. template/js/crystal.js wraps every `.btn.cb` /
 * `.btn-primary` button in this markup at runtime; the shell's own
 * shell.css already anticipates it (`.bx-wrap:hover .cb, .bx-wrap.is-on
 * .cb { ... box-shadow: var(--glow) }`).
 *
 * Round 2 (commit 1373fdb) deleted this whole block because the compact
 * feedback-bar button (`.cb-sm`) showed the `.bstrip.o-top` strip's
 * overshoot poking out above the fixed feedback bar at rest — a stray
 * gradient rectangle over the page content behind the bar. Owner (Round 3):
 * the crystals ARE this engine, restore it; fix the real defect instead of
 * deleting the system. The defect was pure geometry: the live site's
 * numbers (`--h:24px`, `--ov:6px` → 18px overshoot above the button) were
 * authored for the live site's spacious contexts (home CTA, contact-form
 * button), never for a dense fixed bar with only 12px of padding above the
 * button. `.feedback-bar__inner` gives 12px top padding; crystal.js now
 * emits smaller strip geometry for `.cb-sm` buttons specifically (see its
 * CB_SM_STYLE constant) so the overshoot (11px) stays inside that padding
 * — nothing pokes above the bar at rest OR mid-grow. Every other filled
 * navy button (hero CTA, `.btn-primary`) keeps the live site's original,
 * unmodified geometry. No engine/CSS rule below was changed from the live
 * source to make this fit — only the per-button inline custom-property
 * values crystal.js emits.
 */
/* 2026-10-02 (owner defect fix): a flex item's `display: inline-block` is
 * blockified to `block` per spec, so whenever Crystal.wrap()'s injected
 * `.bx-wrap` lands as a direct flex child (e.g. gate.css's `#gate-form`,
 * column flex with the default stretch alignment) it silently grew to the
 * container's full cross-axis size instead of shrink-wrapping the button —
 * the button sat off-center and the `.bstrip` strips (sized off `.bx-wrap`'s
 * own width, see below) overflowed far past the button, showing as loose
 * gradient bars. `align-self: center` opts every `.bx-wrap`, on any button,
 * out of stretch sizing so it always shrink-wraps its button, in any flex
 * container, without having to special-case each caller. */
.bx-wrap { position: relative; display: inline-block; max-width: 100%; align-self: center; }
.bstrip {
  position: absolute; overflow: hidden; pointer-events: none; z-index: 3;
  mix-blend-mode: screen;
  width: var(--w, 82%); height: var(--h, 24px);
}
.bstrip.anchor-c { left: calc((100% - var(--w, 82%)) / 2); }
.bstrip.o-top { top: calc(var(--ov, 6px) - var(--h, 24px)); --pipe-y: calc(100% - var(--ov, 6px)); }
.bstrip.o-bot { top: calc(100% - var(--ov, 6px));            --pipe-y: var(--ov, 6px); }
.bstrip video {
  position: absolute; left: 50%; top: var(--pipe-y);
  width: var(--vw, 150%); height: auto; max-width: none;
  transform: translate(var(--vx, -50%), -50.5%);
  mix-blend-mode: screen;
  filter: var(--vf, none);
}
.bstrip.flip-xy video { transform: translate(var(--vx, -50%), -49.5%) scale(-1, -1); }
.bstrip.vm-mid video {
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.5) 28%, #000 44%, #000 56%, rgba(0,0,0,.5) 72%, transparent);
          mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.5) 28%, #000 44%, #000 56%, rgba(0,0,0,.5) 72%, transparent);
}
.bstrip.um-t {
  -webkit-mask-image: linear-gradient(to top, transparent var(--cut, 6px), #000 calc(var(--cut, 6px) + var(--rf, 11px)));
          mask-image: linear-gradient(to top, transparent var(--cut, 6px), #000 calc(var(--cut, 6px) + var(--rf, 11px)));
}
.bstrip.um-b {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--cut, 6px), #000 calc(var(--cut, 6px) + var(--rf, 11px)));
          mask-image: linear-gradient(to bottom, transparent var(--cut, 6px), #000 calc(var(--cut, 6px) + var(--rf, 11px)));
}
.bx-wrap.on-light .bstrip, .bx-wrap.on-light .bstrip video { mix-blend-mode: multiply; }
.bx-wrap.on-light .bstrip video { --vf: invert(1) hue-rotate(180deg) saturate(1.35); }