web/frontend/src/pages/home/home.module.scss

@use "@/css/material" as *;
@use "home-shared" as shared;

// Shared variables (home-specific)
$gradient-conic: conic-gradient(
    from 0deg,
    rgba(147, 51, 234, 0.5) 0%,
    rgba(99, 102, 241, 0.6) 12.5%,
    rgba(59, 130, 246, 0.55) 25%,
    rgba(168, 85, 247, 0.5) 37.5%,
    rgba(217, 70, 239, 0.6) 50%,
    rgba(236, 72, 153, 0.55) 62.5%,
    rgba(192, 132, 252, 0.5) 75%,
    rgba(126, 34, 206, 0.6) 87.5%,
    rgba(147, 51, 234, 0.5) 100%
);
$radius-card: 20px;
$radius-pill: 25px;

// Download table variables
$download-cell-padding: 14px 20px;
$download-cell-gap: 12px;
$download-icon-size: 24px;
$download-col1-w: 35%;
$download-col2-w: 30%;
$download-col3-w: 35%;
$download-row-bg-hover: rgba($color-dark-surface-container-high, 0.6);
$download-header-bg: rgba($color-dark-surface-container-high, 0.4);
$download-text-color: $color-dark-on-surface-variant;

// Mixins
@mixin section-heading {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 24px;
    @include shared.gradient-text;
}

@mixin section-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;

    p {
        font-size: 20px;
        line-height: 1.6;
        margin-bottom: 40px;
        opacity: 0.9;
    }
}

@mixin container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 32px;
}

@mixin download-cell-inner($justify) {
    display: flex;
    justify-content: $justify;
    align-items: center;
    width: 100%;
    min-width: 0;
}

@mixin masked-icon($url-var) {
    display: inline-block;
    width: $download-icon-size;
    height: $download-icon-size;
    flex-shrink: 0;
    background-color: $download-text-color;
    mask-image: var(#{$url-var});
    -webkit-mask-image: var(#{$url-var});
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.homepage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: $color-dark-on-background;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    background-color: $color-dark-surface;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;

    img {
        -webkit-user-drag: none;
        user-select: none;
    }

    main {
        flex: 1;

        .title {
            padding: 60px 0;
            display: flex;
            align-items: center;
            margin-top: 0;
            flex-direction: column;

            .titleLogoWrapper {
                position: relative;
                width: 100%;
                overflow-x: clip;
                display: flex;
                justify-content: center;

                &::before {
                    $size: 1200px;

                    content: '';
                    background: $gradient-conic;
                    position: absolute;
                    width: $size;
                    height: $size;
                    bottom: 0;
                    opacity: 0.3;
                    left: calc(50% - ($size / 2));
                    border-radius: 50%;
                    filter: blur(80px);
                }
            }

            .titleLogo {
                width: 120px;
                height: 120px;
                background-image: url('@/images/logo_square.svg');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                border-radius: 30px;
                position: relative;
                z-index: 1;
            }

            .titleContent {
                font-size: 30pt;
                font-weight: 700;
                margin-top: 10px;
                padding: 0 80px;
                @include shared.gradient-text;
            }

            .titleDesc {
                font-size: 16pt;
                opacity: 0.8;
                margin-top: 10px;
                text-align: center;
                padding: 0 80px;
            }

            .titleButtons {
                display: flex;
                gap: 10px;
                margin-top: 20px;
                padding: 0 80px;
            }
        }

        .features {
            display: flex;
            flex-direction: column;
            gap: 50px;
            overflow-x: clip;

            .featureContainer {
                display: flex;
                flex-direction: row;
                gap: 20px;
                padding: 0 16px;
                align-items: center;
                margin-left: auto;
                margin-right: auto;
                max-width: 700px;

                .featureText {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    flex-grow: 1;
                    flex-shrink: 1;

                    .featureTitle {
                        font-size: 30pt;
                        font-weight: 700;
                        line-height: normal;
                        @include shared.gradient-text;
                    }

                    .featureDesc {
                        text-align: left;
                        font-size: 15pt;
                    }
                }

                .featureScreenshotOuter {
                    position: relative;

                    .featureScreenshotGlow {
                        $size: 400px;

                        @keyframes rotateGradient {
                            from { transform: rotate(0deg); }
                            to { transform: rotate(360deg); }
                        }

                        background: $gradient-conic;
                        position: absolute;
                        width: $size;
                        height: $size;
                        top: calc(50% - ($size / 2));
                        opacity: 0.6;
                        left: calc(50% - ($size / 2));
                        border-radius: 50%;
                        filter: blur(80px);
                        z-index: 0;
                        will-change: transform;
                        animation: rotateGradient 8s linear infinite;
                    }

                    .featureScreenshot {
                        max-width: 300px;
                        z-index: 50;
                        position: relative;
                    }
                }
            }
        }

        .download {
            .container {
                @include container;
            }

            .downloadContent {
                @include section-content;

                h3 {
                    @include section-heading;
                }

                .downloadTable {
                    display: table;
                    user-select: none;
                    width: 100%;
                    max-width: 720px;
                    margin: 0 auto;
                    border-radius: 16px;
                    border-collapse: separate;
                    border-spacing: 0 6px;
                    background: transparent;
                    border: none;
                    table-layout: auto;

                    th:first-child,
                    td:first-child {
                        width: 1%;
                        white-space: nowrap;
                    }

                    th:nth-child(2),
                    td:nth-child(2) {
                        width: 1%;
                        white-space: nowrap;
                    }

                    th:last-child,
                    td:last-child {
                        width: 100%;
                    }

                    thead {
                        display: table-header-group;

                        tr th {
                            padding: $download-cell-padding;
                            display: table-cell;
                            font-size: 11px;
                            font-weight: 600;
                            text-transform: uppercase;
                            letter-spacing: 0.1em;
                            color: $download-text-color;
                            background: $download-header-bg;
                            vertical-align: middle;
                            transition: background-color 0.2s ease;
                            text-align: left;

                            &:first-child {
                                border-radius: 12px 0 0 12px;
                            }

                            &:last-child {
                                border-radius: 0 12px 12px 0;
                            }
                        }
                    }

                    tbody {
                        display: table-row-group;

                        tr {
                            display: table-row;
                            background: $color-dark-surface-container-low;

                            td {
                                padding: $download-cell-padding;
                                display: table-cell;
                                text-align: center;
                                vertical-align: middle;
                                transition: background-color 0.2s ease;
                                background: transparent;

                                &:first-child {
                                    text-align: left;
                                    border-radius: $radius-pill 0 0 $radius-pill;
                                }

                                &:last-child {
                                    text-align: right;
                                    border-radius: 0 $radius-pill $radius-pill 0;
                                }
                            }

                            &:hover td {
                                background: $download-row-bg-hover;
                            }
                        }
                    }

                    .downloadTableOs {
                        text-align: left;

                        .downloadTableOsContent {
                            @include download-cell-inner(flex-start);
                            gap: $download-cell-gap;
                            min-height: 100%;
                            height: 100%;
                        }
                    }

                    .downloadTableIcon {
                        font-size: $download-icon-size;
                        width: $download-icon-size;
                        height: $download-icon-size;
                        color: $download-text-color;
                    }

                    .tableOsIcon {
                        @include masked-icon("--table-os-icon-url");
                    }

                    .downloadTableDesc {
                        font-size: 14px;
                        color: $download-text-color;

                        .downloadTableDescInner {
                            @include download-cell-inner(flex-start);
                        }
                    }

                    .downloadTableAction {
                        text-align: right;

                        .downloadTableActionInner {
                            @include download-cell-inner(flex-end);
                        }
                    }

                    .downloadButton {
                        display: block;
                    }

                    .downloadButtonIcon {
                        display: none;
                    }
                }
            }

            @media (max-width: 490px) {
                .downloadContent .downloadTable {
                    .downloadButton {
                        display: none;
                    }

                    .downloadButtonIcon {
                        display: block;
                    }
                }
            }

            @media (max-width: 405px) {
                .downloadContent .downloadTable {
                    th:nth-child(2),
                    td:nth-child(2) {
                        display: none !important;
                    }

                    .downloadButton {
                        display: block !important;
                    }

                    .downloadButtonIcon {
                        display: none !important;
                    }
                }
            }
        }

        .cta {
            padding-bottom: 128px;

            .container {
                @include container;
            }

            .ctaContent {
                @include section-content;

                h3 {
                    @include section-heading;
                }

                .ctaActions {
                    display: flex;
                    gap: 16px;
                    justify-content: center;
                    flex-wrap: wrap;
                }
            }
        }
    }

    @media (max-width: 635px) {
        main {
            .title {
                .titleContent,
                .titleDesc,
                .titleButtons {
                    padding: 0 16px;
                }
            }

            .features {
                padding: 0 16px;

                .featureContainer {
                    flex-direction: column;
                    align-items: center;
                    padding: 0 16px;

                    .featureText {
                        order: 1;
                        text-align: center;

                        .featureDesc {
                            text-align: center;
                        }
                    }

                    .featureScreenshotOuter {
                        order: 2;
                    }
                }
            }

            .download .container,
            .cta .container {
                padding: 0 16px;
            }
        }
    }
}

.menuCustomIcon {
    @include masked-icon("--menu-custom-icon-url");
}

// Keyframes for animations
@keyframes neonGlow {
    0% {
        text-shadow: 0 0 20px rgba($color-dark-primary, 0.5), 0 0 40px rgba($color-dark-primary, 0.3);
    }
    100% {
        text-shadow: 0 0 30px rgba($color-dark-primary, 0.8), 0 0 60px rgba($color-dark-primary, 0.5);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}