/* Page rhythm: soft seams between sections, reading line.
   Everything is painted with gradients from theme colors; no images, no layout size changes. */

/* ---- 1. Seams: the top padding of each section blends in from the previous section's color.
   The gradient lives only inside the padding, so text always sits on the section's own color. ---- */
.sec + .sec,
main + .site-footer {
  --seam-h: var(--size-section-gap);
  --seam: linear-gradient(to bottom,
    var(--seam-from) 0%,
    color-mix(in srgb, var(--seam-to) 6%, var(--seam-from)) 12%,
    color-mix(in srgb, var(--seam-to) 22%, var(--seam-from)) 28%,
    color-mix(in srgb, var(--seam-to) 50%, var(--seam-from)) 46%,
    color-mix(in srgb, var(--seam-to) 78%, var(--seam-from)) 64%,
    color-mix(in srgb, var(--seam-to) 94%, var(--seam-from)) 82%,
    var(--seam-to) 100%);
}
main + .site-footer { --seam-h: clamp(48px, 8vw, 88px); }
/* the dark hero meets the next section with a hard edge */
.hero + .sec { --seam: none; }

/* paper family to paper family: very short, almost invisible */
.sec--alt + .sec--plain { --seam-from: var(--color-paper-2); --seam-to: var(--color-paper); }
.sec--plain + .sec--alt { --seam-from: var(--color-paper); --seam-to: var(--color-paper-2); }
/* into night and out of it: long eased blend */
.sec--alt + .gallery { --seam-from: var(--color-paper-2); --seam-to: var(--color-night); }
.sec--plain + .gallery { --seam-from: var(--color-paper); --seam-to: var(--color-night); }
.gallery + .sec--alt { --seam-from: var(--color-night); --seam-to: var(--color-paper-2); }
.gallery + .sec--plain { --seam-from: var(--color-night); --seam-to: var(--color-paper); }
main + .site-footer { --seam-from: var(--color-paper-2); --seam-to: var(--color-night); }

/* ---- 2. Paint: the seam, plus an optional --decor layer (none now) ---- */
.sec,
.site-footer {
  background-image: var(--seam, none), var(--decor, none);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% var(--seam-h, 0), 100% min(900px, 100%);
  background-position: 0 0, 0 0;
}

/* ---- 3. Reading line under the sticky header: CSS only, where scroll-driven animation exists ---- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before {
      content: '';
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      height: 2px;
      z-index: 49;
      pointer-events: none;
      background: linear-gradient(90deg, var(--color-accent), var(--color-blue));
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: read-line linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes read-line { to { transform: scaleX(1); } }
  }
}
@media print { body::before { display: none; } }