/**
 * Vertical animated timeline for product "how it works" / process sections
 * (VULNKON's workflow, ENTERKON/BUSSKON's steps) — a connector line that
 * draws in top-to-bottom plus directional pointer chevrons between each
 * step, so the sequence reads as genuinely connected rather than a plain
 * stacked list. Triggered by reveal.js the same way [[.journey]] already
 * is (about.css): add .is-visible to [data-reveal] once on-screen.
 */
.product-timeline {
  position: relative;
  max-width: 46rem;
}

.product-timeline--center {
  margin-inline: auto;
}

.product-timeline__line {
  position: absolute;
  top: 1.375rem;
  bottom: 1.375rem;
  left: calc(1.375rem - 1px);
  width: 2px;
  background: var(--color-border-strong);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.6s var(--ease-out);
}

.product-timeline.is-visible .product-timeline__line {
  transform: scaleY(1);
  background: linear-gradient(to bottom, var(--color-accent-cyan), var(--color-accent-violet, var(--color-accent-cyan)));
}

.product-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  column-gap: var(--space-md);
  padding-block: var(--space-lg);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.product-timeline__item:first-child { padding-top: 0; }
.product-timeline__item:last-child { padding-bottom: 0; }

.product-timeline.is-visible .product-timeline__item {
  opacity: 1;
  transform: translateY(0);
}

.product-timeline__item:nth-child(1) { transition-delay: 0.05s; }
.product-timeline__item:nth-child(2) { transition-delay: 0.2s; }
.product-timeline__item:nth-child(3) { transition-delay: 0.35s; }
.product-timeline__item:nth-child(4) { transition-delay: 0.5s; }
.product-timeline__item:nth-child(5) { transition-delay: 0.65s; }
.product-timeline__item:nth-child(6) { transition-delay: 0.8s; }
.product-timeline__item:nth-child(n+7) { transition-delay: 0.9s; }

.product-timeline__node {
  position: relative;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-elevated, var(--color-bg));
  border: 2px solid var(--color-border-strong);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  box-shadow: 0 0 0 5px var(--color-bg);
  transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.product-timeline.is-visible .product-timeline__item:nth-child(1) .product-timeline__node,
.product-timeline__content {
  padding-top: 0.2rem;
  min-width: 0;
}

.product-timeline__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2xs);
}

.product-timeline__body {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: 1.65;
}

/* Directional pointer chevron sitting on the line between this step and the
   next one — reinforces the flow, not just a static line. */
.product-timeline__pointer {
  position: absolute;
  left: calc(1.375rem - 8px);
  bottom: calc(var(--space-lg) / -2 - 8px);
  width: 16px;
  height: 16px;
  z-index: 1;
  color: var(--color-accent-cyan);
  opacity: 0;
  transition: opacity 0.5s ease 1.1s;
}

.product-timeline.is-visible .product-timeline__pointer {
  opacity: 1;
}

.product-timeline__pointer svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 47.9375rem) {
  .product-timeline__item { column-gap: var(--space-sm); }
  .product-timeline__title { font-size: var(--fs-md); }
}

@media (prefers-reduced-motion: reduce) {
  .product-timeline__line,
  .product-timeline__item,
  .product-timeline__pointer {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .product-timeline__line { background: var(--color-border-strong); }
}