/* =============================================================
   Local Hero — How it works (how-it-works.html)
   Modules: scroll-progress, reveal, sticky-cards (6 steps),
   kinetic-marquee (cadence), text-mask (close), spotlight (CTA).
   Self-contained.
   ============================================================= */

/* ===== SHARED SHELL ========================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--primary);
  width: 0;
  z-index: 100;
  transition: width 80ms linear;
  pointer-events: none;
}
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 480ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ===== HERO ================================================== */
.hiw-hero {
  padding: 96px 0 72px;
  text-align: center;
}
.hiw-hero h1 { text-wrap: pretty; max-width: 920px; margin: 0 auto; }
.hiw-hero .lead {
  margin-top: 28px; max-width: 680px; margin-left: auto; margin-right: auto;
  font-size: 19px; line-height: 1.55; color: var(--body);
}

/* ===== KINETIC MARQUEE — cadence ============================= */
.cadence-marquee {
  background: var(--surface-soft);
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  position: relative;
}
.cadence-track {
  display: flex; gap: 56px;
  width: max-content;
  animation: cadence-scroll 42s linear infinite;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--primary-active);
  letter-spacing: -0.4px;
}
.cadence-track span { white-space: nowrap; display: inline-flex; align-items: center; gap: 56px; }
.cadence-track span::after {
  content: '·';
  font-size: 28px;
  color: var(--gold-ltd);
}
.cadence-marquee:hover .cadence-track { animation-play-state: paused; }
@keyframes cadence-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== STICKY-CARDS — the 6 steps ============================ */
.steps-rail {
  background: var(--canvas);
  padding: 96px 0 96px;
}
.steps-intro {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 720px;
}
.steps-intro .t-caption-up { color: var(--primary); margin-bottom: 14px; }
.steps-stack {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter) 280px;
}
.step-card {
  position: sticky;
  border-radius: var(--r-2xl);
  padding: 48px;
  margin-bottom: 28px;
  min-height: 440px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  box-shadow: 0 24px 60px rgba(20, 20, 19, 0.08);
  will-change: transform;
}
.step-card:nth-child(1) { top: 80px;  background: var(--primary-active); color: var(--on-dark); z-index: 1; }
.step-card:nth-child(2) { top: 96px;  background: var(--surface-dark);   color: var(--on-dark); z-index: 2; }
.step-card:nth-child(3) { top: 112px; background: var(--gold-ltd-ink);   color: #faf6ee;        z-index: 3; }
.step-card:nth-child(4) { top: 128px; background: var(--canvas);         color: var(--ink); border: 1px solid var(--hairline); z-index: 4; }
.step-card:nth-child(5) { top: 144px; background: var(--surface-card);   color: var(--ink);     z-index: 5; }
.step-card:nth-child(6) { top: 160px; background: var(--primary);        color: var(--on-primary); z-index: 6; }

.step-card-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 8px;
  font-weight: 500;
}
.step-card-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 16px;
  font-weight: 600;
}
.step-card h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.12;
  margin: 8px 0 16px;
  text-wrap: pretty;
}
.step-card p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  opacity: 0.88;
  max-width: 50ch;
  margin: 0 0 18px;
}
.step-card ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px;
  opacity: 0.85;
}
.step-card li { padding-left: 20px; position: relative; line-height: 1.45; }
.step-card li::before {
  content: '✓';
  position: absolute; left: 2px;
  font-weight: 600; opacity: 0.7;
}

.step-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.06);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.step-card:nth-child(4) .step-image { border-color: var(--hairline); background-color: var(--surface-soft); }
.step-card:nth-child(5) .step-image { border-color: var(--hairline); background-color: var(--canvas); }

/* ===== TEXT-MASK CLOSE ======================================= */
.close-band {
  background: var(--surface-dark);
  color: var(--on-dark);
  padding: 120px 0;
  text-align: center;
}
.text-mask-h {
  font-family: var(--serif);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -1.2px;
  margin: 0 auto;
  max-width: 920px;
  background: linear-gradient(120deg,
    var(--on-dark) 0%,
    var(--on-dark) var(--reveal, 0%),
    rgba(250, 249, 245, 0.18) var(--reveal, 0%),
    rgba(250, 249, 245, 0.18) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: --reveal 80ms linear;
}
@property --reveal {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* ===== CTA BAND — spotlight =================================== */
.cta-band {
  padding: 96px 0 120px;
  background: var(--canvas);
}
.cta-panel {
  position: relative;
  background: var(--surface-card);
  border-radius: var(--r-2xl);
  padding: 64px 48px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(31, 122, 92, 0.16),
    transparent 42%
  );
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: -1;
}
.cta-panel:hover::before { opacity: 1; }
.cta-panel h2 { margin-bottom: 12px; }
.cta-panel p { color: var(--muted); margin: 0 0 32px; font-size: 17px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ===== RESPONSIVE ============================================ */
@media (max-width: 880px) {
  .step-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 28px;
    min-height: auto;
  }
  .step-card .step-image { order: -1; max-width: 360px; margin: 0 auto; aspect-ratio: 4 / 3; }
  .cadence-track { font-size: 22px; gap: 36px; }
  .cadence-track span { gap: 36px; }
  .steps-stack { padding-bottom: 200px; }
}
@media (max-width: 600px) {
  .hiw-hero { padding: 64px 0 48px; }
  .steps-rail { padding: 64px 0; }
  .close-band { padding: 80px 0; }
}

/* ===== REDUCED MOTION ======================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal, .step-card, .cadence-track, .text-mask-h, .cta-panel::before {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .text-mask-h {
    color: var(--on-dark);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
  }
}