/* Xaflo — POLISH v1.6: 4 micro-experiences (scroll-fill process, case counter, presence ticker, section scan) */

/* ============================================================
   1. PROCESS TIMELINE — scroll-driven progress fill
   ============================================================ */
.xaflo-process-step {
  position: relative;
}
.xaflo-process-num {
  /* Idle state: just outlined */
  background: linear-gradient(135deg, rgba(15,20,36,0.8), rgba(10,14,26,0.8));
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.xaflo-process-num::before {
  /* Fill that grows as step becomes active */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--x-cyan), var(--x-violet), var(--x-magenta));
  border-radius: inherit;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
  z-index: -1;
}
.xaflo-process-step.is-passed .xaflo-process-num,
.xaflo-process-step.is-active .xaflo-process-num {
  border-color: transparent;
  color: var(--x-base);
  box-shadow: 0 0 40px rgba(0,217,255,0.4);
}
.xaflo-process-step.is-passed .xaflo-process-num::before,
.xaflo-process-step.is-active .xaflo-process-num::before {
  transform: scale(1);
}
.xaflo-process-step.is-active .xaflo-process-num {
  box-shadow: 0 0 60px rgba(124,58,237,0.6);
}

/* Animated checkmark when passed */
.xaflo-process-num .check {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  font-family: var(--x-display);
}
.xaflo-process-step.is-passed .xaflo-process-num .check {
  opacity: 1;
}

/* Connecting line — draws progressively */
.xaflo-process-line {
  background: rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.xaflo-process-line::after {
  content: ""; display: none; /* disable original travelling pulse */
}
.xaflo-process-line-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--x-cyan), var(--x-violet), var(--x-magenta));
  transition: width 0.8s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 0 12px rgba(0,217,255,0.5);
}

/* ============================================================
   2. USE CASES — animated metric counter
   ============================================================ */
.xaflo-case-metric b {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 3ch;
}

/* ============================================================
   3. PRESENCE — live request counter ticker
   ============================================================ */
.xaflo-presence-card {
  position: relative;
}
.xaflo-presence-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 0.35rem 0.65rem;
  background: rgba(0,217,255,0.06);
  border: 1px solid rgba(0,217,255,0.22);
  border-radius: 999px;
  font-family: var(--x-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--x-cyan);
}
.xaflo-presence-live .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--x-cyan);
  box-shadow: 0 0 6px var(--x-cyan);
  animation: xaflo-live-blink 1.5s ease-in-out infinite;
}
.xaflo-presence-live .live-num {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--x-contrast);
  min-width: 3ch;
  display: inline-block;
  text-align: right;
}
@keyframes xaflo-live-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}

/* ============================================================
   4. SECTION DIVIDER SCAN — glowing dot travels along top border on enter view
   ============================================================ */
.xaflo-section {
  position: relative;
}
.xaflo-section .xaflo-section-scan {
  position: absolute;
  top: -1px; left: 0;
  width: 60px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--x-cyan), transparent);
  box-shadow: 0 0 10px var(--x-cyan), 0 0 20px var(--x-cyan);
  pointer-events: none;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.3s ease;
}
.xaflo-section.is-scanning .xaflo-section-scan {
  opacity: 1;
  animation: xaflo-section-scan 1.2s cubic-bezier(.4,.0,.2,1) forwards;
}
@keyframes xaflo-section-scan {
  0%   { transform: translateX(-60px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(calc(100vw)); opacity: 0; }
}

/* Match dot color to section's accent */
.xaflo-section#principles .xaflo-section-scan,
.xaflo-section#process    .xaflo-section-scan,
.xaflo-section#group      .xaflo-section-scan {
  background: linear-gradient(90deg, transparent, var(--x-violet), transparent);
  box-shadow: 0 0 10px var(--x-violet), 0 0 20px var(--x-violet);
}
.xaflo-section#cases      .xaflo-section-scan,
.xaflo-section#contact    .xaflo-section-scan {
  background: linear-gradient(90deg, transparent, var(--x-magenta), transparent);
  box-shadow: 0 0 10px var(--x-magenta), 0 0 20px var(--x-magenta);
}

@media (prefers-reduced-motion: reduce) {
  .xaflo-section-scan,
  .xaflo-process-num::before,
  .xaflo-process-line-fill,
  .xaflo-presence-live .live-dot { animation: none !important; transition: none !important; }
}