Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <header>
	<ul>
		<li>
			<img src="https://assets.codepen.io/1149983/whitehousedark.jpeg" alt="The White House" />
		</li>

		<li>
			<img src="https://assets.codepen.io/1149983/presidents.png" alt="Headshots of presidents" />
		</li>
	</ul>

	<span class="year">1960</span>
	<h1>
		<span class="headline"> The race for the whitehouse </span>
		<span class="subtitle">
			The line it is drawn
			<div class="progress gradient" aria-hidden="true"></div>
		</span>
		<span class="subtitle">The curse it is
			<span class="word-container">
				cast
				<span class="sniper">
					<div class="progress" style="--color: var(--gray)" aria-hidden="true"></div>
					<div class="progress" style="--color: var(--red)" aria-hidden="true"></div>
				</span>
			</span>
		</span>
	</h1>

	<h2>
		<span class="headline"> The slow one now </span>
		<span class="subtitle">Will later be <span class="word-container">fast</span> </span>
	</h2>
	<h2>
		<span class="headline">As the present now</span>
		<span class="subtitle"> Will later be <span class="word-container">past</span></span>
	</h2>
</header>

<main>

	<section class="horizontal-section" style="--gallery-items: 12">

		<div class="horizontal-section-wrapper">
			<div class="horizontal-section-fixed">
				<div class="progress" style="--color: var(--red)" aria-hidden="true"></div>
				<div class="progress" style="--color: var(--blue)" aria-hidden="true"></div>
				<div class="progress vertical" style="--color: var(--white)" aria-hidden="true"></div>

				<h2>
					<span class="subtitle">Come writers and
						<span style="--color: var(--red)">critics</span>
					</span>
					<span class="subtitle">Who prophesize with your
						<span style="--color: var(--blue)">pen</span></span>
					<span class="subtitle">
						And keep your eyes
						<span style="--color: var(--blue)">wide</span>
					</span>
					<span class="subtitle">The chance won't come
						<span style="--color: var(--red)">again</span>
					</span>
				</h2>
				<h2>
					<span class="subtitle ">And don't speak too <span style="--color: var(--blue)">soon </span></span>
					<span class="subtitle">For the wheel's still in <span style="--color: var(--red)">spin </span></span>
					<span class="subtitle "> And there's no tellin' who that it's <span style="--color: var(--red)">namin'</span></span>
					<span class="subtitle "> For the <span style="--color: var(--blue)">loser</span> now Will be later to <span style="--color: var(--blue)">win</span></span>
				</h2>
				<h2>
					<span class="subtitle">The battle outside ragin' Will soon</span>
					<span class="subtitle ">shake your windows And rattle your walls</span>
					<span class="subtitle ">For the times they are a-changin</span>
				</h2>

			</div>
			<div class="horizontal-scroll-container">
				<ul clas="horizontal-scroll-gallery">
					<li>
						<figure style=" --fig-color: var(--red)" data-topic="Civil Rights">
							<img src="https://assets.codepen.io/1149983/thenewyorker_martin-luther-king-jr-s-final-speech.jpeg" alt="Martin Luther King Jr. - A Beacon of Peaceful Change" />
							<figcaption><span>Dr. King's Impact:</span> Dr. Martin Luther King Jr., a prominent figure in history, reshaped an era through peaceful protests. His speeches deeply influenced the nation, inspiring generations toward equality. Leadership lessons endure. </figcaption>
						</figure>
					</li>
					<li>
						<figure style="--fig-color: var(--white)" data-topic="Civil Rights">
							<img src="https://assets.codepen.io/1149983/mlk-bus.png" alt="Montgomery Bus Boycott - Defying Segregation" />
							<figcaption><span>Defying Segregation:</span> The Montgomery bus boycott of 1955 showcased unity's power. It ignited racial equality discussions and left a lasting mark. This event's legacy unites against ongoing injustice issues. </figcaption>
						</figure>
					</li>
					<li>
						<figure style="--fig-color: var(--blue)" data-topic="Civil Rights">
							<img src="https://assets.codepen.io/1149983/Rosa-Parks-bus-Montgomery-Alabama-1956.webp" alt="Rosa Parks - An Unyielding Stand" />
							<figcaption><span>Rosa Parks' Stand:</span> Rosa Parks' bus incident triggered change. Core struggle for equality emerged. Rosa's act challenged segregation norms, encouraging equal rights discussions. </figcaption>
						</figure>
					</li>
					<li>
						<figure style="--fig-color: var(--red)" data-topic="Civil Rights">
							<img src="https://assets.codepen.io/1149983/elizabeth-eckford-ignores-the-hostile.jpeg" alt="Elizabeth Eckford - Trailblazing Courage" />
							<figcaption><span>Trailblazing Students:</span> 'Little Rock Nine' integrated a white school, shattering barriers. Their courage sparked a civil rights chapter, propelling society toward fairness. Resilience's role is noteworthy. </figcaption>
						</figure>
					</li>
					<li>
						<figure style="--fig-color: var(--white)" data-topic="Military Industrial Complex">
							<img src="https://assets.codepen.io/1149983/eisenhower_speech-00593f9dad5c100c94de59bcf1c88602330a2d48-s1100-c50.jpeg" alt="Dwight D. Eisenhower - Eisenhower's Prescient Warning" />
							<figcaption><span>Eisenhower's Warning:</span> President Eisenhower's farewell address warned about military-industrial complex influence. His call for vigilance remains relevant in preserving democracy's values. </figcaption>
						</figure>
					</li>
					<li>
						<figure style="--fig-color: var(--red)" data-topic="Military Industrial Complex">
							<img src="https://assets.codepen.io/1149983/MIT.png" alt="The rise of the MIT: Military Industrial Complex" />
							<figcaption><span>Rise of the Complex:</span> 1950s Military-Industrial Growth. A transformational era in U.S. history, as industries merged with the military. Challenges arose, demanding vigilance to safeguard democratic principles.</figcaption>
						</figure>
					</li>

					<li>
						<figure style="--fig-color: var(--white)" data-topic="Cold War">
							<img src="https://assets.codepen.io/1149983/superbomb-korean-war-loc.jpg__1000x724_q85_crop_subsampling-2.jpg" alt="Provactive image of two young Koreans standing infront of a tank" />
							<figcaption><span>Generational Scars:</span> A Legacy of Suffering. Across generations, the Korean War's deep wounds persist. Families torn apart, dreams shattered, and lives forever changed. Its echoes remind us of the enduring cost of conflict.</figcaption>
						</figure>
					</li>
					<li>
						<figure style="--fig-color: var(--blue)" data-topic="Cold War">
							<img src="https://assets.codepen.io/1149983/koreaWar.jpeg" alt="Korean War protests were on the rise across the USA" />
							<figcaption><span>Campaigning for Peace:</span> Korean War Protests in the U.S. Women's solidarity against war echoes through history. Their activism sparks discussions, advocating for a peaceful world. Protests pave the path to change.</figcaption>
						</figure>
					</li>
					<li>
						<figure style="--fig-color: var(--red)" data-topic="Space Race">
							<img src="https://assets.codepen.io/1149983/28.08.1946_Labour_Party_North_Korea.jpg" alt="Stalin meeting Kim Il Sung the founder of North Korea as we know it" />
							<figcaption><span>Cold War Summit:</span> North Korea's Encounter with Stalin. An iconic moment in Cold War history as leaders converged. The meeting's consequences rippled through time, influencing geopolitics for decades </figcaption>
						</figure>
					</li>
					<li>
						<figure style="--fig-color: var(--blue)" data-topic="Space Race">
							<img src="https://assets.codepen.io/1149983/corbis-vv6016.webp" alt="Khrushchev, Mao, and Ho Chi Minh in Beijing Celebrating 10 Years of the People's Republic of China" />
							<figcaption><span>Communist Leaders Unite:</span> Khrushchev, Mao, and Ho Chi Minh in Beijing Celebrating 10 Years of the People's Republic of China. A historic gathering that bolstered the worldwide communist movement. </figcaption>
						</figure>
					</li>
					<li>
						<figure style="--fig-color: var(--white)" data-topic="Space Race">
							<img src="https://assets.codepen.io/1149983/fidel-castro-cuba.webp" alt="Cosmic Rivalry - East vs West in the Stars" />
							<figcaption><span>Cuba's Transformation:</span> Fidel Castro's overthrow marked Cuba's shift. Socialist regime introduced political change, prompting discussions on governance. This event resonates globally. </figcaption>
						</figure>
					</li>
				</ul>

			</div>
		</div>

	</section>

</main>
!

CSS 

              
                @media (prefers-reduced-motion: no-preference) {
	@font-face {
		font-family: "League Spartan";
		font-style: normal italic;
		font-weight: 100 900;
		src: url("https://assets.codepen.io/1149983/LeagueSpartan-VariableFont_wght.ttf");
	}

	:root {
		// Color variables
		--red: rgba(217, 36, 18, 1);
		--blue: rgba(37, 58, 125, 1);
		--white: rgb(244, 240, 238);
		--black: rgba(0, 0, 0, 1);

		--full-dimensions: 100%;

		// Typography variables
		--h1-level: clamp(4rem, 3.4074rem + 2.963vw, 6rem);
		--h2-level: clamp(3rem, 2.7143rem + 1.4286vw, 4.5rem);
		--h3-level: clamp(2.25rem, 1.9643rem + 1.4286vw, 3.75rem);
		--body-level: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.3125rem);
		--body-text: "League Spartan";
		--heading-text: "Bebas Neue";
		--system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
			Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

		/*
                Default sizes for progress bars
                vertical height = horizontal width
                */
		--progress-dimensions: 0.75rem;
		// Default progress bars scale variables
		--scale-end: 1;

		/*
                default opacity value
                iniviudal elements may override in 
                their classes
                */
		--opacity-start: 0;
		--opacity-end: 1;

		/*
                default zoom value
                iniviudal elements may override in 
                their classes
                */
		--zoom-out-start: 1;
		--zoom-out-middle: 0.33;
		--zoom-out--end: 0;
		--zoom-in-start: 0;
		--zoom-in-end: 1;
		--rotate-start: (-25deg);
		--rotate-end: (0deg);

		/*
                default flip-in values
                iniviudal elements may override in 
                their classes
                */
		--flip-in-start-perspective: 25rem;
		--flip-in-middle-perspective: 25rem;
		--flip-in-end-perspective: 25rem;
		--flip-in-start-rotate: 90deg;
		--flip-in-middle-rotate: -20deg;
		--flip-in-end-rotate: 0deg;

		/*
                default flip-out values
                iniviudal elements may override in 
                their classes
                */
		--flip-out-start-perspective: 25rem;
		--flip-out-middle-perspective: 25rem;
		--flip-out-end-perspective: 25rem;
		--flip-out-start-rotate: 0deg;
		--flip-out-middle-rotate: -20deg;
		--flip-out-end-rotate: 90deg;

		/*
                default light-speed-right values
                iniviudal elements may override in 
                their classes
                */
		--light-speed-in-right-start-translate: 100%;
		--light-speed-in-right-start-skew: -30deg;
		--light-speed-in-right-middle-skew: 20deg;
		--light-speed-in-right-end-skew: -5deg;

		/*
                default heartbeat values
                iniviudal elements may override in 
                their classes
                */
		--heartbeat-rotate: 45deg;
		--heartbeat-scale-start: 1;
		--heartbeat-scale-middle: 1.2;
		--heartbeat-scale-middle-end: 3;
		--heartbeat-scale-end: 1;

		// All instances of radial dots use this bg position for now
		--dots-position: 0rem 0rem, 0.25rem 0.25rem, 0rem 0rem;
	}

	* {
		box-sizing: border-box;

		&::before,
		&::after {
			box-sizing: border-box;
		}
	}

	img {
		height: auto;
		max-width: 100%;
	}

	::selection {
		background-color: rgb(0, 0, 0);
		color: var(--white);
	}

	body {
		background-color: var(--black);
		font-family: var(--body-text), var(--system);
		font-variation-settings: "wght" 400;
	}

	main {
		--opacity-start: 0;
		--opacity-end: 1;
		animation: opacity linear forwards;
		animation-range: entry 296vh exit 301vh;
		animation-timeline: scroll();

		margin-top: 200vh;
		max-width: 100vw;
		opacity: var(--opacity-start);
		position: relative;
		width: var(--full-dimensions);
		z-index: 2;
	}

	section {
		background-color: var(--black);
		min-height: 100vh;
		position: relative;
		width: var(--full-dimensions);
	}

	/* progress bars */
	.progress {
		background-color: var(--color);
		height: var(--progress-dimensions);
		left: 0;
		position: absolute;
		width: var(--full-dimensions);
		z-index: 2;

		&.vertical {
			height: var(--full-dimensions);
			left: 0;
			top: 0;
			width: var(--progress-dimensions);
		}

		+ .vertical {
			z-index: 1;
		}

		&.gradient {
			background-image: linear-gradient(
				to right,
				var(--blue) 25%,
				var(--red) 25%,
				var(--red) 75%,
				var(--blue) 75%
			);
		}
	}

	.year {
		--rotate-start: 0;
		--rotate-end: 90deg;
		--scale-end: 5;

		--opacity-end: 0;

		animation: rubber-band linear forwards, rubber-band linear forwards,
			rubber-band linear forwards, rotate-scale linear forwards;
		animation-range: entry 120vh exit 150vh, entry 170vh exit 210vh,
			entry 260vh exit 290vh, entry 275vh exit 295vh;

		animation-timeline: scroll();
		color: var(--white);
		font-family: var(--body-text), var(--system);
		font-variation-settings: "wght" 900;
		margin-top: -5.25rem;
		position: absolute;
		text-shadow: 0.2813rem 0.2813rem 0 var(--red),
			0.0625rem 0.0625rem 0 var(--black) 0.5625rem 0.5625rem 0 var(--blue);
		z-index: 2;

		-webkit-text-stroke: 0.1875rem var(--blue);
		text-stroke: 0.1875rem var(--blue);
		text-shadow: 0.1875rem 0 0 var(--red), -0.0625rem 0 0 var(--blue);
	}

	header {
		--opacity-start: 1;
		--opacity-end: 0;
		--radial-color: var(--blue);

		align-items: center;
		animation: position-switch linear forwards;
		animation-range: contain 295vh contain 300vh;
		animation-timeline: scroll(root);
		container: hero / inline-size;
		display: flex;
		height: 100vh;
		justify-content: center;
		position: sticky;
		top: 0;
		transform-origin: center;
		width: var(--full-dimensions);

		&::before {
			--opacity-start: 0.75;
			--opacity-end: 0;
			animation: opacity linear forwards;
			animation-range: entry 280vh exit 290vh;
			animation-timeline: scroll();
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill='%23fff' style='enable-background:new 0 0 343 243' viewBox='0 0 343 243'%3E%3Cpath d='M168.3 134.4h2.7v8.5h-2.7zm0 9.5h2.7v8.5h-2.7zm3.7 0h2.7v8.5H172zm0-9.5h2.7v8.4H172z' class='st2'/%3E%3Cpath d='M212.5 92.7h-81.9c-.6 0-1.1.5-1.1 1.1v66c0 .6.5 1.1 1.1 1.1h81.8c.7 0 1.2-.5 1.2-1.2v-66c0-.5-.5-1-1.1-1zm-20.7 26c0-.2.1-.2.2-.3.2-.2.4-.7.4-1.2V110c0-.4-.2-.8-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4c0 .2-.1.2-.2.3-.2.3-.4.7-.4 1.2v7.1c0 .4.2.8.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.1zm-25.2 0c0-.2.1-.2.2-.3.2-.2.4-.7.4-1.2v-7.1c0-.4-.2-.8-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4c0 .2-.1.2-.2.3-.2.2-.4.7-.4 1.2v7.2c0 .4.2.8.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.3zm-25.1 0c0-.2.1-.2.2-.3.2-.2.4-.7.4-1.2v-7.1c0-.4-.2-.8-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4c0 .2-.1.2-.2.3-.2.2-.4.7-.4 1.2v7.2c0 .4.2.8.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.3zm9.8 13.2c0 .2-.1.2-.2.3-.2.2-.4.7-.4 1.2v8.7c0 .4.2.8.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2c0-.2.1-.2.2-.3.2-.2.4-.7.4-1.2v-8.7c0-.4-.2-.8-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4zm.5-4c-.1.2-.2.2-.2.2h-10c-.2 0-.3-.1-.4-.2-.1-.2-.1-.4.1-.5 1.5-1.2 3.3-1.9 5.2-1.9 1.9 0 3.7.7 5.2 1.9.1.1.2.3.1.5zm24.5 26.2h-9.6c-.2 0-.5-.2-.5-.5v-20.7c.1-6.9 10.4-6.9 10.5 0 0 6.9 0 13.7.1 20.7 0 .3-.3.5-.5.5zm25.2-22.2c0 .2-.1.2-.2.3-.2.2-.4.7-.4 1.2v8.7c0 .4.2.8.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2c0-.2.1-.2.2-.3.2-.2.4-.7.4-1.2v-8.7c0-.4-.2-.8-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4zm.5-4c-.1.2-.2.2-.2.2h-10c-.2 0-.3-.1-.4-.2-.1-.2-.1-.4.1-.5 1.5-1.2 3.3-1.9 5.2-1.9 1.9 0 3.7.7 5.2 1.9.1.1.2.3.1.5zm-9.4-55.6 2.4 1h20.3l.8-1.1c.2-.2 0-.4-.2-.4h-23.2c-.3 0-.4.5-.1.5zm29.6 6.8v3.1c0 .2.2.4.3.4h7.2c.2 0 .3-.2.4-.4v-3.1l1.2-1.7c.2-.2 0-.6-.2-.6h-10c-.3 0-.5.3-.2.6l1.3 1.7zm-7.1 87.3h-87.2c-.2 0-.5.2-.5.5v3.7c0 .2.2.5.5.5h87.3c.2 0 .5-.2.5-.5v-3.7c-.1-.3-.3-.5-.6-.5zm-17.8-92.1 17.5 6.8c.2.1.4-.1.4-.2v-2.1c0-.1 0-.1-.1-.2l-.3-.5c0-.1-.1-.1-.1-.2v-3.7l-17.4.1zm-69.6-1H148l2.4-1c.2-.1.2-.5-.1-.5h-23.2c-.2 0-.3.2-.2.4l.8 1.1zm-14.9 5.8v3.1c0 .2.2.4.4.4h7.2c.2 0 .3-.2.3-.4v-3.1l1.2-1.7c.2-.2 0-.6-.2-.6h-10c-.3 0-.5.3-.2.6l1.3 1.7z'/%3E%3Cpath d='M293.8 153.5h-79.4c-.2-.7-.5-1.3-.7-2h-7.8c-.2 0-.4.2-.5.4-.2.6-.4 1.2-.7 1.8-.2.6-.6 1.2-1 1.7v3.2h-14.1v-3.2c-.7-1.2-1.2-2.3-1.6-3.6-.1-.2-.2-.4-.5-.4H180c-.2 0-.4.2-.5.4-.3 1.2-.8 2.4-1.6 3.6v3.2h-12.7v-3.2c-.7-1.1-1.2-2.3-1.6-3.6-.1-.2-.2-.4-.5-.4h-7.5c-.2 0-.4.2-.5.4-.3 1.2-.9 2.4-1.6 3.6v3.2h-14.1v-3.2c-.3-.6-.7-1.2-1-1.7-.2-.6-.5-1.2-.7-1.8-.1-.2-.2-.4-.5-.4h-7.8c-.2.7-.4 1.3-.7 2H49.2c-.4 0-.7.3-.7.7v6.8c0 .4.3.7.7.7h78.2v2.6c0 .4.3.7.7.7H215c.4 0 .7-.3.7-.7v-2.6h78.2c.4 0 .7-.3.7-.7v-6.8c-.1-.3-.4-.7-.8-.7zM128.2 78.3l-.3.5c0 .1-.1.1-.1.2v2.1c0 .2.2.3.4.2l17.5-6.8h-17.4l-.1 3.8c.1-.1.1-.1 0 0zm59.3 29.5V100c.2-1.2.5-2.3 1-3.5H179c.5 1.1.8 2.2 1 3.5v49.4c0 .4.3.7.7.7h6.2c.4 0 .7-.3.7-.7V109c-.1-.4-.1-.8-.1-1.2zm-24.4-2.2c.2-6.7.5-7.8 1-9h-9.6c.5 1.1.8 2.2 1 3.5v49.4c0 .4.3.7.7.7h6.2c.4 0 .7-.3.7-.7v-43.9z'/%3E%3Cpath d='M56.4 87.7c0-.3.3-.7.7-.7h11.6c.4 0 .7.2.7.7v2.9c0 .3-.3.7-.7.7H57.1c-.4 0-.7-.2-.7-.7v-2.9zm18.8 0c0-.3.3-.7.7-.7h11.6c.4 0 .7.2.7.7v2.9c0 .3-.3.7-.7.7H75.8c-.4 0-.7-.2-.7-.7l.1-2.9zm18.7 0c0-.3.3-.7.7-.7h11.6c.4 0 .7.2.7.7v2.9c0 .3-.3.7-.7.7H94.6c-.4 0-.7-.2-.7-.7v-2.9zm18.7 0c0-.3.3-.7.7-.7h13.5c.4 0 .7.2.7.7v1.9h87.8v-1.8c0-.3.3-.7.7-.7h13.5c.4 0 .7.2.7.7v2.9c0 .3-.3.7-.7.7H113.3c-.4 0-.7-.2-.7-.7v-3zm22.4-4L171.5 69 208 83.7h-6.1l-15.2-6.1-15.2-6.1-15.2 6.1-15.3 6.1h-6zm101.1 4c0-.3.3-.7.7-.7h11.6c.4 0 .7.2.7.7v2.9c0 .3-.3.7-.7.7h-11.6c-.4 0-.7-.2-.7-.7v-2.9zm18.7 0c0-.3.3-.7.7-.7h11.6c.4 0 .7.2.7.7v2.9c0 .3-.3.7-.7.7h-11.6c-.4 0-.7-.2-.7-.7v-2.9zm18.8 0c0-.3.3-.7.7-.7h11.6c.4 0 .7.2.7.7v2.9c0 .3-.3.7-.7.7h-11.6c-.4 0-.7-.2-.7-.7v-2.9zm-55.1 39.9 5.2-2.2h.4l5.2 2.2c.2.1.2.2.2.4s-.2.2-.3.2h-10.5c-.2 0-.3-.1-.3-.2-.2-.2-.1-.4.1-.4zm.5-8.9c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2V110c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v7.1c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.1zm18.3 8.7c.2-.2.3-.2.5-.4 1.4-1 3-1.5 4.7-1.5 1.9 0 3.7.7 5.2 1.9l.1.1c.1.1.1.2.1.3s-.1.2-.2.2h-10.3c-.1 0-.2-.1-.2-.1-.1-.1-.1-.1-.1-.2.1 0 .1-.2.2-.3zm.4-8.7c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2V110c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v7.1c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3H238c-.2 0-.3-.2-.3-.3v-3.1zm18.2 8.9 5.3-2.2h.4l5.2 2.2c.1 0 .1.1.2.1.1.1.1.2.1.2 0 .1-.1.2-.2.2s-.1.1-.2.1h-10.5c-.1 0-.2 0-.2-.1-.1 0-.1-.1-.2-.2v.1c-.1-.1-.1-.3.1-.4zm.6-8.9c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2V110c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v7.1c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.1zm18.3 8.7c.2-.2.3-.2.5-.4 1.4-1 3-1.5 4.7-1.5 1.9 0 3.7.7 5.2 1.9l.1.1c.1.1.1.2.1.3s-.1.2-.2.2H275c-.1 0-.2-.1-.2-.1-.1-.1-.1-.1-.1-.2-.1 0 0-.2.1-.3zm.4-8.7c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2V110c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v7.1c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.1zm9.7 13.2c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v8.7c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2v-8.7c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4zm-18.7 0c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v8.7c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2v-8.7c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4zm-18.8 0c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v8.7c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3H238c-.2 0-.3-.2-.3-.3v-3.2c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2v-8.7c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4zm-18.7 0c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v8.7c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2v-8.7c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4zm-104.3-3.6h-10.5c-.2 0-.3-.1-.3-.2 0-.2.1-.3.2-.4l5.2-2.2h.4l5.2 2.2c.2.1.2.2.2.4-.1.1-.2.2-.4.2zm-.4 3.6c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v8.7c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2v-8.7c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4zm-18.2-4c0 .1-.1.1-.1.2l-.1.1c-.1 0-.1.1-.2.1h-10c-.1 0-.1 0-.2-.1-.2-.1-.2-.2-.2-.2v-.3s0-.1.1-.1c0 0 0-.1.1-.1.3-.3.7-.6 1.2-.8 0 0 .1 0 .1-.1 1.2-.7 2.6-1.1 4-1.1 1.9 0 3.7.7 5.2 1.9.1.1.2.3.1.5zm-.5 4c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v8.7c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2v-8.7c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4zm-18.2-3.7c-.1 0-.1.1-.2.1H76.2c-.1 0-.2-.1-.2-.2v-.1c0-.2.1-.3.2-.4l5.2-2.2h.4l5.2 2.2c.2.1.2.2.2.4 0 .1 0 .2-.1.2zm-.5 3.7c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v8.7c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2v-8.7c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4zm-18.2-4c0 .1-.1.2-.2.2s-.1.1-.2.1H57.8l-.2-.2c-.1-.2 0-.3.1-.4l.1-.1c.2-.1.2-.2.4-.3.1-.1.2-.1.2-.2.2-.1.2-.2.4-.2.1-.1.2-.2.4-.2 1.2-.6 2.4-.9 3.7-.9 1.9 0 3.7.7 5.2 1.9.3-.1.3.1.3.3zm-.6 4c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v8.7c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2v-8.7c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.4c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4zm-9.7-13.2c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2v-7.1c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.5c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v7.2c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2zm18.7 0c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2v-7.1c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.5c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v7.2c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2zm18.8 0c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2v-7.1c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.5c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v7.2c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2zm18.7 0c0-.1.1-.2.2-.3.2-.3.4-.7.4-1.2v-7.1c0-.5-.2-.9-.4-1.2-.1-.1-.2-.2-.2-.3v-1.5c0-.2.2-.3.3-.3h9.1c.2 0 .3.2.3.3v1.4c0 .1-.1.2-.2.3-.2.3-.4.7-.4 1.2v7.2c0 .5.2.9.4 1.2.1.1.2.2.2.3v3.2c0 .2-.2.3-.3.3h-9.1c-.2 0-.3-.2-.3-.3v-3.2zM49.2 85.9h2.1s.1 0 .1.1v8.5c0 .2.2.3.4.3h76.1c.3.6.7 1.2.9 1.8H49.3c-.2 0-.5.2-.5.5v2.4c0 .3.2.5.5.5h80.3v2.2h-78c-.2 0-.2.1-.2.2v47.7h85.2c.4 0 .7-.3.7-.7v-.1c0-.4.1-48.9.1-48.9v-.4c.1-.9.3-1.8.6-2.7.3-.9.7-1.7 1.2-2.6H204c.5.8.9 1.7 1.2 2.6s.5 1.7.6 2.7v.4s.1 48.5.1 48.9v.1c0 .4.3.7.7.7l83.1-.1h1.8c.2 0 .2-.1.2-.2v-47.4c0-.2-.1-.2-.2-.2h-78.1V100h80.3c.3 0 .5-.2.5-.5v-2.4c0-.2-.2-.5-.5-.5h-79.5c.2-.6.6-1.2.9-1.8h76.2c.2 0 .4-.1.4-.3V86s0-.1.1-.1h2.1c.3 0 .5-.2.5-.5v-1.1c0-.3-.2-.5-.5-.5H218c-.3 0-.7-.1-1-.2l-44.7-18.1v-3.8c.9-.2 2.2-.5 3.2-.2 5.1 1.7 6.2 1.1 6.2 1-.9-1.2-.6-3.9-.6-3.9.3-2.4.2-2.9.2-3-.2.1-1.6.9-5-.2-1.8-.6-3.2-.7-4-.8 0-.5-.4-.8-.9-.8-.4.1-.7.4-.7.9v10.7L126 83.5c-.3.2-.7.2-1 .2H49.2c-.3 0-.5.2-.5.5v1.1c0 .4.2.6.5.6z'/%3E%3Cpath d='m198.6 96.5-27.1 30.4-27.1-30.4-.4.2 27.2 30.6v-.1h.5l.1.1 27.1-30.5v-.1z'/%3E%3Cpath d='M172.3 125.7h-1.7c-.4 0-.6.3-.6.6v4.8c0 .4.3.6.6.6h1.7c.4 0 .6-.3.6-.6v-4.8c0-.4-.2-.6-.6-.6z'/%3E%3C/svg%3E");
			position: absolute;
			top: 0;
			width: 12.5rem;
			height: 7.5rem;
			content: "";
			background-repeat: no-repeat;
			z-index: 2;
			left: 0;
			filter: drop-shadow(0rem 0.0625rem 0rem var(--blue))
				drop-shadow(0rem -0.0625rem 0rem var(--red));
			mix-blend-mode: hard-light;
			opacity: 0.75;
		}

		&::after {
			--opacity-start: 0;
			--opacity-end: 0;
			animation: opacity linear forwards;
			animation-range: contain 280vh contain 285vh;
			animation-timeline: scroll();

			background: radial-gradient(var(--radial-color) 33%, transparent 33%) 0rem
					0rem / 0.5rem 0.5rem,
				radial-gradient(var(--radial-color) 33%, transparent 33%) 0.25rem 0.25rem /
					0.5rem 0.5rem,
				0rem 0rem / 100% 100%;
			background-position: var(--dots-position);
			content: "";
			height: 100vh;
			inset: 0;
			mix-blend-mode: multiply;
			opacity: 0.2;
			position: absolute;
			width: 100vw;
		}

		.progress {
			--top-amount: 1.75rem;
			--scale-end: 0.5;
			animation: grow-progress linear forwards;
			animation-range: entry 60vh cover 66vh;
			animation-timeline: scroll();
			filter: blur(0.0625rem) brightness(0.5);
			mix-blend-mode: color-burn;
			top: var(--top-amount);
			transform: scaleX(0);
		}

		.subtitle {
			+ .subtitle {
				--margin-top-amount: 4rem;
				margin-top: var(--margin-top-amount);
				font-size: var(--h2-level);
			}
		}

		h1,
		h2,
		.year {
			font-size: var(--h1-level);
		}

		.word-container {
			--padding: 0.75rem;
			padding-left: var(--padding);
		}

		h1 {
			--opacity-start: 1;
			--opacity-end: 0;
			animation: flip-out-x linear forwards, opacity linear forwards;
			animation-range: entry 120vh exit 130vh, entry 128vh cover 130vh;
			animation-timeline: scroll();

			.headline {
				animation: opacity linear forwards;
				animation-range: contain 0% contain 55vh;
				animation-timeline: scroll();
			}

			.subtitle {
				animation: reveal-to-top linear both;
				animation-range: entry 50vh cover 60vh;
				animation-timeline: scroll();
				opacity: 0;

				+ .subtitle {
					animation: flip-in-x linear both;
					animation-range: entry 75vh cover 80vh;
					animation-timeline: scroll();
					left: 0;
					right: 0;
				}
			}

			.word-container {
				animation: flip-out-x linear forwards;
				animation-range: entry 118vh cover 122vh;
				animation-timeline: scroll();

				.sniper {
					--opacity-start: 0;
					--opacity-end: 1;

					animation: sniper linear forwards;
					animation-range: entry 90vh cover 112vh;
					animation-timeline: scroll();

					display: inline-flex;
					height: var(--full-dimensions);
					justify-content: center;
					left: 0;
					width: var(--full-dimensions);
				}

				.progress {
					--circle-d: 4rem;
					--top-amount: calc(var(--padding) * -1);
					border-radius: 50%;
					height: var(--circle-d);
					left: calc(var(--padding) / 2);
					margin: 0 auto;
					right: 0;
					top: var(--top-amount);
					width: var(--circle-d);

					&:first-of-type {
						align-items: center;
						animation: zoom-in linear forwards, opacity linear forwards;
						animation-range: entry 88vh cover 90vh, entry 88vh cover 90vh;
						animation-timeline: scroll();
						border: 0.125rem solid var(--white);
						display: flex;
						filter: drop-shadow(0rem 0rem 0.625rem rgba(0, 0, 0, 0.5));
						justify-content: center;
						opacity: 0;
						padding: 0.125rem;
						// transform: scaleX(0);

						&::after,
						&::before {
							background: var(--white);
							border-radius: 0.375rem;
							content: "";
							display: block;
							height: var(--full-dimensions);
							position: absolute;
							width: 0.0625rem;
						}

						&::after {
							--rotate-deg: 90deg;
							transform: rotate(var(--rotate-deg));
						}
					}
					&:nth-of-type(2) {
						--top-amount: calc(1.75 * var(--padding));
						--dot-width: calc(var(--circle-d) / 8);
						--dot-height: calc(var(--circle-d) / 8);

						animation: heartbeat linear forwards;
						animation-range: entry 115vh cover 120vh;
						animation-timeline: scroll();
						height: var(--dot-height);
						mix-blend-mode: hard-light;
						top: var(--top-amount);
						width: var(--dot-width);
					}
				}
			}
		}

		h2 {
			--top-amount: 4rem;

			animation: flip-in-x linear forwards, flip-out-x linear forwards;
			animation-range: entry 130vh cover 140vh, entry 170vh cover 190vh;
			animation-timeline: scroll();
			opacity: 0;

			&:nth-of-type(2) {
				animation-range: entry 195vh cover 230vh, entry 260vh cover 270vh;

				.subtitle {
					animation-range: entry 210vh cover 220vh, entry 250vh cover 260vh;
					animation-timeline: scroll();

					> span {
						animation: rotate-out-down-left linear forwards;
						transform-origin: left bottom;
						animation-range: entry 250vh cover 260vh;
						animation-timeline: scroll();
						opacity: 1;
					}
				}
			}

			.headline {
				animation: flip-in-x linear forwards, zoom-out linear forwards;
				animation-range: entry 130vh cover 135vh, entry 195vh, cover 200vh;
				animation-timeline: scroll();

				+ .subtitle {
					margin-top: var(--top-amount);
				}
			}

			.subtitle {
				animation: flip-in-x linear both;
				animation-range: entry 145vh cover 150vh;
				animation-timeline: scroll();
				font-size: var(--h2-level);

				> span {
					animation: light-speed-in-right linear forwards;
					animation-range: entry 150vh cover 170vh;
					animation-timeline: scroll();
					opacity: 0;
				}
			}
		}

		ul {
			--bright-start: 1;
			--bright-end: 0.2;
			animation: scale-header linear forwards, fadeOutBig linear forwards;
			animation-range: entry 0vh cover 190vh, contain 250vh contain 299vh;
			animation-timeline: scroll();
			height: var(--full-dimensions);
			inset: 0;
			position: absolute;
			width: var(--full-dimensions);

			&::before,
			&::after {
				content: "";
				height: 100vh;
				inset: 0;
				position: absolute;
			}

			&::before {
				background-image: radial-gradient(
					circle at center,
					var(--red) 0%,
					var(--red) 20%,
					var(--blue) 20%,
					var(--black) 100%
				);

				mix-blend-mode: multiply;
				transition: color 300ms ease;
				z-index: 1;
			}

			li {
				--bright-start: 1;
				--bright-end: 0.2;

				height: var(--full-dimensions);
				inset: 0;
				position: absolute;
				width: var(--full-dimensions);
				z-index: -1;

				&:nth-of-type(1) {
					--opacity-start: 1;
					--opacity-end: 0;
					animation: brightness linear forwards, opacity linear forwards;
					animation-range: entry 1vh exit 135vh, entry 210vh exit 250vh;
					animation-timeline: scroll();
				}

				&:nth-of-type(2) {
					mix-blend-mode: saturation;
					z-index: 0;
					img {
						animation: reveal linear both;
						animation-range: entry 170vh cover 210vh;
						animation-timeline: scroll();
					}
				}
			}

			img {
				filter: grayscale(1);
				height: var(--full-dimensions);
				transform-origin: center;
				width: var(--full-dimensions);
			}
		}
	}

	@container hero (min-width: 48rem) {
		header {
			ul {
				&::before {
					background-image: radial-gradient(
						circle at center,
						var(--red) 0%,
						var(--red) 40%,
						var(--blue) 40%,
						var(--black) 50%,
						var(--black) 50%,
						var(--black) 60%,
						var(--black) 100%
					);
				}
			}

			.headline {
				+ .subtitle {
					+ .subtitle {
						--margin-top-amount: 5rem;
					}
				}
			}

			.progress {
				--top-amount: 2.5rem;
			}

			h1 {
				.subtitle {
					+ .subtitle {
						.progress {
							--top-amount: calc(var(--padding) / 2);

							&:nth-of-type(2) {
								--top-amount: 50%;
							}
						}
					}
				}
			}

			h2 {
				--top-amount: 5rem;
			}
		}
	}

	h1,
	h2 {
		color: var(--white);
		display: flex;
		flex-flow: column wrap;
		width: var(--full-dimensions);
		z-index: 1;

		&:has(.subtitle) {
			align-items: center;
			position: absolute;
			text-align: center;
			text-wrap: balance;
		}

		span {
			position: absolute;
		}

		.headline {
			max-width: 80%;
			z-index: 1;
		}
	}

	h2 {
		font-size: var(--h3-level);
	}

	figure {
		display: flex;
		flex-flow: column wrap;
		height: 100%;
		justify-content: center;
		position: relative;
		width: var(--full-dimensions);

		figcaption {
			font-size: var(--body-level);
		}
	}

	.headline,
	.subtitle {
		font-family: var(--heading-text), var(--system);
	}

	/* horizontal scrolling pieces */
	.horizontal-section {
		--list-width: var(--full-dimensions);
		animation: reveal-to-top reverse linear forwards;
		animation-range: contain 97% contain 99%;
		animation-timeline: --section-hor-scroll;
		// animation-timeline: scroll();
		container: horizontal-scroller / inline-size;
		// higher the gallery items, the slower the scroll
		height: calc(var(--list-width) * var(--gallery-items));

		overflow: visible; /* To make position sticky work … */

		view-timeline-name: --section-hor-scroll;

		h2 {
			span {
				color: var(--color);
				font-weight: 900;
			}
		}

		ul {
			display: flex;

			li {
				// --list-width: var(--full-dimensions);
				--filter-color: var(--blue);
				--radial-color: var(--blue);
				align-items: flex-end;
				display: flex;
				position: relative;
				width: var(--list-width);
			}

			figure {
				&::after {
					content: attr(data-topic);
					font-family: var(--heading-text), var(--system);
					font-size: var(--h3-level);
					right: 0;
					padding: 0 0.75rem;
					position: absolute;
					top: 0;
					width: fit-content;
					color: var(--white);
					transform: translateY(-2.5rem);
				}

				img {
					aspect-ratio: 16/9;
					object-fit: cover;
					position: relative;
					width: var(--full-dimensions);
				}

				figcaption {
					--radial-color: var(--blue);
					--padding: 0.75rem;
					backdrop-filter: blur(0.625rem);
					background: var(--fig-color);
					color: var(--white);
					margin: 0 auto;
					padding: var(--padding) calc(var(--padding) * 2);
					position: relative;
					width: 80%;

					span {
						background-color: var(--blue);
						box-decoration-break: clone;
						font-variation-settings: "wght" 650;
						line-height: 1.15;
						padding: calc(var(--padding) / 4);
					}

					&::after {
						background: radial-gradient(var(--radial-color) 33%, transparent 33%) 0rem
								0rem/0.5rem 0.5rem,
							radial-gradient(var(--radial-color) 33%, transparent 33%) 0.25rem 0.25rem/0.5rem
								0.5rem,
							0rem 0rem/100% 100%;
						background-position: var(--dots-position);
						content: "";
						height: var(--full-dimensions);
						inset: 0;
						mix-blend-mode: multiply;
						opacity: 0.15;
						position: absolute;
						width: var(--full-dimensions);
						z-index: -1;
					}
				}

				&[style*="--fig-color: var(--white)"] {
					figcaption {
						color: var(--black);

						&::after {
							mix-blend-mode: normal;
						}

						span {
							background-color: var(--red);
							color: var(--white);
						}
					}
				}

				&[style*="--fig-color: var(--blue)"] {
					--radial-color: var(--red);
					span {
						background-color: var(--red);
					}
				}
			}
		}
	}
	.horizontal-section-wrapper {
		height: 100vh;
		overflow-x: hidden;
		position: sticky;
		top: 0;

		&:has(.horizontal-section-fixed) {
			display: grid;
			grid-template-columns: 100vw;

			.horizontal-scroll-container {
				--move-amount: 100vw;
			}
		}
	}
	.horizontal-section-fixed {
		background: var(--black);
		position: relative;
		grid-column: 1;
		z-index: 2;

		h2 {
			--opacity-start: 1;
			--opacity-end: 0;
			animation: opacity linear forwards;
			animation-timeline: --section-hor-scroll;

			height: var(--full-dimensions);
			justify-content: center;
			padding-left: 0.75rem;
			view-timeline-axis: block;

			> .subtitle {
				animation: reveal-to-bottom linear forwards;
				animation-timeline: --section-hor-scroll;
				opacity: 0;
				position: relative;
				width: var(--full-dimensions);

				> span {
					position: relative;
				}
			}

			&:nth-of-type(1) {
				animation-range: contain 40% contain 41%;

				> span {
					animation-range: contain 0% contain 2%;

					&:nth-of-type(2) {
						animation-range: contain 16% contain 17%;
					}
					&:nth-of-type(3) {
						animation-range: contain 24% contain 25%;
					}
					&:nth-of-type(4) {
						animation-range: contain 33% contain 34%;
					}
				}
			}

			&:nth-of-type(2) {
				animation-range: contain 74% contain 75%;

				> span {
					animation-range: contain 41% contain 42%;

					&:nth-of-type(2) {
						animation-range: contain 46% contain 48%;
					}
					&:nth-of-type(3) {
						animation-range: contain 54% contain 56%;
					}
					&:nth-of-type(4) {
						animation-range: contain 62% contain 64%;
					}
					&:nth-of-type(5) {
						animation-range: contain 70% contain 72%;
					}
					&:nth-of-type(6) {
						animation-range: contain 76% contain 78%;
					}
				}
			}

			&:nth-of-type(3) {
				--opacity-end: 1;

				> span {
					animation-range: contain 74% contain 75%;

					&:nth-of-type(2) {
						animation-range: contain 81% contain 82%;
					}
					&:nth-of-type(3) {
						animation-range: contain 88% contain 89%;
					}
					&:nth-of-type(4) {
						animation-range: contain 96% contain 98%;
					}
					&:nth-of-type(5) {
						animation-range: contain 97% contain 99%;
					}
				}
			}
		}

		.progress {
			animation: opacity linear forwards, grow-progress linear forwards;
			animation-range: entry 0% cover 50%, entry 0% cover 90%;
			animation-timeline: --section-hor-scroll;
			transform: scaleX(calc(1 / var(--gallery-items)));

			&:nth-of-type(1) {
				top: 0;
			}

			&:nth-of-type(2) {
				bottom: 0;
			}

			&.vertical {
				animation-range: entry 0% cover 50%, entry 0% cover 90%;
				transform: scaleY(calc(1 / var(--gallery-items)));
			}
		}
	}
	.horizontal-scroll-container {
		--move-amount: 100vw;
		align-items: center;
		animation: linear move forwards;
		animation-range: contain 10% contain 90%;
		animation-timeline: --section-hor-scroll;
		display: grid;
		width: calc(100vw * var(--gallery-items) + 25vw);
		will-change: transform;

		ul {
			li {
				--opacity-start: 1;
				--opacity-end: 0.25;
				--rotate-start: 12deg;
				--rotate-end: 0deg;
				animation: linear gallery-images forwards, opacity linear forwards;
				animation-timeline: --section-hor-scroll;
				view-timeline-axis: block;

				&:first-of-type {
					--rotate-start: 0deg;
					animation-range: entry 12% cover 15%, contain 14% contain 15%;
				}
				&:nth-of-type(2) {
					animation-range: entry 20% cover 22%, contain 23% contain 24%;
				}
				&:nth-of-type(3) {
					animation-range: entry 26% cover 28%, contain 31% contain 32%;
				}
				&:nth-of-type(4) {
					animation-range: entry 32% cover 34%, contain 39% contain 40%;
				}
				&:nth-of-type(5) {
					animation-range: entry 38% cover 40%, contain 47% contain 48%;
				}
				&:nth-of-type(6) {
					animation-range: entry 44% cover 46%, contain 55% contain 56%;
				}
				&:nth-of-type(7) {
					animation-range: entry 50% cover 52%, contain 64% contain 65%;
				}
				&:nth-of-type(8) {
					animation-range: entry 56% cover 58%, contain 73% contain 74%;
				}
				&:nth-of-type(9) {
					animation-range: entry 62% cover 64%, contain 81% contain 82%;
				}
				&:nth-of-type(10) {
					animation-range: entry 68% cover 70%, contain 89% contain 90%;
				}
				&:nth-of-type(11) {
					--bright-start: 1;
					--bright-end: 1;
					animation-range: entry 74% cover 76%, contain 98% contain 99%;
				}
			}
		}
	}

	@media (min-width: 48rem) {
		.horizontal-section {
			--list-width: 50vw;
		}
	}

	@container horizontal-scroller (min-width: 48rem) {
		.horizontal-section-wrapper {
			&:has(.horizontal-section-fixed) {
				grid-template-columns: 25vw 1fr;
				.horizontal-scroll-container {
					--move-amount: 75vw;
				}
			}
		}

		.horizontal-scroll-container {
			align-self: center;

			//   width: calc(100vw * calc(var(--gallery-items) / 2));
			width: fit-content;

			ul {
				li {
					// --list-width: 50vw;
				}
				figure {
					figcaption {
						margin: 0 0 0 auto;
						width: 50%;
					}
				}
			}
		}

		figcaption {
			margin-left: 0;
			width: 100%;
		}
	}

	.timeline {
		align-items: center;
		background-image: url("https://assets.codepen.io/1149983/nixjfk.png");
		background-repeat: no-repeat;
		background-position: right bottom;
		background-blend-mode: hard-light;
		background-size: contain;
		display: grid;
		grid-auto-flow: column dense;
		height: 100vh;
		justify-content: center;
		height: 100vh;
		overflow: scroll;
		width: var(--full-dimensions);
		container: timeline/ inline-size;

		h2 {
			--top-amount: 4.5rem;
			font-size: var(--h1-level);

			.headline {
				--opacity-start: 1;
				--opacity-end: 0;
				animation: flip-out-x linear forwards, opacity linear forwards;
				animation-range: entry 120vh exit 130vh, entry 128vh cover 130vh;
				animation-timeline: scroll();
			}

			.subtitle {
				margin-top: var(--top-amount);

				+ .subtitle {
					--top-amount: 9rem;
				}
			}
		}

		div {
			padding-top: 200vh;
		}
	}

	@media screen and (min-width: 48rem) {
		.timeline {
			background-size: cover;
			background-position: right bottom;
		}
	}

	@keyframes fadeOutBig {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		60% {
			opacity: 0.4;
		}

		100% {
			opacity: 0;
			transform: scale(2);
			z-index: -1;
		}
	}

	@keyframes scale-header {
		20% {
			transform: scale(2);
		}

		50% {
			transform: scale(1.5);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes reveal-to-bottom {
		0% {
			clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
		}
		100% {
			clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
			opacity: 1;
		}
	}

	@keyframes reveal-to-top {
		0% {
			clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
		}
		100% {
			clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
			opacity: 1;
		}
	}

	@keyframes reveal {
		from {
			clip-path: inset(45% 20% 45% 20%);
		}

		to {
			clip-path: inset(0% 0% 0% 0%);
			opacity: 1;
		}
	}

	@keyframes hide-me {
		to {
			clip: rect(0, 0, 0, 0);
		}
	}

	// horizontal

	@keyframes rotate-out-down-left {
		0% {
			opacity: 1;
			transform: rotate(0);
		}

		100% {
			opacity: 0;
			transform: rotate(45deg);
		}
	}

	@keyframes sniper {
		from {
			transform: translate(0, 0);
		}

		20% {
			transform: translate(20%, -2rem);
		}

		40% {
			transform: translate(-35%, 0.75rem);
		}

		60% {
			transform: translate(10%, 1.875rem);
		}

		80% {
			transform: translate(30%, -1.875rem);
		}

		100% {
			transform: translate(-8%, 1%);
		}
	}

	@keyframes rubber-band {
		from {
			transform: scale3d(1, 1, 1);
		}

		30% {
			transform: scale3d(1.25, 0.75, 1);
		}

		50% {
			transform: scale3d(1.15, 0.85, 1);
		}

		65% {
			transform: scale3d(0.95, 1.05, 1);
		}

		75% {
			transform: scale3d(1.05, 0.95, 1);
		}

		to {
			transform: scale3d(1, 1, 1);
		}
	}

	// variable animations

	@keyframes opacity {
		from {
			opacity: var(--opacity-start);
		}

		to {
			opacity: var(--opacity-end);
		}
	}

	@keyframes heartbeat {
		0%,
		25% {
			transform: rotate(var(--heartbeat-rotate))
				scale(var(--heartbeat-scale-start));
		}
		30%,
		50% {
			transform: rotate(var(--heartbeat-rotate))
				scale(var(--heartbeat-scale-middle));
		}
		70% {
			transform: rotate(var(--heartbeat-rotate))
				scale(var(--heartbeat-scale-middle-end));
		}
		100% {
			transform: rotate(var(--heartbeat-rotate)) scale(var(--heartbeat-scale-end));
		}
	}

	@keyframes rotate-scale {
		0% {
			rotate: var(--rotate-start);
		}

		100% {
			opacity: var(--opacity-end);
			rotate: var(--rotate-end);
			scale: var(--scale-end);
		}
	}

	@keyframes zoom-out {
		0% {
			transform: scale(var(--zoom-out-start));
		}
		50% {
			opacity: var(--opacity-end);
			transform: scale(var(--zoom-out-middle));
		}
		100% {
			opacity: var(--opacity-end);
			transform: scale(var(--zoom-out-end));
		}
	}

	@keyframes grow-progress {
		to {
			transform: scaleX(var(--scale-end));
		}
	}

	@keyframes position-switch {
		to {
			position: relative;
		}
	}

	@keyframes border {
		to {
			outline: 30px solid red;
		}
	}

	@keyframes move {
		to {
			transform: translateX(calc(-100% + var(--move-amount)));
		}
	}
	@keyframes brightness {
		from {
			filter: brightness(var(--bright-start));
		}
		to {
			filter: brightness(var(--bright-end));
		}
	}
	@keyframes zoom-in {
		from {
			transform: scale(var(--zoom-in-start));
		}
		to {
			transform: scale(var(--zoom-in-end));
		}
	}

	@keyframes gallery-images {
		from {
			transform: rotate(var(--rotate-start)) scale(var(--zoom-in-start));
		}
		to {
			transform: rotate(var(--rotate-end)) scale(var(--zoom-in-end));
		}
	}
	@keyframes flip-out-x {
		0% {
			transform: perspective(var(--flip-out-start-perspective))
				rotateX(var(--flip-out-start-rotate));
		}
		30% {
			transform: perspective(var(--flip-out-middle-perspective))
				rotateX(var(--flip-out-middle-rotate));
		}
		100% {
			transform: perspective(var(--flip-out-end-perspective))
				rotateX(var(--flip-out-end-rotate));
		}
	}
	@keyframes flip-in-x {
		0% {
			opacity: 0;
			transform: perspective(var(--flip-in-start-perspective))
				rotateX(var(--flip-in-start-rotate));
		}
		50% {
			transform: perspective(var(--flip-in-middle-perspective))
				rotateX(var(--flip-in-middle-rotate));
		}
		100% {
			opacity: 1;
			transform: perspective(var(--flip-in-end-perspective))
				rotateX(var(--flip-in-end-rotate));
		}
	}
	@keyframes light-speed-in-right {
		from {
			opacity: 0;
			transform: translate3d(var(--light-speed-in-right-start-translate), 0, 0)
				skewX(var(--light-speed-in-right-start-skew));
		}

		60% {
			opacity: 1;
			transform: skewX(var(--light-speed-in-right-middle-skew));
		}

		80% {
			transform: skewX(var(--light-speed-in-right-end-skew));
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}
!

JS
!
999px

Console