/* Home page only: full-height panels the page scrolls between, and the scroll-linked motion. */

html { scroll-snap-type: y proximity; }

.panel {
  min-height: calc(100svh - var(--foot));
  padding: clamp(2rem, 9vh, 5rem) 0 2rem;
  scroll-snap-align: start;
}

.js .panel:not(.in) .rail::before { animation: none; transform: scaleX(0); }

.panel--hero .rail { width: 100%; border-top: 0; }

/* ---------- motion ---------- */

/* scroll-linked layers. The hero's layers move at different speeds as the page leaves it;
   the writing rail and its rows rise into place as it arrives. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .panel--hero .plate { animation: plate-out linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .panel--hero h1 { animation: lag-far linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .panel--hero .tag { animation: lag-near linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }

    .panel:not(.panel--hero) .rail { animation: rise-rail linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .panel:not(.panel--hero) .post-list li { animation: rise-row linear both; animation-timeline: view(); animation-range: entry 15% entry 100%; }
    .panel:not(.panel--hero) .rail::before { animation: tie linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .js .panel:not(.in) .rail::before { animation: tie linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; transform: none; }
  }

  /* reduced motion keeps a fade, with nothing moving */
  @media (prefers-reduced-motion: reduce) {
    .panel:not(.panel--hero) :is(.rail, .post-list li) { animation: fade-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .panel--hero .plate { animation: plate-fade linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes plate-fade { to { opacity: 0.35; } }

@keyframes plate-out { to { opacity: 0.35; transform: scale(0.97); } }
@keyframes lag-far { to { transform: translateY(9rem); } }
@keyframes lag-near { to { transform: translateY(4.5rem); } }
@keyframes rise-rail { from { transform: translateY(5rem); opacity: 0; } }
@keyframes rise-row { from { transform: translateY(3rem); opacity: 0; } }

@media (max-width: 56rem) {
  .panel { min-height: calc(100svh - 4rem - var(--foot)); padding-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .js .panel:not(.in) .rail::before { transform: none; }
}