@layer demo.base, demo.components;

/* Animation bumps up the z-index, to make sure it’s on top */
@keyframes adjust-z-index {
    0% {
        z-index: 1;
    }
    50% {
        z-index: 100; /* When at the center, be on top */
    }
    100% {
        z-index: 1;
    }
}

/* Animation that rotates the cover */
@keyframes rotate-cover {
    0% {
        transform: translateX(-100%) rotateY(-45deg);
    }
    35% {
        transform: translateX(0) rotateY(-45deg);
    }
    50% {
        transform: rotateY(0deg) translateZ(1em) scale(1.5);
    }
    65% {
        transform: translateX(0) rotateY(45deg);
    }
    100% {
        transform: translateX(100%) rotateY(45deg);
    }
}

.cards li {
    /* Track this element as it intersects the scrollport */
    view-timeline-name: --li-in-and-out-of-view;
    view-timeline-axis: inline;

    /* Link an animation to the established view-timeline and have it run during the contain phase */
    animation: linear adjust-z-index both;
    animation-timeline: --li-in-and-out-of-view;

    /* Make the 3D stuff work… */
    perspective: 40em;

    position: relative;
    z-index: 1;
    will-change: z-index;

    user-select: none;
}

.cards li > img  {
    /* Link an animation to the established view-timeline (of the parent li) and have it run during the contain phase */
    animation: linear rotate-cover both;
    animation-timeline: --li-in-and-out-of-view;

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

    will-change: transform;
}

/* Animation that rotates the cover */
@keyframes rotate-cover--mt {
    0% {
        transform: translateX(-100%) rotateY(-45deg);
        left: auto; /* Workaround for https://crbug.com/1421690 */
    }
    35% {
        transform: translateX(0) rotateY(-45deg);
    }
    50% {
        transform: rotateY(0deg) translateZ(1em) scale(1.5);
    }
    65% {
        transform: translateX(0) rotateY(45deg);
    }
    100% {
        transform: translateX(100%) rotateY(45deg);
    }
}
#controls:has(#force-main-thread:checked) ~ .cards li > img {
    animation-name: rotate-cover--mt;
}

.is-embed #controls {
    display: none;
}

@layer demo {
	@layer base {
		.cards, .cards * {
			box-sizing: border-box;
			padding: 0;
			margin: 0;
		}

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

		@media (max-width: 1024px) {
			:root {
				--cover-size: 9rem;
			}
		}

		@media only screen 
		and (min-device-width: 375px) 
		and (max-device-width: 667px) 
		and (-webkit-min-device-pixel-ratio: 2) { 
			:root {
				--cover-size: 6rem;
			}
 	 }
		@media (max-width: 600px) {
			:root {
				--cover-size: 6rem;
			}
		}

		html, body {
			height: 100%;
			width: 100%;
			margin: 0;
			padding: 0;
		}

	
		.cards {
			list-style: none;
			overflow-x: scroll;
			width: 100%;
			white-space: nowrap;
			z-index: 1;
			
		}
    

		@layer scroll-snapping {
			/* only enable snapping when not dragging round*/
			#controls:has(#scroll-snapping:checked) ~ .cards:not(.active) {
				scroll-snap-type: x mandatory;
			}
			#controls:has(#scroll-snapping:checked) ~ .cards li {
				scroll-snap-align: center;
			}
		}

		.cards li {
			display: inline-block;
			/*width: var(--cover-size);*/
			height: var(--cover-size);
		}

		.cards li img  {
			display: block;
			/*width: var(--cover-size);*/
			height: var(--cover-size);

			-webkit-box-reflect: below 0.5em
				linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
		}
     
		.cards {
			/*--size: 6;
			min-height: calc(var(--cover-size) * 2.5);*/
			z-index: 1;
			width: calc(var(--cover-size) * var(--size));
			margin: 0 auto;
			padding: calc(var(--cover-size) / 3 * 2) 0;
			position: relative;
			max-width: 90vw;
		}

		/* Because the total size is 6, with 1 cover in the middle, there’s space for 5 left … so 2.5 on each side */
		/* Didn’t work (on the right): `calc(50% - (var(--cover-size) / 2));` */
		.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));
		}
	}

	@layer components {
		@layer warning {
			.warning {
				/*--size: 6;*/
				width: calc(var(--cover-size) * var(--size));
				margin: 0 auto !important;
				max-width: 90vw;
			}
		}

		
	}
}