/* ---------- display gear: slab guards (a real frame around the slab, 9-sliced so it fits any slab size) ----------
   Put data-vcase="<name>" on a binder wrap (every slab in it) or on one slab. Slabs carry an empty <i class="vc-case">.
   Frame art is 600px wide; rails ~71px (bottom ~86px). Slices keep the corners, gems and screws whole and stretch the straight runs. */
.vc-case, .vc-glow { display: none; }
[data-vcase] .slab:not(.junk), .slab[data-vcase] {
  container-type: inline-size; margin: 6.5% 6.5% 8.5%;
  border-color: rgba(255,255,255,.12); border-radius: 6px;
}
[data-vcase] .slab:not(.junk) > .vc-case, .slab[data-vcase] > .vc-case {
  display: block; position: absolute; z-index: 3; pointer-events: none;
  /* rail = 10cqw; it overlaps the slab's clear edge by 3.5cqw, so the frame hugs the slab */
  inset: -6.5cqw -6.5cqw -8.6cqw;
  border-style: solid; border-width: 15.8cqw 15.8cqw 18.6cqw;
  border-image-source: var(--vc-img); border-image-slice: 112 112 132 112; border-image-repeat: stretch;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.55));
}
[data-vcase="walnut"]       { --vc-img: url("img/case-walnut.webp?v=41"); }
[data-vcase="carbon"]       { --vc-img: url("img/case-carbon.webp?v=41"); }
[data-vcase="marble"]       { --vc-img: url("img/case-marble.webp?v=41"); }
[data-vcase="frost"]        { --vc-img: url("img/case-frost.webp?v=41"); }
[data-vcase="goldtrim"]     { --vc-img: url("img/case-goldtrim.webp?v=41"); }
[data-vcase="blackdiamond"] { --vc-img: url("img/case-blackdiamond.webp?v=41"); }
[data-vcase="rgb"]          { --vc-img: url("img/case-rgb.webp?v=41"); }
/* repeating edges for the patterned ones, so gems and weave stay round instead of stretching */
[data-vcase="blackdiamond"] .vc-case, [data-vcase="carbon"] .vc-case { border-image-repeat: round; }
/* frost lets a little of the slab glow through */
[data-vcase="frost"] .vc-case { opacity: .93; }

/* RGB: the white diffuser strips get a rainbow that cycles around the frame, with a soft spill of light onto the slab */
[data-vcase="rgb"] .slab:not(.junk) > .vc-glow, .slab[data-vcase="rgb"] > .vc-glow {
  display: block; position: absolute; z-index: 4; pointer-events: none;
  inset: -6.5cqw -6.5cqw -8.6cqw; border-style: solid; border-width: 15.8cqw 15.8cqw 18.6cqw;
  border-image: url("img/case-rgb-glow.webp?v=41") 112 112 132 112 stretch;
  animation: vc-rgb 6s linear infinite;
}
[data-vcase="rgb"] .slab:not(.junk) > .vc-glow::after, .slab[data-vcase="rgb"] > .vc-glow::after {
  content: ""; position: absolute; inset: -15.8cqw -15.8cqw -18.6cqw; border: inherit; border-image: inherit;
  filter: blur(7px) saturate(1.6); opacity: .85; mix-blend-mode: screen;
}
[data-vcase="rgb"] .slab:hover > .vc-glow, .slab[data-vcase="rgb"]:hover > .vc-glow { animation-duration: 2.5s; }
@keyframes vc-rgb { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vc-glow { animation: none !important; } }