/** Reset / Basic styling */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	color: #fff;
	font-size: 2vmax;
}

h1 {
	font-size: 4em;
}

/** Full Page Scroll-Snapping HTML Sections — https://codepen.io/bramus/pen/GRJGyGE */
main {
	height: 100vh;
	width: 100vw;
	scroll-snap-type: y mandatory;

	/* To hide the panels that bleed out when they are translated */
	overflow-x: hidden;
}

section {
	height: 100vh;
	width: 100%;
	scroll-snap-align: center;

	/* This is what makes the content stay in place, instead of scrolling out of view */
	position: sticky;
	top: 0;
}

.panelwrapper {
	height: 100vh;
	width: 100%;

	/* To position the panels contained inside */
	position: relative;
}

/** Panel Colors */
.red .panel {
	background: #f44336;
}
.orange .panel {
	background: #ff9800;
}
.yellow .panel {
	background: #ffd600;
}
.green .panel {
	background: #4caf50;
}
.blue .panel {
	background: #2196f3;
}
.indigo .panel {
	background: #3f51b5;
}
.violet .panel {
	background: #673ab7;
}

/* Panel Layout */
.panel {
	height: 100vh;
	top: 0;
	position: absolute;

	padding: 4em;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.panel--normal {
	width: 100vw;
	left: 0;
}

.panel--left,
.panel--right {
	width: 50vw;
}

.panel--left {
	left: 0;
}

.panel--right {
	right: 0;
}

/* Show warning for older browser */
.warning {
	position: fixed;
	bottom: 1em;
	right: 1em;
	left: 1em;
	padding: 1em;
	border: 1px solid black;
	z-index: 9999;
	text-align: center;
	color: black;
	background: rgba(255 255 225 / 0.9);
}

.warning a {
	color: blue;
}

@supports (animation-timeline: works) {
	/* Hide Warning */
	.warning {
		display: none;
	}

	@keyframes shrink-to-back {
		from {
			transform: scale(1);
		}
		to {
			transform: scale(0.5);
		}
	}

	@keyframes slide-in-from-left {
		from {
			transform: translateX(-100%) translateY(-100%);
			box-shadow: 0 0 1em hsl(0deg 0% 0% / 0.5);
		}
		to {
			transform: translateX(0) translateY(0%);
			box-shadow: 0 0 1em hsl(0deg 0% 0% / 0);
		}
	}

	@keyframes slide-in-from-right {
		from {
			transform: translateX(100%) translateY(-100%);
			box-shadow: 0 0 1em hsl(0deg 0% 0% / 0.5);
		}
		to {
			transform: translateX(0) translateY(0%);
			box-shadow: 0 0 1em hsl(0deg 0% 0% / 0);
		}
	}

	.panelwrapper {
		transform-origin: 50% 50%;
		animation: shrink-to-back 10s linear both;
		animation-timeline: foo;
	}

	.panel--left {
		animation: slide-in-from-left 10s linear both;
		animation-timeline: foo;
	}

	.panel--right {
		animation: slide-in-from-right 10s linear both;
		animation-timeline: foo;
	}

	@scroll-timeline section_2_slides_into_wrapper {
		source: selector(#main);
		scroll-offsets: selector(#section_2) end 0, selector(#section_2) end 1;
		
		/* Legacy Descriptors Below: */
		start: selector(#section_2) end 0;
		end: selector(#section_2) end 1;
		time-range: 10s;
	}

	#section_1 .panelwrapper,
	#section_2 .panel {
		animation-timeline: section_2_slides_into_wrapper;
	}

	@scroll-timeline section_3_slides_into_wrapper {
		source: selector(#main);
		scroll-offsets: selector(#section_3) end 0, selector(#section_3) end 1;
		
		/* Legacy Descriptors Below: */
		start: selector(#section_3) end 0;
		end: selector(#section_3) end 1;
		time-range: 10s;
	}

	#section_2 .panelwrapper,
	#section_3 .panel {
		animation-timeline: section_3_slides_into_wrapper;
	}

	@scroll-timeline section_4_slides_into_wrapper {
		source: selector(#main);
		scroll-offsets: selector(#section_4) end 0, selector(#section_4) end 1;
		
		/* Legacy Descriptors Below: */
		start: selector(#section_4) end 0;
		end: selector(#section_4) end 1;
		time-range: 10s;
	}

	#section_3 .panelwrapper,
	#section_4 .panel {
		animation-timeline: section_4_slides_into_wrapper;
	}
}