@import "reset.css";
@import "variables.css";

::selection {
    background: light-dark(var(--third), var(--primary));
    color: var(--light);
}

body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    font-family: var(--font-base);
    font-size: clamp(0.75rem, 3vw, 1rem);
    background: var(--white);
    min-height: 100svh;

    @media (max-width: 1000px) {
        grid-template-rows: auto 1fr;
        grid-template-columns: auto;
        height: 100svh;
    }
}

:is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-headings);
    font-weight: 500;
    font-size: clamp(1rem, 3vw, 1.75rem);
    color: light-dark(var(--third), var(--primary));

    span {
        font-weight: 800;
    }
}

.button {
    --button-background: var(--white);
    --button-color: light-dark(var(--third), var(--primary));
    --button-border: transparent;

    background: var(--button-background);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 5vw, 3rem);
    border-radius: 100vw;
    color: var(--button-color);
    font-size: clamp(1rem, 2vw, 1.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    border: 2px solid var(--button-border);
    position: relative;
    isolation: isolate;

    &.--full {
        --button-background: linear-gradient(to bottom, var(--primary), var(--secondary)) border-box;
        --button-color: var(--light);

        font-weight: 600;
        position: relative;

        &::before {
            content:'';
            position: absolute;
            border-radius: inherit;
            background: var(--button-background);
            z-index: -1;
            transition: inherit;
            inset: -0.25rem;
            opacity: 0;
            filter: blur(1rem);
        }

        &:hover {
            scale: 1.01;

            &::before {
                opacity: 0.5;
            }
        }
    }

    &.--outline {
        --button-border: light-dark(var(--third), var(--primary));
    }
}

main {
    --main-padding: clamp(1.5rem, 5vw, 5rem);

    padding: var(--main-padding);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1.5rem;

    .logos {
        display: flex;

        .logos-track {
            padding: 0;
            list-style: none;
            display: flex;
            gap: clamp(2rem, 2vw, 3rem);
            align-items: center;

            @media (prefers-color-scheme: dark) {
                filter: brightness(0) invert(1);
            }

            li {
                img {
                    height: 44px;
                    width: auto;
                    object-fit: contain;
                }

                span {
                    font-weight: 500;
                    white-space: nowrap;
                    border-radius: 1rem;
                    padding: clamp(0.25rem, 1vw, 0.5rem) clamp(1.25rem, 3vw, 2rem);
                    display: flex;
                    gap: 0.25rem;
                    align-items: center;
                    border: 2px dashed var(--black);
                    /*background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='black' stroke-width='2' stroke-dasharray='6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");*/

                    svg {
                        flex: 0 0 auto;
                        width: 1.25rem;
                        height: 1.25rem;
                        margin-left: -0.25rem;
                    }

                }
            }

        }

        @media (min-width: 1001px) {
            .logos-track[aria-hidden="true"] {
                display: none;
            }
        }

        @media (max-width: 1000px) {
            overflow: hidden;
            position: relative;
            margin-right: calc(var(--main-padding) * -1);
            margin-left: calc(var(--main-padding) * -1);

            &::before, &::after {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                width: 15vw;
                z-index: 1;
            }

            &::before {
                left: 0;
                background: linear-gradient(to right, var(--white) 0%, var(--white) 30%, transparent 100%);
            }

            &::after {
                right: 0;
                background: linear-gradient(to left, var(--white) 0%, var(--white) 30%, transparent 100%);
            }

            &:hover .logos-track {
                animation-play-state: paused;
            }

            .logos-track {
                flex: 0 0 auto;
                animation: scroll 20s linear infinite;
                will-change: transform;
                width: max-content;
                padding-right: 2rem;

                li {
                    flex: 0 0 auto;
                    img {
                        height: 30px;
                    }
                }
            }
        }
    }

    .main-content {
        display: grid;
        align-items: center;
        align-content: center;
        gap: clamp(1.5rem, 6vw, 5rem);
    }

    .title {
        width: min(40rem, 100%);
        display: grid;
        gap: clamp(1rem, 3vw, 2rem);

        img {
            width: min(60vw, 100%);

            @media (prefers-color-scheme: dark) {
                filter: brightness(0) invert(1);
            }
        }
    }

    .buttons {
        display: flex;
        gap: clamp(0.5rem, 2vw, 2rem);
        flex-wrap: wrap;

        @media (max-width: 1000px) {
            border-radius: 0 0 10vw 10vw;
            max-height: 50vh;
            display: grid;
        }
    }
}

aside {
    order: -1;
    overflow: hidden;

    img, picture {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    @media (max-width: 1000px) {
        clip-path: ellipse(150% 100% at 50% 0);
    }
}


@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}