@media (min-width: 960px) {
    section {
        padding: 3.75rem 0;
    }
}
header {
    .logo {
        span {
            display: none;
        }
    }
    nav {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        a {
            color: var(--text);
            text-decoration: none;
        }
        i {
            font-style: normal;
            color: var(--line);
        }
    }
    @media (min-width: 720px) {
        .logo {
            span {
                display: block;
            }
        }
    }
}
#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    isolation: isolate;
    padding: 5rem 0 2.5rem;
    h1 {
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.5rem;
        letter-spacing: -.004rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-block-end: 2rem;
        b {
            font-weight: 600;
            font-size: 1.5rem;
            line-height: 2rem;
        }
    }
    .showreel {
        position: relative;
        width: 8.5rem;
        height: 3rem;
        overflow: hidden;
        background-color: var(--text);
        border-radius: .5rem;
        transition: scale .5s;
        @supports (corner-shape: squircle) {
            corner-shape: squircle;
            border-radius: 1rem;
        }
        video {
            position: absolute;
            top: 0;
            left: 0;
            width: 8.5rem;
            aspect-ratio: 17 / 6;
            z-index: 1;
            transition: opacity .5s;
            opacity: 0;
            pointer-events: none;
        }
        button {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            border: none;
            cursor: pointer;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: .5rem;
            text-decoration: none;
            color: var(--bg);
            background-color: transparent;
            letter-spacing: -.004rem;
            font-size: 1rem;
            line-height: 1.5rem;
            padding: .75rem;
            width: 8.5rem;
            &::before {
                display: block;
                content: "";
                width: 1.5rem;
                height: 1.5rem;
                background-size: 1.5rem 1.5rem;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23FAFAFA' fill-rule='evenodd' d='M5.25 5.79c0-1.37 1.501-2.208 2.667-1.49l10.092 6.21a1.75 1.75 0 0 1 0 2.98L7.917 19.702c-1.166.718-2.667-.121-2.667-1.49z' clip-rule='evenodd'/%3E%3C/svg%3E");
            }
        }
        &:focus-within {
            outline: solid 1px oklch(62.3% 0.214 259.815);
            outline-offset: 2px;
        }
        @media not (hover: none) {
            &:hover,
            &:focus-within {
                scale: 1.125;
                video {
                    opacity: 1;
                }
            }
        }
    }
    @media (min-width: 720px) {
        padding: 6rem 0 2.5rem;
        h1 {
            font-size: 1.5rem;
            line-height: 2rem;
            gap: 1.5rem;
            margin-block-end: 3rem;
            b {
                font-size: 2rem;
                line-height: 2.5rem;
            }
        }
        .showreel {
            border-radius: 1rem;
            width: 12.5rem;
            height: 4rem;
            @supports (corner-shape: squircle) {
                corner-shape: squircle;
                border-radius: 2rem;
            }
            video {
                width: 12.5rem;
                aspect-ratio: 25 / 8;
            }
            button {
                gap: .75rem;
                font-size: 1.5rem;
                line-height: 2rem;
                padding: 1rem;
                width: 12.5rem;
                &::before {
                    width: 2rem;
                    height: 2rem;
                    background-size: 2rem 2rem;
                }
            }

        }
    }
    @media (min-width: 960px) {
        padding: 7rem 0 2.5rem;
    }
    @media (min-width: 1280px) {
        padding: 8rem 0 2.5rem;
    }
}
#works {
    ul {
        margin-block-start: 1.5rem;
        li a {
            position: relative;
            display: flex;
            flex-direction: row;
            padding-block: .875rem;
            text-decoration: none;
            line-height: 1.25rem;
            font-size: .875rem;
            color: var(--text);
            letter-spacing: -.007rem;
            transition: background-color .2s;
            &::before, &::after {
                display: block;
                content: "";
                position: absolute;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: var(--line);
            }
            &::before {
                top: -.5px;
            }
            &::after {
                bottom: -.5px;
            }
            span {
                display: block;
                position: relative;
                transition: padding .2s;
                overflow: hidden;
                &::before {
                    display: block;
                    content: "";
                    width: 1.5rem;
                    height: 1.5rem;
                    background-size: 1.5rem 1.5rem;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2318181b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7 7h10m0 0v10m0-10L7 17'/%3E%3C/svg%3E%0A");
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transition: translate .2s;
                    translate: -100% -50%;
                }
            }
            figure {
                display: none;
                pointer-events: none;
                position: absolute;
                z-index: 1;
                border-radius: 1rem;
                @supports (corner-shape: squircle) {
                    corner-shape: squircle;
                    border-radius: 2rem;
                }
                right: -1.5rem;
                top: 1.75rem;
                height: 9.5rem;
                aspect-ratio: 107 / 60;
                transform-origin: center right;
                transform: translateY(-50%);
                overflow: hidden;
                video, img {
                    height: 100%;
                    aspect-ratio: 107 / 60;
                    &.pixelated {
                        image-rendering: pixelated;
                    }
                }
            }
        }
        li.soon {
            cursor: wait;
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding-block: .875rem;
            line-height: 1.25rem;
            font-size: .875rem;
            color: var(--icon);
            letter-spacing: -.007rem;
            &::before, &::after {
                display: block;
                content: "";
                position: absolute;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: var(--line);
            }
            &::before {
                top: -.5px;
            }
            &::after {
                bottom: -.5px;
            }
            i {
                display: block;
                font-style: normal;
                font-weight: 600;
                letter-spacing: -.0025rem;
                font-size: .625rem;
                line-height: .75rem;
                text-transform: uppercase;
                color: oklch(51.4% 0.222 16.935);
                background-color: oklch(71.2% 0.194 13.428 / .15);
                box-shadow: inset 0 0 0 1px oklch(89.2% 0.058 10.001);
                padding: .25rem .375rem;
                border-radius: .125rem;
                @supports (corner-shape: squircle) {
                    corner-shape: squircle;
                    border-radius: .25rem;
                }
            }
        }
    }
    @media (min-width: 720px) {
        width: 37rem;
        translate: -1.5rem 0;
        h2 {
            padding-inline: 1.5rem;
        }
        ul li a {
            padding-block: 1rem;
            padding-inline: 1.5rem;
            line-height: 1.5rem;
            font-size: 1rem;
            letter-spacing: -.004rem;
            @media not (hover: none) {
                &:hover {
                    background-color: var(--bg-accent);
                    z-index: 1;
                    span {
                        padding-inline-start: 2rem;
                        &::before {
                            translate: 0 -50%;
                        }
                    }
                    figure {
                        display: block;
                    }
                }
            }
        }
        ul li.soon {
            padding-block: 1rem;
            padding-inline: 1.5rem;
            line-height: 1.5rem;
            font-size: 1rem;
            letter-spacing: -.004rem;
            i {
                letter-spacing: -.007rem;
                font-size: .75rem;
                line-height: 1rem;
                padding: .25rem .5rem;
                border-radius: .25rem;
                @supports (corner-shape: squircle) {
                    corner-shape: squircle;
                    border-radius: .5rem;
                }
            }
        }
    }
    @media (min-width: 960px) {
        width: 47rem;
        ul li a figure {
            border-radius: 1.5rem;
            @supports (corner-shape: squircle) {
                border-radius: 3rem;
            }
            top: 1.75rem;
            height: 15rem;
        }
    }
}
#about {
    img {
        display: none;
        position: absolute;
        top: 7.25rem;
        right: -1.5rem;
        width: 14.5rem;
        height: 14.5rem;
        border-radius: 1.5rem;
        @supports (corner-shape: squircle) {
            corner-shape: squircle;
            border-radius: 3rem;
        }
    }
    div {
        margin-block-start: 1.5rem;
    }
    @media (min-width: 960px) {
        img {
            display: block;
        }
        div {
            width: 27.75rem;
        }
    }
}
#links {
    ul {
        margin-block-start: 1.5rem;
        li {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            a {
                display: flex;
                flex-direction: row;
                text-decoration: none;
                gap: .5rem;
                padding-block: .875rem;
                line-height: 1.25rem;
                font-size: .875rem;
                letter-spacing: -.007rem;
                color: var(--text);
                transition: color .2s;
                b {
                    font-weight: 600;
                }
                svg {
                    color: var(--icon);
                    transition: color .2s;
                    display: block;
                    width: 1.25rem;
                    height: 1.25rem;
                }
                &.dribbble {
                    @media not (hover: none) {
                        &:hover {
                            color: #ea4c89;
                            svg {
                                color: #ea4c89;
                            }
                        }
                    }
                }
                &.twitter {
                    @media not (hover: none) {
                        &:hover {
                            color: #1d9bf0;
                            svg {
                                color: #1d9bf0;
                            }
                        }
                    }
                }
                &.linkedin {
                    @media not (hover: none) {
                        &:hover {
                            color: #0a66c2;
                            svg {
                                color: #0a66c2;
                            }
                        }
                    }
                }
                &.codepen {
                    @media not (hover: none) {
                        &:hover {
                            color: #000;
                            svg {
                                color: #000;
                            }
                        }
                    }
                }
            }
        }
    }
    @media (min-width: 720px) {
        ul li a {
            gap: .75rem;
            padding-block: 1em;
            line-height: 1.5rem;
            font-size: 1rem;
            letter-spacing: -.004rem;
            transition: color .2s;
            svg {
                width: 1.5rem;
                height: 1.5rem;
            }
        }
    }
}
#showreel form[method="dialog"] {
    display: contents;
}
#showreel {
    border: none;
    background: transparent;
    margin: auto;
    width: fit-content;
    height: fit-content;
    max-width: 1280px;
    position: relative;
    .close {
        position: fixed;
        top: .75rem;
        right: .75rem;
        cursor: pointer;
        border: none;
        border-radius: .75rem;
        @supports (corner-shape: squircle) {
            corner-shape: squircle;
            border-radius: 1.5rem;
        }
        padding: .5rem 1rem .5rem .5rem;
        background-color: var(--line);
        color: var(--text);
        font-size: .75rem;
        font-weight: 500;
        line-height: 1rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .25rem;
        transition: background-color .2s;
        &::before {
            display: block;
            content: "";
            width: 1rem;
            height: 1rem;
            background-size: 1rem 1rem;
            background-repeat: no-repeat;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2318181B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m17.5 6.5-11 11M17.5 17.5l-11-11'/%3E%3C/svg%3E%0A");
        }
        &:hover {
            background-color: var(--bg);
        }
    }
    &::backdrop {
        background-color: var(--text);
    }
    video {
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
    @media (min-width: 960px) {
        .close {
            top: 1.5rem;
            right: 1.5rem;
            border-radius: 1rem;
            @supports (corner-shape: squircle) {
                border-radius: 2rem;
            }
            padding: .75rem 1.25rem .75rem .75rem;
            font-size: 1rem;
            line-height: 1.5rem;
            gap: .5rem;
            &::before {
                width: 1.5rem;
                height: 1.5rem;
                background-size: 1.5rem 1.5rem;
            }
        }
    }
    @media (min-width: 1280px) {
        .close {
            top: 2rem;
            right: 2rem;
            border-radius: 1.25rem;
            @supports (corner-shape: squircle) {
                border-radius: 2.5rem;
            }
            padding: 1rem 1.5rem 1rem 1rem;
        }
    }
}