/* ----------------------------cover flow------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------- */
.cards-wrapper,
.cards-wrapper * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* html,
body {
width: 100%;
margin: 0;
padding: 0;
margin-bottom: 160px;
}

body {
display: flex;
flex-direction: column;
gap: 1em;
padding: 1em;
place-content: safe center;
overscroll-behavior: contain;
box-sizing: border-box;
padding-bottom: 200px;
} */

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

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

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


@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.8);
    }

    65% {
        transform: translateX(0) rotateY(45deg);
    }

    100% {
        transform: translateX(100%) rotateY(45deg);
    }
}

.photo-cards-section .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cards-wrapper {
    overflow-x: scroll;
    --size: 6;
    min-height: calc(var(--cover-size) * 2.5);
    width: calc(var(--cover-size) * var(--size));
    margin-bottom: 1rem;
    padding: calc(var(--cover-size) / 3 * 2) 0;
    position: relative;
    max-width: 90vw;
    outline: 1px solid #333;
    background: rgba(0, 0, 0, 1);
}

.cards {
    list-style: none;
    /*no line break, control in one line*/
    white-space: nowrap;
    /* overflow: scroll; */
    /* max-width: calc(var(--cover-size) * 6); */
}

/* An animation on the li elements, changing the z-index
An animation on the img elements, rotating them in 3D. */

/* Note that key here is that the transforms happen on the imgs, not the lis. If the li elements were transformed, the total scroll distance of the scroller would be affected, causing a flickering effect. By rotating the imgs inside the lis, the size of the li elements – and thus the total scroll distance – remain unchanged. */
.cards li {
    display: inline-block;
    width: var(--cover-size);
    height: var(--cover-size);

    /* 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的值越小，深度感越强*/
    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: flash of unstyled content */
    transform: translateX(-100%) rotateY(-45deg);

    will-change: transform;
    width: 100%;
    height: auto;
    /* -webkit-box-reflect: below 0.5em linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); */
}

/* 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));
}