/* Section backgrounds: each one a different picture of privacy. All sit behind content
   (z-index -1 inside an isolated section) and fade out at the section edges. */

.section--bg { position: relative; isolation: isolate; overflow: hidden; }

/* Privacy story: the public ledger, drifting up and blurring out as the receipt goes private */
.scrolly { overflow-x: clip; }
.scrolly__sticky { position: relative; isolation: isolate; }
.bg-ledger {
  position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1;
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0, 0, 0, 0.35) 20%, #000 80%), linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0, 0, 0, 0.35) 20%, #000 80%), linear-gradient(transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.bg-ledger__rows {
  font-size: 13px; line-height: 2.3; letter-spacing: 0; white-space: nowrap;
  color: var(--ink); font-variant-numeric: tabular-nums;
  opacity: calc(0.22 - var(--privacy, 0) * 0.06);
  filter: blur(calc(1px + var(--privacy, 0) * 5px));
  transition: filter 0.3s linear, opacity 0.3s linear;
}
.bg-ledger__rows p { margin: 0; display: flex; justify-content: center; gap: 56px; }
.motion .bg-ledger__rows { animation: ledger-drift 120s linear infinite; }
@keyframes ledger-drift { to { transform: translateY(-50%); } }

/* Proof: encrypted noise on canvas (backgrounds.js) */
#proof { position: relative; isolation: isolate; }
.bg-cipher {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}

/* How it works: reeded privacy glass with soft colour moving behind it */
.bg-reeded {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.bg-reeded span:nth-child(1), .bg-reeded span:nth-child(2) {
  position: absolute; width: 46vw; height: 46vw; border-radius: 50%; filter: blur(40px);
}
.bg-reeded span:nth-child(1) { left: 6%; top: 18%; background: rgba(110, 139, 255, 0.55); }
.bg-reeded span:nth-child(2) { right: 4%; top: 30%; background: rgba(180, 155, 255, 0.45); }
.motion .bg-reeded span:nth-child(1) { animation: drift-a 26s ease-in-out infinite alternate; }
.motion .bg-reeded span:nth-child(2) { animation: drift-b 30s ease-in-out infinite alternate; }
.bg-reeded span:nth-child(3) {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(251, 251, 253, 0.9) 0px, rgba(251, 251, 253, 0.55) 9px,
      rgba(255, 255, 255, 0.95) 17px, rgba(251, 251, 253, 0.9) 22px);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.steps .step__num { background: #fff; }

/* Safety: a redacted document, faint, framing the tiles */
.bg-redacted { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bg-redacted__page {
  position: absolute; top: 8%; width: 30%; max-width: 420px;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.bg-redacted__page:first-child { left: 2%; }
.bg-redacted__page:last-child { right: 2%; transform: scaleX(-1); }
.bg-redacted p { margin: 0 0 18px; white-space: nowrap; }
.bg-redacted .bar {
  display: inline-block; height: 9px; margin-right: 10px; border-radius: 5px;
  background: rgba(29, 29, 31, 0.075);
}
.bg-redacted .bar.is-blue { background: rgba(43, 89, 255, 0.12); }

/* Waitlist: a softer reprise of the hero's living colour */
.mesh--soft { inset: 0; opacity: 0.32; }
.mesh--soft span:nth-child(1) { left: 8%; top: 8%; }
.mesh--soft span:nth-child(2) { left: 52%; top: 4%; }
.mesh--soft span:nth-child(3) { left: 26%; top: 30%; }
.mesh--soft span:nth-child(4) { left: 64%; top: 34%; }

@media (max-width: 860px) {
  .bg-ledger__rows { font-size: 11px; }
  .bg-ledger__rows p { justify-content: flex-start; }
  .bg-redacted__page { width: 70%; }
  .bg-redacted__page:last-child { display: none; }
  .bg-reeded span:nth-child(1), .bg-reeded span:nth-child(2) { width: 80vw; height: 80vw; }
}