@keyframes aparecer-modal {
    from{
        background-color: #00000000;
        backdrop-filter: blur(0px);
        opacity: 0;   
    }
    to{
        background-color: #00000040;
        backdrop-filter: blur(10px);
        opacity: 1;   
    }
}
@keyframes desaparecer-modal {
    from{
        background-color: #00000040;
        backdrop-filter: blur(10px);
        opacity: 1;   
    }
    to{
        background-color: #00000000;
        backdrop-filter: blur(0px);
        opacity: 0;   
    }
}
@keyframes descer-modal {
    from{
        top: -60px; 
    }
    to{
        top: 0;
    }
}
@keyframes subir-modal {
    from{
        top: 0;
        /* transform: rotate3d(-1, -1, 0, 0deg); */
    }
    to{
        top: -60px;
        /* transform: rotate3d(-1, -1, 0, -50deg); */
    }
}

:root{
    --delay-default: 500ms
}

#modalParticipante{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    
    display: none;
    
    width: 100vw;
    height: 100vh;
    
    opacity: 0;
    
    &.modal-aberto{
        display: flex;
        align-items: center;

        animation: aparecer-modal var(--delay-default) forwards;
        
        .container-modal{
            position: relative;
            transform: translateY(75px);

            display: flex;
            flex-direction: column;

            width: min-content;
            min-width: 420px;
            height: min-content;
            background-color: white;

            margin: auto ;
            border-radius: 40px;

            animation: descer-modal var(--delay-default) forwards;


            .container-logo{
                position: relative;

                display: flex;
                justify-content: center;

                width: 100%;
                height: 150px;

                pointer-events: none;
                transform-style: preserve-3d;

                .logo-participante{
                    position: absolute;
                    bottom: 0;

                    width: calc(100% - 120px);
                    aspect-ratio: 1 / 1;
                    object-fit: contain;
    
                    border-radius: 12px;

                }
    
                .participante-colocacao{
                    position: absolute;
                    bottom: 0;
                    transform: translateY(50%) translateZ(100px);

                    font-family: "Alfa Slab One", sans-serif;
                    font-size: 64px;
                    text-align: center;
                    place-content: center;

                    width: 120px;
                    height: 120px;

                    background-color: rgba(255, 255, 255, 0.600);
                    backdrop-filter: blur(8px);
                    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
                    border-radius: 50%;
                    padding-top: 10px;
                }
            }


            .informacoes{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                padding-inline: 30px;
                padding-block: 15px;
                margin-top: 50px;

                .nome-estabelecimento{
                    font-family: "Alfa Slab One", sans-serif;
                    font-size: clamp(1rem, 4vw, 1.5rem);
                    text-align: center;
                    margin: 0;
                    width: max-content;
                }
                .numero-estabelecimento{
                    font-family: "Alfa Slab One", sans-serif;
                    font-size: 0.8rem;
                    color: #1A1313;
                    text-align: center;
                    text-decoration: none;

                    margin-bottom: 15px;
                }
                .links-participante{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;

                    .link-estabelecimento{
                        color: #1A1313;
                        text-decoration: none;

                        padding: 5px 10px;
                        border-radius: 30px;
                        border: 1px solid #1A1313;
                    }
                }
            }

            .botao-fechar-modal{
                position: absolute;
                top: 0;
                right: 0;

                transform: translate(-20px, 20px);

                width: 24px;
                height: 24px;

                clip-path: circle(50%);
                background-color: white;

                border: none;
                padding: 0;
                cursor: pointer;
                transform-origin: center;
                
                transition: var(--delay-default);

                svg{
                    width: 24px;
                    height: 24px;
                    transition: var(--delay-default);
                }

                &:hover svg{
                    transform: scale(1.1);
                }
                &:active svg{
                    transform: scale(0.9);
                }
            }
        }
    }

    &.modal-aberto.fechar-modal{
        animation: desaparecer-modal calc(var(--delay-default) / 2) forwards ;

        .container-modal{
            animation: subir-modal calc(var(--delay-default) / 2);
        }
    }
}


@media (max-width: 320px) {
    #modalParticipante{
        &.modal-aberto{
            .container-modal{
                min-width: 300px;
                border-radius: 20px;

                .container-logo{
                    height: 90px;

                    .logo-participante{
                        width: calc(100% - 120px);
                        aspect-ratio: 1 / 1;
                    }
                    .participante-colocacao{
                        font-size: 38px;
                        width: 70px;
                    }
                }
            }
        }
    }
    
}