#works {
    overflow: hidden;
    background-color: var(--frontpage-section);
}

#works.block:has(.content) .content {
    padding: 120px 0;
    transition: opacity 0.6s ease, transform 0.6s ease;

    & .title-section {
        opacity: 0;
        transform: translateX(120px);
        transition: transform .3s ease-in-out, opacity .3s ease-in-out;
    }

    & .card-timeline {
        position: relative;
        padding-left:92px;

        & .card-item:before {
            position: absolute;
            left: 4px;
            width: 2px;
            top: 10px;
            height: calc(100% - 65px);
            content: '';
            background: linear-gradient(var(--wp--preset--color--green), transparent);
        }

        & .card-item {
            width: 100%;
            position: relative;
            padding-left: 40px;
            padding-bottom: 50px;
            z-index: 1;
            line-height: 1.5;
            gap: 0;
            opacity: 0;
            transform: translateX(120px);
            transition: transform .3s ease-in-out, opacity .3s ease-in-out, color .3s ease-in-out;

            & h3 {
                margin-bottom: .5rem;
            }

            & figure {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%) translateX(0) rotate(6deg) scale(1);
                border-radius: 6px;
                width: 175px;
                overflow: hidden;
                display: none;
                pointer-events: none;
                transition: transform 1s ease-in-out;

                & img {
                    width: 100%;
                }
            }

            & figure:after {
                content: '';
                position: inherit;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,.6);
                transition: background-color .3s ease-in-out;
            }
        }

        & .card-item:after {
            content: attr(data-year);
            position: absolute;
            top: 3px;
            left: -3px;
            width: 16px;
            height: 16px;
            line-height: 1;
            border: 1px solid var(--wp--preset--color--green);
            text-indent: -90px;
            border-radius: 50%;
            font-size: 16px;
            background-color: var(--wp--preset--color--green);
            box-shadow: 0 0 15px var(--wp--preset--color--green);
        }

        & .card-item:hover {
            color: var(--wp--preset--color--white);

            & figure:after {
                background-color: rgba(0, 0, 0, 0);
            }

        }

        & .card-item:last-child {
            padding-bottom: 0;
        }

        & .card-item:last-child:before {
            height: calc(100% - 16px);
        }

        .card-item.animate,
        .card-item.animate-back {
            & figure {
                animation: site-card-bounce 1s forwards ease-in-out;
            }
        }

        .card-item.animate {
            animation: z-index-bounce 1s forwards ease-in-out;
        }

        .card-item.animate-back {
            animation: z-index-bounce-reverse 1s forwards ease-in-out;
        }

        .card-item.animate:last-child {
            & figure {
                animation: last-site-card-bounce 1s forwards ease-in-out !important;
            }
        }

        .card-item.animate-back:last-child {
            & figure {
                animation: last-site-card-bounce-reverse 1s forwards ease-in-out !important;
            }
        }
    }
}

#works.block:has(.content) .content .title-section.animate-in,
#works.block:has(.content) .content .card-timeline .card-item.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* animations */

@keyframes site-card-bounce {
    0% {
        transform: translateY(-50%) translateX(0) rotate(6deg) scale(1);
    }
    50% {
        transform: translateY(-50%) translateX(250px) rotate(16deg) scale(1.05);
    }
    100% {
        transform: translateY(-50%) translateX(0) rotate(6deg) scale(1.1);
    }
}


@keyframes site-card-bounce-reverse {
    0% {
        transform: translateY(-50%) translateX(0) rotate(6deg) scale(1.1);
    }
    50% {
        transform: translateY(-50%) translateX(-250px) rotate(-6deg) scale(1.05);
    }
    100% {
        transform: translateY(-50%) translateX(0) rotate(6deg) scale(1);
    }
}


@keyframes last-site-card-bounce {
    0% {
        transform: translateY(-50%) translateX(0) rotate(6deg) scale(1);
    }
    50% {
        transform: translateY(-50%) translateX(100px) rotate(16deg) scale(1.05);
    }
    100% {
        transform: translateY(-50%) translateX(0) rotate(6deg) scale(1.1);
    }
}

@keyframes last-site-card-bounce-reverse {
    0% {
        transform: translateY(-50%) translateX(0) rotate(6deg) scale(1.1);
    }
    50% {
        transform: translateY(-50%) translateX(100px) rotate(16deg) scale(1.05);
    }
    100% {
        transform: translateY(-50%) translateX(0) rotate(6deg) scale(1);
    }
}

@keyframes z-index-bounce {
    0% {
        z-index: 1;
    }
    70% {
        z-index: 2;
    }
    100% {
        z-index: 2;
    }
}

@keyframes z-index-bounce-reverse {
    0% {
        z-index: 2;
    }
    30% {
        z-index: 2;
    }
    100% {
        z-index: 1;
    }
}

@media (min-width: 1024px) {
    
    #works.block:has(.content) .content .card-timeline .card-item {
        padding-right: 200px;
    }

    #works.block:has(.content) .content .card-timeline .card-item figure {
        display: grid;
    }
}

body.is-chromium {
    #works.block:has(.content) .content {
        & .card-timeline {
            & .card-item {
                & figure {
                    & img {
                        border-radius: 2rem;
                        corner-shape: squircle;
                    }
                }
            }
        }
    }
}