@charset "utf-8";

:root {--cover-size: 10rem;}

@media screen and (min-width: 768px) {
 	:root {--cover-size: 12rem;}
}

@media screen and (min-width: 1400px) {
		:root {--cover-size: 14rem;}
}

		.gallery {position:relative;
			width: 100%;
			margin:0;
			background: #000008;
			font-family: sans-serif;
			display: flex;
			gap: 1em;
			padding-bottom: 50px;
			padding-top: 100px;
			place-content: safe center;
			overscroll-behavior: contain;
		}

		.cards {
			list-style: none;
			overflow-x: scroll;	
			white-space: nowrap;
			outline: 0px solid #333;
		/*	max-width: calc(var(--cover-size) * 6);*/
			max-width: 97vw; /* overides the max-width above */
			background: #000008;
			scroll-snap-type: x mandatory;
			-webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
  			scroll-behavior: smooth; /* Smooth scrolling */
		}
		.cards:hover{cursor:grabbing;}
		.cards {
			--size: 6;
			min-height: calc(var(--cover-size) * 2.5);/*changes the bottom padding */
			margin: 0 auto;
			padding: calc(var(--cover-size) /4 * 2) 0; /* changes the top padding */ 
			position: relative;
		}

	/*Scrollbar style*/
		/* width */
		
		.cards::-webkit-scrollbar {
  		height: 5px;
		}

		/* Track */
		.cards::-webkit-scrollbar-track {
  		background: #555;
		border-radius: 50%;
		}
 
		/* Handle */
		.cards::-webkit-scrollbar-thumb {
  		background: #D55140;
  		border-radius: 50%;
		}

		/* Handle on hover */
		.cards::-webkit-scrollbar-thumb:hover {
 		cursor: pointer;
		}	
	
	/* Hide scrollbar on small screens */
	@media (max-width: 993px) {
		.cards::-webkit-scrollbar {
    		display: none;
		}

		.cards {
  			-ms-overflow-style: none;
  			scrollbar-width: none; 
		} /* Hide scrollbar for IE, Edge and Firefox */
	}

		.cards li {
			display: inline-block;
			width: var(--cover-size);
			height: var(--cover-size);
			scroll-snap-align: center;
			margin: 0 10vw;
		}
		/* photos reflections */
		.cards li img {
			display: block;
			width: var(--cover-size);
			height: auto;
			border-radius: 8px;
			outline: 1px solid #1f1f1f;
			-webkit-box-reflect: below 0.5em linear-gradient(to top, rgb(0 0 0 / 35%), rgb(0 0 0 / 0%), rgb(0 0 0 / 0%), rgb(0 0 0 / 0%), rgb(0 0 0 / 0%));
		}

		/* Margin first and last photos */

		.cards li:first-of-type {
			margin-left: calc(50% - (var(--cover-size) / 2));
		}
		.cards li:last-of-type {
			margin-right: calc(50% - (var(--cover-size) / 2));
		}
		/* Animation z-index, to make sure it’s on top */
		@keyframes adjust-z-index {
			0% {z-index: 1;}
			50% {z-index: 50;} /* When at the center, be on top */
			100% {z-index: 1;}
		}

		/* Variation less rotation and Scale for mobile*/
		@keyframes rotate-cover {
			0% {transform: translateX(-100%) rotateY(-25deg);}
			35% {transform: translateX(0) rotateY(-35deg);}
			50% {transform: translateZ(1em) rotateY(0deg) scale(1.6);}
			65% {transform: translateX(0) rotateY(35deg);}
			100% {transform: translateX(100%) rotateY(25deg);}
		}

		/* Animation that rotates the cover */
	@media screen and (min-width: 768px) {
		@keyframes rotate-cover {
			0% {transform: rotateY(-45deg);}
			35% {transform: rotateY(-45deg);}
			50% {transform: rotateY(0deg) scale(1.5);}
			65% {transform: rotateY(45deg);}
			100% {transform: rotateY(45deg);}
		}
		.cards li {margin: 0;} /*less margin between li */
	}

		.cards li {
			/* scroll controlled animation */
			/* Track this element as it intersects the scrollport */
			view-timeline-name: --slide-in-view;
			view-timeline-axis: inline;

			
			animation: linear adjust-z-index both;
			animation-timeline: --slide-in-view;

			/* 3D */
			perspective: 40em;
			position: relative;
			z-index: 1;
			will-change: z-index;
			-webkit-user-select: none;
			user-select: none;
		}

		.cards li > img {
			/* Link an animation to the view-timeline */
			animation: linear rotate-cover both;
			animation-timeline: --slide-in-view;

			/* Prevent FOUC */
			transform: translateX(-100%) rotateY(-45deg);
			will-change: transform;
		}

/*
.perspective {  
	position: relative;
  	height: 600px;
  	perspective: 800px;
	padding-bottom: 0px;
	margin-bottom: 100px;
}
.perspective img{display:block; border-radius:10px; outline:1px solid #1f1f1f;}
.about-left, .about-right{transform-style: preserve-3d;}
.about-left, .about-right, .about-center{-webkit-box-reflect: below 2em linear-gradient(to top, rgb(0 0 0 / 35%), rgb(0 0 0 / 0%), rgb(0 0 0 / 0%), rgb(0 0 0 / 0%), rgb(0 0 0 / 0%));}
.about-right {transform: rotateY(-20deg) scale(0.7);}
.about-left {transform: rotateY(20deg) scale(0.7);}
.about-center {transform: scale(1); z-index:5;}
.to-left {position: absolute; left:0px;}
.to-right {position: absolute; right:0px;}