<div class="no-support" data-support="css-animation-composition"><p>🚨 Your browser does not support CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition" target="_top"><code>animation-composition</code></a>. Therefore, this demo will not work properly. Please try Chrome 112, Firefox Nightly, or Safari 16.</p></div>

<main>
	<div class="box" data-method="replace">replace</div>
	<div class="box" data-method="add">add</div>
	<div class="box" data-method="accumulate">accumulate</div>
</main>

<footer>
	<p>Demo for <a href="https://developer.chrome.com/articles/css-animation-composition" target="_top">https://developer.chrome.com/articles/css-animation-composition</a></p>
</footer>

.box {
	display: block;
	width: 5em;
	aspect-ratio: 1;
	display: grid;
	position: relative;

	place-content: center;
	outline: 1px dashed #333;
	margin: 0 auto;
}

.box::after, .box::before {
	content: '';
	display: block;
	width: 5em;
	aspect-ratio: 1;
	position: absolute;
	
	transform-origin: 50% 50%;
	transform: translateX(50px) rotate(45deg);
	z-index: -1; /* Make sure text is on top */
}

.box::after {
	background: lightseagreen;
	animation: adjust 5s linear infinite alternate;
}

.box::before {
	background: #ccc;
}

@keyframes adjust {
	to {
		transform: translateX(100px);
	}
}

.box[data-method="replace"]::after {
	animation-composition: replace;
}

.box[data-method="add"]::after {
	animation-composition: add;
}

.box[data-method="accumulate"]::after {
	animation-composition: accumulate;
}

main {
	display: grid;
	place-content: center;
	gap: 5em;
}

/* Non-demo styles below */
@layer base {
	@layer reset {
		* {
			box-sizing: border-box;
		}
		body {
			margin: 0;
			padding: 0;
		}
		html, body {
			height: 100%;
		}
	}
	@layer layout {
		html {
			max-width: 84ch;
			padding: 3rem 2rem;
			margin: auto;
		}

		html {
			--font-sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
			--font-serif: ui-serif,serif;
			--font-mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;
		}
		body {
			font-family: var(--font-sans);
		}
		pre, code {
			font-family: var(--font-mono);
		}
		
		body {
			display: grid;
			place-content: safe center;
			gap: 3rem;
		}

		a,
		a:visited {
			color: blue;
		}
		
		h2 {
			margin-top: 2em;
		}

		summary {
			cursor: pointer;
		}

		dd + dt {
			margin-top: 0.5em;
		}

		button {
			cursor: pointer;
		}
		
		footer {
			text-align: center;
			font-style: italic;
		}
	}

	@layer support {
		.no-support,
		.has-support {
			margin: 1em 0;
			padding: 1em;
			border: 1px solid #ccc;
		}

		.no-support {
			background-color: #ff00002b;
		}
		.no-support[data-level="warn"] {
			background-color: #ffff002b;
		}
		.has-support {
			background-color: #00ff002b;
		}
		.no-support, [data-show-when-no-support] {
			display: block !important;
		}
		.has-support, [data-show-when-has-support] {
			display: none !important;
		}
		:is(.has-support, .no-support) > :first-child {
			margin-top: 0;
		}
		:is(.has-support, .no-support) > :last-child {
			margin-bottom: 0;
		}
		
		@property --supports-at-property {
			syntax: "*";
			initial-value: ;
			inherits: true;
		}
		.no-support[data-support="at-property"], [data-no-support="at-property"] {
			--value-when-supported: var(--supports-at-property) none;
			--value-when-not-supported: block;
			display: var(--value-when-supported, var(--value-when-not-supported)) !important;
		}
		.has-support[data-support="at-property"], [data-has-support="at-property"] {
			--value-when-supported: var(--supports-at-property) block;
			--value-when-not-supported: none;
			display: var(--value-when-supported, var(--value-when-not-supported)) !important;
		}

		@supports (transform: scaleX(cos(360deg))) {
			.no-support[data-support="css-trig-fns"] {
				display: none !important;
			}
			.has-support[data-support="css-trig-fns"], [data-show-when-has-support="css-trig-fns"] {
				display: block !important;
			}
		}

		@supports (animation-composition: replace) {
			.no-support[data-support="css-animation-composition"] {
				display: none !important;
			}
			.has-support[data-support="css-animation-composition"], [data-show-when-has-support="css-animation-composition"] {
				display: block !important;
			}
		}
	}
}