/* Folded Card Animation */

/* Container for the cards to space them out */
.folded-card-section {
    width: 100%;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    perspective: 1000px;
}

.folded-card {
    display: flex;
    width: 100%;
    max-width: 1000px;
    /* Limit width */
    aspect-ratio: 1280 / 304;
    animation: crunch 4s 1s ease-in-out infinite;
}

.folded-card .fold {
    flex: 1;
    background-size: cover;
    background-repeat: no-repeat;
    animation: fold-animation 4s 1s ease-in-out infinite;
}

/* Background positions for 5 folds */
.folded-card .fold:nth-child(1) {
    background-position: 0% 0;
    border-radius: 1rem 0 0 1rem;
}

.folded-card .fold:nth-child(2) {
    background-position: 25% 0;
}

.folded-card .fold:nth-child(3) {
    background-position: 50% 0;
}

.folded-card .fold:nth-child(4) {
    background-position: 75% 0;
}

.folded-card .fold:nth-child(5) {
    background-position: 100% 0;
    border-radius: 0 1rem 1rem 0;
}

/* Odd folds skew positive, Even folds skew negative */
.folded-card .fold:nth-child(odd) {
    animation-name: odd-fold;
}

.folded-card .fold:nth-child(even) {
    animation-name: even-fold;
}

/* Keyframes */
@keyframes crunch {

    0%,
    100% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(0.6);
    }
}

@keyframes odd-fold {

    0%,
    100% {
        transform: skewY(0deg);
        filter: brightness(1);
    }

    50% {
        transform: skewY(15deg);
        filter: brightness(1.25);
    }
}

@keyframes even-fold {

    0%,
    100% {
        transform: skewY(0deg);
        filter: brightness(1);
    }

    50% {
        transform: skewY(-15deg);
        filter: brightness(0.75);
    }
}