/* ==========================================================
   HOSTESS
========================================================== */

.hostess-wrapper{

    position:relative;

}

.hostess-character{

    position:absolute;

    left:50%;
    top:50%;

    width:340px;

    transform:
        translate(-50%,-50%)
        scale(.82);

    opacity:0;

    pointer-events:none;

    z-index:20;

}

.hostess-dialogue{
    position: absolute;
    right: 100%;
    top: -210px;
    margin-right: 65px;
    z-index: 5;
    transform:translateX(-20px);
    opacity: 0;
  
}

.hostess-dialogue.visible{

    /*animation:dialogueAppear .35s ease forwards;*/
    opacity:1;

}

.hostess-container.hidden{
    display:none;
}


/* ==========================================================
   APARICIÓN
========================================================== */

.hostess-character.visible{

    animation:
        hostessAppear 2.5s linear forwards;
       

}


/* ==========================================================
   MATERIALIZACIÓN
========================================================== */

@keyframes hostessAppear{

    0%{

        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(.45);

        filter:brightness(3);

    }

    20%{

        opacity:.05;

        transform:
            translate(-50%,-50%)
            scale(.55);

        filter:brightness(2.7);

    }

    40%{

        opacity:.18;

        transform:
            translate(-50%,-50%)
            scale(.65);

        filter:brightness(2.3);

    }

    60%{

        opacity:.45;

        transform:
            translate(-50%,-50%)
            scale(.80);

        filter:brightness(1.8);

    }

    80%{

        opacity:.75;

        transform:
            translate(-50%,-50%)
            scale(.92);

        filter:brightness(1.3);

    }

    100%{

        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1);

        filter:brightness(1);

    }

}

/* ==========================================================
   FLOTACIÓN
========================================================== */



.hostess-float.floating{

    animation: hostessFloatY 2.2s ease-in-out infinite alternate;

}

.hostess-float{

    animation: hostessSway 3.2s ease-in-out infinite alternate;

}

/* Movimiento vertical */

@keyframes hostessFloatY{

    from{
        transform: translateY(-18px);
    }

    to{
        transform: translateY(18px);
    }

}

/* Balanceo */

@keyframes hostessSway{

    from{
        rotate: -2deg;
    }

    to{
        rotate: 2deg;
    }

}
/* ==========================================================
   APARICIÓN BOCADILLO
========================================================== */

@keyframes dialogueAppear{

    from{

        opacity:0;

        transform:
            translateX(-20px)
            translateY(10px)
            scale(.96);

        filter:blur(2px);

    }

    to{

        opacity:1;

        transform:
            translateX(-20px)
            translateY(0)
            scale(1);

        filter:blur(0);

    }

}

/*==========================================================
  RESPONSIVE HOSTESS
==========================================================*/

@media (max-width: 900px){

    .hostess-character{

        width:270px;

    }

    .hostess-dialogue{

        top:-160px;
        margin-right:20px;

    }

    .bocadillo{

        width:320px;

    }

}


@media (max-width: 768px){

    .hostess-wrapper{

        width:100%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;

    }

    .hostess-character{

        position:relative;

        left:auto;
        top:auto;

        width:230px;

        transform:none;

    }

    .hostess-dialogue{

        position:relative;

        right:auto;
        top:auto;

        margin:0;

        transform:none;

        margin-bottom:20px;

        order:-1;

    }

    .bocadillo{

        width:280px;

    }

}


@media (max-width:480px){

    .hostess-character{

        width:190px;

    }

    .bocadillo{

        width:240px;

    }

}