.Statement__section {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 2rem;
  padding: clamp(2rem, 6vw, 7rem);
  overflow: hidden;
  isolation: isolate;

  opacity: 0.5;
  filter: saturate(0.25);
  transition:
    opacity var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}

.Statement__section.Statement__resolved {
  opacity: 1;
  filter: saturate(1);
}

@media (min-width: 1024px) and (hover: hover) {
  .Statement__section {
    filter: saturate(0.25) blur(4px);
  }

  .Statement__section.Statement__resolved {
    filter: saturate(1) blur(0px);
  }
}

/**
 * Both layers occupy the same grid cell, so they stack pixel-for-pixel without
 * absolute positioning and the container still sizes to the text.
 *
 * Positioned so it takes a z-index and the statement stays over the camera,
 * which crosses the page behind every section rather than living in this one.
 */
.Statement__stack {
  position: relative;
  z-index: 1;
  display: grid;
}

/**
 * The grid item is the wrapper, not the <p> inside it — putting grid-area on
 * the paragraph did nothing and the two layers stacked vertically, rendering
 * the statement twice down the page.
 */
.Statement__layer {
  grid-area: 1 / 1;
}

.Statement__outlineLayer,
.Statement__solidLayer {
  margin: 0;
}

/**
 * The layer underneath: every word drawn as stroke only. The solid layer above
 * fades its four target words in over the top, which means the reveal animates
 * opacity alone rather than interpolating a colour or a text-stroke.
 */
.Statement__outlineLayer {
  color: transparent;
  -webkit-text-stroke: 1px var(--grey-2);
}

.Statement__solidLayer {
  color: var(--fg);
}

/* Set on the four declared words before the timeline takes over. */
.Statement__pending {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .Statement__section,
  .Statement__section.Statement__resolved {
    filter: none;
  }

  .Statement__section {
    transition: opacity var(--dur) var(--ease);
  }

  /* No staged reveal — the statement simply reads. */
  .Statement__pending {
    opacity: 1;
  }
}