/* =========================================================
   Journey: site-motion.css (ours, 2026-10-29)
   The scroll motion set by site-motion.js.
   1. Apple's reveal (timings the Valerin site measured on
      apple.com): faded out and 30px low until in view, then the
      opacity over 900ms (ease-in-out quad) and the rise over 700ms
      (ease-in-out sine). `translate` and `scale` are their own
      properties, so a block's own transform is never touched;
      `backwards` holds only the start, so its hover lift still works
      once it has landed. --ar-d staggers blocks that arrive together.
   2. The footer reveal: the page is a sheet over the footer, which
      the last screen of scrolling uncovers. --jn-foot-h is measured.
      A footer too tall for that rises more slowly than the page.
   ========================================================= */

@keyframes jn-ar-fade { from { opacity: 0; } }
@keyframes jn-ar-rise { from { translate: 0 30px; } }
@keyframes jn-ar-settle { from { scale: 1.035; } }
[data-ar="wait"] { opacity: 0; translate: 0 30px; }
[data-ar="wait"][data-ar-big] { scale: 1.035; }
[data-ar="in"] {
	animation:
		jn-ar-fade 900ms cubic-bezier(.455, .03, .515, .955) var(--ar-d, 0ms) backwards,
		jn-ar-rise 700ms cubic-bezier(.37, 0, .63, 1) var(--ar-d, 0ms) backwards;
}
[data-ar="in"][data-ar-big] {
	animation:
		jn-ar-fade 900ms cubic-bezier(.455, .03, .515, .955) var(--ar-d, 0ms) backwards,
		jn-ar-rise 700ms cubic-bezier(.37, 0, .63, 1) var(--ar-d, 0ms) backwards,
		jn-ar-settle 1400ms cubic-bezier(.2, .7, .2, 1) var(--ar-d, 0ms) backwards;
}

/* the footer reveal: the sheet rides over the footer and reserves its height */
[data-foot-reveal] .jn-sheet { position: relative; z-index: 1; background-color: var(--jn-sheet-bg, var(--bg)); }
[data-foot-reveal] .jn-sheet-last {
	margin-bottom: var(--jn-foot-h, 0px);
	box-shadow: 0 30px 50px -30px rgba(40, 32, 18, .22);
}
[data-foot-reveal] .jn-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
/* a footer taller than that: its contents rise more slowly than the page (--jn-foot-p, 0 to 1) */
.jn-foot[data-foot-parallax] { overflow: hidden; box-shadow: inset 0 26px 34px -26px rgba(40, 32, 18, .2); }
.jn-foot[data-foot-parallax] > .jn-foot-in {
	translate: 0 calc((1 - var(--jn-foot-p, 1)) * -160px);
	opacity: calc(.25 + var(--jn-foot-p, 1) * .75);
	will-change: translate, opacity;
}

@media (prefers-reduced-motion: reduce) {
	[data-ar] { opacity: 1 !important; translate: none !important; scale: none !important; animation: none !important; }
}