/**
 * MERINEO Blocks: entrance animations.
 *
 * Content is hidden only under .merineo-anim-js (set by the script), so nothing stays
 * invisible without JavaScript. Elements get .is-shown when they enter the viewport.
 */

/* Fade up on load */

.merineo-anim-js .merineo-anim--fade-up {
	animation: merineo-fade-up 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: var(--merineo-anim-delay, 0ms);
}

@keyframes merineo-fade-up {

	from {
		opacity: 0;
		transform: translateY(12px);
	}

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

/* Reveal on scroll */

.merineo-anim-js .merineo-anim--reveal {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--merineo-anim-delay, 0ms);
}

.merineo-anim-js .merineo-anim--reveal.is-shown {
	opacity: 1;
	transform: none;
}

/* Word-by-word mask reveal */

.merineo-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding: 0.14em 0 0.18em;
	margin: -0.14em 0 -0.18em;
}

.merineo-mask__in {
	display: inline-block;
}

.merineo-anim-js .merineo-anim--mask-words .merineo-mask__in {
	transform: translateY(112%);
}

.merineo-anim-js .merineo-anim--mask-words.is-shown .merineo-mask__in {
	animation: merineo-mask-rise 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: calc(var(--merineo-anim-delay, 0ms) + var(--merineo-word, 0) * 45ms);
}

@keyframes merineo-mask-rise {

	to {
		transform: translateY(0);
	}
}

/* Section background wipe: the block colour sweeps in from the left (over an optional
 * starting colour), then the content fades in */

.merineo-anim-js .merineo-anim--wipe {
	position: relative;
	isolation: isolate;
}

.merineo-anim-js .merineo-anim--wipe.has-background {
	background-color: var(--merineo-wipe-from, transparent) !important;
}

.merineo-anim-js .merineo-anim--wipe::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--merineo-wipe, transparent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 900ms cubic-bezier(0.72, 0, 0.2, 1);
}

.merineo-anim-js .merineo-anim--wipe.is-shown::before {
	transform: scaleX(1);
}

.merineo-anim-js .merineo-anim--wipe > * {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 640ms cubic-bezier(0.16, 1, 0.3, 1) 600ms,
		transform 640ms cubic-bezier(0.16, 1, 0.3, 1) 600ms;
}

.merineo-anim-js .merineo-anim--wipe.is-shown > * {
	opacity: 1;
	transform: none;
}

/* Inside a wipe, word reveals wait for the section. */
.merineo-anim-js .merineo-anim--wipe:not(.is-shown) .merineo-anim--mask-words .merineo-mask__in {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

	.merineo-anim-js .merineo-anim--fade-up,
	.merineo-anim-js .merineo-anim--mask-words .merineo-mask__in,
	.merineo-anim-js .merineo-anim--mask-words.is-shown .merineo-mask__in {
		animation: none;
		transform: none;
		opacity: 1;
	}

	.merineo-anim-js .merineo-anim--reveal,
	.merineo-anim-js .merineo-anim--wipe > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.merineo-anim-js .merineo-anim--wipe::before {
		transform: none;
		transition: none;
	}
}