/* FIXD — problem → solution typographic break.
   Five problems clip in from alternating sides as the section is scrolled,
   then the wordmark lands. No bouncing, no random timing: each word is tied to
   scroll progress by parallax.js writing --p on the section. */

.typebreak {
  background: var(--black);
  color: var(--white);
  padding-block: clamp(4rem, 14vh, 10rem);
  overflow: hidden;
}
.typebreak__list { display: grid; gap: clamp(.1rem, .4vw, .4rem); }

.tword {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 12.5vw, 9.5rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 76;
  line-height: .92;
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white-16);
}
.tword:nth-child(odd) { text-align: left; }
.tword:nth-child(even) { text-align: right; }

/* Each word owns a slice of the section's scroll progress. */
.js .tword {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .42s var(--ease-snap), color .3s linear, -webkit-text-stroke-color .3s linear;
}
.js .tword:nth-child(even) { clip-path: inset(0 0 0 100%); }
.js .tword.is-on { clip-path: inset(0 0 0 0); color: var(--white); -webkit-text-stroke-color: transparent; }

.typebreak__answer {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
}
.typebreak__answer span {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 17vw, 13rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 78;
  line-height: .8;
  letter-spacing: -.045em;
  color: var(--yellow);
  text-transform: uppercase;
}
.js .typebreak__answer {
  clip-path: inset(0 0 102% 0);
  transition: clip-path .5s var(--ease-snap);
}
.js .typebreak__answer.is-on { clip-path: inset(0 0 -2% 0); }

@media (prefers-reduced-motion: reduce) {
  .js .tword { clip-path: none; color: var(--white); -webkit-text-stroke-color: transparent; }
  .js .typebreak__answer { clip-path: none; }
}