/* ===========================================================================
   Sections that fade in when they are scrolled into view.
   Driven by site/_code/js/reveal-on-scroll.js, which adds .in-view.

     class="reveal"       fade only  — use this whenever the section contains
                                       position:sticky children, because a
                                       transform on the parent breaks sticky.
     class="reveal-rise"  fade + slide up.

   Speed and distance come from the section's .json "layout" block:
     "reveal-duration": "1.6s",  "reveal-distance": "40px"
   =========================================================================== */

.reveal,
.reveal-rise {
	opacity: 0;
	transition: opacity  var(--reveal-duration, 0.7s) ease,
	            transform var(--reveal-duration, 0.7s) ease !important;
}

.reveal-rise {
	transform: translateY(var(--reveal-distance, 40px));
}

.reveal.in-view,
.reveal-rise.in-view {
	opacity: 1;
}

.reveal-rise.in-view {
	transform: translateY(0);
}