/**
 * ============================================================================
 * Premium scroll-reveal system
 * ============================================================================
 * Content eases gently into place as it enters the viewport: a slight
 * downward offset + reduced opacity settle into full opacity and natural
 * position. Transform + opacity only -- this never touches layout, height,
 * margin, or spacing, so nothing ever jumps when it runs.
 *
 * States:
 *
 *   .ibox-reveal
 *     Default / no-JS state -- fully visible, no offset. This is the
 *     CRITICAL fallback: if JavaScript never runs (or the browser lacks
 *     IntersectionObserver support), every .ibox-reveal element simply
 *     renders normally. Content can never get stuck at opacity: 0.
 *
 *   html.ibox-reveal-ready .ibox-reveal
 *     The tiny inline gate script in header.php's <head> confirmed
 *     IntersectionObserver support and switched the system on -- element
 *     starts offset + transparent, ready to animate in.
 *
 *   html.ibox-reveal-ready .ibox-reveal.is-visible
 *     js/scroll-reveal.js has observed this element entering the
 *     viewport and added this class -- it eases up into its final,
 *     natural position and stays there (added once, never removed, so
 *     the animation never replays on scroll-up).
 *
 * Distances are tuned down for smaller viewports, matching the theme's
 * own existing 991px / 767px breakpoints (see css/style.css).
 *
 * Optional stagger modifiers (.ibox-reveal--d1 .. --d4) add a short
 * transition-delay so a handful of related elements -- a section's
 * label, heading, description, items -- settle a beat apart instead of
 * all at once. Used sparingly, only where it was already applied inline
 * on specific elements across the theme's templates.
 * ============================================================================
 */

.ibox-reveal {
	opacity: 1;
	transform: none;
}

html.ibox-reveal-ready .ibox-reveal {
	opacity: 0;
	transform: translateY(42px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

html.ibox-reveal-ready .ibox-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

/* Subtle stagger -- short 90ms steps, so a related group of elements
   settles within roughly a quarter of a second of each other. */
html.ibox-reveal-ready .ibox-reveal--d1 { transition-delay: 0.09s; }
html.ibox-reveal-ready .ibox-reveal--d2 { transition-delay: 0.18s; }
html.ibox-reveal-ready .ibox-reveal--d3 { transition-delay: 0.27s; }
html.ibox-reveal-ready .ibox-reveal--d4 { transition-delay: 0.36s; }

@media (max-width: 991px) {
	html.ibox-reveal-ready .ibox-reveal {
		transform: translateY(32px);
	}
}

@media (max-width: 767px) {
	html.ibox-reveal-ready .ibox-reveal {
		transform: translateY(24px);
	}
}

/* Accessibility: reduced-motion gets the content immediately, in its
   natural position -- never hidden behind opacity, and this is a plain
   CSS override so it holds true regardless of what the JS has or hasn't
   done yet. */
@media (prefers-reduced-motion: reduce) {
	html.ibox-reveal-ready .ibox-reveal,
	html.ibox-reveal-ready .ibox-reveal.is-visible {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}