
.page-home {
	background: $bg-offwhite;
	overflow: hidden;
	// position: relative;

	&.scroller-disabled {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;

		.after-intro-animation {

			.home-grid-item {

				.grid-item-thumb-cover,
				.grid-item-thumb {
					opacity: 0.15;
				}

				.grid-item-thumb-video {
					opacity: 0;
				}
			}
		}
	}
}

.home-grid {
	margin: 0 auto;
	padding: $site-padding-desktop 0 100px;
	width: 90%;

	.scroller-disabled & {
		padding-bottom: 50px;
	}

	@media #{$grid-five-bp} {
		max-width: $home-grid-width-5;
	}

	@media #{$grid-four-bp} {
		max-width: $home-grid-width-4;
	}

	@media #{$grid-three-bp} {
		max-width: $home-grid-width-3;
	}

	@media #{$grid-two-bp} {
		max-width: $home-grid-width-2;
	}

	@media #{$grid-one-bp} {
		max-width: $home-grid-width-1;
	}
}

.home-grid-item {
	display: block;
	float: left;
	position: relative;
	width: $home-grid-item-width;
	height: $home-grid-item-height;
	margin-right: 20px;
	margin-bottom: 20px;
	opacity: 0;
	// transition: transform 0.5s $easeOutCubic;

	@media #{$grid-five-bp} {
		&:nth-of-type(5n) {
			margin-right: 0;
		}
	}

	@media #{$grid-four-bp} {
		&:nth-of-type(4n) {
			margin-right: 0;
		}
	}

	@media #{$grid-three-bp} {
		&:nth-of-type(3n) {
			margin-right: 0;
		}
	}

	@media #{$grid-two-bp} {
		&:nth-of-type(2n) {
			margin-right: 0;
		}
	}

	@media #{$grid-one-bp} {}

	&.show-item {

		.grid-item-thumb {
			opacity: 0.15;
		}

		// .grid-item-lines {
		// 	opacity: 1;
		// 	visibility: visible;
		// 	height: 16px;
		// 	transform: translate3d(0, -15px, 0);
		// }
	}

	.enable-grid-item-hover & {
		transition: transform 0.1s $easeOutCubic;
	}

	.before-intro-animation & {
		transition: none !important;
		// display: inline-block;
		// float: none;
	}

	.after-intro-animation & {
		opacity: 1;
	}

	.no-touch .enable-grid-item-hover & {

		&:hover,
		&.hovered {

			.grid-item-thumb-holder,
			.grid-item-thumb-cover,
			.grid-item-thumb {
				transition-timing-function: $easeInOutExpo;
			}

			.grid-item-thumb-holder {
				border-radius: 6px;
				transform: scale(0.75) rotate(45deg) translate(-50%, -50%);
			}

			.grid-item-thumb-cover {
				opacity: 0.5;
				visibility: visible;
			}

			.grid-item-thumb {
				opacity: 0;
				visibility: hidden;
			}

			.grid-item-thumb-video {
				opacity: 1;
				visibility: visible;
			}

			.grid-item-arrow {
				opacity: 1;
				visibility: visible;
				width: 85%;
			}

			// .grid-item-lines {

			// 	&:after {
			// 		animation: lines-hover 0.3s 1 forwards $easeInOutExpo;
			// 		animation-delay: 0.2s;
			// 	}
			// }
		}
	}

	.grid-item-link {
		display: block;
		text-decoration: none;
		padding-top: $home-grid-item-width+10px;
	}

	.grid-item-thumb-holder {
		position: absolute;
		width: $home-grid-item-width;
		height: $home-grid-item-width;
		top: $home-grid-item-width/2;
		left: $home-grid-item-width/2;
		display: block;
		background: $cd-red;
		transform: rotate(45deg) translate3d(-50%, -50%, 0);
		transform-origin: 0 0;
		transition: all .5s $easeInOutQuad;
		border-radius: 50%;
		overflow: hidden;
		-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	}

	.grid-item-thumb-cover,
	.grid-item-thumb,
	.grid-item-thumb-video {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: $home-grid-item-width*1.5;
		height: $home-grid-item-width*1.5;
		transform: rotate(-45deg) translate(-50%, -50%);
		transform-origin: 0 0;
		transition: all .5s $easeInOutQuad;
		opacity: 0;
		visibility: hidden;
	}

	.grid-item-thumb-cover {
		z-index: 2;
		background: $cd-blue;
	}

	.grid-item-thumb,
	.grid-item-thumb-video {
		filter: brightness(0.8) contrast(2.5);
		visibility: visible;

		.is-firefox & {
			filter: none;
		}
	}

	.grid-item-thumb {
		background-size: cover;
		z-index: 0;
	}

	.grid-item-thumb-video {
		z-index: 1;
	}

	.grid-item-lines {
		position: absolute;
		z-index: 2;
		top: $home-grid-item-width*0.95;
		// height: 0;
		border-top: 2px solid $cd-blue;
		border-bottom: 2px solid $cd-blue;
		// opacity: 0;
		// visibility: hidden;
		width: 100%;
		transition: all 0.5s $easeOutExpo;
		overflow: hidden;

		opacity: 1;
		visibility: visible;
		height: 16px;
		transform: translate3d(0, -15px, 0);

		&:after {
			content: '';
			background: $cd-blue;
			position: absolute;
			top: 5px;
			left: 0;
			height: 2px;
			width: 0;
		}
	}

	.grid-item-title {
		color: $cd-blue;
		@include font-size(1.3);
		padding-left: 20px;
		position: relative;

		&:after {
			content: '-';
			position: absolute;
			top: 0;
			left: 5px;
		}

		[data-codetext-char] {
			border: none;
			color: $cd-blue;
		}
	}

	.grid-item-number {
		position: absolute;
		top: -4px;
		left: 0;
		@include font-size(6);
		line-height: 1;
		z-index: 3;
		color: $cd-blue;
		transform: translateZ(0);

		.index-char-nonzero {
			font-family: $ff-monosten-a;
		}

		.index-char-zero {
			font-family: $ff-monosten-b;
		}
	}

	.grid-item-arrow {
		position: absolute;
		bottom: -15px;
		left: 5px;
		background: $cd-red;
		transition: all 0.5s $easeOutExpo;
		transition-delay: 0.2s;
		height: 2px;
		width: 10px;
		opacity: 0;
		visibility: hidden;

		&:after,
		&:before {
			content: '';
			background: $cd-red;
			position: absolute;
			right: 0;
			top: 0;
			height: 2px;
			width: 10px;
		}

		&:after {
			transform-origin: right bottom;
			transform: rotate(45deg);
		}

		&:before {
			transform-origin: right top;
			transform: rotate(-45deg);
		}
	}
}

.home-credits {
	@include font-size(1.5);

	font-family: $ff-monosten-a;
	letter-spacing: 0.6px;
	width: 100%;
	padding: 0 65px 0 70px;
	text-align: center;
	position: fixed;
	bottom: 20px;

	.scroller-disabled & {
		@include font-size(1);

		position: relative;
		padding-bottom: 50px;
	}

	.disable-pointer {
		pointer-events: none;
	}

	[data-codeword].enable-underline {

		[data-codetext-char] {
			animation: border-blink-red 0.1s 1;
			animation-timing-function: steps(1, end);
			animation-fill-mode: forwards;
		}
	}

	[data-codeword]:not(.enable-underline) {

		[data-codetext-char] {
			animation: border-blink-out-red 0.1s 1;
			animation-timing-function: steps(1, end);
			animation-fill-mode: forwards;
		}
	}

	[data-codeword]:not(a) {

		[data-codetext-char] {
			border: none !important;
		}
	}
}

@keyframes lines-hover {
	0% {
		width: 0;
	}
	50% {
		width: 100%;
		transform: none;
	}
	100% {
		width: 100%;
		transform: translate(100%, 0);
	}
}

@keyframes border-blink-red {
	0%, 100% {
		border-color: $cd-red;
	}
	50% {
		border-color: transparent;
	}
}

@keyframes border-blink-out-red {
	0%, 100% {
		border-color: transparent;
	}
	50% {
		border-color: $cd-red;
	}
}