/*
 * Instituto Electoral del Estado de México
 * Unidad de Informática y Estadística
 * Departamento de Análisis, Desarrollo de Sistemas y Control de Calidad
 */
/* 
    Created on : 10/07/2024, 10:22:02 AM
    Author     : Marcos
*/

/*
Clase personalizada para el contenido principal
*/

@font-face {
    font-family: 'icomoon';
    src: url('/conoces-conoceles/assets/fonts/icomoon-da9cd3dbfe6015e68ce13999ecb9e7ec.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'inter';
    src: url('/conoces-conoceles/assets/fonts/inter-79f162b444ae3a31c298b3513eb5417a.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.public {
    --ai-gray: #4b575e;

    ::selection {
        color: white;
        background: color-mix(in oklch, var(--bs-secondary), black 10%);
    }

    .main-header {
        padding: 0;
        gap: 0;
        border-bottom: none;
        box-shadow: 0 2px 10px #0006 !important;

        .container {
            padding: 0;
            color: white;
            gap: 0 !important;
            background-image: linear-gradient(to right, var(--bs-secondary) 50%, color-mix(in oklch, var(--bs-secondary), black 10%));

            .navbar-brand {
                color: white;
                font-size: 1em;
                position: relative;
                padding: 0.75rem 1rem;
                background-color: var(--ai-gray);

                span {
                    font-weight: 500 !important;
                    color: white !important;
                }

                &::after {
                    right: 0;
                    width: 2px;
                    content: '';
                    height: 75%;
                    position: absolute;
                    border-radius: 0.25rem;
                    background-color: white;
                }

                @media (width <768px) {
                    box-shadow: var(--bs-box-shadow);
                }
            }

            .nav-link {
                padding: 0.75rem;
                font-weight: bolder;
                color: white !important;

                @media (width <=768px) {
                    font-size: 0.8rem !important;
                }

                &::selection {
                    background: white;
                    color: var(--bs-secondary);
                }
            }

            @media (width < 768px) {
                flex-wrap: wrap;

                .navbar-collapse {
                    height: 48px;
                    flex-grow: 1;
                    display: flex;
                    flex-basis: auto;
                    align-items: center;
                    box-shadow: var(--bs-box-shadow);
                }

                &>ul {
                    flex-basis: 100%;
                }
            }

            @media (width <557px) {
                .navbar-brand {
                    width: 100%;

                    &::after {
                        bottom: 0;
                        height: 2px;
                        left: 0.5rem;
                        right: 0.5rem;
                        width: -webkit-fill-available;
                    }
                }

                .navbar-collapse {
                    display: flex;
                    justify-content: center;
                }
            }
        }
    }

    .content-wrapper {
        padding-top: 50px !important;
        background-color: transparent;

        &::after {
            inset: 0;
            content: '';
            opacity: 0.6;
            position: absolute;
            background: radial-gradient(circle, transparent 20%, var(--bs-body-bg) 20%, var(--bs-body-bg) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, var(--bs-body-bg) 20%, var(--bs-body-bg) 80%, transparent 80%, transparent) 12.5px 12.5px, linear-gradient(var(--bs-gray-200) 1px, transparent 1px) 0 -0.5px, linear-gradient(90deg, var(--bs-gray-200) 1px, var(--bs-body-bg) 1px) -0.5px 0;
            background-size: 25px 25px, 25px 25px, 12.5px 12.5px, 12.5px 12.5px;
        }

        main {
            z-index: 2;

            &>nav {
                top: 0;
                left: 0;
                position: absolute;
                background-color: #474d5a;
                box-shadow: 0 2px 10px #0006;

                ul {
                    min-height: 50px;
                }

                li {
                    height: 100%;
                    display: flex;

                    &:not(:last-of-type) {
                        border-right: 1px solid color-mix(in oklch, white, transparent);
                    }

                    a {
                        display: grid;
                        font-size: 1em;
                        place-items: center;

                        &:hover {
                            background-color: color-mix(in oklch, white, transparent 90%);
                        }
                    }
                }
            }

            header {
                .logo-conoceles {
                    place-items: center;
                    position: absolute;
                    display: grid;
                    left: 1em;
                    top: 50px;

                    img {
                        &:first-child {
                            transition: translate 0.5s ease;
                            translate: 0 -40px;
                            height: 17.5em;

                            @starting-style {
                                translate: 0 -13em;
                            }
                        }

                        &:last-child {
                            transition: opacity 0.3s ease 0.5s, filter 0.3s ease 0.5s;
                            position: absolute;
                            translate: 0 -2.75em;
                            height: 9em;

                            @starting-style {
                                opacity: 0;
                                filter: blur(100px);
                            }
                        }
                    }
                }

                .d-flex {
                    img {
                        transition: 0.5s ease opacity, 0.5s ease scale;
                        max-height: 5em;

                        &:last-child {
                            max-height: 8em;
                        }

                        @starting-style {
                            opacity: 0;
                            scale: 0;
                        }
                    }

                    div {
                        height: 100%;
                        min-width: 2px;
                        max-height: 75px;
                    }
                }

                .huellas {
                    transition: filter 0.5s ease, opacity 0.5s ease;
                    position: absolute;
                    height: 15em;
                    top: 50px;
                    right: 0;

                    @starting-style {
                        opacity: 0;
                        filter: blur(100px);
                    }
                }
            }

            section {
                transition: 1s opacity ease, 1s translate ease;
                margin-bottom: 6rem !important;

                @starting-style {
                    opacity: 0;
                    translate: 0 5em;
                }
            }

            &>footer {
                &>svg {
                    translate: -6rem 8.5rem;
                    position: absolute;
                    scale: 1 0.65;
                    height: 48rem;
                    bottom: 0;
                    left: 0;

                    path {
                        animation: bg-images-animation 50s linear infinite reverse;
                    }
                }

                &>img {
                    padding: 0.5rem;
                    max-height: 90px;
                    filter: brightness(0) invert(1);
                }

                .swiper-wrapper {
                    --swiper-navigation-size: 35px;
                    max-width: 800px;

                    .swiper {
                        a {
                            height: 100%;
                            display: grid;
                            place-items: center;

                            img {
                                width: 15rem;
                                max-height: 70px;
                                filter: brightness(0) invert(1);
                            }
                        }
                    }

                    .swiper-button-prev {
                        left: -2rem !important;
                    }

                    .swiper-button-next {
                        right: -2rem !important;
                    }

                    .swiper-button-prev,
                    .swiper-button-next {
                        &:is(:hover, :active, :focus, :focus-visible) {
                            background-color: color-mix(in oklch, currentColor, transparent 90%);
                            border-radius: 50%;
                        }
                    }
                }


                *:not(svg) {
                    z-index: 2;
                }
            }
        }

        @media(width <=1024px) {
            & main>header>.row {
                translate: 4em 0;
            }
        }

        @media (width <=970px) {
            & main {
                max-width: fit-content;
                margin: 0;

                &>header {
                    &>.logo-conoceles>img {
                        &:first-child {
                            height: 14em;
                        }

                        &:last-child {
                            height: 6.5em;
                        }
                    }

                    &>.row {

                        &>img {
                            max-height: 4em;
                        }
                    }

                    &>.huellas {
                        height: 13em;
                    }
                }
            }
        }


        @media (width <=733px) {
            & main>header {

                .logo-conoceles,
                .huellas {
                    top: 64px;
                }

                .d-flex {
                    padding-top: 9em !important;
                    padding-bottom: 0 !important;
                }
            }
        }

        @media (width <=632px) {
            & main>footer {
                &>svg {
                    scale: 1 1.65;
                }

                &>address>div {
                    justify-content: center;
                }
            }
        }

        @media (width <=600px) {
            & main>header>.d-flex {
                translate: -3em;
                padding-top: 10em !important;
            }
        }

        @media (width <=590px) {
            & main {
                &>header {

                    .logo-conoceles,
                    .huellas {
                        top: 88px;
                    }

                    .d-flex {
                        padding-top: 11em !important;
                    }
                }

                &>footer>svg {
                    scale: 1 1.6;
                }
            }
        }

        @media (width <=425px) {
            & main {
                padding-inline: 0;

                &>nav>ul {
                    display: flex !important;
                    flex-wrap: wrap;

                    li:nth-child(3) {
                        border-right: 0;
                    }
                }

                &>header {

                    .logo-conoceles,
                    .huellas {
                        top: 120px;
                    }

                    .d-flex {
                        padding-top: 15em !important;
                    }
                }
            }
        }
    }

    .wrapper {
        overflow: hidden;
    }


    .main-footer {
        display: none !important;
    }

    .icon-coe::before {
        content: "\e900";
        font-size: 1rem;
        font-family: 'icomoon';
    }

    .icon-twitter::before {
        content: "\e947";
        font-size: 1rem;
        font-family: 'icomoon';
    }

    .btn-twitter {
        display: grid;
        place-items: center;

        svg {
            fill: white;
            height: 1em;
            width: 1em;
            translate: 0 -2px;
        }
    }

    .font-tech {
        font-family: inter, sans-serif;
        font-variant-numeric: slashed-zero;
        font-feature-settings: 'zero' 1;
    }
}

body:not(.public) {
    .logo-conoceles {
        filter: blur(0);
        transform: rotate(0deg);
        transition: filter 0.3s ease, transform 0.3s ease;

        @starting-style {
            transform: rotate(180deg);
            filter: blur(200px);
        }
    }

    .content-wrapper {
        --ai-dots-color: chartreuse;
        --ai-dots-opacity: 0.2;
    }

    &.ai-dots-bg .content-wrapper::after {
        width: 100%;
        height: 100%;
        content: '';
        position: absolute;
        pointer-events: none;
        background-image: url(/conoces-conoceles/assets/img/logo/logo-03a3e7cc5250e27af73c0e3da6ad67a6.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 75% 75%;
        z-index: -1;
    }

    .main-sidebar {
        .brand-link {
            font-size: 1.1em;
        }

        .nav-item .nav-link .right {
            top: 1em;
        }
    }
}

@keyframes bg-images-animation {
    0% {
        d: path("M 0,500 L 0,187 C 153,179 307,172 486,178 C 664,183 867,202 1031,206 C 1194,209 1317,198 1440,187 L 1440,500 L 0,500 Z");
    }

    25% {
        d: path("M 0,500 L 0,187 C 138,195 276,203 439,200 C 601,196 788,182 959,178 C 1129,173 1284,180 1440,187 L 1440,500 L 0,500 Z");
    }

    50% {
        d: path("M 0,500 L 0,187 C 185,177 370,168 522,172 C 673,175 791,193 939,198 C 1086,202 1263,194 1440,187 L 1440,500 L 0,500 Z");
    }

    75% {
        d: path("M 0,500 L 0,187 C 138,195 276,203 439,200 C 601,196 788,182 959,178 C 1129,173 1284,180 1440,187 L 1440,500 L 0,500 Z");
    }

    100% {
        d: path("M 0,500 L 0,187 C 153,179 307,172 486,178 C 664,183 867,202 1031,206 C 1194,209 1317,198 1440,187 L 1440,500 L 0,500 Z");
    }
}