/* Animações */



@keyframes aparecer-podio {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes aparecer-icone {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes comemorando {
	0%,
	100% {
		transform: translateY(0) rotate(0);
	}

	10%, 50% {
		transform: translateY(-8px) rotate(2.5deg);
	}
	20%, 40%, 60% {
		transform: translateY(8px) rotate(0deg);
	}
	30%, 70%  {
		transform: translateY(-8px) rotate(-2.5deg);
	}
	80% {
		transform: translateY(6.4px) rotate(0deg);
	}
	90% {
		transform: translateY(-6.4px) rotate(2.5deg);
	}
}
@keyframes scroll-participantes {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-2090px);
    }
}
@keyframes freiar-carrossel {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-10px);
    }
}
@keyframes acelerar-carrossel {
    0% {
        transform: translateX(-10px);
    }
    50% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes animacao-contador-votos {
    from{
        --num: 0;
    }
    to{
        --num: var(--numero-total-votos);
    }
}
/* FIM Animações END */


@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}



body{
    flex-direction: column;
    height: auto;

    &::before {
        position: relative;
        top: unset;
        z-index: unset;
    }

    &::after {
        position: unset;
        bottom: unset;
        z-index: unset;
    }
}


#tituloPrincipal{
    display: flex;
    flex-direction: column;
    justify-content: center;
    

    margin-block: 30px;
    padding-inline: 20px;

    .titulo-principal{
        font-family: "Alfa Slab One", sans-serif;
        font-size: clamp(1rem, 4vw, 5rem);
        text-align: center;
        color: #1A1313;
        margin: 0;
    }
    
    .detalhe-estrela{
        position: unset;
        max-width: 8vw;
        transform: rotate(0);
        transition: var(--delay-default);
        animation: piscar-estrela var(--delay-default) infinite;
    
        &:hover{
            animation: pulsar-estrela calc(2 * var(--delay-default)) forwards;
        }
    }

    .imagem-titulo-xsalada{
        width: 100%;
        max-height: 240px;
        margin-block: 15px;
    }
    
}

#containerPodio{
    margin-block: 20px;
    
    .titulo-podio{
        font-family: "Alfa Slab One", sans-serif;
        font-size: clamp(1rem, 4vw, 3rem);
        text-align: center;
        color: #1A1313;
    }

    .subtitulo-podio{
        font-family: "Alfa Slab One", sans-serif;
        font-size: clamp(0.6rem, 2vw, 1.5rem);
        text-align: center;
        color: #4e4d4d;
    }

    .lista-podio{
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-areas: 'segundo primeiro terceiro';
        justify-content: center;
        align-items: end;
        
        margin-top: 60px;
        margin-bottom: 0px;
        padding: 0;
        list-style: none;


        .item-podio{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;

            
            &:nth-child(1){
                grid-area: primeiro;
                
                .logo-estabelecimento{
                    animation: aparecer-podio 500ms 4000ms ease-in-out forwards;
                }
                .pulpito{
                    height: 130px;
                    z-index: 1;
                    border-radius: 15px 15px 0px 0px;
                }
            }
            &:nth-child(2){
                grid-area: segundo;
                
                .logo-estabelecimento{
                    animation: aparecer-podio 500ms 3500ms ease-in-out forwards;
                }
                .pulpito{
                    height: 115px;
                    box-shadow: inset -7px 0px 8px -5px rgba(0,0,0,0.25);
                    border-radius: 15px 0px 0px 0px;
                }
            }
            &:nth-child(3){
                grid-area: terceiro;

                .logo-estabelecimento{
                    animation: aparecer-podio 500ms 3000ms ease-in-out forwards;
                }
                .pulpito{
                    height: 100px;
                    box-shadow: inset 7px 0px 8px -5px rgba(0,0,0,0.25);
                    border-radius: 0px 15px 0px 0px;
                }
            }
            
            .logo-estabelecimento{
                position: relative;
                top: 0px;

                opacity: 0;
                transition: var(--delay-default);

                &:hover{
                    top: -10px;
                }
                &.comemoracao-podio{
                    opacity: 1;
                    /* animation: comemorando 2s ease  normal forwards; */
                }
            }

            .pulpito{
                position: relative;

                font-family: "Alfa Slab One", sans-serif;
                font-size: clamp(1rem, 2vw, 2.5rem);
                font-weight: bold;
                text-align: center;

                padding: 20px;
    
                width: 200px;
    
                background-color: #f0f0f0;
                color: #1A1313;
            }
        }
    }
    .lista-sub-ranking{
        counter-reset: list-counter 3;

        display: flex;
        flex-direction: column;
        gap: 5px;

        font-family: "Alfa Slab One", sans-serif;
        width: 100%;
        
        padding: 30px;
        border-radius: 55px;
        margin: 0;

        background-color: white;

        .item-ranking{
            /*counter-increment: list-counter;*/
            position: relative;

            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 30px;
            
            padding: 10px;
            border-radius: 25px;
            
            transition: var(--delay-default);
            color: #1A1313;

            &:hover{
                background-color: #1a131317;
            }

            /* &::before{
                content: counter(list-counter) "º";
                font-size: clamp(1rem, 2vw, 2.5rem);
                color: #1A1313;
                width: 60px;
            } */

            .conteudo-item{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .logo-estabelecimento{
                width: 60px;
                aspect-ratio: 1 / 1;
                object-fit: contain;

                border-radius: 8px;
            }
            .nome-estabelecimento{
                display: inline;
                font-family: "Alfa Slab One", sans-serif;
                font-size: 1rem;

                width: max-content;
                margin: 0;
            }
            .contatos-estabelecimento{
                display: flex;
                gap: 15px;
                
                background: #12171429;

                border-radius: 15px;
                padding: 5px;
                margin-left: auto;

                
                
                .links-estabelecimento{
                    position: relative;

                    font-size: 1.5rem;
                    text-align: center;
                    place-content: center;
                    color: white;
                    text-decoration: none;

                    width: 50px;
                    height: 50px;
                    border-radius: 10px;
                    overflow: hidden;


                    transition: var(--delay-default);

                    i{
                        position: relative;
                        z-index: 1;
                        color: #3e3e3e;
                        transition: var(--delay-default);

                        &:last-child{
                            position: absolute;
                            bottom: 75%;
                            left: 50%;
                            transform: translate(-50%, 0%) scale(0.6);
                            transform-origin: center;
                            
                            opacity: 0;
                        }
                    }

                    &::before{
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 50%;
                        z-index: 0;
                        transform: translate(-50%, 0%) scale(0.9);

                        opacity: 0;
                        width: 50px;
                        height: 50px;

                        pointer-events: none;

                        border-radius: 10px;
                        transition: var(--delay-default) ease-in-out;
                    }
                    &.instagram::before{
                        background: #f09433;
                        background: -moz-linear-gradient(
                            45deg,
                            #f09433 0%,
                            #e6683c 25%,
                            #dc2743 50%,
                            #cc2366 75%,
                            #bc1888 100%
                        );
                        background: -webkit-linear-gradient(
                            45deg,
                            #f09433 0%,
                            #e6683c 25%,
                            #dc2743 50%,
                            #cc2366 75%,
                            #bc1888 100%
                        );
                        background: linear-gradient(
                            45deg,
                            #f09433 0%,
                            #e6683c 25%,
                            #dc2743 50%,
                            #cc2366 75%,
                            #bc1888 100%
                        );
                        background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
                    }
                    &.maps::before{
                        background-image: url("../img/fundo-maps-resultado.svg");
                        background-size: cover;
                        background-position: center;
                    }

                    &:hover{
                        color: white;

                        &.maps{
                            i{
                                &:last-child{
                                    color: #D73E34;
                                }
                            }
                        }

                        i{
                            transform: translateY(50px) scale(1.1);
                            opacity: 0;

                            &:last-child{
                                bottom: 50%;
                                color: white;
                                transform: translate(-50%, 50%) scale(1);
                                
                                opacity: 1;
                            }
                        }

                        &::before{
                            opacity: 1;
                            transform: translate(-50%, 0%) scale(1);
                        }
                    }
                    &:active{
                        transform: scale(0.9);
                    }
                }
            }
        }
    }
    .logo-estabelecimento{
        width: 150px;
        height: auto;
        border-radius: 12px;
    }
}

#estatisticas{
    margin-block: 60px;

    .titulo-estatistica{
        font-family: "Alfa Slab One", sans-serif;
        font-size: 3rem;
        text-align: center;
        color: #1A1313;
        margin-bottom: 30px;
    }

    .estatisticas-votacao{
        display: flex;
        gap: 20px;

        margin-bottom: 30px;
        
        .item-estatistica{
            font-family: "Alfa Slab One", sans-serif;
            font-size: clamp(1rem, 2vw, 1.5rem);;
            text-align: center;
            place-content: center;

            border-radius: 10px;

            padding: 20px;
            width: 100%;

            background-color: white;
        }
    }

    

    #map {
        height: 400px;
        width: 100%;
        max-width: 100%;
        max-height: 100%;

        margin: auto;

        border-radius: 30px;

        .leaflet-popup-content {
            display: flex;
            flex-direction: column;
            gap: 10px;

            h2 {
                font-family: "Alfa Slab One", Arial;
                font-size: 0.8rem;
                margin: 0;
                text-align: center;
            }
            .link-pin {
                position: relative;

                font-size: 0.8rem;
                font-weight: 500;
                font-family: "Alfa Slab One";
                text-align: center;
                place-content: center;
                text-decoration: none;

                color: white;

                background: #e30613;

                border: 1px solid #121714;

                padding-block: 3px;
                padding-inline: 12px;

                transition: var(--delay-default);
                overflow: hidden;
                clip-path: polygon(
                    100% 0,
                    95% 50%,
                    100% 100%,
                    0% 100%,
                    5% 50%,
                    0% 0%
                );

                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: -60%;
                    width: 50%;
                    height: 100%;
                    background: linear-gradient(
                        120deg,
                        transparent,
                        rgba(255, 255, 255, 0.5),
                        transparent
                    );
                    transform: skewX(-30deg);
                    transition: left 0.4s;
                }

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

                &:hover::before {
                    left: 120%;
                    transition: left 0.6s ease-out;
                }
            }
        }
    }

    .participantes-container{
        white-space: nowrap;

        margin-top: 30px;
        background-color: white;
        padding: 20px;
        border-radius: 75px;
        overflow: hidden;

        .carrossel-participantes{
            display: inline-block;

            animation: scroll-participantes 40s 1000ms linear infinite;

            
            &.freiar{
                animation-play-state: paused;
                .logo-participante{
                    animation: freiar-carrossel 500ms ease-out forwards;
                }
            }

            &.acelerar{
                animation-delay: 1000ms;
                .logo-participante{
                    animation: acelerar-carrossel 1000ms ease-out forwards;
                }
            }
        }

        .logo-participante{
            width: 75px;
            height: 75px;
            object-fit: contain;
            margin-inline: 30px;
            border-radius: 12px;
            background-color: white;

            transition: var(--delay-default);

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

.contador-total-votos {
    transition: --num 5s;
    counter-set: num var(--num);
    animation: animacao-contador-votos 2.5s ease-out forwards;
}
.contador-total-votos::after {
    content: counter(num);
}


@media (max-width: 1400px) {
    #tituloPrincipal{
        margin-block: 20px;

        .imagem-titulo-xsalada {
            max-height: 170px;
        }
    }
}
@media (max-width: 767px) {
    @keyframes scroll-participantes {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-1248px);
        }
    }

    body{
        font-size: 12px;
    }

    #tituloPrincipal{
        margin-block: 20px;
    }

    #containerPodio {
        padding-inline: 10px;

        .logo-estabelecimento {
            width: 70px;
            height: auto;
            border-radius: 12px;
        }
        .lista-podio {
            width: 100%;
            margin-top: 30px;

            .item-podio {

                &:nth-child(1){
                    .pulpito{
                        height: 50px;
                        border-radius: 10px 10px 0px 0px;
                    }
                }
                &:nth-child(2){
                    .pulpito{
                        height: 40px;
                        box-shadow: inset -7px 0px 8px -5px rgba(0,0,0,0.25);
                        border-radius: 10px 0px 0px 0px;
                    }
                }
                &:nth-child(3){
                    .pulpito{
                        height: 30px;
                        box-shadow: inset 7px 0px 8px -5px rgba(0,0,0,0.25);
                        border-radius: 0px 10px 0px 0px;
                    }
                }
                .pulpito {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0;
                    width: 100px;
                }
            }
        }
        .lista-sub-ranking {
            width: 100%;
            border-radius: 10px;
            padding: 15px;
            gap: 10px;
            
            .item-ranking {
                justify-content: start;
                padding: 0px 15px;
                gap: 5px;

                &::before{
                    width: 25px;
                }

                .nome-estabelecimento{
                    width: unset;
                }
                
                .contatos-estabelecimento {
                    display: none;
                }
                .logo-estabelecimento {
                    width: 60px;
                    margin: 0;
                }
            }
        }
    }

    #estatisticas {
        display: flex;
        flex-direction: column;
        align-items: center;

        
        
        #map{
            border-radius: 10px;
        }

        .participantes-container {
            width: 100%;
            max-width: 90vw;
            padding: 10px 20px;

            .logo-participante {
                width: 50px;
                height: 50px;
                object-fit: contain;
                margin-inline: 15px;
                border-radius: 12px;
                background-color: white;
                transition: var(--delay-default);
            }
        }
    }
}
@media (max-width: 338px) {
    #containerPodio {
        .lista-sub-ranking {
            border-radius: 0 0 10px 10px;
        }
    }
}