/* ============================================================================
   METANOIA · THE SOLUTION — V3  (Phase II · Crystal / Architecture)
   Interactive Purpose → Progress journey rail with progressive disclosure,
   plus a quiet 4-pillar differentiator strip.
   ============================================================================ */

.solution-v3 {
  padding: 140px 0;
}
.solution-v3 .wrap-narrow {
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
}

/* ---------- head ---------- */
.solution-v3 .s-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 40px;
}
.solution-v3 .s-head .eyebrow { justify-content: center; }
.solution-v3 .s-head .h2 { margin: 0 0 24px; text-wrap: balance; }
.solution-v3 .s-head .lede {
  margin: 0 auto; max-width: 660px; text-align: center;
}

/* ---------- compact negation → reveal ---------- */
.solution-claim {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(18px, 1.9vw, 23px); line-height: 1.5; letter-spacing: -0.01em;
  color: var(--fg3);
  text-wrap: balance;
}
.solution-claim .nope {
  white-space: nowrap;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--fg3) 50%, transparent);
  text-decoration-thickness: 1px;
}
.solution-claim .yes {
  display: block;
  margin-top: 16px;
  color: var(--fg1);
}
/* brand logo introducing the reveal line */
.solution-claim .claim-logo {
  display: block;
  width: clamp(190px, 26vw, 280px);
  height: auto;
  margin: 30px auto 6px;
}
.solution-claim .yes em {
  font-style: normal;
  background: var(--gradient-phases);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}

/* ---------- journey rail ---------- */
.journey {
  position: relative;
  margin: 0 auto 28px;
  max-width: 920px;
}
.journey-rail {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  position: relative;
  padding: 26px 0 0;
}
/* the gradient line behind the nodes */
.journey-rail::before {
  content: '';
  position: absolute;
  left: 6%; right: 6%;
  top: 33px;
  height: 1px;
  background: linear-gradient(90deg,
    var(--act-1) 0%, var(--act-2) 17%, var(--act-3) 34%,
    var(--act-4) 50%, var(--act-5) 66%, var(--act-6) 83%, var(--act-7) 100%);
  opacity: 0.35;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journey[data-revealed] .journey-rail::before { transform: scaleX(1); }

.journey-step {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  flex: 1 1 0;
  background: transparent; border: 0; padding: 0 2px 8px;
  cursor: pointer;
  font-family: var(--font-display);
  color: var(--fg3);
  transition: color 240ms var(--ease-out-soft);
  opacity: 0;
  transform: translateY(10px);
}
.journey[data-revealed] .journey-step { opacity: 1; transform: translateY(0); transition: opacity 500ms var(--ease-out-soft), transform 500ms var(--ease-out-soft), color 240ms var(--ease-out-soft); }
.journey[data-revealed] .journey-step:nth-child(1) { transition-delay: 250ms; }
.journey[data-revealed] .journey-step:nth-child(2) { transition-delay: 350ms; }
.journey[data-revealed] .journey-step:nth-child(3) { transition-delay: 450ms; }
.journey[data-revealed] .journey-step:nth-child(4) { transition-delay: 550ms; }
.journey[data-revealed] .journey-step:nth-child(5) { transition-delay: 650ms; }
.journey[data-revealed] .journey-step:nth-child(6) { transition-delay: 750ms; }
.journey[data-revealed] .journey-step:nth-child(7) { transition-delay: 850ms; }

.journey-node {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--canvas-black);
  border: 1.5px solid var(--c);
  box-shadow: 0 0 0 5px var(--canvas-black);
  transition: transform 280ms var(--ease-spring), background 280ms var(--ease-out-soft), box-shadow 280ms var(--ease-out-soft);
}
.journey-label {
  font-size: clamp(12px, 1.25vw, 15px);
  letter-spacing: -0.005em; line-height: 1.1;
  text-align: center;
  color: inherit;
  transition: color 240ms var(--ease-out-soft);
}
.journey-step:hover { color: var(--fg1); }
.journey-step:hover .journey-node {
  transform: scale(1.25);
}
.journey-step:focus-visible { outline: none; }
.journey-step:focus-visible .journey-node {
  box-shadow: 0 0 0 5px var(--canvas-black), 0 0 0 8px color-mix(in srgb, var(--c) 40%, transparent);
}
.journey-step[data-active] { color: var(--fg1); }
.journey-step[data-active] .journey-node {
  background: var(--c);
  transform: scale(1.4);
  box-shadow: 0 0 0 5px var(--canvas-black), 0 0 16px var(--c);
}
.journey-step[data-active] .journey-label { color: var(--c); }

/* progress index pill, e.g. step number above — absolute so it doesn't
   push the node off the connecting line */
.journey-step .journey-idx {
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.24em; font-weight: 600;
  color: var(--fg3);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 240ms var(--ease-out-soft);
}
.journey-step[data-active] .journey-idx,
.journey-step:hover .journey-idx { opacity: 0.7; }

/* ---------- step detail panel ---------- */
.journey-detail {
  position: relative;
  margin: 8px auto 0;
  max-width: 720px;
  min-height: 132px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  padding: 30px 34px;
  overflow: hidden;
}
.journey-detail::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--c);
  box-shadow: 0 0 14px var(--c);
  transition: background 320ms var(--ease-out-soft), box-shadow 320ms var(--ease-out-soft);
}
.jd-card { display: none; }
.jd-card[data-current] {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 6px 20px;
  animation: jd-fade 360ms var(--ease-out-soft);
}
@keyframes jd-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jd-card .jd-stage {
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c);
  white-space: nowrap;
  padding-top: 7px;
  grid-row: span 2;
}
.jd-card .jd-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.015em; line-height: 1.1;
  color: var(--fg1);
}
.jd-card .jd-desc {
  margin: 0;
  font-size: 15.5px; line-height: 1.6; color: var(--fg2); font-weight: 300;
  text-wrap: pretty;
  max-width: 520px;
}
.jd-card .jd-desc em { font-style: normal; color: var(--fg1); font-weight: 500; }

/* ---------- 4-pillar differentiator strip ---------- */
.solution-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 72px auto 0;
  max-width: 920px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  overflow: hidden;
}
.pillar {
  position: relative;
  background: var(--canvas-black);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 8px;
  transition: background 280ms var(--ease-out-soft);
  overflow: hidden;
}
.pillar::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--c);
  opacity: 0.4;
  transition: opacity 280ms var(--ease-out-soft);
}
.pillar:hover { background: color-mix(in srgb, var(--c) 5%, var(--canvas-black)); }
.pillar:hover::before { opacity: 1; }
.pillar .p-tag {
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--c);
}
.pillar .p-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(16px, 1.6vw, 19px); letter-spacing: -0.01em; line-height: 1.2;
  color: var(--fg1);
}
.pillar .p-desc {
  margin: 4px 0 0;
  font-size: 13px; line-height: 1.55; color: var(--fg2); font-weight: 300;
  max-height: 0; opacity: 0;
  overflow: hidden;
  transition: max-height 320ms var(--ease-out-soft), opacity 320ms var(--ease-out-soft), margin 320ms var(--ease-out-soft);
}
.pillar:hover .p-desc,
.pillar:focus-within .p-desc {
  max-height: 80px; opacity: 1; margin-top: 6px;
}

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .solution-pillars { grid-template-columns: repeat(2, 1fr); }
  .solution-v3 .wrap-narrow { padding: 0 24px; }
}
@media (max-width: 640px) {
  .solution-v3 { padding: 96px 0; }
  /* rail becomes a horizontal scroll with labels under nodes */
  .journey-rail {
    overflow-x: auto;
    justify-content: flex-start;
    gap: 28px;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .journey-rail::-webkit-scrollbar { display: none; }
  .journey-rail::before { left: 0; right: 0; }
  .journey-step { flex: 0 0 auto; min-width: 64px; }
  .jd-card[data-current] { grid-template-columns: 1fr; }
  .jd-card .jd-stage { grid-row: auto; padding-top: 0; }
  .solution-pillars { grid-template-columns: 1fr; }
  .pillar .p-desc { max-height: 80px; opacity: 1; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-rail::before { transform: scaleX(1); transition: none; }
  .journey-step { opacity: 1 !important; transform: none !important; transition: color 240ms; }
  .jd-card[data-current] { animation: none; }
}