/* =============================================================
   Afrobora — visual layer: scroll reveals, icons, process
   timeline. All motion stops under
   prefers-reduced-motion and pauses while off-screen
   (site.js toggles .is-offscreen).
   ============================================================= */

/* ---------- Live indicator ---------- */
.live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.card-grid > [data-reveal]:nth-child(2), .cap-grid > [data-reveal]:nth-child(2) { transition-delay: .12s; }
.card-grid > [data-reveal]:nth-child(3), .cap-grid > [data-reveal]:nth-child(3) { transition-delay: .24s; }

/* ---------- Icons ---------- */
.icon { width: 100%; height: 100%; }
.cap-icon, .card-icon {
  display: flex; width: 46px; height: 46px; padding: 11px; border-radius: 10px;
  background: var(--cobalt-tint); color: var(--cobalt-ink); margin-bottom: var(--s4);
  transition: background .2s, color .2s;
}
.js [data-reveal] .icon * { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1.4s ease .3s; }
.js [data-reveal].is-visible .icon * { stroke-dashoffset: 0; }
.card-lift { transition: transform .2s ease, border-color .2s, box-shadow .2s, opacity .7s ease; }
.card-lift.is-visible:hover, .no-js .card-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(21, 23, 26, .35); }
.card-lift:hover .card-icon { background: var(--cobalt); color: #fff; }

/* ---------- Process timeline ---------- */
.process-anim { position: relative; border-top-color: var(--line); }
.process-anim::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--cobalt);
  transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.4, 0, .2, 1) .2s;
}
.process-anim.is-visible::before, .no-js .process-anim::before { transform: none; }
.process-anim li::before {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: #0b1328; color: var(--ink); font-weight: 600; margin-bottom: var(--s3);
  transition: background .4s, color .4s, border-color .4s;
}
.process-anim.is-visible li::before { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.process-anim.is-visible li:nth-child(2)::before { transition-delay: .4s; }
.process-anim.is-visible li:nth-child(3)::before { transition-delay: .7s; }
.process-anim.is-visible li:nth-child(4)::before { transition-delay: 1s; }
.process-anim.is-visible li:nth-child(5)::before { transition-delay: 1.3s; }
@media (max-width: 1023px) {
  .process-anim::before { display: none; }
  .process-anim li::before { margin-bottom: 0; }
}

/* ---------- Dark band texture ---------- */
.band-grid {
  background:
    radial-gradient(500px 300px at 90% 0%, rgba(37, 99, 235, .22), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0) 0 0 / 24px 24px,
    var(--paper);
}

/* ---------- Motion controls ---------- */
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal] .icon * { stroke-dashoffset: 0; }
  .process-anim::before { transform: none; }
}