/* =====================================================================
   Miss Pepper AI — scrollytelling.css
   Scrollama-driven narrative sections. Editorial pacing, NOT decoration.
   Strict rule: no scroll-jacking. Native scroll always controls the page.
   ===================================================================== */

/* ---------- Methodology (sticky-stage with cycling content) ---------- */
.mp-scrolly-methodology {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  position: relative;
  margin: 96px 0;
  min-height: 320vh; /* total scroll budget = 4 phases × ~80vh */
}

.mp-scrolly-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 32px;
}

.mp-scrolly-stage-card {
  background-color: var(--mp-cream-soft);
  border: 1px solid var(--mp-cream-edge);
  border-radius: var(--mp-radius-lg);
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.mp-scrolly-phase-num {
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-tide-700);
  margin-bottom: 16px;
  display: block;
  transition: opacity 300ms var(--mp-ease);
}

.mp-scrolly-phase-title {
  font-family: var(--mp-serif);
  font-size: clamp(28px, 1.8rem + 1vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--mp-pepper);
  margin: 0 0 24px;
  transition: opacity 300ms var(--mp-ease), transform 400ms var(--mp-ease);
}

.mp-scrolly-phase-desc {
  font-family: var(--mp-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mp-pepper-500);
  margin: 0 0 32px;
  transition: opacity 300ms var(--mp-ease);
}

.mp-scrolly-phase-meta {
  font-family: var(--mp-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mp-pepper-300);
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* Phase cards: only one visible at a time, cross-fade */
.mp-scrolly-phase {
  opacity: 0;
  transform: translateY(8px);
  position: absolute;
  inset: 48px;
  pointer-events: none;
  transition: opacity 300ms var(--mp-ease), transform 400ms var(--mp-ease);
}
.mp-scrolly-phase.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* The right column — the "steps" stack that drives the scroll */
.mp-scrolly-steps {
  display: flex;
  flex-direction: column;
  gap: 80vh; /* big gaps so each step holds the stage */
}

.mp-scrolly-step {
  min-height: 60vh;
  display: flex;
  align-items: center;
  font-family: var(--mp-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--mp-pepper-500);
  padding: 0 16px;
}

.mp-scrolly-step-inner {
  border-left: 4px solid var(--mp-pepper-100);
  padding-left: 24px;
  transition: border-color 200ms var(--mp-ease), color 200ms var(--mp-ease);
}
.mp-scrolly-step.is-active .mp-scrolly-step-inner {
  border-left-color: var(--mp-tide);
  color: var(--mp-pepper);
}

.mp-scrolly-step-num {
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-pepper-300);
  margin-bottom: 8px;
  display: block;
}
.mp-scrolly-step.is-active .mp-scrolly-step-num { color: var(--mp-tide-700); }

.mp-scrolly-step-title {
  font-family: var(--mp-serif);
  font-size: clamp(22px, 1.3rem + 0.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: inherit;
  margin: 0 0 12px;
}

/* Mobile fallback: degrade gracefully to a stacked layout, no sticky */
@media (max-width: 1024px) {
  .mp-scrolly-methodology {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 32px;
  }
  .mp-scrolly-stage {
    position: static;
    height: auto;
    padding: 0;
  }
  .mp-scrolly-phase {
    opacity: 1;
    transform: none;
    position: static;
    inset: auto;
    pointer-events: auto;
    margin-bottom: 32px;
    padding: 32px;
    background: var(--mp-cream-soft);
    border: 1px solid var(--mp-cream-edge);
    border-radius: var(--mp-radius-md);
  }
  .mp-scrolly-stage-card {
    background: transparent;
    border: 0;
    padding: 0;
  }
  .mp-scrolly-steps { display: none; }
}

/* Reduced motion: same as mobile fallback — show all phases stacked */
@media (prefers-reduced-motion: reduce) {
  .mp-scrolly-methodology {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .mp-scrolly-stage { position: static; height: auto; }
  .mp-scrolly-phase {
    opacity: 1;
    transform: none;
    position: static;
    inset: auto;
    pointer-events: auto;
    margin-bottom: 32px;
  }
  .mp-scrolly-steps { display: none; }
}