/*
 * reveal: motion tied to scroll position with animation-timeline: view(), so it plays forward and
 * back as the reader scrolls. The rise uses --ease-out over the range, so it settles rather than
 * sliding at a constant speed.
 * Keep animation-timeline in its own declaration AFTER the shorthand: the shorthand resets it.
 * No overflow: hidden on any ancestor (it breaks the view timeline); use overflow: clip.
 */
@keyframes reveal {
  from { opacity: 0; translate: 0 var(--rise-y); }
  to   { opacity: 1; translate: none; }
}
/* reveal-clip: an image unveils from the bottom edge up */
@keyframes reveal-clip {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0); }
}
/* reveal-parallax: the image inside the frame moves slower than the page */
@keyframes reveal-parallax {
  from { translate: 0 -6%; }
  to   { translate: 0 6%; }
}
@keyframes reveal-progress { to { scale: 1 1; } }

@supports (animation-timeline: view()) {
  .reveal { animation: reveal var(--ease-out) both; }
  .reveal { animation-timeline: view(); animation-range: entry 0% entry 100%; }

  .reveal-clip { animation: reveal-clip var(--ease-out) both; }
  .reveal-clip { animation-timeline: view(); animation-range: entry 0% cover 40%; }

  .reveal-parallax { overflow: clip; }
  .reveal-parallax > :first-child { scale: 1.14; animation: reveal-parallax linear both; }
  .reveal-parallax > :first-child { animation-timeline: view(); animation-range: cover; }
}

/* Browsers without scroll timelines: play.js adds .go once, and the element rises in on a timer. */
@supports not (animation-timeline: view()) {
  .js .reveal { opacity: 0; translate: 0 var(--rise-y); transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out); }
  .js .reveal.go { opacity: 1; translate: none; }
}

/* reveal-progress: a reading progress bar for the whole page. Hidden where scroll timelines are missing. */
.reveal-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: 3px;
  background: currentColor;
  transform-origin: 0 50%;
  scale: 0 1;
}
@supports (animation-timeline: scroll()) {
  .reveal-progress { animation: reveal-progress linear both; }
  .reveal-progress { animation-timeline: scroll(root); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-clip, .reveal-parallax > :first-child { animation: none; }
  .reveal-parallax > :first-child { scale: none; }
  .js .reveal { opacity: 1; translate: none; transition: none; }
}