/*
 * AH Digital — About Process Zero Rebuild v3
 *
 * Fresh architecture. This does NOT reuse the previous card/marker design.
 *
 * Desktop:
 * - Full-screen pinned story.
 * - One large active-stage panel.
 * - Separate milestone rail below the content.
 * - Progress line never crosses text.
 * - 6 stages over a long native scroll track.
 *
 * Mobile/tablet:
 * - Natural vertical flow; no long pinning.
 */

.ah-about-process[data-ah-process-story] {
  --ah-process-progress: 0;
  --ah-process-active: 0;
  position: relative;
  padding: 0;
  background: var(--ah-color-surface-soft);
}

/* ============================================================
   DESKTOP / LAPTOP PINNED EXPERIENCE
   ============================================================ */

@media (min-width: 961px) {
  .ah-about-process[data-ah-process-story] {
    min-height: 560vh;
  }

  .ah-about-process__pin {
    position: sticky;
    inset-block-start: var(--ah-header-height, 88px);
    min-height: calc(100svh - var(--ah-header-height, 88px));
  }

  .ah-about-process__stage {
    display: grid;
    min-height: calc(100svh - var(--ah-header-height, 88px));
    grid-template-rows: auto minmax(0, 1fr);
    align-content: center;
    padding-block: clamp(28px, 4vh, 52px);
  }

  .ah-about-process[data-ah-process-story] .ah-about-process__head {
    width: min(100%, 760px);
    margin: 0 0 clamp(24px, 3.5vh, 42px);
  }

  .ah-about-process[data-ah-process-story] .ah-about-process__head h2 {
    max-width: 13ch;
    margin-block-start: 14px;
    font-size: clamp(2.7rem, 4.25vw, 4.7rem);
    line-height: 1.01;
  }

  .ah-about-process-story {
    position: relative;
    display: grid;
    min-height: 0;
    align-content: center;
    gap: clamp(26px, 4vh, 42px);
    border: 1px solid var(--ah-color-border);
    border-radius: 30px;
    background:
      radial-gradient(
        circle at 82% 24%,
        color-mix(in srgb, var(--ah-color-brand) 7%, transparent),
        transparent 28%
      ),
      var(--ah-color-surface);
    box-shadow:
      0 24px 64px color-mix(in srgb, var(--ah-color-ink) 7%, transparent);
    padding:
      clamp(28px, 4vw, 52px)
      clamp(28px, 4vw, 54px)
      clamp(26px, 3.3vw, 42px);
    overflow: hidden;
  }

  /* ----------------------------
     FOCUS PANEL
     ---------------------------- */

  .ah-about-process-story__focus {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(180px, 0.36fr);
    align-items: center;
    gap: clamp(28px, 4vw, 62px);
    min-height: clamp(210px, 28vh, 300px);
  }

  .ah-about-process-story__focus-meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
    align-self: start;
    padding-block-start: 8px;
    font-family: var(--ah-font-mono);
  }

  .ah-about-process-story__step-index {
    color: var(--ah-color-brand);
    font-size: clamp(2.35rem, 3.6vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
  }

  .ah-about-process-story__step-count {
    color: var(--ah-color-text-muted);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.07em;
  }

  .ah-about-process-story__focus-copy {
    max-width: 760px;
  }

  .ah-about-process-story__focus-kicker {
    display: inline-block;
    margin-block-end: 13px;
    color: var(--ah-color-intelligence);
    font-family: var(--ah-font-mono);
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.085em;
  }

  .ah-about-process-story__focus-copy h3 {
    margin: 0;
    color: var(--ah-color-text);
    font-size: clamp(2.4rem, 4.4vw, 5rem);
    letter-spacing: -0.058em;
    line-height: 0.98;
    transform-origin: left center;
  }

  .ah-about-process-story__focus-copy p {
    max-width: 58ch;
    margin: 17px 0 0;
    color: var(--ah-color-text-secondary);
    font-size: clamp(0.96rem, 0.9rem + 0.18vw, 1.08rem);
    line-height: 1.65;
  }

  .ah-about-process-story__signal {
    position: relative;
    display: grid;
    align-content: center;
    gap: 13px;
    min-height: 132px;
    border-inline-start: 1px solid var(--ah-color-border);
    padding-inline-start: clamp(22px, 3vw, 34px);
  }

  .ah-about-process-story__signal > span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--ah-color-brand);
    box-shadow:
      0 0 0 7px color-mix(in srgb, var(--ah-color-brand) 9%, transparent),
      0 0 26px color-mix(in srgb, var(--ah-color-intelligence) 20%, transparent);
  }

  .ah-about-process-story__signal > i {
    width: 54px;
    height: 1px;
    background: linear-gradient(
      90deg,
      var(--ah-color-brand),
      var(--ah-color-intelligence)
    );
  }

  .ah-about-process-story__signal > small {
    max-width: 18ch;
    color: var(--ah-color-text-secondary);
    font-size: 0.72rem;
    line-height: 1.45;
  }

  /* ----------------------------
     MILESTONE RAIL
     Text is ABOVE markers. Markers sit BELOW.
     Nothing can overlap the labels.
     ---------------------------- */

  .ah-about-process-story__rail {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ah-about-process-story__rail::before {
    position: absolute;
    z-index: -1;
    inset-inline: calc(8.333% - 1px);
    inset-block-end: 10px;
    height: 2px;
    border-radius: 999px;
    background: var(--ah-color-border-strong);
    content: "";
  }

  .ah-about-process-story__rail li {
    min-width: 0;
  }

  .ah-about-process-story__rail button {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 96px;
    align-content: end;
    justify-items: center;
    gap: 3px;
    border: 0;
    background: transparent;
    color: var(--ah-color-text-muted);
    cursor: default;
    font: inherit;
    padding: 0 8px 28px;
    text-align: center;
  }

  .ah-about-process-story__rail button > span {
    color: var(--ah-color-text-muted);
    font-family: var(--ah-font-mono);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.055em;
    transition: color 220ms var(--ah-ease-standard);
  }

  .ah-about-process-story__rail button > strong {
    color: var(--ah-color-text-secondary);
    font-size: clamp(0.78rem, 0.72rem + 0.15vw, 0.88rem);
    line-height: 1.2;
    transition:
      color 220ms var(--ah-ease-standard),
      transform 300ms var(--ah-ease-emphasized);
  }

  .ah-about-process-story__rail button > small {
    color: var(--ah-color-text-muted);
    font-size: 0.6rem;
    line-height: 1.2;
    opacity: 0.7;
    transition: opacity 220ms var(--ah-ease-standard);
  }

  .ah-about-process-story__rail button > i {
    position: absolute;
    z-index: 3;
    inset-inline-start: 50%;
    inset-block-end: 3px;
    width: 15px;
    height: 15px;
    border: 3px solid var(--ah-color-surface);
    border-radius: 50%;
    background: var(--ah-color-border-strong);
    box-shadow: 0 0 0 1px var(--ah-color-border-strong);
    transform: translateX(-50%);
    transition:
      width 300ms var(--ah-ease-emphasized),
      height 300ms var(--ah-ease-emphasized),
      background-color 220ms var(--ah-ease-standard),
      box-shadow 300ms var(--ah-ease-emphasized);
  }

  .ah-about-process-story__rail li.is-complete button > span {
    color: var(--ah-color-intelligence);
  }

  .ah-about-process-story__rail li.is-complete button > strong {
    color: var(--ah-color-text);
  }

  .ah-about-process-story__rail li.is-complete button > i {
    background: var(--ah-color-intelligence);
    box-shadow:
      0 0 0 1px var(--ah-color-intelligence),
      0 0 14px color-mix(in srgb, var(--ah-color-intelligence) 18%, transparent);
  }

  .ah-about-process-story__rail li.is-active button > span {
    color: var(--ah-color-brand);
  }

  .ah-about-process-story__rail li.is-active button > strong {
    color: var(--ah-color-text);
    transform: translateY(-2px) scale(1.06);
  }

  .ah-about-process-story__rail li.is-active button > small {
    opacity: 1;
  }

  .ah-about-process-story__rail li.is-active button > i {
    width: 22px;
    height: 22px;
    background: var(--ah-color-brand);
    box-shadow:
      0 0 0 1px var(--ah-color-brand),
      0 0 0 8px color-mix(in srgb, var(--ah-color-brand) 7%, transparent),
      0 0 24px color-mix(in srgb, var(--ah-color-intelligence) 24%, transparent);
    animation: ah-about-process-rail-pulse 480ms var(--ah-ease-emphasized) both;
  }

  .ah-about-process-story__rail li:last-child.is-active button > span,
  .ah-about-process-story__rail li:last-child.is-complete button > span {
    color: var(--ah-color-signal);
  }

  .ah-about-process-story__rail li:last-child.is-active button > i {
    background: var(--ah-color-signal);
    box-shadow:
      0 0 0 1px var(--ah-color-signal),
      0 0 0 8px color-mix(in srgb, var(--ah-color-signal) 8%, transparent),
      0 0 24px color-mix(in srgb, var(--ah-color-signal) 22%, transparent);
  }

  /* Continuous colored progress line, separated from text. */
  .ah-about-process-story__progress {
    position: absolute;
    z-index: 1;
    inset-inline: calc(4vw + 8.333%);
    inset-block-end: calc(clamp(26px, 3.3vw, 42px) + 9px);
    height: 3px;
    pointer-events: none;
  }

  .ah-about-process-story__progress > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background:
      linear-gradient(
        90deg,
        var(--ah-color-brand) 0%,
        var(--ah-color-intelligence) 78%,
        var(--ah-color-signal) 100%
      );
    box-shadow: 0 0 18px color-mix(in srgb, var(--ah-color-intelligence) 16%, transparent);
    transform: scaleX(var(--ah-process-progress));
    transform-origin: left center;
  }

  /* Subtle content transition when a stage changes. */
  .ah-about-process-story.is-changing .ah-about-process-story__focus-copy,
  .ah-about-process-story.is-changing .ah-about-process-story__focus-meta,
  .ah-about-process-story.is-changing .ah-about-process-story__signal {
    animation: ah-about-process-focus-in 440ms var(--ah-ease-emphasized) both;
  }

  /* Final Grow signal switches to outcome lime. */
  .ah-about-process-story.is-outcome .ah-about-process-story__step-index,
  .ah-about-process-story.is-outcome .ah-about-process-story__focus-kicker {
    color: var(--ah-color-signal);
  }

  .ah-about-process-story.is-outcome .ah-about-process-story__signal > span {
    background: var(--ah-color-signal);
    box-shadow:
      0 0 0 7px color-mix(in srgb, var(--ah-color-signal) 9%, transparent),
      0 0 26px color-mix(in srgb, var(--ah-color-signal) 20%, transparent);
  }

  .ah-about-process-story.is-outcome .ah-about-process-story__signal > i {
    background: linear-gradient(
      90deg,
      var(--ah-color-intelligence),
      var(--ah-color-signal)
    );
  }

  @media (max-height: 760px) {
    .ah-about-process__stage {
      padding-block: 20px;
    }

    .ah-about-process[data-ah-process-story] .ah-about-process__head {
      margin-block-end: 22px;
    }

    .ah-about-process[data-ah-process-story] .ah-about-process__head h2 {
      font-size: clamp(2.15rem, 3.4vw, 3.5rem);
    }

    .ah-about-process-story {
      gap: 20px;
      padding-block: 28px 24px;
    }

    .ah-about-process-story__focus {
      min-height: 168px;
    }

    .ah-about-process-story__focus-copy h3 {
      font-size: clamp(2.2rem, 3.7vw, 3.7rem);
    }

    .ah-about-process-story__rail button {
      min-height: 82px;
    }
  }
}

@keyframes ah-about-process-rail-pulse {
  0% {
    transform: translateX(-50%) scale(0.72);
  }
  58% {
    transform: translateX(-50%) scale(1.18);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@keyframes ah-about-process-focus-in {
  0% {
    opacity: 0.35;
    transform: translateY(7px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================================
   TABLET / MOBILE — CLEAN VERTICAL PROCESS
   ============================================================ */

@media (max-width: 960px) {
  .ah-about-process[data-ah-process-story] {
    min-height: auto;
    padding-block: 72px;
  }

  .ah-about-process__pin {
    position: static;
    min-height: 0;
  }

  .ah-about-process__stage {
    display: block;
    min-height: 0;
  }

  .ah-about-process-story {
    margin-block-start: 34px;
  }

  .ah-about-process-story__focus {
    display: grid;
    gap: 20px;
    border: 1px solid var(--ah-color-border);
    border-radius: 20px;
    background: var(--ah-color-surface);
    padding: 26px 22px;
  }

  .ah-about-process-story__focus-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--ah-font-mono);
  }

  .ah-about-process-story__step-index {
    color: var(--ah-color-brand);
    font-size: 2.2rem;
    font-weight: 700;
  }

  .ah-about-process-story__step-count {
    color: var(--ah-color-text-muted);
    font-size: 0.65rem;
  }

  .ah-about-process-story__focus-kicker {
    color: var(--ah-color-intelligence);
    font-family: var(--ah-font-mono);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.08em;
  }

  .ah-about-process-story__focus-copy h3 {
    margin: 8px 0 0;
    color: var(--ah-color-text);
    font-size: clamp(2rem, 9vw, 3rem);
    letter-spacing: -0.05em;
  }

  .ah-about-process-story__focus-copy p {
    margin: 12px 0 0;
    color: var(--ah-color-text-secondary);
    line-height: 1.65;
  }

  .ah-about-process-story__signal {
    display: none;
  }

  .ah-about-process-story__rail {
    position: relative;
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0 0 0 30px;
    list-style: none;
  }

  .ah-about-process-story__rail::before {
    position: absolute;
    inset-inline-start: 8px;
    inset-block: 28px;
    width: 2px;
    background: var(--ah-color-border-strong);
    content: "";
  }

  .ah-about-process-story__rail li {
    position: relative;
  }

  .ah-about-process-story__rail button {
    display: grid;
    width: 100%;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 2px 12px;
    border: 1px solid var(--ah-color-border);
    border-radius: 14px;
    background: var(--ah-color-surface);
    color: var(--ah-color-text);
    padding: 16px;
    text-align: left;
  }

  .ah-about-process-story__rail button > span {
    grid-row: 1 / 3;
    color: var(--ah-color-brand);
    font-family: var(--ah-font-mono);
    font-size: 0.62rem;
    font-weight: 750;
  }

  .ah-about-process-story__rail button > strong {
    font-size: 0.92rem;
  }

  .ah-about-process-story__rail button > small {
    color: var(--ah-color-text-muted);
    font-size: 0.68rem;
  }

  .ah-about-process-story__rail button > i {
    position: absolute;
    inset-inline-start: -28px;
    inset-block-start: 50%;
    width: 13px;
    height: 13px;
    border: 3px solid var(--ah-color-surface-soft);
    border-radius: 50%;
    background: var(--ah-color-border-strong);
    transform: translateY(-50%);
  }

  .ah-about-process-story__rail li.is-complete button {
    border-color: color-mix(
      in srgb,
      var(--ah-color-intelligence) 25%,
      var(--ah-color-border)
    );
  }

  .ah-about-process-story__rail li.is-complete button > i {
    background: var(--ah-color-intelligence);
  }

  .ah-about-process-story__rail li.is-active button {
    border-color: color-mix(
      in srgb,
      var(--ah-color-brand) 55%,
      var(--ah-color-border)
    );
    box-shadow: 0 12px 28px color-mix(
      in srgb,
      var(--ah-color-brand) 10%,
      transparent
    );
    transform: translateX(3px);
  }

  .ah-about-process-story__rail li.is-active button > i {
    width: 18px;
    height: 18px;
    background: var(--ah-color-brand);
    box-shadow: 0 0 0 6px color-mix(
      in srgb,
      var(--ah-color-brand) 8%,
      transparent
    );
  }

  .ah-about-process-story__progress {
    display: none;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .ah-about-process-story *,
  .ah-about-process-story *::before,
  .ah-about-process-story *::after {
    animation: none !important;
    transition: none !important;
  }
}