@view-transition {
    navigation: auto;
}

@keyframes infinitescroll {
    0% {
        transform: translateY(0); /* Start at the top */
    }

    100% {
        transform: translateY(-100%); /* Move up by 50% of the content height */
    }
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

a:hover{
    text-decoration: underline;
    text-underline-offset: 8px;
}

::selection {
    background: #e3e31a;
}

#progress {
    background-color: #55a586;
    height: 10px;
    position: fixed;
    top: 0;
    left: 0;
    transform-origin: left center;
    width: 100%;
    z-index: 9;
    animation: progress linear;
    animation-timeline: scroll();
}

@keyframes progress {
    from {
        transform: scaleX(0);
    }
}

@keyframes reveal {
    from {
        opacity: 0;
        clip-path: inset(45% 20% 45% 20%);
    }

    to {
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);
    }
}

#sectionPin {
    height: 100vh;
    display: flex;
    background: var(--text-color);
    color: var(--bg-color);
    overflow: scroll;
}

.pin-wrap {
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 50px 10vw;
}

    .pin-wrap > * {
        min-width: 60vmax;
        margin: 0 2vmax;
    }

@supports(animation-timeline: view()) {
    @keyframes move {
        to {
            /* Move horizontally so that right edge is aligned against the viewport */
            transform: translateX(calc(-100% + 100vw));
        }
    }

    #sectionPin {
        /* Stretch it out, so that we create room for the horizontal scroll animation */
        height: 500vh;
        overflow: visible; /* To make position sticky work … */

        view-timeline-name: --section-pin-tl;
        view-timeline-axis: block;
    }

    .pin-wrap-sticky {
        /* Stick to Top */
        height: 100vh;
        width: 100vw;
        position: sticky;
        top: 0;
        width: 100vw;
        overflow-x: hidden;
    }

    .pin-wrap {
        height: 100vh;
        width: 300vmax;
        /* Hook animation */
        will-change: transform;
        animation: linear move forwards;
        /* Link animation to view-timeline */
        animation-timeline: --section-pin-tl;
        animation-range: contain 0% contain 100%;
    }
}