/* ==========================================================================
   Animations — Scroll-triggered (taalas-inspired loadme style)
   ========================================================================== */

/* Base hidden state — slide up and fade in */
.animate-on-scroll {
	opacity: 0;
	visibility: hidden;
	transform: translateY(35px);
	transition: opacity 0.4s ease-out,
	            transform 0.6s var(--ease-out),
	            visibility 0s linear 0.6s;
}

.animate-on-scroll.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.4s ease-out,
	            transform 0.6s var(--ease-out),
	            visibility 0s linear 0s;
}

/* Stagger children — cards, pricing cards, numbered items */
.animate-on-scroll.is-visible > :nth-child(1) { transition-delay: 0ms; }
.animate-on-scroll.is-visible > :nth-child(2) { transition-delay: 80ms; }
.animate-on-scroll.is-visible > :nth-child(3) { transition-delay: 160ms; }
.animate-on-scroll.is-visible > :nth-child(4) { transition-delay: 240ms; }
.animate-on-scroll.is-visible > :nth-child(5) { transition-delay: 320ms; }
.animate-on-scroll.is-visible > :nth-child(6) { transition-delay: 400ms; }

/* Individual card / item entrance */
.animate-on-scroll .card,
.animate-on-scroll .pricing-card,
.animate-on-scroll .numbered__item,
.animate-on-scroll .references__item {
	opacity: 0;
	transform: translateY(35px);
	transition: opacity 0.4s ease-out,
	            transform 0.6s var(--ease-out);
}

.animate-on-scroll.is-visible .card,
.animate-on-scroll.is-visible .pricing-card,
.animate-on-scroll.is-visible .numbered__item,
.animate-on-scroll.is-visible .references__item {
	opacity: 1;
	transform: translateY(0);
}

.animate-on-scroll.is-visible .card:nth-child(1),
.animate-on-scroll.is-visible .pricing-card:nth-child(1),
.animate-on-scroll.is-visible .numbered__item:nth-child(1),
.animate-on-scroll.is-visible .references__item:nth-child(1) { transition-delay: 0ms; }

.animate-on-scroll.is-visible .card:nth-child(2),
.animate-on-scroll.is-visible .pricing-card:nth-child(2),
.animate-on-scroll.is-visible .numbered__item:nth-child(2),
.animate-on-scroll.is-visible .references__item:nth-child(2) { transition-delay: 100ms; }

.animate-on-scroll.is-visible .card:nth-child(3),
.animate-on-scroll.is-visible .pricing-card:nth-child(3),
.animate-on-scroll.is-visible .numbered__item:nth-child(3),
.animate-on-scroll.is-visible .references__item:nth-child(3) { transition-delay: 200ms; }

.animate-on-scroll.is-visible .card:nth-child(4),
.animate-on-scroll.is-visible .pricing-card:nth-child(4),
.animate-on-scroll.is-visible .numbered__item:nth-child(4),
.animate-on-scroll.is-visible .references__item:nth-child(4) { transition-delay: 300ms; }

.animate-on-scroll.is-visible .card:nth-child(5),
.animate-on-scroll.is-visible .pricing-card:nth-child(5),
.animate-on-scroll.is-visible .numbered__item:nth-child(5),
.animate-on-scroll.is-visible .references__item:nth-child(5) { transition-delay: 400ms; }

.animate-on-scroll.is-visible .card:nth-child(6),
.animate-on-scroll.is-visible .pricing-card:nth-child(6),
.animate-on-scroll.is-visible .numbered__item:nth-child(6),
.animate-on-scroll.is-visible .references__item:nth-child(6) { transition-delay: 500ms; }

.animate-on-scroll.is-visible .references__item:nth-child(7) { transition-delay: 600ms; }
.animate-on-scroll.is-visible .references__item:nth-child(8) { transition-delay: 700ms; }
.animate-on-scroll.is-visible .references__item:nth-child(9) { transition-delay: 800ms; }
.animate-on-scroll.is-visible .references__item:nth-child(10) { transition-delay: 900ms; }
.animate-on-scroll.is-visible .references__item:nth-child(11) { transition-delay: 1000ms; }

/* Hero entrance */
.hero__content {
	opacity: 0;
	transform: translateY(30px);
	animation: hero-entrance 0.8s 0.3s var(--ease-out) forwards;
}

@keyframes hero-entrance {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.animate-on-scroll,
	.animate-on-scroll .card,
	.animate-on-scroll .pricing-card,
	.animate-on-scroll .numbered__item,
	.animate-on-scroll .references__item,
	.hero__content {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
		animation: none;
	}

	.marquee__track {
		animation: none;
	}
}