/* Purpose: Transformation Ladder. Cream section, alternating text/polaroid steps on a
   central thread with node dots. Ported from the WV reference (the JS-drawn curve is
   simplified to a central line; rows reveal via the global .reveal system). */

.ladder-thread { background: var(--cream); position: relative; overflow: hidden; }
.ladder-thread .section-i { max-width: 1200px; margin: 0 auto; position: relative; }

.ladder-thread__head { text-align: center; margin: 0 auto 64px; max-width: 760px; }
.ladder-thread__title {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--sec-h2);
  line-height: 1.05; letter-spacing: -0.022em; color: var(--ink);
}
.ladder-thread__title em { color: var(--emerald); font-style: italic; }
.ladder-thread__lead { color: var(--ink-72); margin-top: 16px; }

.ladder-track { position: relative; padding: 16px 0 40px; }
/* No-JS fallback rail (hidden once the JS curve is built). */
.ladder-track::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(var(--em-30, rgba(55,96,84,0.30)), var(--em-14, rgba(55,96,84,0.14)));
  z-index: 0;
}
.ladder-track.js-ready::before { display: none; }

/* ── Snaking SVG thread (drawn-in on scroll) ── */
.ladder-thread__curve {
  position: absolute;
  left: 30px; top: 0;
  width: 60px; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.ladder-curve-bg { fill: none; stroke: rgba(55, 96, 84, 0.18); stroke-width: 2; stroke-linecap: round; }
.ladder-curve-fg {
  fill: none; stroke: var(--emerald); stroke-width: 2.8; stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(55, 96, 84, 0.35));
  transition: stroke-dashoffset 140ms linear;
}
.ladder-curve-tip {
  fill: var(--emerald);
  filter: drop-shadow(0 0 10px rgba(55, 96, 84, 0.55));
  transition: opacity 240ms ease;
}

.ladder-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  margin-bottom: 36px;
}

/* ── Node dot — inactive by default, activates on scroll ── */
.ladder-node {
  position: relative;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid rgba(55, 96, 84, 0.35);
  grid-column: 1; grid-row: 1 / span 2;
  justify-self: center; align-self: start; margin-top: 10px;
  z-index: 4;
  transition: background 400ms ease, border-color 400ms ease, transform 400ms ease, box-shadow 400ms ease;
}
.ladder-node.active {
  background: var(--emerald);
  border-color: var(--emerald);
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(55, 96, 84, 0.10), 0 0 22px rgba(55, 96, 84, 0.30);
}
.ladder-node::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--emerald);
  opacity: 0;
}
.ladder-node.active::after { animation: ladder-node-pulse 2.2s ease-out infinite; }
@keyframes ladder-node-pulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ── Scroll slide-in (gated by .js-ready so no-JS keeps content visible) ── */
.js-ready .ladder-row__text,
.js-ready .ladder-row__image {
  opacity: 0;
  transition: opacity 720ms cubic-bezier(0.2,0.7,0.2,1), transform 720ms cubic-bezier(0.2,0.7,0.2,1);
  will-change: opacity, transform;
}
.js-ready .ladder-row--text-left  .ladder-row__text  { transform: translateX(-36px); }
.js-ready .ladder-row--text-left  .ladder-row__image { transform: translateX(36px); transition-delay: 150ms; }
.js-ready .ladder-row--image-left .ladder-row__image { transform: translateX(-36px); }
.js-ready .ladder-row--image-left .ladder-row__text  { transform: translateX(36px); transition-delay: 150ms; }
.js-ready .ladder-row.in-view .ladder-row__text,
.js-ready .ladder-row.in-view .ladder-row__image { opacity: 1; transform: translateX(0); }

/* ── Mobile base: text + image stacked right of the rail ── */
.ladder-row__text, .ladder-row__image { grid-column: 2; }
.ladder-row__text { grid-row: 1; }
.ladder-row__image { grid-row: 2; }

.ladder-row__step {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--emerald); opacity: 0.7; margin-bottom: 10px;
}
.ladder-row__h {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.15; letter-spacing: -0.012em;
  color: var(--ink); margin: 0 0 12px;
}
.ladder-row__list {
  list-style: none; padding: 0; margin: 0 0 10px;
  font-family: var(--font-body); font-size: 14px;
  line-height: 1.6; color: var(--ink-72);
}
.ladder-row__list li { margin-bottom: 2px; }
.ladder-row__list li::before { content: '· '; color: var(--emerald); font-weight: 700; }
/* Staggered bullet + caption reveal once the row lands. */
.js-ready .ladder-row__list li,
.js-ready .ladder-row__caption { opacity: 0; transform: translateY(8px); transition: opacity 460ms ease, transform 460ms ease; }
.js-ready .ladder-row.in-view .ladder-row__list li,
.js-ready .ladder-row.in-view .ladder-row__caption { opacity: 1; transform: translateY(0); }
.js-ready .ladder-row.in-view .ladder-row__list li:nth-child(1) { transition-delay: 480ms; }
.js-ready .ladder-row.in-view .ladder-row__list li:nth-child(2) { transition-delay: 560ms; }
.js-ready .ladder-row.in-view .ladder-row__list li:nth-child(3) { transition-delay: 640ms; }
.js-ready .ladder-row.in-view .ladder-row__caption { transition-delay: 760ms; }
.ladder-row__caption {
  font-family: var(--font-display); font-style: italic;
  font-size: 14px; line-height: 1.45; color: var(--ink-72);
  margin: 8px 0 0; max-width: 36ch;
}

/* ── Polaroid ── */
.ladder-polaroid {
  display: inline-block;
  background: #FFFFFF;
  padding: 10px 10px 14px;
  box-shadow: 0 18px 32px -18px rgba(55, 96, 84, 0.40), 0 2px 6px rgba(55, 96, 84, 0.14);
  transform: rotate(-2.2deg);
  transition: transform 600ms var(--ease), box-shadow var(--dur-default);
  position: relative;
  width: 100%; max-width: 280px;
}
.ladder-row--image-left .ladder-polaroid { transform: rotate(2.2deg); }
.ladder-polaroid:hover {
  transform: rotate(0deg) scale(1.05) translateY(-4px);
  box-shadow: 0 32px 48px -20px rgba(55, 96, 84, 0.55), 0 4px 10px rgba(55, 96, 84, 0.20);
}
.ladder-polaroid img {
  display: block; width: 100%;
  aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.ladder-polaroid:hover img { transform: scale(1.06); }
.ladder-polaroid::before {
  content: '';
  position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 56px; height: 14px;
  background: rgba(55, 96, 84, 0.10); border-radius: 2px;
  pointer-events: none;
}

/* ── CTA ── */
.ladder-thread__cta { display: flex; justify-content: center; margin-top: 32px; }

/* ── Desktop: alternating 3-column layout ── */
@media (min-width: 769px) {
  .ladder-track::before { left: 50%; }
  .ladder-thread__curve { left: 50%; width: 280px; transform: translateX(-50%); }
  .ladder-row {
    grid-template-columns: 1fr 80px 1fr;
    grid-template-rows: auto;
    align-items: center;
    min-height: 140px;
    margin-bottom: 24px;
  }
  .ladder-node { grid-column: 2; grid-row: auto; margin-top: 0; }

  .ladder-row--text-left .ladder-row__text  { grid-column: 1; grid-row: auto; text-align: right; padding-right: 44px; }
  .ladder-row--text-left .ladder-row__image { grid-column: 3; grid-row: auto; padding-left: 44px; justify-self: start; }
  .ladder-row--image-left .ladder-row__image { grid-column: 1; grid-row: auto; padding-right: 44px; justify-self: end; }
  .ladder-row--image-left .ladder-row__text  { grid-column: 3; grid-row: auto; text-align: left; padding-left: 44px; }

  .ladder-row--text-left .ladder-row__caption { margin-left: auto; }
  .ladder-polaroid { max-width: 360px; }
}