/* style_entrance.css */

#frame7{
    visibility: hidden;
  }
  
#frame8{
    visibility: hidden;
  }

#frame9{
    visibility: hidden;
    pointer-events: none;
  }
  

#entrancebg {
    background-image: url('../assets/img/entrance/tilee2d1.png');
    background-repeat: repeat;
    background-size: 18vw;
}

#entrancescene{
    pointer-events: auto;
    filter: brightness(1);
    transition: filter 2s;
}

#entrancefloor{
    position: absolute;
    width: 100vw;
    top: 39.5vw;
}

#door1{
    position: absolute;
    width: 18vw;
    left: 41.9vw;
    top: 2vw;
}

#door2{
    position: absolute;
    width: 19vw;
    left: 12.5vw;
    top: -1.5vw;
}

#door3{
    position: absolute;
    width: 19vw;
    left: 68.5vw;
    top: -1.5vw;
}

#entrancearch2{
    position: absolute;
    width: 30vw;
    left: 35vw;
    top: -6.5vw;
    pointer-events: none;
}

#entrancearch3{
    position: absolute;
    width: 37vw;
    left: -1vw;
    top: -3vw;
    pointer-events: none;
}

#entrancearch4{
    position: absolute;
    width: 37vw;
    left: 64vw;
    top: -2.6vw;
    pointer-events: none;
}

#entrancetable{
    position: absolute;
    width: 15vw;
    left: 55vw;
    top: 19vw;
    pointer-events: none;
}

#mousef7{
    position: absolute;
    width: 40vw;
    left: 11vw;
    top: 8vw;
    animation: tilt-shaking 0.25s ease-in-out infinite;
}

/* source: https://unused-css.com/blog/css-shake-animation/ */
@keyframes tilt-shaking {
    0% { transform: rotate(0deg); 
        transform-origin: bottom;}
    25% { transform: rotate(2deg);
        transform-origin: bottom;}
    50% { transform: rotate(0deg);
        transform-origin: bottom; }
    75% { transform: rotate(-2deg);
        transform-origin: bottom; }
    100% { transform: rotate(0deg);
        transform-origin: bottom; }
  }

#dia7{
    position: absolute;
  left: 23vw;
  top: 40vw;
  width: 55vw;
}

#mousef8{
    position: absolute;
    width: 30vw;
    left: 19vw;
    top: 7vw;
}

#dia8{
    position: absolute;
  left: 23vw;
  top: 40vw;
  width: 63vw;
}

#reply3{
    width: 25vw;
    margin: 0 0.5vw;
}

#reply4{
    width: 35vw;
    margin: 0 0.5vw; 
}

#mousef9{
    position: absolute;
    width: 31vw;
    left: 20vw;
    top: 7vw;
}

#batplay{
    position: absolute;
    width: 14vw;
    top: 15vw;
    left: 28vw;
    filter: brightness(0.8);
    animation: batanim 2s linear forwards;
    opacity: 0;
}

@keyframes batanim{
    0%{opacity:0;}
    5%{ opacity: 1;}
    80%{opacity: 1;}
    100%{ opacity: 0; 
        left: 15vw;
        top:13vw;}
}

#puterframe{
    position: absolute;
    width: 110vw;
    left: -5.2vw;
    top: 0;
    pointer-events: none;;
}