@keyframes move {
	to {
		/* Move horizontally so that right edge is aligned against the viewport */
		transform: translateX(calc(-100% + 100vw));
	}
}

#sectionPin {
	/* Stretch it out, so that we create room for the horizontal scroll animation */
	height: 500vh;
	overflow: visible; /* To make position sticky work … */
	
	view-timeline-name: section-pin-tl;
	view-timeline-axis: block;
}

.pin-wrap-sticky {
	/* Stick to Top */
	height: 100vh;
	width: 100vw;
	position: sticky;
	top: 0;
	
	width: 100vw;
	overflow-x: hidden;
}

.pin-wrap {	
	height: 100vh;
	width: 250vmax;
	// outline: 10px dashed blue;
	// outline-offset: -10px;
	
	/* Hook animation */
	will-change: transform;
	animation: linear 1s move forwards;
	
	/* Link animation to view-timeline */
	animation-timeline: section-pin-tl;
	animation-range: contain 0% 100%;
	
	/* Below is a duplication of animation-range using animation-time-range.
	   This is because the polyfill looks for that property (which now got renamed) */
	animation-time-range: contain 0% 100%;
}

/* Show warning for older browser */
.warning {
	position: fixed;
	top: 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);
	font-size: .7em;
}

.warning a {
	color: blue;
}

.warning > :first-child {
	margin-top: 0;
}

.warning > :last-child {
	margin-bottom: 0;
}

.warning a {
	color: blue;
}
.warning--info {
	border: 1px solid #123456;
	background: rgb(205 230 255 / 0.8);
}
.warning--alarm {
	border: 1px solid red;
	background: #fff1f1;
}

/* Only show polyfill warning when loaded */
@supports (animation-timeline: scroll()) {
	.warning--animation-timeline {
		display: none;
	}
}
@supports not (animation-timeline: scroll()) {
	.warning--view-timeline {
		display: none;
	}
}

/* Don’t show view-timeline warning when supported  */
@supports (view-timeline: works) {
	.warning--view-timeline {
		display: none;
	}
}


/** Below is the orig CSS from the original demo. These are wrapped in layer to make the unlayered styles above win from them */
@layer orig {
	:root {
		--text-color: #111;
		--bg-color: #b9b3a9;
	}

	html {
		max-width: 100vw;
	}

	html,
	body {
		margin: 0;
		padding: 0;
	}

	body {
		font-family: termina, sans-serif;
		color: var(--text-color);
		background: var(--bg-color);
		transition: 0.3s ease-out;
		overflow-x: hidden;
		max-width: 100vw;
		width: 100%;
		overscroll-behavior: none;
	}

	section {
		min-height: 100vh;
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
		position: relative;
	}

	section:not(#sectionPin, .pin-wrap-sticky) {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-gap: 2rem;
		padding: 50px 10vw;
		margin: auto;
		place-items: center;
	}

	img {
		height: 80vh;
		width: auto;
		object-fit: cover;
	}

	h1 {
		font-size: clamp(1.5rem, 16vw + 0.5rem, 5rem);
		line-height: 1;
		font-weight: 800;
		margin-bottom: 1rem;
		position: absolute;
		top: 10vw;
		left: 10vw;
		z-index: 4;
		overflow-wrap: break-word;
		hyphens: auto;

		@media (max-width: 768px) {
			font-size: clamp(1.5rem, 5vw + 0.5rem, 5rem);
		}

		span {
			display: block;
		}
	}

	h2 {
		font-size: 2rem;
		max-width: 400px;
	}

	.credit {
		font-family: Termina, sans-serif;
		a {
			color: var(--text-color);
		}
	}

	* {
		box-sizing: border-box;
	}

	#sectionPin {
		height: 100vh;
		display: flex;
		background: var(--text-color);
		color: var(--bg-color);
	}

	.pin-wrap {
		height: 100vh;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 50px 10vw;

		& > * {
			min-width: 60vmax;
			padding: 0 5vmax;
		}
	}

	*:not(.warning) > p {
		position: absolute;
		bottom: 10vw;
		right: 10vw;
		width: 200px;
		line-height: 1.5;
	}
}