/* ─── HERO SPECIFIC ─────────────────────────────────────────────── */

/* Canary progress animation */
@keyframes kbs-fill-30 {
  0%   { width: 0%; }
  30%  { width: 30%; }
  100% { width: 30%; }
}
@keyframes kbs-fill-60 {
  0%   { width: 30%; }
  60%  { width: 60%; }
  100% { width: 60%; }
}
@keyframes kbs-fill-100 {
  0%   { width: 60%; }
  80%  { width: 100%; }
  100% { width: 100%; }
}
@keyframes kbs-fill-rollback {
  0%   { width: 38%; }
  100% { width: 0%; }
}
@keyframes kbs-pulse-red {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes kbs-fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kbs-hero__visual {
  animation: kbs-fade-in-up 0.7s ease 0.3s both;
}

/* Progress steps indicators */
.kbs-canary-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.kbs-canary-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.kbs-canary-step__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kbs-navy-border);
}

.kbs-canary-step__dot--done { background: var(--kbs-teal); }
.kbs-canary-step__dot--active {
  background: var(--kbs-teal);
  box-shadow: 0 0 8px rgba(0,201,167,0.5);
  animation: kbs-pulse-red 1.5s ease infinite;
}
.kbs-canary-step__dot--fail { background: var(--kbs-red); }

.kbs-canary-step__label {
  font-size: 0.65rem;
  color: var(--kbs-fg-dark-3);
  font-family: 'JetBrains Mono', monospace;
}

.kbs-canary-step-line {
  flex: 1;
  height: 1px;
  background: var(--kbs-navy-border);
  margin-bottom: 14px;
}

.kbs-canary-step-line--done { background: var(--kbs-teal); }

/* Rollback alert bar */
.kbs-rollback-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(244,63,94,0.12);
  border: 1px solid rgba(244,63,94,0.3);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.75rem;
  color: var(--kbs-red);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 12px;
  animation: kbs-pulse-red 2s ease infinite;
}

.kbs-rollback-alert i { font-size: 0.75rem; }