/* ==========================================================================
   Eve Diamond: the home page
   Values measured on the original front page at 1612 x 900 and 1280 x 800.
   Colours and fonts come from the template tokens.
   ========================================================================== */

.eve-home {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	opacity: 0;
	transition: opacity 1s ease;
}

.eve-home.is-ready {
	opacity: 1;
}

/* Loading screen, until every layer of the diamond is in */
.eve-home__loader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9000;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.8);
	transition: opacity 0.4s;
}

.eve-home__loader > span {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-block;
	font-size: 16px;
	text-align: center;
	transform: translate(-50%, -50%);
}

.eve-home__loader.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.eve-spinner {
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	margin-bottom: 10px;
}

.eve-spinner i {
	position: absolute;
	inset: 0;
	transform-origin: 32px 32px;
	animation: eve-spin 1.2s linear infinite;
}

.eve-spinner i::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 29px;
	width: 5px;
	height: 14px;
	border-radius: 20%;
	background: #fff;
}

.eve-spinner i:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; }
.eve-spinner i:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; }
.eve-spinner i:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; }
.eve-spinner i:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; }
.eve-spinner i:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; }
.eve-spinner i:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; }
.eve-spinner i:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; }
.eve-spinner i:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; }
.eve-spinner i:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; }
.eve-spinner i:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; }
.eve-spinner i:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; }
.eve-spinner i:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }

@keyframes eve-spin {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   The diamond, shared by desktop and phone
   -------------------------------------------------------------------------- */

.eve-diamond__wrapper {
	position: relative;
	z-index: 999;
	margin: 0 auto;
}

/* 539 x 346, the size of every layer */
.eve-diamond__wrapper::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 64.1929499072%;
}

.eve-diamond__asset {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.eve-diamond__shard {
	background-repeat: no-repeat;
	background-size: cover;
	transition: all 0.3s;
}

.eve-diamond__bottom,
.eve-diamond__blurred {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* jQuery's fadeOut(1300) / fadeIn('fast') on the original */
.eve-diamond__bottom {
	transition: opacity 0.2s, visibility 0s;
}

.eve-diamond__bottom.is-faded {
	visibility: hidden;
	opacity: 0;
	transition: opacity 1.3s, visibility 0s 1.3s;
}

.eve-diamond__blurred {
	z-index: -1;
	opacity: 0;
	pointer-events: none;
	filter: blur(3px);
	transition: all 1s;
}

.eve-diamond__blurred.is-on {
	opacity: 1;
}

/* The clickable outlines: invisible, on top of every layer */
.eve-diamond__hit polygon {
	fill: transparent;
	cursor: pointer;
}

.eve-diamond__hit a {
	outline: none;
}

.eve-diamond__hit a:focus-visible polygon {
	stroke: rgba(255, 255, 255, 0.5);
	stroke-width: 1;
}

/* Captions, each in its own spot around the diamond */
.eve-diamond__info {
	position: absolute;
	z-index: 1;
	font-family: var(--eve-font, "Proxima Regular", sans-serif);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s;
}

.eve-diamond__info.is-on {
	opacity: 1;
}

.eve-diamond__title {
	font-size: 28px;
	line-height: 25px;
}

.eve-diamond__location {
	font-size: 21px;
	line-height: 24px;
}

.eve-diamond__info--1 { top: 280px; left: -40px; }
.eve-diamond__info--2 { top: -50px; left: 0; }
.eve-diamond__info--3 { top: -50px; right: -250px; }
.eve-diamond__info--4 { right: -230px; bottom: 50px; }
.eve-diamond__info--5 { right: 70px; bottom: -60px; }

/* The two text links: a faint rule on top that turns white from the right */
.eve-home__link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: 162px;
	height: 55px;
	margin: auto;
	padding: 5px 40px 0 0;
	overflow: hidden;
	color: var(--eve-text, #fff);
	background: url(../images/arrow-right.png) 89% 15px no-repeat;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.eve-home__link::before {
	content: "";
	position: absolute;
	top: 0;
	right: -100%;
	display: block;
	width: 100%;
	height: 1px;
	background: #fff;
	transition: right 0.5s ease;
}

.eve-home__link:hover::before,
.eve-home__link:focus-visible::before {
	right: 0;
}

.eve-home__link-title,
.eve-home__link-sub {
	display: block;
}

.eve-home__link-title {
	font-family: var(--eve-font-semibold, "Proxima Semibold", sans-serif);
}

.eve-home__link-sub {
	color: var(--eve-icon, #919ea8);
}

/* --------------------------------------------------------------------------
   Phone (< 768): a static diamond, then the portrait
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.eve-home__map,
	.eve-home__row {
		display: none;
	}

	/* flow-root keeps the 30px and 50px margins inside, as on the original */
	.eve-home,
	.eve-home__mobile {
		display: flow-root;
	}

	.eve-home__mobile {
		margin: 0 -20px;
	}

	.eve-home__mobile-diamond {
		margin-top: 30px;
		padding: 0 20px;
	}

	.eve-home__mobile-diamond .eve-diamond__wrapper::before {
		padding-top: 66.6666666667%;
	}

	.eve-home__mobile .eve-diamond__shard {
		background-size: 100% 100%;
	}

	.eve-home__mobile .eve-home__link {
		position: relative;
		top: auto;
		bottom: auto;
		margin: 18px 0 0;
	}

	.eve-home__link--back {
		left: -19px;
		padding: 5px 0 0 40px;
		background-image: url(../images/arrow-left.png);
		background-position: 15px 37%;
	}

	.eve-home__mobile-erick {
		margin: 20px 0 50px;
		text-align: center;
	}

	.eve-home__mobile-erick img {
		display: block;
		width: 80%;
		margin: 0 auto;
	}

	.eve-home__link--mobile {
		margin-left: auto !important;
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   Tablet and up (>= 768)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

	.eve-home__mobile {
		display: none;
	}

	.eve-home__row {
		display: flex;
		align-items: flex-start;
		margin: 0 -20px;
	}

	/* Left: the diamond. Its vertical offset is set by diamond.js, as on the
	   original, so the light below keeps its place in the column. */
	.eve-home__diamond-col {
		position: relative;
		z-index: 10;
		flex: 0 0 50%;
		max-width: 50%;
		padding: 100px 25px 100px 65px;
		transition: opacity 0.5s;
	}

	.eve-diamond {
		position: relative;
		backface-visibility: hidden;
		transition: filter 0.5s ease;
	}

	.eve-diamond.is-dim {
		filter: brightness(80%);
	}

	.eve-diamond__light {
		position: absolute;
		top: 35%;
		left: 30%;
		width: 50%;
		height: 50%;
		pointer-events: none;
		background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.6) 0, rgba(255, 255, 255, 0.3) 15%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
	}

	/* Right: the portrait, sharp underneath, blurred on top */
	.eve-home__erick-col {
		position: relative;
		flex: 0 0 50%;
		max-width: 50%;
		transition: all 1s;
	}

	.eve-home__erick-col.is-hidden {
		opacity: 0;
	}

	.eve-home__spacer {
		opacity: 0;
	}

	.eve-home__spacer img {
		display: block;
		max-width: 100%;
		max-height: 100%;
	}

	.eve-home__portrait {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 90%;
		height: 90%;
		margin: auto;
		text-align: center;
	}

	.eve-home__portrait img {
		max-width: 100%;
		max-height: 100%;
	}

	.eve-home__portrait--blurred {
		transition: all 1s;
	}

	.eve-home__portrait--blurred img {
		filter: blur(5px);
	}

	.eve-home__portrait--blurred.is-clear {
		opacity: 0;
	}

	.eve-home__erick-col .eve-home__link {
		top: 140px;
	}

	/* The world map, behind the portrait column */
	.eve-home__map {
		position: absolute;
		top: 0;
		left: 50%;
		width: 50%;
		height: 100%;
		overflow: hidden;
	}

	.eve-home__map-positioner {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 550px;
		height: 180px;
		transform: translate(-50%, -50%);
	}

	.eve-home__map-container {
		position: relative;
		width: 100%;
		height: 100%;
		opacity: 0;
		transform: scale(0.85);
		transition: all 1s ease;
	}

	.eve-home__map-container.is-on {
		opacity: 1;
		transform: scale(1);
	}

	.eve-home__map-world {
		position: absolute;
		width: 3000px;
		height: 1500px;
		background: url(../images/worldmap.svg) 0 0 / contain no-repeat;
		transform-origin: top left;
		transition: transform 1s ease;
	}

	.eve-home__pin {
		position: absolute;
		top: 60px;
		left: 245px;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background: url(../images/map-pin.png) 50% / contain no-repeat;
		opacity: 0;
		transform: scale(10);
		transition: transform 0.5s ease, opacity 0.5s ease;
	}

	.eve-home__pin.is-on {
		opacity: 1;
		transform: scale(1);
	}

	.eve-home__dot {
		width: 10px;
		height: 10px;
		margin: 25px;
		border-radius: 50%;
		background-color: #fff;
	}

	.eve-home__city {
		position: absolute;
		top: 78px;
		left: 295px;
		font-family: var(--eve-font-bold, "Proxima Bold", sans-serif);
		font-size: 15px;
	}

	.eve-home__all-map {
		position: absolute;
		width: 100%;
		height: 100%;
		background: url(../images/worldmap.png) 50% / contain no-repeat;
		opacity: 0;
		transition: opacity 1s ease;
	}

	.eve-home__all-map.is-on {
		opacity: 1;
	}

	/* Once the "all projects" facet has been used the original keeps a half
	   second delay on this map, both ways. */
	.eve-home__all-map.is-delayed {
		transition-delay: 0.5s;
	}

	.eve-home__mask {
		position: absolute;
		top: -10px;
		left: -10px;
		box-sizing: content-box;
		width: 100%;
		height: 100%;
		padding: 10px;
		background: url(../images/map-mask.png) no-repeat;
		background-size: cover;
	}
}

@media (min-width: 1280px) {

	.eve-home {
		width: 1260px;
	}

	.eve-home__erick-col .eve-home__link {
		top: 0;
	}
}