@import url("./vars.css");
@import url("./reset.css");
@import url("./keyframes.css");

/* Main */

main {

    .partA-content, .partB, .partC {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        overflow-x: clip;

        *, *::before, *::after { 
            transform-style: preserve-3d;
        }

        @media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
            perspective: 800px;
            perspective-origin: center min(100% - 50vh, max(50vh, var(--scrollY, 0) * 1px - 70vh));
        }
    }
    
    .partA {
        position: sticky;
        top: 0;

        --insetTop: -25vh;
        --insetBottom: -15em;

        .partA-content {
            position: sticky;
            bottom: 0;
            gap: 3em;
        }
    }

    .partB {
        position: relative;
        padding-block: 10em;
        
        @media (min-width: 601px) {
            perspective-origin: center calc((var(--scrollY, 0) - var(--midB, 0)) * 1px + 50vh);
        }
        
        z-index: var(--z-content);
    }
    
    .partC {
        position: relative;
        padding-top: 15em;
        gap: 15em;
        
        --insetTop: -15em;
        
        .backwall  {
            background-color: var(--clr-darkRed);
        }
    }

    .vhSpacer {
        height: 120vh;

        @media (prefers-reduced-motion: reduce) {
            display: none;
        }
    }

}

/* backwalls */

.backwall-blobs {
    position: fixed;
    inset: 0;
    z-index: var(--z-back);

    --backwall_pos: max(0, var(--scrollY, 0) - var(--innerHeight, 0) * 1.2);
    --_blob_opacity: min(1, (var(--backwall_pos, 0) / var(--innerHeight, 1)) * 2);
    --duration: 1s;
    
    @media (prefers-reduced-motion: reduce) {
        --duration: 15s;
    }

    .backwall-blob {
        position: absolute;
        top: -50em; left: -50em;
        width: 100em; height: 100em;
        background-image: radial-gradient(closest-side, var(--_color), 25%, transparent);
        opacity: var(--_blob_opacity);

        &:nth-child(1) {
            --_color: var(--clr-neon-2);
            animation:
                blob-x calc(var(--duration) * 10) calc(var(--duration) * -5) infinite ease-in-out alternate,
                blob-y calc(var(--duration) * 8) calc(var(--duration) * -6) infinite ease-in-out alternate;
        }
        &:nth-child(2) {
            --_color: var(--clr-neon-3);
            animation:
                blob-x calc(var(--duration) * 9) calc(var(--duration) * -7) infinite ease-in-out alternate,
                blob-y calc(var(--duration) * 7) calc(var(--duration) * -8) infinite ease-in-out alternate;
        }
        &:nth-child(3) {
            --_color: var(--clr-neon-5);
            animation:
                blob-x calc(var(--duration) * 6) calc(var(--duration) * -9) infinite ease-in-out alternate,
                blob-y calc(var(--duration) * 9) calc(var(--duration) * -10) infinite ease-in-out alternate;
        }
    }

}

.backwall {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: clip;
    z-index: var(--z-back);

    &.backwall-hex {
        background-image:
            url("data:image/svg+xml, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='75' height='125' viewbox='0 0 70 80'%3E%3Cpath fill='%23000' d='M34.641 0L69.282 20L69.282 60L34.641 80L0 60L0 20Z'%3E%3C/path%3E%3C/svg%3E%0A"),
            url("data:image/svg+xml, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='75' height='125' viewbox='0 0 70 80'%3E%3Cpath fill='%23000' d='M34.641 0L69.282 20L69.282 60L34.641 80L0 60L0 20Z'%3E%3C/path%3E%3C/svg%3E%0A");
        background-size: 1.2em 2em;
        background-position: 0 0, 0.6em 1em;
        
        @media (min-width: 601px) {
            inset: var(--insetTop, 0) -25vw var(--insetBottom, 0);
            transform: translateZ(var(--depth));
            background-size: 1.8em 3em;
            background-position: 0 0, 0.9em 1.5em;
        }
    }

    &.invert {
        filter: invert(calc(var(--mid-pos) / 1.25));
    }

    &.backwall-sqr {
        box-shadow: 0 0 2em #000;
        background-image:
            repeating-linear-gradient(-30deg, #ddd 0, #fff8, #ddd 8px),
            linear-gradient(0deg, #777 15em, transparent 30em),
            linear-gradient(180deg, #777 15em, transparent 30em);
        
        @media (min-width: 601px) {
            inset: var(--insetTop, 0) -25vw var(--insetBottom, 0);
            transform: translateZ(var(--depth));
        }
    }
}

/* front */

.front {
    position: relative;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: var(--z-top);

    .front-content {
        position: absolute;
        inset: 0;
        overflow: clip;
        filter: drop-shadow(0 0 1em black);
    }

    img {
        width: min(15em, 60vmin);
        aspect-ratio: 1;
        rotate: calc(min(var(--front-pos), 0.35) / 0.35 * -90deg);
        transition: rotate ease-out 0.1s;
    }
    
    .front-left, .front-right {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        background-image: repeating-linear-gradient(30deg, #ccc 0, #ddd, #ccc 4px);
        translate: calc(max(var(--front-pos) - 0.4, 0) / 0.6 * var(--translate, 0));
        transition: translate ease-out 0.2s;
    }

    .front-left {
        clip-path: polygon(0 0, 50.05% 0, 50.05% 100%, 0 100%);
        --translate: -50.1%
    }
    
    .front-right {
        clip-path: polygon(49.95% 0, 100% 0, 100% 100%, 49.95% 100%);
        --translate: 50.1%
    }

    .front-scroll {
        position: absolute;
        left: 50%; bottom: 1em;
        color: var(--clr-darkBlue);
        font-weight: 700;
        font-style: italic;
        opacity: calc(1 - min(var(--front-pos), 0.5) * 2);
        translate: -50%
    }

    @media (prefers-reduced-motion: reduce) {
        display: none;
    }
}

section.content {
    width: min(100%, 720px);
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 2em;
    border: 1px solid var(--clr-mid);
    background-color: var(--clr-surface);
    z-index: var(--z-content);

    header {
        color: var(--clr-neon-1);
        border-bottom: 1px solid currentColor;
    }

    p {
        font-size: 1.2em;
        line-height: 1.5;
        font-weight: 300;
    }

    &.light {
        background-color: var(--clr-surface-light);
    }
}

section.content-clear {
    width: min(100%, 720px);
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    text-align: center;
}

.hero {
    position: relative;
    width: 100%; height: 100vh;
    
    .hero-content {
        position: sticky;
        top: 0%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        transform: translateZ(calc((1 - var(--front-pos)) * var(--depth) * 3));
        transition: all ease-out 0.2s;
    }
    
    h1 {
        position: relative;
        font-size: min(120px, 12vw);
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.05em;
        line-height: 1.3;

        .full {
            position: absolute;
            right: 50%; bottom: 66%;
        }

        .outline {
            color: var(--clr-background);
            text-shadow:
                0 0 1px var(--clr-neon-1),
                0 0 2px var(--clr-neon-1),
                0 0 3px var(--clr-neon-1),
                0 0 5px var(--clr-neon-1),
                0 0 8px var(--clr-neon-1),
                0 0 13px var(--clr-neon-1);
        }
    }

    .hero-name {
        font-size: 1.5em;
        padding: 0.5em 1em;
        border-top: 2px solid currentColor;
    }

    .hero-hexagon {
        position: absolute;
        inset: 50%;
        font-size: min(16px, 1.6vw);
        transform: rotateY(-45deg) rotateX(35deg);
        
        @media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
            animation: heroHexagon 16s infinite linear;
        }

        .side {
            position: absolute;
            transform: 
                rotateZ(calc(var(--s) * 60deg))
                translateY(16.8em);
        }

        i {
            position: absolute;
            inset: -0.5em -10em;
            rotate: x calc(var(--i) * 30deg);
            border-radius: 1em;
            background-image:
                linear-gradient(0deg, transparent, var(--clr-background), transparent),
                linear-gradient(90deg, var(--clr-neon-6), var(--clr-neon-5), var(--clr-neon-6));
            background-size: 100% 100%, 300% 100%;
            background-position-x: 0, 1em;
            animation: heroHexagonColor 6s calc(var(--s) * -1s)  infinite linear;
        }
    }
}

.marquee {
    position: relative;
    width: 100%;
    height: 10em;
    rotate: -2deg;
    margin-bottom: 10em;

    .marquee-back {
        position: absolute;
        inset: 0 -25%;
        /* background-color: var(--clr-surface); */
        border: 4px solid var(--clr-mid);
        transform: translateZ(calc(var(--depth) * 0.5));
    }

    p {
        position: absolute;
        inset: 50%;
    }

    span {
        --_depth: calc(sin((var(--i) / 20) * 3000deg) * 5em + 200em);
        --yOffset: calc(sin((var(--i) / 20) * 3100deg) * 2em);
        --delay: calc(var(--i) * -1.5s);

        position: absolute;
        top: 0%; left: 0%;
        white-space: nowrap;
        font-weight: 300;
        font-style: italic;
        font-size: 1.2em;
        padding: 0.5em 1.5em;
        background-color: var(--clr-background);
        border-radius: 3em;
        border: 0.2em solid var(--color);
        backface-visibility: hidden;
        animation: marqueeText 30s var(--delay, 0s) cubic-bezier(0, 0.8, 1, 0.2) infinite;
        
        &:nth-child(8n + 0) { --color: var(--clr-neon-0); }
        &:nth-child(8n + 1) { --color: var(--clr-neon-1); }
        &:nth-child(8n + 2) { --color: var(--clr-neon-2); }
        &:nth-child(8n + 3) { --color: var(--clr-neon-3); }
        &:nth-child(8n + 4) { --color: var(--clr-neon-4); }
        &:nth-child(8n + 5) { --color: var(--clr-neon-5); }
        &:nth-child(8n + 6) { --color: var(--clr-neon-6); }
        &:nth-child(8n + 7) { --color: var(--clr-neon-7); }
    }

    @media (max-width: 600px) or (prefers-reduced-motion: reduce) {
        display: none;
    }

}

.bio ul {
    list-style: none;
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
    padding-top: 1em;
    border-top: 1px solid var(--clr-mid);

    a {
        display: block;
        line-height: 1;
        /* width: min-content; */
        text-align: center;
    }
}

.playerCard {
    width: min(90vw, 20em);
    aspect-ratio: 9 / 16;
    margin-inline: auto;
    container-type: inline-size;

    @media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
        animation: playerCard 16s infinite linear;
    }

    .playerCard-back {
        position: absolute;
        inset: 0;
        transform: translateZ(calc(var(--depth) * 0.1));
    }
    .playerCard-front {
        position: absolute;
        inset: 0;
    }

    .playerCard-available {
        position: absolute;
        inset: 0;

        p {
            position: absolute;
            left: 50%; bottom: 14cqi;
            white-space: nowrap;
            font-size: 5cqi;
            translate: -50%;
            padding: 0.25em 0.75em;
            border-radius: 2em;
            font-weight: 700;
            border: 1cqi solid currentColor;
            
            &.base {
                color: var(--clr-background);
                filter: blur(0.2em);
                opacity: 0.75;
            }
            &.top {
                transform: translateZ(calc(var(--depth) * -0.1));
            }
        }
    }
}

.logoGrid {
    position: relative;
    width: min(100%, 720px);

    h3 {
        text-align: center;
    }

    .logos {
        position: relative;
        width: 100%;
        padding-top: 20%;
        /* background-color: var(--clr-surface); */
        border-top: 1px solid var(--clr-mid);
        filter:
            brightness(1.5)
            drop-shadow(0 0 0.5em black)
            drop-shadow(0 0 0.75em black)
            drop-shadow(0 0 1em #fff7);
    }

    .logoItem {
        position: absolute;
        top: 0; left: calc(var(--gridPos) * 20%);
        width: 20%; height: 100%;
        background-image: url("../assets/logos2.png");
        background-size: 500% 500%;
        background-position: var(--xPos) var(--yPos);
        scale: 0.75;
        animation: logoItem 10s;
    }

    .logoGrid-back {
        display: none;

        @media (min-width: 601px) {
            display: block;
            position: absolute;
            inset: -6em;
            border-radius: 1em;
            box-shadow: 
                0 0 1em var(--clr-neon-3),
                0 0 1em var(--clr-neon-3) inset;
            animation: gridBack 20s infinite linear;
        }
    }
}

.cta {
    a {
        align-self: center;
    }
}

.midAnimation {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    width: 100%;
    height: 100vh;

    img {
        width: min(60vw, 10em);
        transform: translateZ(calc(var(--depth) * 0.5));
        filter:
            invert(calc(0.2 + 0.8 * var(--mid-pos)))
            drop-shadow(0 0 calc(var(--mid-pos) * 9em + 1em) var(--clr-neon-3))
            drop-shadow(0 0 calc(10em - var(--mid-pos) * 9em) #0004);
    }

    p {
        font-size: 1.5em;
        font-weight: 700;
        font-style: italic;
        text-shadow: 0 0 1em var(--clr-neon-0);
        opacity: calc(1 - var(--mid-pos));
    }
}

.sideProjects {

    ul {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(4, 100%);
        border-block: 1px solid var(--clr-mid);
        overflow-x: hidden;
        scroll-snap-type: x mandatory;

        @media (max-width: 600px) {
            overflow-x: scroll;
            -ms-overflow-style: none;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                display: none;
            }
        }
    }
    
    li {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        padding: 1em;
        scroll-snap-align: center;

        p {
            font-size: 1rem;
        }
        a {
            align-self: end;
        }
    }
    
    h4 {
        font-weight: 700;
        color: var(--clr-neon-2);
        
    }
    
    .sideProjects-control {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1em;
    
        button {
            width: 1.5em; height: 1.5em;
            color: var(--clr-neon-5);
            font-size: 1.5em;
            border: 1px solid var(--clr-mid);
        }
    
        span {
            width: 1em; height: 1em;
            background-color: var(--clr-neon-5);
            opacity: 0.2;
            transition: opacity 0.3s;
    
            &.active {
                opacity: 1;
            }
        }
    }
}

.images {
    width: min(100%, 720px);
    transform: translateZ(calc(var(--depth) * -0.5));

    @media (max-width: 600px) or (prefers-reduced-motion: reduce) {
        padding: 1em;
    }

    .imageGrid {
        display: grid;
        grid-template-areas:
            "A A B B B"
            "C C C D D";
        gap: 1em;
        width: min(100%, 720px);
        margin-inline: auto;
    
        img {
            width: 100%;
            height: 100%;
            border: 3px solid var(--clr-mid);
            border-radius: 1em;
            box-shadow: 0 0 0.5em var(--clr-neon-3);

            @media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
                animation: imageGrid 12s var(--delay) infinite ease-in-out alternate;
            }
    
            &:nth-child(1) { grid-area: A; --delay: 0s; }
            &:nth-child(2) { grid-area: B; --delay: -6s; }
            &:nth-child(3) { grid-area: C; --delay: -12s; }
            &:nth-child(4) { grid-area: D; --delay: -18s; }
        }
    }
}

.public {
    .buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2em;
        text-align: center;
    }

    .youtube {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
        background-color: var(--clr-neon-7);

        img {
            width: 1.5em;
        }
    }
}

.social {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 5em));
    justify-content: center;
    gap: 1em;
    
    a {
        width: 100%;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border-radius: 1em;
        background-color: var(--clr-surface);
        transition: filter 0.2s;
        box-shadow:
            0 0 0.1em var(--clr-neon-1) inset,
            0 0 1em var(--clr-neon-1) inset,
            0 0 0.1em var(--clr-neon-1),
            0 0 1em var(--clr-neon-1);

        &:hover {
            filter: invert(1);
        }
    }

    img {
        width: 2em;
    }
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    width:100%;
    background-color: var(--clr-background);
    border-top: 1px solid var(--clr-mid);
    padding: 2em;
}