@import "../../../lib/style/base";

:host {
	display: block;
}

#main-container {
	height: calc(100vh - var(--nav-height));
	min-height: #{size(600)};
	max-height: #{size(800)};
	text-align: center;
	position: relative;

	.title {
		font-size: #{size(60)};
	}

	.cta-area {
		margin: $spacing-l 0 0 0;
	}

	.version-area {
		background: $foreground;
		color: $background;
		padding: $spacing-m;
		text-align: center;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		width: 100%;
		left: 0;
		bottom: 0;

		.npm {
			margin: 0 $spacing-s;
			height: #{size(20)};
		}
	}

	.arrow-down {
		font-size: #{size(25)};
		position: absolute;
		bottom: #{size(80)};
		left: 50%;
		transform: translate(-50%, 0);
		animation: 2000ms ease-in-out arrow-point infinite;
	}
}

.mobile-cta {
	display: none;
}

#bullets-container {
	text-align: center;
}

#bullets {
	margin-top: #{size(40)};
	display: grid;
	grid-gap: $spacing-xl;
	justify-content: center;
	grid-template-columns: repeat(auto-fit, #{size(300)});

	.bullet {
		display: flex;
		text-align: left;

		.img {
			flex-shrink: 0;
			height: #{size(60)};
			margin: 0 $spacing-m 0 0;
		}

		aside {
			.title {
				margin-top: 0;
			}
		}
	}
}

#octocat-container {
	--container-padding: #{size(60)} #{$spacing-m};
	position: relative;
	text-decoration: none;
	color: inherit;

	.container {
		background: #{color("shade", 200)};

		#arm {
			transform-origin: 176px 222px;
		}

		#eyes {
			transform-origin: center center;
		}
	}

	&.intersecting {
		#arm {
			animation: 2000ms linear wave infinite;
		}

		#eyes {
			animation: 3000ms ease-in-out pulse infinite;
		}
	}
}

#octocat-area {
	max-width: #{size(550)};
	display: flex;
	align-items: center;

	.img {
		width: #{size(200)};
		height: #{size(155)};
		flex-shrink: 0;
		margin: 0 $spacing-l 0 0;
	}

	@media #{$screen-s-and-down} {
		flex-direction: column;
		text-align: center;
	}
}

#browser-support-container {
	.title, .text {
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	.text {
		max-width: #{size(700)};
		display: block;
	}
}

#browsers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	.browser {
		display: flex;
		align-items: center;
		text-transform: uppercase;
		margin: $spacing-l;
		font-weight: $font-weight-bold;

		.img {
			width: #{size(40)};
			margin: 0 $spacing-m 0 0;
		}
	}
}

@media #{$screen-s-and-down} {
	.mobile-cta {
		display: block;
	}
}

@keyframes wave {
	0%, 100% {
		transform: rotate(0deg);
	}
	20%, 60% {
		transform: rotate(-20deg);
	}
	40%, 80% {
		transform: rotate(20deg);
	}
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.9);
	}
}

@keyframes arrow-point {
	0%, 100% {
		transform: translate(-50%, 0);
	}
	50% {
		transform: translate(-50%, #{size(5)});
	}
}


