/* ==========================================================
   THESIS SCROLL — LSI Homepage
   Scroll-driven narrative. Each .beat is roughly one
   viewport tall; its inner content fades/translates in
   when it enters view. Split beats (.beat--split) show
   text on the left and an animated brand visual on the
   right that animates in when the beat becomes visible.
   ========================================================== */

.thesis-scroll {
  background: var(--ls-navy-900);
  color: var(--color-text-inverse);
  overflow-x: clip;
}

/* ---------------- Beat layout ---------------- */

.beat {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(3rem, 6vh, 5rem) var(--gutter);
  text-align: center;
  position: relative;
  scroll-margin-top: 80px;
}

.beat__inner {
  max-width: 900px;
  width: 100%;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out);
  will-change: opacity, transform;
}

.beat.is-visible .beat__inner {
  opacity: 1;
  transform: translateY(0);
}

.beat__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ls-teal-400);
  margin: 0 0 var(--space-5);
  font-weight: var(--fw-medium);
}

.beat__statement {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-regular);
  color: var(--color-text-inverse);
  margin: 0;
  text-wrap: balance;
}

.beat__statement em {
  font-style: italic;
  color: var(--ls-teal-300);
}

.beat__statement strong {
  font-weight: var(--fw-semibold);
  color: var(--ls-teal-300);
}

.beat__body {
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: var(--lh-relaxed);
  color: var(--color-text-inverse-muted);
  max-width: 720px;
  margin: var(--space-7) auto 0;
  text-wrap: pretty;
}

/* ---------------- Split beats (text left, visual right) ---------------- */

.beat--split {
  text-align: left;
  align-items: center;
}

.beat__inner--split {
  max-width: var(--container-wide);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "eyebrow eyebrow"
    "text    visual";
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  text-align: left;
}

/* Eyebrow spans the full width above both columns, so the visualization's
   top aligns with the punchline / statement in the text column. */
.beat--split .beat__inner--split > .beat__eyebrow {
  grid-area: eyebrow;
  margin: 0;
}

.beat--split .beat__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
}

.beat--split .beat__visual { grid-area: visual; }

.beat--split .beat__eyebrow { text-align: left; }

/* Split-beat statements sit alongside a visual — lower in profile
   so the text column does not crowd the graphic next to it. */
.beat--split .beat__statement {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.4;
  max-width: 34ch;
}

.beat--split .beat__visual {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .beat__inner--split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "text"
      "visual";
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* ---------------- Beat variants ---------------- */

/* Hero — fills the viewport on load, then fades as the user scrolls
   down toward The Stakes. */
.beat--question {
  min-height: 100vh;
  padding: clamp(4rem, 10vh, 8rem) var(--gutter);
}

.beat--question .beat__inner {
  /* Hero is visible immediately on load — skip the IntersectionObserver
     fade-in and let the scroll-driven animation control its exit. */
  opacity: 1;
  transform: none;
  transition: none;
}

.beat--question .beat__statement {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 1.15;
  max-width: 22ch;
  margin-inline: auto;
}

/* Scroll-linked fade as the hero leaves the viewport. Gracefully
   degrades in browsers without scroll-driven animation support. */
@supports (animation-timeline: view()) {
  .beat--question .beat__inner {
    animation: hero-exit linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 90%;
  }
}

@keyframes hero-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-48px); }
}

.beat--path-one {
  background: linear-gradient(180deg, var(--ls-navy-900) 0%, var(--ls-navy-800) 100%);
}

.beat--path-two {
  background: linear-gradient(180deg, var(--ls-navy-800) 0%, var(--ls-navy-700) 100%);
}

.beat--path-two .beat__statement strong {
  color: var(--ls-teal-300);
}

/* Thesis beat mirrors the hero's size and positioning — a full-viewport
   statement with the same typography scale. */
.beat--thesis {
  min-height: 100vh;
  padding: clamp(4rem, 10vh, 8rem) var(--gutter);
  background: linear-gradient(180deg, var(--ls-navy-700) 0%, var(--ls-navy-800) 100%);
}

.beat--thesis .beat__statement {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 1.15;
  max-width: 22ch;
  margin-inline: auto;
}

.beat--thesis .beat__statement strong {
  color: var(--ls-teal-300);
}

/* ==========================================================
   STAKES — split layout
   Left column: eyebrow → punchline → 3 stakes rows (icon +
   sentence + color-coded rule + category label).
   Right column: Chetty mobility chart.
   ========================================================== */

.beat--stakes {
  text-align: left;
}

/* Stakes text is much taller than the chart visual — top-align
   the two columns so the chart sits at the top of its rail. */
.beat--stakes .beat__inner--split {
  align-items: start;
}

.beat--stakes .beat__text {
  gap: var(--space-5);
}

.stakes-punchline {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.25;
  color: var(--color-text-inverse);
  margin: 0;
  text-wrap: balance;
}

.stakes-punchline strong {
  font-weight: var(--fw-regular);
  color: var(--color-text-inverse);
}

/* Stakes list — each row reads like a bulleted item:
   icon on the left as the bullet, sentence first, color-coded
   rule beneath, category label below the rule. */

.stakes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.stakes-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--space-4);
  align-items: start;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  transition-delay: calc(var(--stake-index, 0) * 120ms + 200ms);
}

.beat.is-visible .stakes-row { opacity: 1; transform: translateY(0); }

.stakes-row--housing            { --stake-color: #7CDFE3; --stake-index: 0; }
.stakes-row--employee-ownership { --stake-color: #F0C578; --stake-index: 1; }
.stakes-row--technology         { --stake-color: #8FB5F0; --stake-index: 2; }

.stakes-row__icon {
  width: 32px;
  height: 32px;
  color: var(--stake-color);
  flex-shrink: 0;
  margin-top: 2px;
  animation: mark-pulse 2400ms var(--ease-out) infinite;
  animation-delay: calc(var(--stake-index, 0) * 300ms + 600ms);
}

.stakes-row__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes mark-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%      { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(124, 223, 227, 0.22)); }
}

.stakes-row__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stakes-row__fact {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.35;
  color: var(--color-text-inverse);
  margin: 0;
  text-wrap: balance;
}

.stakes-row__rule {
  display: block;
  width: clamp(60px, 10vw, 96px);
  height: 2px;
  background: var(--stake-color);
  border-radius: 2px;
  margin-top: var(--space-1);
}

.stakes-row__label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--stake-color);
  margin: 0;
}

@media (max-width: 600px) {
  .stakes-row { grid-template-columns: 40px 1fr; column-gap: var(--space-4); }
  .stakes-row__icon { width: 36px; height: 36px; }
}

/* ---------------- Mobility chart (Chetty, Figure 1B) ----------------
   Rendered seamlessly onto the dark navy thesis-scroll background
   with LS brand colors. Keeps the same structure (axes, gridlines,
   45 annual data points) as the published Science figure. */

.mobility-chart {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-4);
  color: var(--color-text-inverse);
}

.mobility-chart__cap {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-inverse-muted);
  margin: 0;
}

.mobility-chart__source {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-inverse-muted);
  opacity: 0.75;
}

.mobility-chart__svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  overflow: visible;
}

.mobility-chart__grid line {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.mobility-chart__axis {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.2;
}

.mobility-chart__ticks line {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1;
}

.mobility-chart__ylabel text,
.mobility-chart__xlabel text {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--color-text-inverse-muted);
  letter-spacing: 0.01em;
}

.mobility-chart__axis-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  fill: var(--color-text-inverse);
}

.mobility-chart__line {
  stroke: var(--ls-teal-300);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  transition: stroke-dashoffset 2400ms var(--ease-out) 300ms;
}

.beat.is-visible .mobility-chart__line { stroke-dashoffset: 0; }

.mobility-chart__points circle {
  fill: var(--ls-teal-300);
  stroke: var(--ls-navy-900);
  stroke-width: 0.75;
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
}

.beat.is-visible .mobility-chart__points circle {
  opacity: 1;
  transition-delay: 2000ms;
}

/* ==========================================================
   CAPITAL GRID — 5×5 places visualization
   Shared geometry for both One Path (concentrate) and
   Our Path (disperse). Each .cell has a default body fill
   and a contrasting door; variants override opacity/color
   animation. One .cell--concentrator stays bright in both.
   ========================================================== */

.capital-grid {
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 280px;
}

.capital-grid__cap {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
  margin: 0 0 var(--space-2);
  font-weight: var(--fw-semibold);
}

.capital-grid__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* --- Cell geometry ---
   Each cell is a house silhouette (pentagon body + door).
   Animations control saturation/scale only; no flying particles. */

.cell {
  transform-box: fill-box;
  transform-origin: center;
}
.cell__body {
  fill: var(--ls-teal-300);
  transition: fill 400ms var(--ease-out);
}
.cell__door {
  fill: var(--ls-navy-900);
}
.cell--concentrator .cell__body {
  fill: var(--ls-teal-200);
  filter: drop-shadow(0 0 10px rgba(180, 236, 238, 0.7));
}

/* --- One Path: resource concentration ---
   A 5×5 grid of teal squares. When the section enters view,
   24 peripheral squares desaturate while the top-right corner
   square intensifies in saturation and shifts to gold. */

.capital-grid--concentrate .cell {
  fill: var(--ls-teal-300);
  opacity: 1;
  transition:
    fill 2800ms var(--ease-out),
    opacity 2800ms var(--ease-out);
  transition-delay: calc(var(--d, 0s) + 600ms);
}

.beat.is-visible .capital-grid--concentrate .cell:not(.cell--concentrator) {
  fill: #3f5a61;
  opacity: 0.4;
}

.capital-grid--concentrate .cell--concentrator {
  fill: var(--ls-teal-300);
  transition: fill 2400ms var(--ease-out) 3000ms;
}

.beat.is-visible .capital-grid--concentrate .cell--concentrator {
  fill: #F0C578;
  filter: drop-shadow(0 0 10px rgba(240, 197, 120, 0.55));
}

/* --- Our Path: resource distribution ---
   Starts in the exact end state of One Path: 15 desaturated
   squares with the top-right corner square gold. When the section
   enters view, the peripheral squares saturate in sequence —
   emanating outward from the corner — until every square matches
   the concentrator's gold. */

.capital-grid--disperse .cell {
  fill: #3f5a61;
  opacity: 0.4;
  transition:
    fill 2800ms var(--ease-out),
    opacity 2800ms var(--ease-out);
  transition-delay: calc(var(--d, 0s) + 600ms);
}

.beat.is-visible .capital-grid--disperse .cell:not(.cell--concentrator) {
  fill: #F0C578;
  opacity: 1;
}

.capital-grid--disperse .cell--concentrator {
  fill: #F0C578;
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(240, 197, 120, 0.55));
  transition: none;
}

/* ---------------- Pillars beat ---------------- */

.beat--pillars {
  min-height: auto;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  background: var(--ls-navy-900);
  text-align: left;
}

.beat--pillars .beat__inner {
  max-width: var(--container-wide);
  text-align: left;
}

.beat--pillars .beat__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.beat--pillars .beat__eyebrow { text-align: center; }

.beat--pillars .beat__statement {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  text-align: center;
}

.thesis-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .thesis-pillars { grid-template-columns: 1fr; }
}

.thesis-pillar {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  color: var(--color-text-inverse);
  text-decoration: none;
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.thesis-pillar:hover,
.thesis-pillar:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.thesis-pillar__tag {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ls-teal-400);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-5);
}

.thesis-pillar--policy .thesis-pillar__tag { color: #8FB5F0; }
.thesis-pillar--technology .thesis-pillar__tag { color: var(--ls-teal-300); }
.thesis-pillar--initiatives .thesis-pillar__tag { color: #F0C578; }

.thesis-pillar__title {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-5);
  letter-spacing: var(--tracking-snug);
}

.thesis-pillar__body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-inverse-muted);
  flex: 1;
  margin: 0 0 var(--space-7);
}

.thesis-pillar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  border-radius: var(--radius-md);
  background: var(--ls-teal-500);
  color: var(--ls-navy-900);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
  align-self: flex-start;
}

.thesis-pillar:hover .thesis-pillar__cta,
.thesis-pillar:focus-visible .thesis-pillar__cta {
  background: var(--ls-teal-400);
}

/* ---------------- Newsletter CTA beat ---------------- */

.beat--cta {
  min-height: auto;
  padding: clamp(3rem, 5vw, 4.5rem) var(--gutter);
  background: var(--ls-off-white);
  color: var(--color-text);
}

.beat--cta .beat__eyebrow { color: var(--color-text-muted); }
.beat--cta .beat__statement {
  color: var(--color-text);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.beat--cta .beat__body { color: var(--color-text-muted); }
.beat--cta .form-inline {
  margin-top: var(--space-7);
  display: flex;
  gap: var(--space-3);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .beat__inner,
  .stakes-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mobility-chart__line { stroke-dashoffset: 0; transition: none; }
  .mobility-chart__points circle { opacity: 1; transition: none; }

  .cell,
  .stakes-row__icon {
    animation: none !important;
  }
  .capital-grid--concentrate .cell { opacity: 0.45; transform: none; }
  .capital-grid--concentrate .cell--concentrator { opacity: 1; transform: scale(1.1); }
  .capital-grid--disperse .cell { opacity: 1; transform: none; }
}