@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lacquer';
  src: url('/assets/fonts/Lacquer-Regular.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/Jost-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@layer reset, base, layout, utilities, components, animations;

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
    }

    /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
    [role="list"] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body {
        min-block-size: 100vh;
        line-height: 1.6;
    }

    html, body {
        overflow-x: hidden;
    }

    h1,
    h2,
    h3,
    button,
    input,
    label {
        line-height: 1.1;
    }

    h1,
    h2,
    h3,
    h4 {
        text-wrap: balance;
    }

    p,
    li {
        text-wrap: pretty;
    }

    img,
    picture {
        max-inline-size: 100%;
        display: block;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        text-decoration: none;
        color: inherit;
    }
}

@layer base {

    /*Primitives*/
    :root {

        /*Colors*/
        --section-color: #fff9c4;
        --section-color-dark: hsl(0,0%, 0%);
        --section-color-light: hsl(0, 0%, 100%);

        /*Font-Family*/
        --ff-heading: 'JetBrains Mono', monospace;
        --ff-body: 'Jost', sans-serif;
        --ff-secondary: 'Lacquer', system-ui;

        /*Font-Size*/
        --fs-200: 0.8rem;
        --fs-300: 1rem;
        --fs-400: 1.125rem;
        --fs-500: 1.25rem;
        --fs-600: 1.5rem;
        --fs-700: 1.75rem;
        --fs-800: 2rem;
        --fs-900: 2.25rem;
        --fs-1000: 2.75rem;

        /*Fade-In and Out*/
        --fade-level: 0;
    }

    :root {

        /*Custom Properties*/

        /*Colors*/
        --text-color: var(--section-color-dark);
        --background-color: var(--section-color);

        /*Font-size headers*/
        --font-size-heading-sm: var(--fs-700);
        --font-size-heading-regular: var(--fs-800);
        --font-size-heading-lg: var(--fs-900);
        --font-size-heading-xl: var(--fs-1000);

        /*Font-size-texts*/
        --font-size-xs: var(--fs-200);
        --font-size-sm: var(--fs-300);
        --font-size-regular: var(--fs-400);
        --font-size-md: var(--fs-500);
        --font-size-lg: var(--fs-600);

        /*Gap*/
        --gap-100: 1rem;
        --gap-200: 1.5rem;
        --gap-300: 2rem;
        --gap-400: 2.5rem;
        --gap-500: 3rem;
        --gap-600: 4rem;

        /*Border Radius*/
        --border-radius-1: 1rem;
        --border-radius-2: 1.5rem;
        --border-radius-3: 2rem;
        --border-radius-4: 2.5rem;
        --border-radius-5: 3rem;

        /*Images and Svgs*/
        --figure-xs: 2rem;
        --figure-sm: 3rem;
        --figure-md: 4rem;
        --figure-lg: 5rem;

        /*Width*/
        --block-size-sm: 30%;
        --block-size-regular: 40%;
        --block-size-md: 50%;
        --block-size-lg: 70%;
        --block-size-xl: 90%;

        /*Border*/
        --border-type: 2px solid var(--section-color-dark);
        --border-shadow: 0 12px 8px -12px rgba(0, 0, 0, 0.6);

        /*Box-shadow*/
        --shadow-contact: 12px 0 12px -12px rgba(0, 0, 0, 0.6);
        --shadow-contact-left: -12px 0 12px -12px rgba(0, 0, 0, 0.6);
        --shadow-card: -10px -10px 12px -10px rgba(0, 0, 0, 0.6);
        --shadow-description: 0 0 12px 2px rgba(0, 0, 0, 0.6);
        --shadow-gallery: 0 0 12px 6px rgba(0, 0, 0, 0.2);
        --shadow-footer: 0 -12px 8px -12px rgba(0, 0, 0, 0.6);
    }

    /*Global Styles*/

    /*Barra de Rolagem*/
    * {
        scrollbar-width: auto;
        scrollbar-color: var(--section-color-dark) var(--section-color);
    }

    *::-webkit-scrollbar-track {
        background-color: var(--section-color);
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--section-color-dark);
        border-radius: 0.5rem;
        border: var(--border-type);
    }

    @media(prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }

    /*Body e Html*/
    html{
        font-size: 16px;
        line-height: 1.6;
    }

    body {
        background-color: var(--section-color);
        transition: background-color 0.4s ease;
        color: var(--text-color);
    }

    body, p {
        font-family: var(--ff-body), sans-serif;
        font-weight: 400;
        font-size: var(--fs-600);
    }

    /*Headers*/
    h1, h2 {
        font-family: 'JetBrains Mono', monospace;
        font-size: var(--fs-900);
        font-weight: 700;
    }

    h3, h4 {
        font-family: 'Lacquer', system-ui;
        font-weight: 700;
    }

    h2 {
        letter-spacing: 0.05em;
    }

    h3 {
        font-size: var(--fs-1000);
    }

    h4 {
        font-size: var(--fs-700);
    }

    @media (width < 1080px) {
        html {
            line-height: 1.5;
        }

        body p {
            font-size: var(--fs-500);
        }

        h1, h2 {
            font-size: var(--fs-700);
        }

        h3 {
            font-size: var(--fs-900);
        }

        h4 {
            font-size: var(--fs-600);
        }
    }

    @media (width < 768px) {
        html {
            line-height: 1.4;
        }

        body p {
            font-size: var(--fs-400);
        }

        h1, h2 {
            font-size: var(--fs-600);
        }

        h3 {
            font-size: var(--fs-800);
        }

        h4 {
            font-size: var(--fs-500);
        }
    }

    @media (width < 600px) {
        html {
            line-height: 1.2;
        }

        body p {
            font-size: var(--fs-300);
        }

        h3 {
            font-size: var(--fs-700);
        }

        h4 {
            font-size: var(--fs-400);
        }
    }
}

@layer layout {
    body {
        width: 100%;
        max-width: 1080px;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        gap: var(--gap-200);
    }

    /*Main*/
    main {
        margin-block: 8rem 12rem;
        gap: 12rem;
    }

    /*Flex-Grid-Column-Row-Align-Justify*/
    .flex-column {
        display: flex;
        flex-direction: column;
    }

    .flex-center {
        display: flex;
        align-items: center;
    }

    .center {
        align-items: center;
        justify-content: center;
    }

    .container {
        margin: 6rem auto 0;
        padding-inline: 2rem;
    }

    /*Title*/
    .title-section {
        display: inline-block;
        padding: 2rem;
        transition: transform 0.3s ease;
    }

    .title-section:hover {
        transform: scale(1.05);
    }

    @media (width < 1080px) {
        body {
            flex-direction: column;
            gap : var(--gap-400);
        }

        .container {
            padding-inline: 2rem;
        }

        .title-section {
            padding: 2rem 4rem;
        }
    }

    @media (width < 768px) {
        main {
            margin-block: 2rem 4rem;
            gap: 4rem;
        }

        .container {
            margin: 3rem auto;
        }
    }

}

@layer utilities {

    /*Image Ratio*/
    .image-small {
        width: var(--figure-sm);
        aspect-ratio: 1/1;
    }

    .image-medium {
        width: var(--figure-md);
        aspect-ratio: 1/1;
    }

    .image-large {
        width: var(--figure-lg);
        aspect-ratio: 1/1;
    }

    .image-wide {
        aspect-ratio: 16/9;
    }

    @media (width < 1080px) {
        .image-small {
            width: var(--figure-xs);
        }

        .image-medium {
            width: var(--figure-sm);
        }

        .image-large {
            width: var(--figure-md);
        }
    }

    @media (width < 768px) {
        .image-large {
            width: var(--figure-sm);
        }
    }

    /*Border Styles*/
    .border-style {
        border-bottom: var(--border-type);
        box-shadow: var(--border-shadow);
    }

    .border-card {
        border-top: 1px solid var(--section-color-dark);
        border-left: 1px solid var(--section-color-dark);
        border-radius: var(--border-radius-1);
    }

    .border-process {
        border-bottom: 2px dashed #000;
    }

    .border-gallery {
        border: 1px solid var(--section-color-dark);
    }

    /*Text-Position*/
    .text-right {
        text-align: right;
    }

    .text-left {
        text-align: left;
    }

    /*Flex-Grid-Justify-Content*/
    .flex {
        display: flex;
    }

    .grid {
        display: grid;
    }

    .flex-row {
        display: flex;
        flex-direction: row;
    }

    .between {
        justify-content: space-between;
    }

    /*Fade-In & Out*/
    .project-card.fade-out {
        opacity: 0.5;
    }

    .project-card.fade-in {
        opacity: 1;
    }

    /*Align-Items, Self & Content*/
    .content-end {
        align-items: flex-end;
        justify-content: flex-end;
    }

    .content-center {
        align-content: center;
        align-items: center;
        justify-content: center;
    }

    .align-end {
        align-items: flex-end;
    }

    .align-stretch {
        align-self: stretch;
    }

    .align-start {
        align-items: flex-start;
    }

    .justify-end {
        justify-content: flex-end;
    }

    /*Box Shadow*/
    .shadow-contact {
        box-shadow: var(--shadow-contact);
    }

    .shadow-card {
        box-shadow: var(--shadow-card);
    }

    .shadow-description {
        box-shadow: var(--shadow-description);
    }

    .shadow-gallery {
        box-shadow: var(--shadow-gallery);
    }

    .shadow-footer {
        box-shadow: var(--shadow-footer);
    }
}

@layer components {

    /*Header*/
    header {
        padding: 1rem;

        div h1:hover {
            transform: scale(1.03);
        }

        /*Nav*/
        .nav > ul {
            gap: var(--gap-300);
            font-family: var(--ff-secondary), system-ui;
            font-size: var(--font-size-heading-regular);
        }

        .nav ul li {
            transition: transform 0.3s ease;
        }

        .nav ul li:hover {
            transform: scale(1.1);
        }

        .nav ul li:active {
            transform: scale(0.9);
        }
    }

    @media (width < 1080px) {
        header {
            padding: 1rem 2rem;

            .logo-title {
                font-size: var(--font-size-heading-sm);
            }

            .nav > ul {
                gap: var(--gap-200);
                font-size: var(--font-size-lg);
            }
        }
    }

    @media (width < 768px) {
        header {
            padding: 1rem 1.5rem;

            .nav > ul {
                gap: var(--gap-100);
                font-size: var(--font-size-md);
            }
        }
    }

    @media (width < 600px) {
        header {
            justify-content: center;

            .nav {
                display: none;
            }
        }
    }

    
    /*Principal*/
    .principal {
        padding-inline: 1rem;

        /*Intro*/
        .intro {
            width: 65%;

            /*Title*/
            h2 {
                margin-block: 0 2rem;
                line-height: 1.4;
            }

            p:last-of-type {
                margin-block: 1rem 0;
            }
        }

        /*Contact*/
        .contact {
            width: var(--block-size-sm);
            padding: 5rem 3rem 5rem 0;
            border-right: var(--border-type);
            gap: var(--gap-200);
            align-items: flex-end;
            text-align: right;

            /*Info*/
            ul {
                font-size: var(--font-size-lg);
                font-weight: 500;
            }

            /*Links*/
            ul:last-of-type {
                gap: var(--gap-100);
            }

            ul li {
                transition: transform 0.3s ease;
            }

            ul li:hover {
                transform: scale(1.1);
            }

            ul li:active {
                transform: scale(0.9);
            }
        }
    }

    @media (width < 1080px) {
        .principal {
            padding-inline: 2rem;

            .intro {
                width: 60%
            }

            .contact {
                padding: 5rem 2rem 5rem 0;

                ul {
                    font-size: var(--font-size-md);
                }
            }
        }
    }

    @media (width < 768px) {
        .principal {
            flex-direction: column;
            gap: var(--gap-600);

            .intro {
                width: var(--block-size-xl);
            }

            .contact {
                padding: 1.6rem;
                border-right: none;
                border-left: var(--border-type);
                box-shadow: var(--shadow-contact-left);
                width: var(--block-size-xl);
                align-items: flex-start;
                text-align: left;

                ul {
                    font-size: var(--font-size-regular);
                }
            }
        }
    }

    /*Tools*/
    .technologies {
        grid-template-columns: repeat(8, 1fr);
        grid-column-gap: var(--gap-200);
        grid-row-gap: var(--gap-600);
        font-family: var(--ff-heading), monospace;
        font-size: var(--font-size-sm);
        font-weight: 700;

        /*Tech List*/
        li {
            gap: var(--gap-100);
            white-space: nowrap;
            transition: transform 0.3s ease;
        }

        li:hover {
            transform: scale(1.2);
        }
    }

    @media (width < 1080px) {
        .technologies {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            gap: var(--gap-500);
            font-size: var(--font-size-sm);
        }
    }

    @media (width < 768px) {
        .tools {
            width: 100%;
        }

        .technologies {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-column-gap: var(--gap-300);
            grid-row-gap: var(--gap-400);
        }
    }

    @media (width < 600px) {
        .technologies {
            display: flex;
            gap: 1.6rem;
            font-size: var(--font-size-xs);
        }
    }

    /*Process*/

    /*Columns*/
    .process-column {
        gap: 8rem;
        width: var(--block-size-md);

        /*Cards*/
        .process-card {
            gap: var(--gap-100);

            /*Icons*/
            .process-icons {
                gap: var(--gap-500);
            }

            p {
                margin-block: 0 3rem;
            }

            .process-icons img, p, h4 {
                transition: transform 0.3s ease;
            }

            .process-icons img:hover, p:hover, h4:hover {
                transform: scale(1.03);
            }
        }
    }

        /*Separador*/
    .separator {
        width: 2px;
        background: repeating-linear-gradient(
                to bottom,
                var(--section-color-dark),
                var(--section-color-dark) 4px,
                transparent 4px,
                transparent 8px
        );
    }

    /*Columns Even & Odd*/
    [data-type="odd"] {
        p, h4 {
            padding-inline: 0 8rem;
        }
    }

    [data-type="even"] {
        p, h4 {
            padding-inline: 8rem 0;
        }
    }

    @media (width < 1080px) {
        .process-column {
            gap: 5rem;

            .process-card {

                .process-icons {
                    gap: var(--gap-100);
                }

                h4 {
                    font-size: var(--font-size-lg);
                }

                p {
                    margin-block: 0 2rem;
                    font-size: var(--font-size-regular);
                }
            }
        }

        [data-type="odd"] {
            p, h4 {
                padding-inline: 0 3rem;
            }
        }

        [data-type="even"] {
            p, h4 {
                padding-inline: 3rem 0;
            }
        }
    }

    @media (width < 768px) {
        .process-column {
            width: var(--block-size-xl);
            gap: 3rem;

            .process-card {
                h4 {
                    font-size: var(--font-size-md);
                }

                p {
                    margin-block: 0 1.5rem;
                    font-size: var(--font-size-sm);
                }
            }
        }

        [data-type="odd"] {
            p, h4 {
                padding-inline: 0 2rem;
            }
        }

        [data-type="even"] {
            p, h4 {
                padding-inline: 2rem 0;
            }
        }
    }
    /*Projects*/
    .projects-grid {
        gap: var(--gap-600);

        /*Gallery*/
        .project-gallery {
            cursor: pointer;
            width: var(--block-size-sm);
            gap: var(--gap-300);

            /*Gallery Container*/
            div {
                border-radius: var(--border-radius-1);
                transition: transform 0.3s ease;

                /*Gallery Image*/
                img {
                    width: var(--block-size-xl);
                    padding: 0.5rem;
                    border-radius: var(--border-radius-1);
                }
            }

            div:hover {
                transform: scale(1.05);
            }

            div:active {
                transform: scale(0.95);
            }

            div.active img {
                box-shadow: 0 0 16px 4px rgba(0, 0, 0, 0.9);
            }
        }

        /*Container Image*/
        .project-card {
            width: var(--block-size-lg);
            gap: var(--gap-200);
            padding-inline: 0 .5rem ;
            border-right: var(--border-type);
            transition: opacity 0.5s ease;

            /*Image*/
            img {
                width: var(--block-size-xl);
                padding: 1rem;
                border-radius: var(--border-radius-3);
            }
        }

        /*Title*/
        .card-title {
            font-family: var(--ff-secondary), system-ui;
            font-size: var(--font-size-heading-lg);
            font-weight: 700;
            margin-inline: 1rem;
        }

        /*Card Container*/
        .card-description {
            padding: 0.8rem 1.6rem 0.6rem;
            min-height: 15rem;
            background-color: rgba(0, 0, 0, 0.75);
            border-radius: var(--border-radius-1);
            justify-content: space-between;
            width: var(--block-size-xl);

            /*Text*/
            p {
                font-size: var(--font-size-regular);
                padding-block: 0.4rem 1rem;
            }

            /*Links*/
            .card-links {
                gap: var(--gap-100);

                a:hover {
                    transform: scale(1.1);
                }

                a:active {
                    transform: scale(0.9);
                }
            }

            .card-links svg path {
                fill: var(--section-color);
            }
        }
    }

    @media (width < 1080px) {
        .projects-grid {
            gap: var(--gap-400);

            .project-gallery {
                margin-inline: 1.4rem 0;
                gap: var(--gap-300);

                div > img{
                    padding: 0.4rem;
                    width: 100%;
                }
            }

            .project-card > img {
                    padding: 0.7rem;
            }

            .card-title {
                font-size: var(--font-size-heading-sm);
                margin-inline: 0.5rem;
            }

            .card-description {
                min-height: 12rem;

                p {
                    font-size: var(--font-size-xs);
                    padding: 0;
                }
            }
        }
    }

    @media (width < 768px) {
        .projects-grid {
            display: flex;
            flex-direction: column;
            align-items: center;

            .project-gallery {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                width: var(--block-size-xl);
                gap: var(--gap-200);
                margin: 0;

                div > img{
                    width: 100%;
                }
            }

            .project-card {
                width: 100%;
                padding-right: 0;
                border-right: none;
                border-bottom: var(--border-type);
                box-shadow: var(--border-shadow);
                padding-bottom: 3rem;

                img {
                    width: 100%;
                    padding: 0.5rem;
                }

                .card-info {
                    width: 100%;

                    .card-description {
                        width: 100%;
                        min-height: 11rem;
                    }
                }
            }
        }
    }

    /*Footer*/
    footer {
        padding: 1rem;
        font-size: var(--font-size-md);
        font-weight: 500;
        border-top: var(--border-type);

        /*Register*/
        p {
            font-family: var(--ff-heading), monospace;
            font-size: var(--font-size-sm);
            font-weight: 500;
        }

        /*Contact*/
        div {
            ul {
                gap: 0.2rem;

                li:hover {
                    transform: scale(1.1);
                }

                li:active {
                    transform: scale(0.9);
                }
            }
        }

        /*Links*/
        ul {
            gap: var(--gap-100);

            li:hover {
                transform: scale(1.1);
            }

            li:active {
                transform: scale(0.9);
            }
        }
    }

    @media (width < 1080px) {
        footer {
            padding: 1rem 2rem;
            font-size: var(--font-size-sm);

            p {
                font-size: var(--font-size-xs);
            }
        }
    }

    @media (width < 768px) {
        footer {

            p {
                display: none;
            }
        }
    }

    @media (width < 600px) {
        footer {
            padding: 1rem 1.5rem;

            ul {
                gap: 0.6rem
            }
        }
    }
}

@layer animations {
    .wave {
        display: inline-block;
        animation: wave-animation 1.6s ease-in-out 1.4s 3;
        transform-origin: 70% 70%;
    }

    @keyframes wave-animation {
        0%   { transform: rotate(0deg); }
        10%  { transform: rotate(14deg); }
        20%  { transform: rotate(-8deg); }
        30%  { transform: rotate(14deg); }
        40%  { transform: rotate(-4deg); }
        50%  { transform: rotate(10deg); }
        60%  { transform: rotate(0deg); }
        100% { transform: rotate(0deg); }
    }

    /*Header Animation*/
    .header {
        border-bottom: 2px solid transparent;
        box-shadow: none;
        animation:
                header-border 0.4s ease-out forwards,
                header-shadow 0.4s ease-out 0.4s forwards;
    }

    @keyframes header-border {
        to {
            border-bottom: var(--border-type);
        }
    }

    @keyframes header-shadow {
        to {
            box-shadow: var(--border-shadow);
        }
    }

    /*2ª Etapa*/
    .header > div,
    .header .nav {
        opacity: 0;
        transform: translateY(40px);
        animation: header-content 0.4s ease-out 0.4s forwards;
    }

    @keyframes header-content {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /*Contact Animation*/
    .contact {
        border-right: 2px solid transparent;
        box-shadow: none;
        animation:
                contact-border-right 0.8s ease-out forwards,
                contact-shadow-right 0.8s ease-out 0.8s forwards;
    }

    @keyframes contact-border-right {
        to {
            border-right: var(--border-type);
        }
    }

    @keyframes contact-shadow-right {
        to {
            box-shadow: var(--shadow-contact);
        }
    }

    /*2ª Etapa*/
    .contact ul:first-of-type li {
        opacity: 0;
        transform: translateX(30px);
        animation: contact-link-fade 0.8s ease-out 0.8s forwards;
    }

    /*3ª Etapa*/
    .contact ul:last-of-type li {
        opacity: 0;
        transform: translateX(30px);
        animation: contact-social-fade 0.8s ease-out 0.8s forwards;
    }

    @keyframes contact-link-fade {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes contact-social-fade {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /*Intro Animation*/
    .intro {
        opacity: 1;
        transform: translateX(-3000px);
        animation: slideInLeft 1.8s ease-out 0s forwards;
    }

    @keyframes slideInLeft {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @media (width < 768px) {
        .contact {
            border-right: none;
            box-shadow: none;
            border-left: 2px solid transparent;
            animation:
                    contact-border-left 0.8s ease-out forwards,
                    contact-shadow-left 0.8s ease-out 0.8s forwards;
        }

        .contact ul:first-of-type li,
        .contact ul:last-of-type li {
            transform: translateX(-30px);
            animation: contact-link-fade-left 0.8s ease-out 0.8s forwards;
        }

        @keyframes contact-border-left {
            to {
                border-left: var(--border-type);
            }
        }

        @keyframes contact-shadow-left {
            to {
                box-shadow: var(--shadow-contact-left);
            }
        }

        @keyframes contact-link-fade-left {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
    }

}