/* PROCESS — horizontal track */

#process {
  padding: 8rem 0;
  background: var(--border);
  overflow-x: hidden;
  position: relative;
}

#process .section-headline {
  max-width: 80rem;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  color: var(--bg-void);
  -webkit-text-stroke: 1px var(--ink);
}

.process-track {
  display: flex;
  overflow-x: auto;
  padding-bottom: 4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
  gap: 0;
  align-items: center;
  position: relative;
  min-height: 300px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.process-track::-webkit-scrollbar {
  display: none;
}

.process-line {
  display: none;
}

@media (min-width: 768px) {
  .process-line {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 4000px;
    height: 1px;
    background: var(--border-active);
    transform: translateY(-50%);
    z-index: 0;
  }
}

.process-card {
  flex: none;
  width: 280px;
  background: var(--bg-void);
  border: 1px solid var(--border);
  padding: 1.5rem;
  border-radius: var(--radius);
  position: relative;
  z-index: 10;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.process-connector {
  flex: none;
  width: 3rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  display: none;
  z-index: 0;
}

@media (min-width: 768px) {
  .process-connector { display: block; }
}

.process-card .step-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.process-card h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.process-card p {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--ink-dim);
  line-height: 1.5;
}

.text-spark { color: var(--spark); }
.text-wire { color: var(--wire); }
.text-fire { color: var(--fire); }

@keyframes slide {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  51% { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}