/* transition.css — seam mechanics. The ONE pinned beat and the dark → cream ground crossfade.
 *
 * Pinning lives on exactly one element on the whole page: #seam > .seam__pin.
 * The visible inversion is a CSS interpolation driven by --seam-progress (set by main.js). */

/* The seam is taller than the viewport by ~1 extra viewport. That extra height is the scroll
   distance that maps to t∈[0,1] (spec: "roughly one viewport-height of scroll"). */
#seam {
  position: relative;
  height: 200vh; /* 100vh visible pin + 100vh of scroll travel → progress */
}

/* The only pinned element on the page. Stays put while the seam's extra height scrolls by. */
.seam__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;

  /* Ground crossfade: dark → cream as --seam-progress goes 0 → 1. color-mix keeps it a single
     interpolating ground so the blob reads as one object whose world changes. */
  background: color-mix(
    in oklab,
    var(--ground-cream) calc(var(--seam-progress) * 100%),
    var(--ground-dark)
  );
  color: color-mix(
    in oklab,
    var(--ink-on-cream) calc(var(--seam-progress) * 100%),
    var(--ink-on-dark)
  );
}

/* The blob is anchored here so it holds on-screen position through the inversion. */
.seam__blob {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.seam__content {
  position: relative;
  z-index: 1; /* hero text over the blob, same stacking as the dark build */
}

/* Reduced motion: NO pin, hard cut to cream. The seam collapses so dark/seam are skipped and
   the user lands directly in the cream resting state. (spec: prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  #seam {
    height: 0;
  }
  .seam__pin {
    position: static;
    height: 0;
    --seam-progress: 1;
    overflow: visible;
  }
}