/* Ready, get set, go! */

@import url("./assets/variables.css");
@import url("./assets/normalise.css");
@import url("./assets/layout.css");
@import url("./assets/typography.css");

@property --sky-start {
	syntax: "<color>";
	initial-value: hsl(240, 50%, 85%);
	inherits: false;
}
@property --sky-end {
	syntax: "<color>";
	initial-value: hsl(10, 85%, 85%);
	inherits: false;
}

@keyframes race-car-red {
	from {
		left: calc(100% + 10rem);
	}
	to {
		left: calc(var(--car-size) * -1);
	}
}

@keyframes race-car-blue {
	from {
		left: 100%;
	}
	to {
		left: -20rem;
	}
}

@keyframes gallery-progress {
	to {
		transform: scaleX(1);
	}
}

@keyframes clunk {
	from {
		rotate: 0deg;
	}
	to {
		rotate: var(--clunk-rotate);
	}
}

@keyframes sky {
	0% {
		--sky-start: hsl(240, 50%, 85%);
		--sky-end: hsl(240, 50%, 85%);
	}
	25% {
		--sky-start: hsl(240, 50%, 10%);
		--sky-end: hsl(240, 50%, 85%);
	}
	50% {
		--sky-start: hsl(240, 50%, 10%);
		--sky-end: hsl(240, 50%, 10%);
	}
	75% {
		--sky-start: hsl(240, 50%, 10%);
		--sky-end: hsl(10, 100%, 65%);
	}
	100% {
		--sky-start: hsl(240, 50%, 85%);
		--sky-end: hsl(240, 50%, 85%);
	}
}

html {
	background: black;
}

body {
	padding-block-end: 350px;

	background-image:
		url("/submissions/oliver/assets/images/horizon.svg"),
		url("/submissions/oliver/assets/images/stars.png"),
		linear-gradient(var(--sky-start), var(--sky-end));
	background-size: contain, contain, cover;
	background-blend-mode: normal, lighten, normal;
	background-position: bottom, top, center;
	background-attachment: fixed;
	background-repeat: no-repeat;

	animation: sky linear forwards;
	animation-timeline: scroll();

	&::before,
	&::after {
		position: fixed;
		bottom: 0;
		font-size: var(--car-size);
		z-index: 1;
	}

	&::before {
		content: "🚗";
		animation: race-car-red ease-out forwards;
		animation-timeline: scroll();
	}

	&::after {
		content: "🚙";
		animation: race-car-blue linear forwards;
		animation-timeline: scroll();
	}
}

article,
footer {
	padding: 1rem;
}

article {
	isolation: isolate;
	background: var(--colour-bg-start);

	& > p {
		position: relative;
		z-index: 1;
		background: inherit;
	}

	& > p:first-of-type,
	& > blockquote {
		width: calc(100% + 4rem);
		translate: -2rem;
		padding: 1rem 2rem;
		font-size: 1.4rem;
		text-wrap: pretty;
		background: var(--colour-accent);
		clip-path: var(--clip-br);
	}

	& > blockquote {
		margin: 0;

		& p {
			margin: 0;
			font-size: inherit;
		}
	}

	& > p:nth-child(3n),
	& > p:nth-child(4n),
	& > p:last-of-type {
		animation: clunk ease-in forwards;
		animation-timeline: view();
		animation-range: 50% 50.5%;
	}

	& > p:nth-child(3n) {
		--clunk-rotate: -5deg;
		transform-origin: top right;
	}

	& > p:nth-child(4n),
	& > p:last-of-type {
		--clunk-rotate: 5deg;
		transform-origin: bottom left;
	}
}

footer {
	margin-block-end: 2rem;
	clip-path: var(--clip-br);
	background: var(--colour-callout);
}

body > aside {
	display: grid;
	gap: 1rem;

	align-self: start;
	position: sticky;
	top: 1rem;

	clip-path: var(--clip-tr);
	background: var(--colour-callout);

	& .title,
	& .content {
		margin-inline: 1rem;
	}
}

a[rel="author"] {
	--wh: 8rem;
	--rotation: -15deg;
	--scale: 1;
	--scale-delay: 0.25s;

	display: flex;
	align-items: center;
	gap: 1rem;

	position: relative;

	padding: 1rem;
	font-family: "Honk", sans-serif;
	font-size: 3rem;
	text-decoration: none;
	clip-path: var(--clip-br);

	&::before,
	&::after {
		content: "";
		width: var(--wh);
		height: var(--wh);
		clip-path: var(--clip-star);
	}

	&::before {
		transition: rotate 0.5s;
		rotate: var(--rotation);

		background-image: url("https://s3.amazonaws.com/arc-authors/washpost/e575bbe8-48bd-4c34-8460-b8ee2484ea7c.jpg");
		background-size: cover;
		mix-blend-mode: multiply;
	}

	&::after {
		position: absolute;

		transition: rotate 0.5s, scale 0.5s var(--scale-delay);
		rotate: var(--rotation);
		scale: var(--scale);

		background: var(--colour-callout);
		z-index: -1;
	}

	&:hover {
		--scale: 1.2;
		--scale-delay: 0.5s;
		--rotation: 355deg;
	}
}

time {
	display: block;
	text-align: center;
}

[data-gallery] {
	position: relative;
	isolation: isolate;
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;

	/* [data-gallery] needs another child element to wrap the slides */
	/*
	::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1rem;
		background: var(--colour-callout);
		z-index: 2;

		transform: scaleX(calc(1 / var(--num-images)));
		transform-origin: 0 50%;
		animation: auto gallery-progress linear forwards;
		animation-timeline: --gallery1;
	}
	*/

	& figure {
		flex: 1 0 100%;
		scroll-snap-align: start;
		z-index: 1;
	}

	& picture {
		display: grid;
	}

	&:first-of-type {
		--num-images: 3;

		scroll-timeline: --gallery1 inline;
	}

	&:last-of-type {
		--num-images: 3;

		scroll-timeline: --gallery1 inline;
	}
}

wacky-video {
	display: grid;

	isolation: isolate;

	& video,
	& .controls {
		grid-area: 1 / 1 / 2 / 2;
	}

	& .controls {
		align-self: end;
		z-index: 1;

		display: flex;
		gap: 1rem;

		padding: 1rem;
		background: var(--colour-shim-bg);

		& .progress {
			flex: 1;
		}

		& progress {
			width: 100%;
		}
	}
}

hr {
	--wh: 8rem;

	display: block;
	margin: 0 auto;
	border: 0;
	width: var(--wh);
	height: var(--wh);
	background-image: url("/submissions/oliver/assets/images/lemon.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}