/* =====================================================
   APEX IP — sections/process.css
   Section 5 — How It Works
   Header (left-aligned, 628px) + 5 zigzag steps + CTA (centered)
   ===================================================== */

/* ---------- Section shell ---------- */
.apx-process {
  width: 100%;
  max-width: var(--apx-canvas);
  margin: 0 auto;
  padding: 160px var(--apx-pad-x);
  background: #000;
  display: flex;
  flex-direction: column;  /* default align-items: stretch */
}

/* ---------- Header ---------- */
.apx-process-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  margin-bottom: 160px;
}

.apx-process-hcopy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 628px;
}

.apx-process-title {
  color: #F2F2F2;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.2;
}

.apx-process-body {
  color: #F2F2F2;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
}

/* ---------- Steps column ---------- */
.apx-process-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* no gap — vertical connector lines must touch across rows */
}

/* Individual step row */
.apx-process-step {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* ---- Step copy block (302px fixed) ---- */
.apx-step-copy {
  width: 302px;
  flex-shrink: 0;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.apx-step-number {
  display: block;
  color: #E5300B;
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
}

.apx-step-rule {
  width: 91px;
  border: none;
  border-top: 1px solid #999999;
  margin: 0;
}

.apx-step-title {
  color: #F2F2F2;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}

.apx-step-text {
  color: #F2F2F2;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
}

/* ---- Connector column (flex: 1) ---- */
.apx-process-connector {
  flex: 1;
  min-width: 0;
  align-self: stretch;   /* fills full row height for continuous vlines */
  display: flex;
  align-items: center;
}

/* Horizontal guide lines (one each side of the icon) */
.apx-connector-hline {
  flex: 1;
  height: 1px;
  background: #333333;
}
.apx-connector-hline--hidden { opacity: 0; }

/* Vertical stack (runs top-to-bottom of the row) */
.apx-connector-vstack {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.apx-connector-vline {
  flex: 1;
  width: 1px;
  background: #333333;
}

/* Circular icon node */
.apx-connector-node {
  padding: 40px;
  background:
    radial-gradient(ellipse 63.37% 63.37% at 50% 117.44%,
      rgba(229, 48, 11, 0.10) 0%, rgba(229, 48, 11, 0) 100%),
    #0A0A0A;
  border-radius: 120px;
  border: 1px solid #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- Step visual (302×276 screenshot) ---- */
.apx-step-visual {
  width: 302px;
  height: 276px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0.80;
  background: #0A0A0A;
}

.apx-step-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Bottom CTA ---------- */
.apx-process-cta {
  align-self: center;
  margin-top: 160px;
}

/* =====================================================
   SCROLL ANIMATION — cascade
   JS adds .is-visible to .apx-process
   ===================================================== */

@keyframes apx-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Hidden states */
.apx-process .apx-badge,
.apx-process-title,
.apx-process-body,
.apx-process-step,
.apx-process-cta {
  opacity: 0;
  transform: translateY(20px);
}

/* Header (badge → title → body) cascades quando la sezione entra nel viewport */
.apx-process.is-visible .apx-badge,
.apx-process.is-visible .apx-process-title,
.apx-process.is-visible .apx-process-body {
  animation: apx-fade-up 0.60s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.apx-process.is-visible .apx-badge          { animation-delay: 0.00s; }
.apx-process.is-visible .apx-process-title  { animation-delay: 0.15s; }
.apx-process.is-visible .apx-process-body   { animation-delay: 0.30s; }

/* Ogni step si anima individualmente quando entra nel viewport (JS aggiunge
   .is-visible direttamente sull'elemento .apx-process-step) */
.apx-process-step.is-visible {
  animation: apx-fade-up 0.60s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* CTA si anima individualmente */
.apx-process-cta.is-visible {
  animation: apx-fade-up 0.60s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

/* Laptop (≤ 1440px) */
@media (max-width: 1440px) {
  .apx-process {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .apx-process-header {
    gap: 56px;
    margin-bottom: 120px;
  }

  .apx-process-title {
    font-size: 48px;
  }

  .apx-process-cta {
    margin-top: 120px;
  }
}

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .apx-process {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .apx-process-header {
    gap: 40px;
    margin-bottom: 80px;
  }

  .apx-process-title {
    font-size: 40px;
  }

  .apx-process-steps {
    gap: 56px;
  }

  /* Collapse zigzag → vertical stack, copy always on top */
  .apx-process-step {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* Even steps have visual-first in HTML → reverse so copy appears on top */
  .apx-process-step:nth-child(even) {
    flex-direction: column-reverse;
  }

  .apx-step-copy {
    width: 100%;
    padding: 0;
  }

  /* Hide the connector lines on tablet — replaced by numbered steps */
  .apx-process-connector {
    display: none;
  }

  .apx-step-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 302 / 276;
  }

  .apx-step-number {
    font-size: 48px;
  }

  .apx-process-cta {
    margin-top: 80px;
    align-self: flex-start;
  }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
  .apx-process {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .apx-process-header {
    gap: 28px;
    margin-bottom: 56px;
  }

  .apx-process-title {
    font-size: 30px;
  }

  .apx-process-body {
    font-size: 15px;
  }

  .apx-process-steps {
    gap: 40px;
  }

  /* Hide screenshots — keep the numbered list clean */
  .apx-step-visual {
    display: none;
  }

  .apx-step-number {
    font-size: 40px;
  }

  .apx-step-title {
    font-size: 22px;
  }

  .apx-step-text {
    font-size: 15px;
  }

  .apx-process-cta {
    margin-top: 56px;
    align-self: center;
  }
}