/* Transparency explainer visual — v58.12
 * Purpose: make the "append-only + replayable inclusion proof" idea instantly legible
 * without adding third-party deps or heavy media.
 */

.proof-visual{
  margin-top: 16px;
}

.proof-visual .pv-card{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  align-items:center;
  padding: 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}

.pv-svg{
  width: 100%;
  height: auto;
  display:block;
}

.pv-line{
  fill: none;
  stroke: url(#pvGrad);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .95;

  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: pv-draw 1.15s cubic-bezier(.2,.9,.2,1) forwards;
}

.pv-trace{
  fill: none;
  stroke: rgba(255,255,255,.28);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 4 7;
  opacity: .55;

  stroke-dashoffset: 1200;
  animation: pv-trace 1.6s ease-out .12s forwards;
}

.pv-node{
  fill: rgba(6,7,10,.85);
  stroke: rgba(255,255,255,.26);
  stroke-width: 1.4;
  opacity: 0;
  transform: scale(.86);
  transform-box: fill-box;
  transform-origin: center;
  animation: pv-pop .52s ease-out forwards;
}

.pv-node.leaf{
  stroke: rgba(124,92,255,.85);
}

.pv-node.step{
  stroke: rgba(67,211,255,.75);
}

.pv-node.root{
  stroke: rgba(255,255,255,.44);
}

.pv-node.n1{ animation-delay: .18s; }
.pv-node.n2{ animation-delay: .48s; }
.pv-node.n3{ animation-delay: .74s; }
.pv-node.n4{ animation-delay: .98s; }

.pv-ring{
  fill: none;
  stroke: rgba(124,92,255,.85);
  stroke-width: 1.8;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: pv-ring 1.05s ease-out 1.02s forwards;
}

.pv-legend{
  display:grid;
  gap: 8px;
}

.pv-legend .pv-row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: var(--muted);
  font-size: 12.8px;
  line-height: 1.35;
}

.pv-legend b{
  color: var(--text);
  font-weight: 650;
}

.pv-key{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: 2px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
}

.pv-key.entry{
  background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.95), rgba(124,92,255,.22));
}
.pv-key.proof{
  background: radial-gradient(circle at 30% 30%, rgba(67,211,255,.95), rgba(67,211,255,.20));
}
.pv-key.root{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.78), rgba(255,255,255,.12));
}

@media (max-width: 980px){
  .proof-visual .pv-card{
    grid-template-columns: 1fr;
  }
}

@keyframes pv-draw{
  to { stroke-dashoffset: 0; }
}

@keyframes pv-trace{
  to { stroke-dashoffset: 0; opacity: .62; }
}

@keyframes pv-pop{
  0%{ opacity: 0; transform: scale(.84); }
  60%{ opacity: 1; transform: scale(1.02); }
  100%{ opacity: 1; transform: scale(1); }
}

@keyframes pv-ring{
  0%{ opacity: 0; transform: scale(.92); }
  55%{ opacity: .85; transform: scale(1.08); }
  100%{ opacity: .55; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .pv-line, .pv-trace, .pv-node, .pv-ring{
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}