/*
 * Shamasy — scroll reveals and micro-motion.
 * Everything here collapses cleanly under prefers-reduced-motion.
 */

/* Only hidden once the reveal script is running (it adds html.js after
 * showing whatever is already on screen), so content stays visible when
 * JavaScript is slow, blocked or broken. */
.js [data-animate="hidden"] {
	opacity: 0;
	transform: translateY(1.4rem);
}

[data-animate="shown"] {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--duration-slow) var(--ease-brand),
		transform var(--duration-slow) var(--ease-brand);
}

/* Stagger children of revealed grids. */
[data-animate] > * {
	transition-delay: inherit;
}

[data-animate="shown"].product-grid > *,
[data-animate="shown"].category-grid > *,
[data-animate="shown"].feature-grid > *,
[data-animate="shown"].post-grid > * {
	animation: rise-in var(--duration-slow) var(--ease-brand) backwards;
}

[data-animate="shown"] > *:nth-child(1) { animation-delay: 0.02s; }
[data-animate="shown"] > *:nth-child(2) { animation-delay: 0.08s; }
[data-animate="shown"] > *:nth-child(3) { animation-delay: 0.14s; }
[data-animate="shown"] > *:nth-child(4) { animation-delay: 0.2s; }
[data-animate="shown"] > *:nth-child(5) { animation-delay: 0.26s; }
[data-animate="shown"] > *:nth-child(6) { animation-delay: 0.32s; }
[data-animate="shown"] > *:nth-child(7) { animation-delay: 0.38s; }
[data-animate="shown"] > *:nth-child(8) { animation-delay: 0.44s; }

@keyframes rise-in {
	from {
		opacity: 0;
		transform: translateY(1.1rem);
	}
}

/* Hero entrance — plays once on load. */
.hero__content > * {
	animation: hero-rise 0.8s var(--ease-brand) backwards;
}

.hero__content > *:nth-child(1) { animation-delay: 0.1s; }
.hero__content > *:nth-child(2) { animation-delay: 0.22s; }
.hero__content > *:nth-child(3) { animation-delay: 0.34s; }
.hero__content > *:nth-child(4) { animation-delay: 0.46s; }
.hero__content > *:nth-child(5) { animation-delay: 0.58s; }

@keyframes hero-rise {
	from {
		opacity: 0;
		transform: translateY(1.6rem);
	}
}

.hero__media img {
	animation: hero-zoom 6s var(--ease-brand) both;
}

@keyframes hero-zoom {
	from {
		transform: scale(1.07);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-animate="hidden"] {
		opacity: 1;
		transform: none;
	}
}