body {
	overflow: hidden;
}

#backgrounds {
	position: absolute;
	width: 100vw;
	height: 100vh;
}

#backgrounds img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*Content*/
#collections {
	position: relative;
	width: 100vw;
	height: 100vh;
	
	padding: 10rem;
	box-sizing: border-box;

	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 2rem;
}

.collection {
	position: relative;
	flex: 0 0 calc((100% - (2rem * 4)) / 4);

	aspect-ratio: 16/9;
	background-color: blue;

	border-radius: 1rem;
	overflow: hidden;
}

.collection > img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.collection > p {
	position: absolute;
	color: white;

	width: 100%;
	margin-top: 0;
	top: 50%;
	transform: translateY(-50%);
	font: 200 clamp(1.25rem, 2vw, 2rem) 'Kanit', sans-serif;
	text-shadow: 0 2px 12px black;
	text-align: center;
}

#collections + .returnButton,
.indexPhotosReturnButton {
	position: absolute;
	top: 50%;
	right: 3rem;
	bottom: auto;
	left: auto;
	transform: translateY(-50%);
}

.indexPhotosCollections {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	z-index: 4;
}

.indexPhotosCollections.isVisible,
.indexPhotosCollections.isLeaving,
.indexPhotosReturnButton.isVisible {
	opacity: 1;
}

.indexPhotosCollections.isVisible,
.indexPhotosReturnButton.isVisible {
	pointer-events: auto;
}

.indexPhotosCollections > .collection {
	opacity: 0;
	transform: translateX(-25vw);
	transition: transform 1s cubic-bezier(.2, .9, .25, 1), opacity .35s ease;
	transition-delay: var(--collectionDelay, 0ms);
}

.indexPhotosCollections.isLeaving > .collection {
	transition-delay: 0ms;
}

.indexPhotosCollections.isVisible > .collection {
	opacity: 1;
	transform: translateX(0);
}

.indexPhotosReturnButton {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) translateX(-25vw);
	z-index: 5;
}

.indexPhotosReturnButton.isVisible {
	animation: photosReturnButtonSlideIn 1s cubic-bezier(.2, .9, .25, 1) both;
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

@keyframes photosReturnButtonSlideIn {
	from {
		opacity: 0;
		transform: translateY(-50%) translateX(-25vw);
	}

	to {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}