/* Bone Flow #022 - Hover Border Effect v1.0.12 */
.bone-hover-border-effect-overlay{--bone-022-color:#35f4ff;--bone-022-duration:1.2s;--bone-022-line-width:3px;--bone-022-spin-width:2px;--bone-022-spin-glow:12px;--bone-022-radius:6px;position:fixed;z-index:2147483000;box-sizing:border-box;pointer-events:none;border-radius:var(--bone-022-radius);overflow:visible;transform:none!important}
.bone-hover-border-effect-overlay[hidden]{display:none!important}
.bone-hover-border-effect-ring,.bone-hover-border-effect-spin-window,.bone-hover-border-effect-chase-window{position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;display:none;background-color:transparent!important}
.bone-hover-border-effect-overlay[data-effect="normal"] .bone-hover-border-effect-ring{display:block;border:var(--bone-022-line-width) solid var(--bone-022-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--bone-022-color) 12%,transparent)}
/* neon: moving perimeter only; no element-interior fill. */
.bone-hover-border-effect-overlay[data-effect="neon"] .bone-hover-border-effect-ring{display:block;background:repeating-linear-gradient(90deg,var(--bone-022-color) 0 7px,transparent 7px 14px) 0 0/28px var(--bone-022-line-width) repeat-x,repeating-linear-gradient(0deg,var(--bone-022-color) 0 7px,transparent 7px 14px) 100% 0/var(--bone-022-line-width) 28px repeat-y,repeating-linear-gradient(90deg,var(--bone-022-color) 0 7px,transparent 7px 14px) 0 100%/28px var(--bone-022-line-width) repeat-x,repeating-linear-gradient(0deg,var(--bone-022-color) 0 7px,transparent 7px 14px) 0 0/var(--bone-022-line-width) 28px repeat-y;filter:drop-shadow(0 0 5px var(--bone-022-color));animation:bone-022-neon var(--bone-022-duration) linear infinite}.bone-hover-border-effect-overlay[data-effect="neon"][data-direction="counterclockwise"] .bone-hover-border-effect-ring{animation-direction:reverse}@keyframes bone-022-neon{from{background-position:0 0,100% 0,0 100%,0 0}to{background-position:28px 0,100% 28px,-28px 100%,0 -28px}}
/* spin: oversized conic rotor is clipped to the border mask; the target interior remains untouched. */
.bone-hover-border-effect-overlay[data-effect="spin"] .bone-hover-border-effect-spin-window{display:block;overflow:hidden;padding:var(--bone-022-spin-width);filter:drop-shadow(0 0 var(--bone-022-spin-glow) var(--bone-022-color));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.bone-hover-border-effect-spin-rotor{position:absolute;inset:-120%;background:conic-gradient(from 0deg,transparent 0 18%,var(--bone-022-color) 25%,transparent 32% 68%,var(--bone-022-color) 75%,transparent 82%);animation:bone-022-spin var(--bone-022-duration) linear infinite;transform-origin:center}.bone-hover-border-effect-overlay[data-effect="spin"][data-direction="counterclockwise"] .bone-hover-border-effect-spin-rotor{animation-direction:reverse}@keyframes bone-022-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.bone-hover-border-effect-overlay[data-effect="blink"] .bone-hover-border-effect-ring{display:block;border:var(--bone-022-line-width) solid var(--bone-022-color);box-shadow:0 0 9px var(--bone-022-color);animation:bone-022-blink var(--bone-022-duration) steps(1,end) infinite}@keyframes bone-022-blink{0%,49%{opacity:1}50%,100%{opacity:.12}}
/* dash: dashed segments travel around the four perimeter edges. */
.bone-hover-border-effect-overlay[data-effect="dash"] .bone-hover-border-effect-ring{display:block;background:repeating-linear-gradient(90deg,var(--bone-022-color) 0 8px,transparent 8px 14px) 0 0/28px var(--bone-022-line-width) repeat-x,repeating-linear-gradient(0deg,var(--bone-022-color) 0 8px,transparent 8px 14px) 100% 0/var(--bone-022-line-width) 28px repeat-y,repeating-linear-gradient(90deg,var(--bone-022-color) 0 8px,transparent 8px 14px) 0 100%/28px var(--bone-022-line-width) repeat-x,repeating-linear-gradient(0deg,var(--bone-022-color) 0 8px,transparent 8px 14px) 0 0/var(--bone-022-line-width) 28px repeat-y;animation:bone-022-dash var(--bone-022-duration) linear infinite}@keyframes bone-022-dash{from{background-position:0 0,100% 0,0 100%,0 0}to{background-position:28px 0,100% 28px,-28px 100%,0 -28px}}.bone-hover-border-effect-overlay[data-effect="dash"][data-direction="counterclockwise"] .bone-hover-border-effect-ring{animation-direction:reverse}
/* corner: four L-shaped corners grow/shrink without drawing across the target content. */
.bone-hover-border-effect-overlay[data-effect="corner"] .bone-hover-border-effect-ring{display:block;background:linear-gradient(var(--bone-022-color),var(--bone-022-color)) left top/18px var(--bone-022-line-width) no-repeat,linear-gradient(var(--bone-022-color),var(--bone-022-color)) left top/var(--bone-022-line-width) 18px no-repeat,linear-gradient(var(--bone-022-color),var(--bone-022-color)) right top/18px var(--bone-022-line-width) no-repeat,linear-gradient(var(--bone-022-color),var(--bone-022-color)) right top/var(--bone-022-line-width) 18px no-repeat,linear-gradient(var(--bone-022-color),var(--bone-022-color)) left bottom/18px var(--bone-022-line-width) no-repeat,linear-gradient(var(--bone-022-color),var(--bone-022-color)) left bottom/var(--bone-022-line-width) 18px no-repeat,linear-gradient(var(--bone-022-color),var(--bone-022-color)) right bottom/18px var(--bone-022-line-width) no-repeat,linear-gradient(var(--bone-022-color),var(--bone-022-color)) right bottom/var(--bone-022-line-width) 18px no-repeat;filter:drop-shadow(0 0 4px var(--bone-022-color));animation:bone-022-corner var(--bone-022-duration) ease-in-out infinite}@keyframes bone-022-corner{0%,100%{background-size:12px var(--bone-022-line-width),var(--bone-022-line-width) 12px,12px var(--bone-022-line-width),var(--bone-022-line-width) 12px,12px var(--bone-022-line-width),var(--bone-022-line-width) 12px,12px var(--bone-022-line-width),var(--bone-022-line-width) 12px}50%{background-size:28px var(--bone-022-line-width),var(--bone-022-line-width) 28px,28px var(--bone-022-line-width),var(--bone-022-line-width) 28px,28px var(--bone-022-line-width),var(--bone-022-line-width) 28px,28px var(--bone-022-line-width),var(--bone-022-line-width) 28px}}
/* chase: one short glow segment travels around a masked border track. */
.bone-hover-border-effect-overlay[data-effect="chase"] .bone-hover-border-effect-chase-window{display:block;overflow:hidden;padding:var(--bone-022-line-width);filter:drop-shadow(0 0 6px var(--bone-022-color));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.bone-hover-border-effect-chase-rotor{position:absolute;inset:-120%;background:conic-gradient(from 0deg,transparent 0 83%,var(--bone-022-color) 87% 93%,transparent 97% 100%);animation:bone-022-chase var(--bone-022-duration) linear infinite;transform-origin:center}.bone-hover-border-effect-overlay[data-effect="chase"][data-direction="counterclockwise"] .bone-hover-border-effect-chase-rotor{animation-direction:reverse}@keyframes bone-022-chase{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* double: two parallel perimeter lines; outer line breathes outward only. */
.bone-hover-border-effect-overlay[data-effect="double"] .bone-hover-border-effect-ring{display:block;border:var(--bone-022-line-width) solid var(--bone-022-color);box-shadow:0 0 4px color-mix(in srgb,var(--bone-022-color) 65%,transparent)}.bone-hover-border-effect-overlay[data-effect="double"] .bone-hover-border-effect-ring::after{content:"";position:absolute;inset:-4px;border:var(--bone-022-line-width) solid var(--bone-022-color);border-radius:inherit;opacity:.8;animation:bone-022-double var(--bone-022-duration) ease-in-out infinite}@keyframes bone-022-double{0%,100%{inset:-3px;opacity:.55}50%{inset:-6px;opacity:1}}
/* wave: a bright band moves along each edge; all gradients are edge-sized. */
.bone-hover-border-effect-overlay[data-effect="wave"] .bone-hover-border-effect-ring{display:block;background:linear-gradient(90deg,transparent 0 12%,var(--bone-022-color) 48% 52%,transparent 88% 100%) 0 0/55% var(--bone-022-line-width) no-repeat,linear-gradient(180deg,transparent 0 12%,var(--bone-022-color) 48% 52%,transparent 88% 100%) 100% 0/var(--bone-022-line-width) 55% no-repeat,linear-gradient(90deg,transparent 0 12%,var(--bone-022-color) 48% 52%,transparent 88% 100%) 100% 100%/55% var(--bone-022-line-width) no-repeat,linear-gradient(180deg,transparent 0 12%,var(--bone-022-color) 48% 52%,transparent 88% 100%) 0 100%/var(--bone-022-line-width) 55% no-repeat;filter:drop-shadow(0 0 5px var(--bone-022-color));animation:bone-022-wave var(--bone-022-duration) linear infinite}@keyframes bone-022-wave{0%{background-position:-55% 0,100% -55%,155% 100%,0 155%}100%{background-position:155% 0,100% 155%,-55% 100%,0 -55%}}.bone-hover-border-effect-overlay[data-effect="wave"][data-direction="counterclockwise"] .bone-hover-border-effect-ring{animation-direction:reverse}
@media(prefers-reduced-motion:reduce){.bone-hover-border-effect-overlay[data-effect="neon"] .bone-hover-border-effect-ring,.bone-hover-border-effect-overlay[data-effect="spin"] .bone-hover-border-effect-spin-rotor,.bone-hover-border-effect-overlay[data-effect="blink"] .bone-hover-border-effect-ring,.bone-hover-border-effect-overlay[data-effect="dash"] .bone-hover-border-effect-ring,.bone-hover-border-effect-overlay[data-effect="corner"] .bone-hover-border-effect-ring,.bone-hover-border-effect-overlay[data-effect="chase"] .bone-hover-border-effect-chase-rotor,.bone-hover-border-effect-overlay[data-effect="double"] .bone-hover-border-effect-ring::after,.bone-hover-border-effect-overlay[data-effect="wave"] .bone-hover-border-effect-ring{animation:none!important}}
