/* ==========================================================
   PROJECTS MARQUEE
========================================================== */

.ap-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 10px 0 30px;
}


/* ==========================================================
   TRACK
========================================================== */

.ap-marquee-track {
    display: flex;

    width: max-content;

    gap: 24px;

    animation:
        ap-marquee-scroll
        var(--ap-speed, 45s)
        linear
        infinite;

    will-change: transform;
}


/* ==========================================================
   PAUSE ON HOVER
========================================================== */

.ap-marquee:hover
.ap-marquee-track {
    animation-play-state: paused;
}


/* ==========================================================
   PROJECT CARD
========================================================== */

.ap-marquee
.ap-project {
    flex: 0 0
        clamp(
            280px,
            32vw,
            520px
        );

    width:
        clamp(
            280px,
            32vw,
            520px
        );
}


/* ==========================================================
   PREVIEW
========================================================== */

.ap-marquee
.ap-project-preview {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    border-radius: 18px;

    background: #111;
}


/* ==========================================================
   MEDIA
========================================================== */

.ap-marquee
.ap-project-preview img,

.ap-marquee
.ap-project-preview video {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        .8s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


/* ==========================================================
   HOVER SCALE
========================================================== */

.ap-marquee
.ap-project:hover
.ap-project-preview img,

.ap-marquee
.ap-project:hover
.ap-project-preview video {

    transform:
        scale(1.06);
}


/* ==========================================================
   OVERLAY
========================================================== */

.ap-marquee
.ap-project-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(
            0,
            0,
            0,
            .22
        );

    opacity: 0;

    transition:
        opacity
        .35s
        ease;
}


.ap-marquee
.ap-project:hover
.ap-project-overlay {

    opacity: 1;
}


/* ==========================================================
   VIEW LIVE DEMO
========================================================== */

.ap-project-overlay span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        11px 17px;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            .96
        );

    color: #000;

    font-size: 13px;

    font-weight: 500;

    transform:
        translateY(8px);

    transition:
        transform
        .35s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


.ap-marquee
.ap-project:hover
.ap-project-overlay span {

    transform:
        translateY(0);
}


/* ==========================================================
   PROJECT INFO
========================================================== */

.ap-marquee
.ap-project-info {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 14px;
}


.ap-marquee
.ap-project-info h3 {

    margin:
        4px 0 0;

    font-size:
        clamp(
            18px,
            2vw,
            24px
        );

    font-weight: 500;

    letter-spacing:
        -.025em;
}


.ap-marquee
.ap-project-category {

    display: block;

    font-size: 10px;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

    opacity: .5;
}


.ap-marquee
.ap-arrow {

    font-size: 22px;

    transition:
        transform
        .3s
        ease;
}


.ap-marquee
.ap-project:hover
.ap-arrow {

    transform:
        translateX(5px);
}


.ap-marquee
.ap-project-description {

    margin-top: 7px;

    max-width: 460px;

    color:
        rgba(
            0,
            0,
            0,
            .55
        );

    font-size: 13px;

    line-height: 1.6;
}


/* ==========================================================
   MARQUEE ANIMATION
========================================================== */

@keyframes ap-marquee-scroll {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(
                calc(
                    -50%
                    - 12px
                )
            );
    }

}


/* ==========================================================
   EDGE FADE
========================================================== */

.ap-marquee::before,
.ap-marquee::after {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 100px;

    z-index: 5;

    pointer-events: none;
}


.ap-marquee::before {

    left: 0;

    background:
        linear-gradient(
            90deg,
            var(
                --ap-background,
                #fff
            ),
            transparent
        );
}


.ap-marquee::after {

    right: 0;

    background:
        linear-gradient(
            270deg,
            var(
                --ap-background,
                #fff
            ),
            transparent
        );
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .ap-marquee {

        padding:
            5px 0 25px;
    }


    .ap-marquee-track {

        gap: 16px;

        animation-duration:
            var(--ap-mobile-speed, 35s);
    }


    .ap-marquee
    .ap-project {

        flex-basis:
            78vw;

        width:
            78vw;
    }


    .ap-marquee
    .ap-project-preview {

        border-radius:
            14px;

        aspect-ratio:
            4 / 3;
    }


    .ap-marquee
    .ap-project-overlay {

        opacity: 1;

        background:
            linear-gradient(
                180deg,
                transparent 55%,
                rgba(0,0,0,.2)
            );
    }


    .ap-marquee
    .ap-project-overlay span {

        display: none;
    }


    .ap-marquee::before,
    .ap-marquee::after {

        width: 35px;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    .ap-marquee-track {

        animation:
            none;
    }

}