.nb4-powerline{
  --p:0;
  --cut:10px;
  --chev:90px;
  --chev_eff: clamp(36px, var(--chev), 35%);
  --frag:14px;
  --gap:6px;
  --fangle:135deg;
  --gapc: rgba(255,255,255,0);

  height:var(--thickness);
  background:var(--bg);
  border-radius:var(--radius, 999px);
  overflow:hidden;
  position:relative;
}

/* Layer that colors ONLY the gaps (behind the fragments) */
.nb4-powerline--hero.nb4-powerline--frag::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--gapc);
  pointer-events:none;
  z-index:1;

  /* show only where gaps are */
  -webkit-mask-image: repeating-linear-gradient(
    var(--fangle),
    transparent 0 var(--frag),
    #000 var(--frag) calc(var(--frag) + var(--gap))
  );
  mask-image: repeating-linear-gradient(
    var(--fangle),
    transparent 0 var(--frag),
    #000 var(--frag) calc(var(--frag) + var(--gap))
  );
}

/* Main animated bar */
.nb4-powerline__bar{
  position:absolute;
  inset:0;
  border-radius:var(--radius, 999px);
  transform-origin:left;
  transform:scaleX(var(--p));
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));
  filter:drop-shadow(0 0 var(--glow) rgba(0,183,255,.45));
  will-change: transform;
  z-index:2;
}

/* HERO: diagonal ends */
.nb4-powerline--hero .nb4-powerline__bar{
  clip-path: polygon(
    var(--cut) 0%,
    100% 0%,
    calc(100% - var(--cut)) 100%,
    0% 100%
  );
}

/* Cut out gaps from the bar so gap layer shows through */
.nb4-powerline--hero.nb4-powerline--frag .nb4-powerline__bar{
  -webkit-mask-image: repeating-linear-gradient(
    var(--fangle),
    #000 0 var(--frag),
    transparent var(--frag) calc(var(--frag) + var(--gap))
  );
  mask-image: repeating-linear-gradient(
    var(--fangle),
    #000 0 var(--frag),
    transparent var(--frag) calc(var(--frag) + var(--gap))
  );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* chevrons overlay in left zone (stays on top of fragments only) */
.nb4-powerline--hero .nb4-powerline__bar::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:var(--chev_eff);
  pointer-events:none;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0) 0 calc(var(--frag) * 0.55),
      rgba(255,255,255,.85) calc(var(--frag) * 0.55) calc(var(--frag) * 0.82),
      rgba(255,255,255,0) calc(var(--frag) * 0.82) var(--frag)
    );
  opacity:.55;
  mix-blend-mode: screen;
}