/* ── modules/gradient-bar/style.css ── */
/* Animated gradient bar — used in steps-v2 and psr layouts */

/* Bar animation: reveal left → right */
@keyframes sSVBarReveal {
  from { clip-path: inset(0 100% 0 0 round 8px 44px 44px 8px); }
  to   { clip-path: inset(0 0%   0 0 round 8px 44px 44px 8px); }
}
@keyframes sSV4BarReveal {
  from { clip-path: inset(0 100% 0 0 round 8px 44px 44px 8px); }
  to   { clip-path: inset(0 0%   0 0 round 8px 44px 44px 8px); }
}
@keyframes sPSRBarReveal {
  from { clip-path: inset(0 100% 0 0 round 8px 44px 44px 8px); }
  to   { clip-path: inset(0 0%   0 0 round 8px 44px 44px 8px); }
}
@keyframes sSV3BarReveal {
  from { clip-path: inset(0 100% 0 0 round 44px); }
  to   { clip-path: inset(0 0%   0 0 round 44px); }
}

/* Bar container — no background, just a positioning anchor */
.sSV-bar {
  position: absolute;
  left: 89px;
  top: 457px;
  width: 1742px;
  height: 89px;
  z-index: 1;
  clip-path: inset(0 100% 0 0 round 8px 44px 44px 8px);
}

.sSV-bar.revealing {
  animation: sSVBarReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#slideSV4 .sSV-bar {
  clip-path: inset(0 100% 0 0 round 8px 44px 44px 8px);
}

#slideSV4 .sSV-bar.revealing {
  animation: sSV4BarReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#slidePSR .sSV-bar {
  clip-path: inset(0 100% 0 0 round 8px 44px 44px 8px);
}

#slidePSR .sSV-bar.revealing {
  animation: sPSRBarReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Each segment shares the full-width gradient, offset to align correctly */
.sSV-seg {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(to right, rgba(240,249,189,0.5) 0%, #d9ff42 31.73%, #199ad1 66.83%, #19a87c 100%);
  background-size: 1742px 100%;
}