/* Karnaf V3 widgets — shared bits. Design tokens (--orange, --navy ...) come from the karnaf-v3 child theme. */
.kv3-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* floating thin hexagon outlines (heroes) */
.kv3-hexes{position:absolute;inset:0;z-index:-1;pointer-events:none}
.kv3-hexes svg{position:absolute;opacity:.75;animation:kv3-float 9s ease-in-out infinite}
.kv3-hexes .kv3-h1{width:150px;top:20%;inset-inline-end:9%;opacity:.55}
.kv3-hexes .kv3-h2{width:62px;top:58%;inset-inline-end:28%;animation-delay:-3s}
.kv3-hexes .kv3-h3{width:38px;top:32%;inset-inline-end:36%;animation-delay:-6s;opacity:.6}
.kv3-hexes .kv3-h4{width:90px;bottom:12%;inset-inline-end:4%;animation-delay:-1.5s;opacity:.4}
@media (max-width:760px){
  .kv3-hexes .kv3-h1{width:90px;top:auto;bottom:22%;inset-inline-end:-20px}
  .kv3-hexes .kv3-h2,.kv3-hexes .kv3-h3{display:none}
}

/* hexagon icon button (prev/next, play/pause) */
.kv3-hexbtn{width:52px;height:58px;border:0;padding:0;display:grid;place-items:center;background:var(--orange);color:var(--navy);font-family:var(--f-head);font-size:22px;font-weight:700;line-height:1;cursor:pointer;clip-path:var(--hex);transition:transform .25s var(--ease),background .25s,opacity .2s}
.kv3-hexbtn:hover,.kv3-hexbtn:focus-visible{transform:scale(1.08);background:#fff}
.kv3-hexbtn:focus-visible{outline:none}
.kv3-hexbtn svg{width:18px;height:18px}
.kv3-hexbtn:disabled{opacity:.3;cursor:default;transform:none}
/* clip-path hides outlines: the wrapper draws the focus ring */
.kv3-hexbtn-wrap{display:inline-block;filter:drop-shadow(0 8px 14px rgba(27,37,47,.18))}
.kv3-hexbtn-wrap:has(:focus-visible){filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px var(--orange)) drop-shadow(0 0 3px var(--orange))}

/* stat chips on dark heroes */
.kv3-hstat{display:flex;align-items:center;gap:12px;background:rgba(15,22,28,.45);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 18px 10px 14px;border-radius:16px}
.kv3-hstat b{font-family:var(--f-head);font-size:26px;font-weight:800;color:var(--orange);line-height:1;direction:ltr;unicode-bidi:isolate}
.kv3-hstat>span{font-size:15px;color:#E3E7EA;line-height:1.2}
@media (max-width:600px){.kv3-hstat{padding:8px 12px}.kv3-hstat b{font-size:22px}.kv3-hstat>span{font-size:14px}}

@keyframes kv3-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(8deg)}}
@keyframes kv3-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

@media (prefers-reduced-motion:reduce){
  .kv3-hexes svg{animation:none}
  .kv3-hexbtn{transition:none}
}