.image--parallax {
    height: 120%;
}

.transition__layer {
	border-bottom: solid 1px currentcolor;
	border-top: solid 1px currentcolor;
	height: calc(100% + 2px);
	left: 0;
	pointer-events: none;
	position: fixed;
	top: -1px;
	transform-origin: top;
    transform: scaleY(1);
	transition: background-color 0.6s var(--transition-handle), transform 1s var(--transition-handle);
	width: 100%;
	z-index: 10;
}

.body--white .transition__layer {
	background: var(--color-white);
}

.body--black .transition__layer {
	background: var(--color-black);
}

.body--light-grey .transition__layer {
	background: var(--color-grey-02);
}

.page--in .transition__layer {
	transform-origin: bottom;
	transform: scaleY(0);
}

.on--transition .hero .masked--span,
.on--transition .news__main .masked--span,
.on--transition .news__main .offset__label > span,
.on--transition .page__header,
.page--out .page__header {
	transform: translate3d(0, 0, 0) !important;
}

.on--transition .hero__home__mask {
	border-radius: 0 !important;
	transform: scale(1) !important;
}

/**/

.spinner {
	background: var(--color-black);
	opacity: 0;
	position: absolute;
	top: calc(50% - var(--s-10));
	left: calc(50% - var(--s-10));
	height: var(--s-20);
	width: var(--s-20);
	animation: spinner 1.6s infinite linear;
}

.page--out .spinner {
	opacity: 1;
	transition: opacity 0.4s var(--transition-handle) 4s;
}

.page--in .spinner {
	opacity: 0;
	transition: opacity 0.4s var(--transition-handle);
}

@keyframes spinner {
	
	0% {
		transform: rotate(0);
	}
	25% {
		transform: rotate(90deg);
	}
	50% {
		transform: rotate(180deg);
	}
	75% {
		transform: rotate(270deg);
	}
	100% {
		transform: rotate(360deg);
	}

}