.pitch-button {
    position: relative;
    overflow: hidden;
    border-radius: 9999px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    background-color: rgb(var(--color-oxq-black));
    color: rgb(var(--color-oxq-white));

    .on-hover {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip-path: inset(0 100% 0 0 round 0 9999px 9999px 0);
        transition: clip-path .3s ease-in-out;
        background-color: rgb(var(--color-oxq-red));
        color: rgb(var(--color-oxq-white));
    }

    &:hover .on-hover {
        @media screen and (min-width: 1025px) {
            clip-path: inset(0 0 0 0 round 0 9999px 9999px 0);
        }
    }

    &.pitch-button--inverted {
        background-color: rgb(var(--color-oxq-red));

        .on-hover {
            background-color: rgb(var(--color-oxq-black));
        }
    }
}

.pitch-container {
    --left-height: 0px;
    --cta-height: 0px;

    .pitch-right {
        padding-bottom: var(--cta-height);
    }

    *:has(+ .cta:not(:empty)) {
        margin-bottom: 0;
    }

    .cta {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to top,
        rgba(var(--color-oxq-white), 1) 78%,
        rgba(var(--color-oxq-white), 0.82) 82%,
        rgba(var(--color-oxq-white), 0.6) 86%,
        rgba(var(--color-oxq-white), 0.38) 90.4%,
        rgba(var(--color-oxq-white), 0.18) 95.2%,
        rgba(var(--color-oxq-white), 0.04) 98%,
        transparent 100%
        );
    }

    @media (min-width: 1024px) {

        .pitch-content {
            position: relative;
            height: 100dvh;
        }

        .content-divider {
            height: 100dvh;
        }

        .pitch-right {
            scrollbar-width: none;
            height: 100dvh;
            overflow: auto;
            padding-block: calc((100dvh - var(--left-height)) / 2);

            .cta {
                position: sticky;
                bottom: calc((100dvh - var(--left-height)) / -2);
                border-top: none;
            }

            &::-webkit-scrollbar {
                display: none;
            }
        }
    }

    .logo-container {
        .oxq-logo-letter-wrapper {
            --logo-height: 28px;
        }
    }

    @media (min-width: 1281px) {
        .logo-container {
            .oxq-logo-letter-wrapper {
                --logo-height: 40px;
            }
        }
    }

    .pitch-scrollbar {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        height: var(--left-height);
        width: 4px;
        border-radius: 2px;
    }

    .pitch-scrollbar-thumb {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border-radius: 2px;
        background: rgb(var(--color-oxq-black-100));
        cursor: grab;
        transition: background 0.2s;

        &:hover {
            background: rgb(var(--color-oxq-black));
        }

        &:active {
            cursor: grabbing;
        }
    }
}