:root {
    --guide-base: #a2d4f3;

    --guide-darkest: color-mix(in srgb, var(--guide-base), #000 75%);
    --guide-darker: color-mix(in srgb, var(--guide-base), #000 50%);
    --guide-dark: color-mix(in srgb, var(--guide-base), #000 25%);

    --guide-light: color-mix(in srgb, var(--guide-base), #fff 25%);
    --guide-lighter: color-mix(in srgb, var(--guide-base), #fff 50%);
    --guide-lightest: color-mix(in srgb, var(--guide-base), #fff 75%);

    --news-base: #f8e8b1;
}

@layer page {
    .homepage {
        header .logo {
            visibility: hidden;
        }

        section {
            position: relative;

            min-height: calc(100vh - 6rem);

            &:last-of-type {
                min-height: calc(100vh - 10rem);
            }

            display: flex;
            flex-direction: column;
            align-items: center;

            gap: 2rem;

            scroll-snap-align: start;

            & > .title {
                font-size: 48px;
                padding-top: 4rem;
            }
        }

        .zig-zag {
            z-index: 5;

            position: absolute;
            width: 100%;

            display: flex;

            &:first-child {
                bottom: 100%;
            }
        }

        section.principal {
            z-index: 2;

            min-height: calc(100vh - 7rem);

            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 4rem;

            padding: 3rem 0 6rem;

            background: $homepage-principal-bg;

            flex-wrap: wrap;

            position: relative;

            .circuit-layer {
                z-index: 1;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;

                canvas {
                    width: 100%;
                    height: 100%;
                }
            }

            & > .logo {
                z-index: 2;
                max-width: 640px;
                position: relative;

                user-select: none;

                img {
                    width: 100%;
                    filter: drop-shadow(6px 6px 0 $black) drop-shadow(4px 0 0 $black)
                        drop-shadow(0 4px 0 $black) drop-shadow(-4px 0 0 $black) drop-shadow(0 -4px 0 $black);
                }
            }

            & > .whats-phc {
                z-index: 2;
                background: #e4c5ff;

                --zone-color: color-mix(in lab, #e4c5ff, #000 75%);

                max-width: 37rem;

                .title {
                    text-align: center;
                }

                a {
                    text-decoration: underline 2px solid;

                    &:hover {
                        --zone-color: color-mix(in lab, #e4c5ff, #000 60%);
                    }
                }
            }
        }

        section.news {
            --card-base: color-mix(in lab, var(--news-base), #fff 25%);
            --zone-color: color-mix(in lab, var(--news-base), #000 50%);

            background: $homepage-news-bg;

            gap: 3rem;

            padding-bottom: 6rem;

            & > .news-list {
                display: flex;
                flex-direction: row;
                gap: 3rem;

                align-items: flex-start;

                padding: 0 3rem;

                justify-content: center;
                flex-wrap: wrap;
            }

            [role='button'] {
                padding: 0.5rem 2rem;

                &.primary {
                    background: #ffdd6e;
                    color: #000d;
                }
            }
        }

        section.projects {
            background: $homepage-projects-bg;

            padding-bottom: 6rem;

            .project-list {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
                grid-auto-flow: dense;

                & > * {
                    grid-row: span var(--masonry-height);
                }

                gap: 1.5rem;

                padding: 0 6rem;

                .project {
                    height: 100%;

                    // background: #fcddff;
                    // background: #ffa89c;
                    background: var(--card-bg, $project-card-bg);
                    color: #000e;

                    @include neo-brutalist-card($size: 3px, $offset: 9px);

                    padding: 1rem;

                    display: grid;
                    grid-template-columns: auto 1fr;
                    grid-template-rows: auto 1fr;

                    gap: 0.25rem 1rem;

                    .title {
                        font-size: 32px;
                    }

                    .image {
                        grid-row: span 2;
                        // place-self: center;

                        .box {
                            background: #0003;
                            border: 3px solid #0006;
                            border-radius: 6px;
                            width: 5rem;
                            height: 5rem;
                        }

                        img {
                            width: 5rem;
                            height: 5rem;
                        }
                    }

                    .description {
                        font-size: 16px;
                        @extend .text;
                    }

                    transition: all 128ms ease-out;

                    &:hover {
                        transform: translate(0, -4px);
                        box-shadow: 9px 13px 0 0 #222;
                    }
                }
            }
        }

        section.wanna-be-macchinista {
            background: $homepage-macchinisti-bg;
            color: #fdfdfd;

            .content {
                @extend .text;
            }
        }
    }

    // .utenti {
    //     main {
    //         justify-self: center;

    //         display: flex;
    //         flex-direction: column;
    //         align-items: center;

    //         max-width: 80ch;
    //         padding: 5rem 0;

    //         gap: 5rem;
    //     }
    // }

    // .appunti {
    //     main {
    //         background: #fdfdf0;

    //         justify-self: center;

    //         display: grid;
    //         grid-auto-flow: row;

    //         justify-items: center;

    //         padding: 3rem;

    //         gap: 3rem;

    //         width: 100%;

    //         .search {
    //             max-width: 80ch;
    //         }

    //         .appunti-scrollable {
    //             justify-self: stretch;

    //             &.center {
    //                 justify-self: center;
    //             }
    //         }
    //     }
    // }

    // .login {
    //     background: #ddfaff;

    //     main {
    //         justify-self: center;

    //         display: flex;
    //         flex-direction: column;
    //         align-items: center;

    //         max-width: 80ch;
    //         padding: 3rem 0;

    //         gap: 3rem;

    //         h3 {
    //             font-size: 28px;
    //             font-weight: 600;
    //         }
    //     }
    // }

    //
    // Notizie
    //

    .notizie,
    .notizia {
        --card-base: color-mix(in lab, var(--news-base), #fff 25%);
        --zone-color: color-mix(in lab, var(--news-base), #000 50%);
        background: color-mix(in lab, var(--news-base), #fff 90%);
    }

    .notizie {
        main {
            justify-self: center;

            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 5rem;
            gap: 5rem;
        }
    }

    .notizia {
        main {
            --card-base: color-mix(in lab, var(--news-base), #fff 25%);

            max-width: calc(46rem + 2rem * 2);
            justify-self: center;
            padding: 3rem 2rem 2rem;

            margin-top: 3rem;
            margin-bottom: 6rem;

            @media screen and (max-width: $screen-desktop-min) {
                box-shadow: none;
                border: none;
                border-radius: 0;
                max-width: none;

                margin: 0 auto;
            }
        }
    }

    //
    // Guide
    //

    .guide,
    .guida {
        --card-base: color-mix(in lab, var(--guide-base), #fff 25%);
        --zone-color: color-mix(in lab, var(--guide-base), #000 50%);
        background: color-mix(in lab, var(--guide-base), #fff 90%);
    }

    .guide {
        main {
            justify-self: center;

            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 5rem;
            gap: 5rem;
        }
    }

    .guida {
        main {
            --card-base: color-mix(in lab, var(--guide-base), #fff 50%);

            max-width: calc(46rem + 2rem * 2);
            justify-self: center;
            padding: 3rem 2rem 2rem;

            margin-top: 3rem;
            margin-bottom: 6rem;

            @media screen and (max-width: $screen-desktop-min) {
                box-shadow: none;
                border: none;
                border-radius: 0;
                max-width: none;

                margin: 0 auto;
            }
        }
    }

    .tag {
        main {
            justify-self: center;

            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 5rem 0;
            gap: 5rem;
        }
    }

    .storia {
        --card-base: #70f0a9;

        main {
            justify-self: center;

            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 5rem 0;
            gap: 3rem;

            // background horizontal linear gradient that is black in the center
            background: linear-gradient(
                to right,
                #70f0a933 0%,
                #70f0a933 25%,
                #70f0a999 50%,
                #70f0a933 75%,
                #70f0a933 100%
            );
        }
    }

    //
    // Meta
    //

    .design {
        grid-template-columns: minmax(15rem, 2fr) 10fr;

        @media screen and (max-width: 1400px) {
            grid-template-columns: 1fr;
        }

        aside {
            margin: 1rem;
            padding: 1rem;

            @include neo-brutalist-card();

            background: #f0f0f0;

            align-self: start;
            position: sticky;
            top: 7rem;
            height: calc(100dvh - 8rem - 6rem);

            nav {
                display: flex;
                flex-direction: column;
                gap: 0.25rem;

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

                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;

                    li {
                        padding-left: calc((var(--depth) - 1) * 1rem);

                        display: flex;

                        a {
                            display: block;

                            font-size: 16px;
                            font-weight: 600;

                            transform: translate(-0.25rem, 0);

                            padding: 0.125rem 0.25rem;
                            border-radius: 0.125rem;

                            color: #444;

                            &:hover {
                                background: #00000018;
                            }
                        }
                    }
                }
            }

            @media screen and (max-width: 1400px) {
                display: none;
            }
        }

        footer {
            grid-column: 1 / -1;
        }

        main {
            justify-self: center;

            @media screen and (min-width: $screen-desktop-min) {
                padding: 3rem 0;
            }
        }

        pre[data-language='astro'] {
            --code-bg: #fff7ef;

            width: 100%;
            max-width: 46rem;
        }

        .container {
            margin: 2rem auto;

            border: 2px dashed #ddd;

            position: relative;
            z-index: 1;

            &.large {
                min-width: calc(100% - 4rem);
            }

            &:not(.large) {
                & > .content {
                    display: grid;
                    place-content: center;
                }
            }

            & > .content {
                padding: 2rem;

                overflow: auto;
            }

            // label in the top left corner
            &::before {
                content: 'Preview';
                position: absolute;

                bottom: 100%;
                left: 0;

                padding: 0.125rem 0.5rem;

                background: #eee;
                color: #000;

                font-family: 'Iosevka', monospace;
                font-size: 14px;

                border-radius: 0.25rem;

                z-index: -1;

                transform: translate(-2px, -4px);

                opacity: 0;
                transition: opacity 64ms ease-in;
            }

            &:hover {
                border-color: #bbb;

                &::before {
                    opacity: 1;
                }
            }
        }

        .palette {
            margin: 2rem auto;

            display: grid;
            grid-template-columns: auto auto;

            gap: 1rem;

            place-content: center;

            & > .color {
                width: 2rem;
                height: 2rem;
                border-radius: 0.25rem;

                border: 2px solid #000;
                box-shadow: 4px 4px 0 0 #000;

                overflow: hidden;

                & > .region {
                    width: 100%;
                    height: 100%;

                    border: 2px solid #fff;

                    border-radius: 4px;
                }
            }

            & > .label {
                display: grid;
                align-content: center;

                font-family: 'JetBrains Mono', monospace;
                font-size: 16px;

                user-select: all;
            }
        }
    }
}