/* ============================================
   STAGGER TEXT — Diagonal words collapse on scroll
   Words start scattered, converge to one line
   ============================================ */

.stagger-text {
  position: relative;
  min-height: 180vh; /* scroll runway */
  background: #FAF8F3;
  overflow: hidden;
}

.stagger-text__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stagger-text__words {
  position: relative;
  font-family: var(--font-family-heading);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2em;
  padding: 0 var(--spacing-lg);
}

/* Each word gets its own transform driven by JS custom properties */
.stagger-text__word {
  display: inline-block;
  will-change: transform;
  white-space: nowrap;
  transform: translate(
    var(--stagger-x, 0px),
    var(--stagger-y, 0px)
  );
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .stagger-text {
    min-height: 140vh;
  }

  .stagger-text__words {
    font-size: clamp(2rem, 5vw, 3.5rem);
  }
}