/* ==========================================================================
   Process — "Jak pracujemy"
   The heading and the honest note stay in view while four steps scroll past,
   joined by a dotted thread. A warm light falls on the steps, and an accent
   line fills the thread as the reader moves through them (main.js).
   ========================================================================== */

.process {
  isolation: isolate;
}

.process::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(45% 55% at 78% 40%, var(--color-accent-glow), transparent 75%);
  pointer-events: none;
}

.process__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 3.5rem clamp(3rem, 6vw, 7rem);
  align-items: start;
}

.process__intro {
  position: sticky;
  top: calc(var(--header-height, 0px) + clamp(1.5rem, 6vh, 3rem));
}

.process__note {
  display: flex;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

.process__note .spark {
  margin-top: 0.55em;
}

.process__track {
  position: relative;
}

.process__line,
.process__fill {
  position: absolute;
  top: 0.75rem;
  bottom: 3rem;
  left: 2px;
  width: 2px;
}

/* progress along the thread: --progress (0–1) is set by main.js while scrolling */
.process__fill {
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleY(var(--progress, 0));
  transform-origin: top;
}

.process__track.is-complete .process__fill {
  transform: none;
}

.process__steps {
  display: grid;
  gap: clamp(2.75rem, 2rem + 2.5vw, 4rem);
}

.process__step {
  position: relative;
  padding-left: clamp(2.25rem, 1.75rem + 2vw, 3.75rem);
}

.process__step::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease;
}

.process__number {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--color-text-subtle);
  transition: color 0.4s ease;
}

/* a step lights up once the reader has reached it */
.process__step.is-active::before,
.process__track.is-complete .process__step::before {
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.process__step.is-active .process__number,
.process__track.is-complete .process__number {
  color: var(--color-accent);
}

.process__step-title {
  margin-top: 0.6rem;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 400;
  font-variation-settings: "opsz" 32;
  line-height: 1.15;
  text-wrap: balance;
}

.process__step-text {
  max-width: 34rem;
  margin-top: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

/* what the stage leaves behind */
.process__outcome {
  max-width: 34rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.process__outcome-label {
  margin-right: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.process__outcome-label::after {
  content: ":";
}

/* ---- Tablet and phone --------------------------------------------------------- */

@media (max-width: 1023.98px) {
  .process__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .process__intro {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process__step::before,
  .process__number {
    transition: none;
  }
}