/* Registration page's live preview (onboarding/_register_preview.html +
   register-preview.js): the client's own Blitz network assembling itself
   from what they type. Desktop / landscape only, on phones the brand
   column's illustration and pitch are hidden (brand-shell.css), so the
   form stands alone there, same as login. */

.rp-stage { position: relative; }
/* Clipped to its own box and click-through: nothing it draws may sit over
   (or block clicks on) the logo or the form. */
.rp-stage { pointer-events: none; }
.rp-stage svg { width: 100%; height: 100%; display: block; overflow: hidden; }

.rp-pitch { max-width: 520px; }
.rp-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: #0066FF;
  box-shadow: 0 0 0 0 rgba(0, 102, 255, .5);
  animation: rpLive 1.8s cubic-bezier(.16, 1, .3, 1) infinite;
}
.bz-brand--register .bz-eyebrow::before { display: none; }
@keyframes rpLive {
  0% { box-shadow: 0 0 0 0 rgba(0, 102, 255, .5); }
  100% { box-shadow: 0 0 0 9px rgba(0, 102, 255, 0); }
}
.rp-headline {
  margin: 0 0 18px;
  min-height: 2.3em;
  font: 700 clamp(22px, 2.1vw, 30px)/1.16 'Poppins', sans-serif;
  letter-spacing: -.02em;
  color: #0D0C22;
  text-wrap: balance;
}
.rp-headline.rp-in { animation: rpIn .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes rpIn { from { opacity: 0; transform: translateY(6px); } }
.rp-headline em { font-style: normal; color: #0066FF; }

.rp-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rp-bar {
  flex: 1; height: 8px; border-radius: 99px; background: #E6EEFF; overflow: hidden;
}
.rp-bar i {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #3D8BFF, #0066FF);
  transition: width .7s cubic-bezier(.16, 1, .3, 1);
  position: relative; overflow: hidden;
}
.rp-bar i::after {                     /* travelling sheen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%);
  animation: rpSheen 2.2s ease-in-out infinite;
}
@keyframes rpSheen { to { transform: translateX(100%); } }
.rp-pct { font: 600 14px/1 'JetBrains Mono', monospace; color: #0066FF; min-width: 44px; text-align: right; }

.rp-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.rp-steps li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 8px; border-radius: 99px;
  background: #F2F4F8; color: #6E6E7A;
  font: 500 12.5px/1 'Poppins', sans-serif;
  transition: background .3s, color .3s, box-shadow .3s;
}
.rp-steps li b {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.6px solid #C3C8D2; background: #FFFFFF;
  display: grid; place-items: center; transition: all .3s;
}
.rp-steps li.rp-active { background: #E6F0FF; color: #0050CC; box-shadow: inset 0 0 0 1px rgba(0, 102, 255, .25); }
.rp-steps li.rp-done { background: #0066FF; color: #FFFFFF; }
.rp-steps li.rp-done b { border-color: #FFFFFF; background: #FFFFFF; }
.rp-steps li.rp-done b::after {
  content: ""; width: 7px; height: 4px; margin-top: -2px;
  border: solid #0066FF; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}

/* Left for later: a dashed chip with a small clock, not a tick. */
.rp-steps li.rp-later { background: #FFFFFF; color: #0050CC; box-shadow: inset 0 0 0 1.5px #0066FF; }
.rp-steps li.rp-later b { border-color: #0066FF; background: #FFFFFF; }
.rp-steps li.rp-later b::after { content: ""; width: 10px; height: 10px; background: #0066FF; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center/contain no-repeat; }

/* SVG parts */
.rp-orbit { transform-box: fill-box; transform-origin: center; animation: rpSpin 18s linear infinite; }
.rp-orbit-2 { animation-duration: 26s; animation-direction: reverse; }
@keyframes rpSpin { to { transform: rotate(360deg); } }
.rp-pulse { transform-box: fill-box; transform-origin: center; animation: rpPulse 2.6s cubic-bezier(.16, 1, .3, 1) infinite; }
.rp-pulse-2 { animation-delay: 1.3s; }
@keyframes rpPulse { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(2.1); opacity: 0; } }
.rp-ghost { animation: rpGhost 2.4s ease-in-out infinite; }
@keyframes rpGhost { 50% { opacity: .45; } }

/* Submit button once everything's filled: it glows to invite the click. */
.btn-primary.rp-ready {
  animation: rpReady 1.8s cubic-bezier(.16, 1, .3, 1) infinite;
}
@keyframes rpReady {
  0% { box-shadow: 0 0 0 0 rgba(0, 102, 255, .55); }
  100% { box-shadow: 0 0 0 14px rgba(0, 102, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .rp-live, .rp-orbit, .rp-pulse, .rp-ghost, .rp-bar i::after, .btn-primary.rp-ready { animation: none; }
}