/*
 * Subsite Modkit — scroll animation keyframes.
 *
 * These extend Better Block Editor's Animation on Scroll module. BBE supplies
 * the base rules and the IntersectionObserver:
 *
 *   [data-aos]              { opacity: 0; animation-*: var(--aos-*) }
 *   [data-aos].aos-animate  { animation-name: var(--aos-animation) }
 *
 * So each animation here needs exactly two things: an @keyframes block, and a
 * [data-aos="slug"] rule pointing --aos-animation at it. Duration, delay and
 * easing are inherited from BBE's per-block controls — do not set them here.
 *
 * WARNING: this file is load-bearing for content visibility. BBE renders
 * data-aos from a saved block attribute without checking the value is known.
 * If a slug is in use but has no rule below, --aos-animation is undefined,
 * animation-name computes to none, and the block stays at opacity: 0 —
 * permanently invisible on the front end. Never remove a slug that is in use;
 * disable it in Settings > Modkit instead, which stops it being offered for new
 * content while leaving existing content working.
 */

/* Flip ------------------------------------------------------------------- */

@keyframes modkitFlipUp {
	from {
		opacity: 0;
		transform: perspective(1000px) rotateX(-90deg);
	}

	to {
		opacity: 1;
		transform: perspective(1000px) rotateX(0);
	}
}

[data-aos="flip-up"] {
	--aos-animation: modkitFlipUp;
}

@keyframes modkitFlipDown {
	from {
		opacity: 0;
		transform: perspective(1000px) rotateX(90deg);
	}

	to {
		opacity: 1;
		transform: perspective(1000px) rotateX(0);
	}
}

[data-aos="flip-down"] {
	--aos-animation: modkitFlipDown;
}

@keyframes modkitFlipLeft {
	from {
		opacity: 0;
		transform: perspective(1000px) rotateY(90deg);
	}

	to {
		opacity: 1;
		transform: perspective(1000px) rotateY(0);
	}
}

[data-aos="flip-left"] {
	--aos-animation: modkitFlipLeft;
}

@keyframes modkitFlipRight {
	from {
		opacity: 0;
		transform: perspective(1000px) rotateY(-90deg);
	}

	to {
		opacity: 1;
		transform: perspective(1000px) rotateY(0);
	}
}

[data-aos="flip-right"] {
	--aos-animation: modkitFlipRight;
}

/* Blur ------------------------------------------------------------------- */

@keyframes modkitBlurIn {
	from {
		opacity: 0;
		filter: blur(12px);
	}

	to {
		opacity: 1;
		filter: blur(0);
	}
}

[data-aos="blur-in"] {
	--aos-animation: modkitBlurIn;
}

/* Rotate ----------------------------------------------------------------- */

@keyframes modkitRotateIn {
	from {
		opacity: 0;
		transform: rotate(-8deg) scale(0.94);
	}

	to {
		opacity: 1;
		transform: rotate(0) scale(1);
	}
}

[data-aos="rotate-in"] {
	--aos-animation: modkitRotateIn;
}

/* Rise ------------------------------------------------------------------- */

@keyframes modkitRiseUp {
	from {
		opacity: 0;
		transform: translate3d(0, 80px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

[data-aos="rise-up"] {
	--aos-animation: modkitRiseUp;
}

/* Bounce ----------------------------------------------------------------- */

@keyframes modkitBounceIn {
	0% {
		opacity: 0;
		transform: scale(0.7);
	}

	60% {
		opacity: 1;
		transform: scale(1.04);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

[data-aos="bounce-in"] {
	--aos-animation: modkitBounceIn;
}

/* Accessibility ----------------------------------------------------------
 *
 * BBE's base rule holds animated blocks at opacity: 0 until the observer fires.
 * Under reduced-motion we skip the animation entirely, which means we must also
 * lift that opacity or the content would never appear. !important is needed
 * because the base rule has equal specificity and may load after this file.
 */

@media (prefers-reduced-motion: reduce) {
	[data-aos] {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
		filter: none !important;
	}
}