/*==================================================
            TENDÊNCIAS DA MODA KIDS
                MENU PREMIUM
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap');

/*==================================================
                VARIÁVEIS
==================================================*/

:root{



    --bg1:#e78ac2;
    --bg2:#ffffff;
    --bg3:#ee096d;

    --white:#ffffff;

    --shadow:0 18px 45px rgba(0,0,0,.18);

    --radius:28px;

    --transition:.35s ease;

}


/*==================================================
                RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Baloo 2',cursive;

    min-height:100vh;

    overflow-x:hidden;

    background:linear-gradient(
        135deg,
        var(--bg1),
        var(--bg2),
        var(--bg3)
    );

    background-size:300% 300%;

    animation:bgMove 12s ease infinite;

}



/*====================================
        PARTÍCULAS BRILHANTES
====================================*/

.spark{

    position:fixed;

    width:8px;

    height:8px;

    pointer-events:none;

    z-index:1;

    opacity:.6;

    animation:
        sparkle linear infinite;

}

.spark::before,
.spark::after{

    content:"";

    position:absolute;

    background:white;

    border-radius:20px;

}

.spark::before{

    width:2px;
    height:10px;
    left:3px;
    top:-1px;

}

.spark::after{

    width:10px;
    height:2px;
    left:-1px;
    top:3px;

}

@keyframes sparkle{

    0%{

        transform:
            translateY(0)
            rotate(0deg)
            scale(.6);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    80%{

        opacity:1;

    }

    100%{

        transform:
            translateY(-120px)
            rotate(180deg)
            scale(1.3);

        opacity:0;

    }

}
/*==================================================
                ANIMAÇÃO FUNDO
==================================================*/

@keyframes bgMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}


/*==================================================
                BOLHAS
==================================================*/

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}

.background span{

    position:absolute;

    display:block;

    width:45px;

    height:45px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(2px);

    animation:float 16s linear infinite;

}


/* POSIÇÕES */

.background span:nth-child(1){

    left:5%;
    width:60px;
    height:60px;
    animation-duration:18s;
    animation-delay:0s;

}

.background span:nth-child(2){

    left:18%;
    top:70%;
    width:35px;
    height:35px;
    animation-duration:15s;

}

.background span:nth-child(3){

    left:35%;
    top:15%;
    width:80px;
    height:80px;
    animation-duration:20s;

}

.background span:nth-child(4){

    left:55%;
    top:80%;
    width:50px;
    height:50px;

}

.background span:nth-child(5){

    left:70%;
    top:25%;
    width:90px;
    height:90px;
    animation-duration:25s;

}

.background span:nth-child(6){

    left:82%;
    top:70%;
    width:45px;
    height:45px;

}

.background span:nth-child(7){

    left:92%;
    top:35%;
    width:65px;
    height:65px;

}

.background span:nth-child(8){

    left:45%;
    top:90%;
    width:30px;
    height:30px;

}


/*==================================================
                FLOAT
==================================================*/

@keyframes float{

    0%{

        transform:
        translateY(120vh)
        rotate(0deg);

    }

    100%{

        transform:
        translateY(-140vh)
        rotate(360deg);

    }

}


/*==================================================
                CONTAINER
==================================================*/

.container{

    position:relative;

    z-index:2;

    width:min(1400px,94%);

    margin:auto;

    padding:30px 20px 60px;

}


/*==================================================
                LOGO
==================================================*/

.logo-area{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin-bottom:40px;

}

.logo{

    width:220px;

    max-width:90%;

    display:block;

    margin-bottom:18px;


}



/*==================================================
                TÍTULO
==================================================*/

.logo-area h1{

    color:#ac6060;

    font-size:clamp(2rem,4vw,3.3rem);

    font-weight:800;

    text-align:center;

    text-shadow:

        0 3px 8px rgba(0,0,0,.25);

}

.logo-area p{

    margin-top:8px;

    color:#a79090;

    font-size:1.25rem;

    font-weight:600;

    text-align:center;

    opacity:.95;

}


/*==================================================
                GRID
==================================================*/

.menu-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

    align-items:stretch;

}


/*==================================================
            TABLET
==================================================*/

@media(max-width:900px){

    .container{

        padding:25px 18px 50px;

    }

    .menu-grid{

        grid-template-columns:
        repeat(2,1fr);

        gap:22px;

    }

    .logo{

        width:490px;

    }

}


/*==================================================
            CELULAR
==================================================*/

@media(max-width:600px){

    .container{

        width:95%;

        padding:20px 12px 40px;

    }

    .menu-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .logo{

        width:170px;

    }

    .logo-area h1{

        font-size:2rem;

    }

    .logo-area p{

        font-size:1rem;

    }

}/*==================================================
                CARTÕES
==================================================*/

.card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:240px;

    padding:28px;

    border-radius:32px;

    border:5px dashed rgba(255,255,255,.95);

    text-decoration:none;

    color:#FFF;

    overflow:hidden;

    cursor:pointer;

    box-shadow:var(--shadow);

    transition:all .35s ease;

    isolation:isolate;

    animation:cardFloat 4s ease-in-out infinite;

}

/*==================================================
            ATRASO DAS ANIMAÇÕES
==================================================*/

.card:nth-child(2){ animation-delay:.2s; }
.card:nth-child(3){ animation-delay:.4s; }
.card:nth-child(4){ animation-delay:.6s; }
.card:nth-child(5){ animation-delay:.8s; }
.card:nth-child(6){ animation-delay:1s; }

/*==================================================
            FLUTUAÇÃO
==================================================*/

@keyframes cardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==================================================
                HOVER
==================================================*/

.card:hover{

    transform:
        translateY(-12px)
        scale(1.05);

    box-shadow:
        0 28px 55px rgba(0,0,0,.25);

}

.card:hover .card-icon{

    transform:
        scale(1.12)
        rotate(-6deg);

}

.card:active{

    transform:scale(.96);

}

/*==================================================
            BRILHO ANIMADO
==================================================*/

.shine{

    position:absolute;

    top:-40%;

    left:-80%;

    width:60%;

    height:180%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transform:rotate(25deg);

    animation:shine 4s linear infinite;

}

@keyframes shine{

    0%{

        left:-80%;

    }

    100%{

        left:150%;

    }

}

/*==================================================
                ÍCONES
==================================================*/

.card-icon{

    width:110px;

    height:110px;

    object-fit:contain;

    margin-bottom:20px;

    user-select:none;

    pointer-events:none;
    

    filter:

        drop-shadow(0 8px 12px rgba(0,0,0,.18));

    animation:
        iconFloat 3s ease-in-out infinite;

    transition:.35s;

       filter:
        brightness(0)
        invert(1);


}


@keyframes iconFloat{

    0%{

        transform:
            translateY(0)
            rotate(-2deg);

    }

    50%{

        transform:
            translateY(-8px)
            rotate(2deg);

    }

    100%{

        transform:
            translateY(0)
            rotate(-2deg);

    }

}

/*==================================================
                TÍTULO
==================================================*/

.card h2{

    text-align:center;

    line-height:1.25;

    font-size:1.55rem;

    font-weight:800;

    color:#FFF;

    text-shadow:

        0 3px 8px rgba(0,0,0,.20);

}

/*==================================================
            CORES DOS CARTÕES
==================================================*/

.pink{

    background:
    linear-gradient(135deg,#FF5DA8,#FF8A5B);

}

.blue{

    background:
    linear-gradient(135deg,#5D8BFF,#58D3FF);

}

.green{

    background:
    linear-gradient(135deg,#30C46C,#71F18D);

}

.orange{

    background:
    linear-gradient(135deg,#FF8C37,#FF5E57);

}

.yellow{

    background:
    linear-gradient(135deg,#FFD93D,#FFB000);

    color:#5A4300;

}

.yellow i,
.yellow h2{

    color:#5A4300;

    text-shadow:none;

}

.purple{

    background:
    linear-gradient(135deg,#8A5BFF,#C06CFF);

}

/*==================================================
            BOLHAS DECORATIVAS
==================================================*/

.card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:rgba(255,255,255,.15);

    border-radius:50%;

    top:-80px;

    right:-60px;

}

.card::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    background:rgba(255,255,255,.10);

    border-radius:50%;

    bottom:-50px;

    left:-40px;

}

/*==================================================
            FOCUS
==================================================*/

.card:focus{

    outline:none;

}

/*==================================================
            TABLET
==================================================*/

@media(max-width:900px){

    .card{

        min-height:210px;

        padding:22px;

    }

     .card-icon{

        width:90px;

        height:90px;

    }

    .card h2{

        font-size:1.35rem;

    }

    

}

/*==================================================
            CELULAR
==================================================*/

@media(max-width:600px){

    .card{

        min-height:180px;

        border-radius:24px;

        border-width:4px;

        padding:18px;

    }

   .card-icon{

        width:75px;

        height:75px;

    }


    .card h2{

        font-size:1.15rem;

    }

}

/*==================================================
            TELAS GRANDES
==================================================*/

@media(min-width:1600px){

    .menu-grid{

        gap:40px;

    }

    .card{

        min-height:280px;

    }

    .card i{

        font-size:90px;

    }

    .card h2{

        font-size:1.8rem;

    }

}