/* ==========================================================================
   IvyPanda — animations.css
   Scroll-reveal animations (the .reveal class), used across sections.
   ========================================================================== */

/* ==========================================================================
   Scroll animations
   Add class="reveal" to any element to make it fade + slide in once it
   scrolls into view. The JS in main.js watches for these and adds
   .is-visible when the element enters the viewport.
   ========================================================================== */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Staggered delays so grid items animate in one-by-one instead of
   all at once — applies automatically to any .reveal inside a grid. */
.services-grid .reveal:nth-child(1),
.portfolio-grid .reveal:nth-child(1),
.testimonials-grid .reveal:nth-child(1) { transition-delay: 0s; }
.services-grid .reveal:nth-child(2),
.portfolio-grid .reveal:nth-child(2),
.testimonials-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
.services-grid .reveal:nth-child(3),
.portfolio-grid .reveal:nth-child(3),
.testimonials-grid .reveal:nth-child(3) { transition-delay: 0.24s; }

/* Respect users who've asked their OS/browser to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}