%page {
	@extend %cover;

	opacity: 0;
	visibility: hidden;
	z-index: z('content');
}

%page__wrapper {
	color: inherit;
}

// Hide animation elements by default until they enter viewport
// Only hide when JS is enabled - if JS fails, content remains visible
.js-enabled [data-animation="title"],
.js-enabled [data-animation="paragraph"],
.js-enabled [data-animation="label"],
.js-enabled [data-animation="image"] {
	opacity: 0;
	visibility: hidden;
}