vnidrop/docs/components/transfer-flow.css

/* Five-step transfer flow */
.flow-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1.1fr) minmax(390px, 0.9fr);
  align-items: start;
  gap: 80px;
}

.flow-visual {
  position: sticky;
  top: 115px;
  height: 660px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 27px;
  background:
    linear-gradient(rgba(112, 85, 124, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 85, 124, 0.06) 1px, transparent 1px),
    linear-gradient(145deg, #fdfbfe, #f4eff6);
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: inset 0 1px white, var(--shadow-sm);
}

.flow-visual::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 20%, rgba(248, 244, 250, 0.65) 78%);
  content: "";
  pointer-events: none;
}

.flow-visual-glow {
  position: absolute;
  top: 30%;
  left: 32%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.18);
  filter: blur(55px);
  animation: flow-glow 7s ease-in-out infinite;
}

.flow-track {
  position: absolute;
  z-index: 2;
  inset: 4% 5% auto;
  width: 90%;
  height: 92%;
  overflow: visible;
}

.flow-track-shadow,
.flow-track-base,
.flow-track-energy {
  fill: none;
  stroke-linecap: round;
}

.flow-track-shadow {
  stroke: rgba(168, 85, 247, 0.22);
  stroke-width: 34;
  filter: url(#flow-blur);
}

.flow-track-base {
  stroke: #e4dae9;
  stroke-width: 18;
}

.flow-track-energy {
  stroke: url(#flow-gradient);
  stroke-width: 6;
  stroke-dasharray: 3 17;
  animation: conduit-energy 2.1s linear infinite;
}

.flow-moving-drop,
.flow-moving-halo {
  offset-path: path("M132 141c216 14 240 88 153 159-89 73-43 157 81 160");
  offset-rotate: 0deg;
  animation: flow-drop 8s cubic-bezier(0.45, 0.08, 0.35, 0.98) infinite;
}

.flow-moving-halo {
  animation-delay: -0.08s;
}

.flow-gate {
  transform-origin: 241px 299px;
  animation: gate-breathe 3.5s ease-in-out infinite;
}

.flow-device {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 168px;
  height: 258px;
  place-items: center;
  border: 7px solid #d7cfdc;
  border-radius: 28px;
  background: #211d24;
  box-shadow: 0 24px 55px rgba(48, 31, 56, 0.18), inset 0 0 0 1px #ada2b3;
}

.flow-device-sender {
  top: 46px;
  left: 31px;
  transform: rotate(-6deg);
}

.flow-device-receiver {
  right: 25px;
  bottom: 32px;
  transform: rotate(5deg);
}

.flow-device-camera {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 54px;
  height: 7px;
  border-radius: 999px;
  background: #0c0a0e;
  transform: translateX(-50%);
}

.flow-device-content {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 25px 15px 15px;
  color: white;
  text-align: center;
}

.flow-mini-label {
  margin-bottom: 20px;
  color: #8c7e93;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.flow-file-stack {
  position: relative;
  width: 74px;
  height: 82px;
  margin-bottom: 16px;
}

.flow-file-stack span {
  position: absolute;
  display: grid;
  width: 50px;
  height: 66px;
  place-items: center;
  border: 1px solid rgba(216, 180, 254, 0.5);
  border-radius: 9px;
  background: #392e40;
  color: #d9a8fb;
}

.flow-file-stack span:nth-child(1) { left: 0; transform: rotate(-10deg); }
.flow-file-stack span:nth-child(2) { right: 0; transform: rotate(10deg); }
.flow-file-stack span:nth-child(3) { left: 12px; background: #f7effc; color: var(--brand-600); }
.flow-file-stack svg { width: 22px; }

.flow-device-content strong {
  font-family: var(--font-display);
  font-size: 13px;
}

.flow-device-content small {
  color: #928798;
  font-size: 9px;
}

.flow-complete-ring {
  display: grid;
  width: 70px;
  height: 70px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid rgba(216, 180, 254, 0.4);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.26), rgba(168, 85, 247, 0.05));
  color: #d59aff;
  animation: complete-ring 3.5s ease-in-out infinite;
}

.flow-complete-ring svg {
  width: 30px;
  stroke-width: 2.4;
}

.flow-annotation {
  position: absolute;
  z-index: 5;
  padding: 5px 8px;
  border: 1px solid #ded4e3;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--brand-600);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.flow-annotation-one { top: 35%; right: 12%; transform: rotate(4deg); }
.flow-annotation-two { bottom: 11%; left: 25%; transform: rotate(-4deg); }

.flow-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.flow-step:hover {
  transform: translateX(6px);
  border-color: var(--brand-300);
  box-shadow: var(--shadow-sm);
}

.flow-step-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-100);
  color: var(--brand-600);
}

.flow-step-icon svg { width: 21px; }

.flow-step-number {
  display: inline-block;
  margin-bottom: 2px;
  color: var(--brand-500);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
}

.flow-step h3 {
  margin-bottom: 7px;
  font-size: 18px;
  letter-spacing: -0.025em;
}

.flow-step p {
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.58;
}