/* =========================================================================
   home2 — seams: the move from one section to the next.
   The old prototype's transition (home.css "Section seams", REBUILD.md §5.6),
   as it shipped: the `grow` bend.

   As a boundary between two sections scrolls up the window, the lower
   section's ground rises into the bottom of the section above as a wedge:
   flat when the boundary enters at the foot of the window, peaked by the
   time it leaves at the top. The peak sits at 68.8% of the width and is as
   tall as the section padding, so it only ever covers the empty padding at
   the foot of the section above, never its content.

   Nothing to add per section: every section that follows another one (and
   the footer) grows its own wedge from a ::before that takes the section's
   own background (`inherit`), so a ground changed in Figma changes its seam
   with it. Where two neighbours share a ground the wedge is simply invisible.

   At rest (no support for scroll-driven animation, or reduced motion) the
   seam is flat — the page is exactly the Figma frame.
   ========================================================================= */

.l-section + .l-section,
.l-section + .m-footer {
  position: relative;
  --seam-swing: var(--spacing-section-padding);
}

@supports (animation-timeline: view()) {
  .l-section + .l-section::before,
  .l-section + .m-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* 1px into the section itself, so no hairline shows at the join */
    bottom: calc(100% - 1px);
    height: calc(var(--seam-swing) + 1px);
    background: inherit;
    pointer-events: none;
    clip-path: polygon(0 100%, 68.8% 100%, 100% 100%);
    animation: seam-grow linear both;
    animation-timeline: view();
    /* from the boundary touching the foot of the window to the wedge
       leaving its top */
    animation-range: contain 0% exit 100%;
  }
}

@keyframes seam-grow {
  from { clip-path: polygon(0 100%, 68.8% 100%, 100% 100%); }
  to   { clip-path: polygon(0 100%, 68.8% 0%,   100% 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .l-section + .l-section::before,
  .l-section + .m-footer::before { animation: none; }
}