/* ==========================================================================
   SCENES - looping illustrations on the Approach cards (4-point values)
   ========================================================================== */

.illo { position: absolute; inset: 0; display: grid; place-items: center; }

/* Trust: payee confirmed before the amount */
.illo-payee { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.28); font-size: var(--fs-label); line-height: 20px; }
.illo-payee__av { display: grid; place-items: center; width: 40px; height: 40px; padding-bottom: 4px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 20px; line-height: 20px; }
.illo-payee__name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.illo-payee__badge { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; animation: badge 3200ms var(--ease-spring) infinite; }
.illo-payee__badge svg { width: 12px; height: 12px; }
.illo-payee__handle { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.illo-payee__amt { margin-left: 8px; font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -0.04em; }
@keyframes badge { 0%, 20% { transform: scale(0); } 36%, 84% { transform: scale(1); } 100% { transform: scale(0); } }

/* Network: signal flickers while content loads */
.illo-net { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.illo-bars { display: flex; align-items: flex-end; gap: 8px; height: 56px; }
.illo-bars i { width: 16px; border-radius: 4px; background: rgba(15, 15, 15, 0.12); animation: bar-on 3200ms steps(1) infinite; }
.illo-bars i:nth-child(1) { height: 24%; animation-delay: 0ms; }
.illo-bars i:nth-child(2) { height: 48%; animation-delay: 400ms; }
.illo-bars i:nth-child(3) { height: 76%; animation-delay: 800ms; }
.illo-bars i:nth-child(4) { height: 100%; animation-delay: 1200ms; }
@keyframes bar-on { 0% { background: rgba(15, 15, 15, 0.12); } 12%, 60% { background: #0F0F0F; } 72%, 100% { background: rgba(15, 15, 15, 0.12); } }
.illo-skel { display: grid; gap: 8px; width: 168px; padding: 16px; border-radius: 16px; background: #fff; }
.illo-skel i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #EEEDE8 20%, #F8F7F3 48%, #EEEDE8 80%); background-size: 200% 100%; animation: shimmer 1600ms linear infinite; }
.illo-skel i:nth-child(2) { width: 72%; }
.illo-skel i:nth-child(3) { width: 44%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Fear: the drop-off step pulses */
.illo-funnel { display: grid; gap: 8px; width: 208px; }
.illo-funnel div { position: relative; height: 24px; border-radius: 8px; background: rgba(15, 15, 15, 0.84); }
.illo-funnel div:nth-child(1) { width: 100%; }
.illo-funnel div:nth-child(2) { width: 84%; }
.illo-funnel div:nth-child(3) { width: 48%; background: var(--accent); animation: fear 2400ms ease-in-out infinite; }
.illo-funnel div:nth-child(4) { width: 44%; }
.illo-funnel div:nth-child(3)::after {
  content: "−38% at KYC";
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  translate: 0 -50%;
  padding: 4px 8px;
  border-radius: 1000px;
  background: #fff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.24);
}
@keyframes fear { 50% { box-shadow: 0 0 0 8px rgba(47, 84, 255, 0.2); } }