/* 
    Archivo CSS para el ObjetoCanvas creado el [05/08/2016] por Josep Antoni Bover Comas, para https://devildrey33.es
    Ultima modificación [03/04/2018]
        - [03/04/2018] Añadido filtro blur/grayscale en el canvas durante la pre-carga (mientras se ve el mensaje "Cargando...")
                       NOTA : no funciona en navegadores de microsoft..
*/



/* Fuente del logo */
@import url('https://fonts.googleapis.com/css?family=Architects+Daughter|Orbitron');


body { margin:0px; padding:0px; }
            
/* Estilos para los marcos informativos */
#ObjetoCanvas {
    margin:0px;
    height:100%;
    border-top:none;
    color:#FFFFFF;
    /*    background:rgba(49,46,53, 1);*/
    z-index:10;
    /*    position:absolute;*/
    width:100%;
    overflow:hidden;
    position:fixed;
    top:0px;
    bottom:0px;
    left: 0px;
}        

#ObjetoCanvas, #ObjetoCanvas * {
    /* Anula la animación del iphone al hacer scroll y evita el flickering si hay etiquetas por encima del canvas (o eso dice stackoverflow... POR) */
    /* NO FUNCIONA O NO ACABA DE FUNCIONAR... */
   -webkit-tap-highlight-color:rgba(0,0,0,0);        
}

#ObjetoCanvas > #Cabecera_Canvas {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
/*    filter:grayscale(0%);
    transition:filter 2s;*/
}

#ObjetoCanvas[cargando=true] > #Cabecera_Canvas {
/*    filter:grayscale(100%);*/
}

#ObjetoCanvas > #Cabecera_Cargando {  left: calc(50%);  font-family:'Orbitron',sans-serif; }
#ObjetoCanvas > #Cabecera_Iniciar  {  left: calc(50%);   cursor:pointer;  }


#ObjetoCanvas > #Cabecera_Cargando, #ObjetoCanvas > #Cabecera_Iniciar {
    bottom: 50%;
    /* height: 50px; */
    font-size: 42px;
    transform:perspective(600px) rotateX(-90deg) translateX(-50%);
}        
            
/*#Cabecera > #Cabecera_Stats {
    transform-origin: top center;
    transform:perspective(600px) rotateX(-90deg);  
    right:0px;
}*/

#ObjetoCanvas > #Cabecera_PausaAni {
    transform-origin: top center;
    transform:perspective(600px) rotateX(-90deg);
    top:0px;
    right:0px;    
}

/* Sobra nomes s'utilitza en el banner */         
/* Solo se muestra la información de la animación si la animación está activa (puede estar visible pero inactiva si la web no tiene el foco) */
/*#Cabecera[animar=true]:hover > #Cabecera_Stats {
    transform:perspective(600px) rotateX(0deg);    
}*/

/* Solo se muestra la pausa de la animación si la animación está inactiva (puede estar visible pero inactiva si la web no tiene el foco) */
/*#ObjetoCanvas[animar=false] > #Cabecera_PausaAni {
    transform:perspective(600px) rotateX(0deg);    
}*/

/* Solo se muestra el texto cargando mientras el atributo cargando sea true (necesario para advertir de la carga de texturas) */
#ObjetoCanvas[cargando=true] > #Cabecera_Cargando {
    transform:perspective(600px) rotateX(0deg) translateX(-50%);        
}
/* Marco para mostrar texto */
.MarcoCanvas {
    transition:0.4s cubic-bezier(.33,.05,.69,1.59);
    z-index:13;
    padding:10px;
    margin:5px;    
    background-color: rgba(37,35,40, 0.6);
    color:#FFF;
    text-shadow:1px 1px 1px #000;
    position:fixed;
    border:1px solid #353338;
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    user-select         : none;    
}

#Cabecera_Error {
    position:fixed;
    background-color: rgb(128, 128, 128) !important;    
    min-width:100%;    
    min-height:100%;    
    z-index:1000;
    display:none;
    margin:0px;
    padding:20px;
    font-size:20px;
}

#Cabecera_Error[visible=true] {
    display:block;
}

#Cabecera_Error > span {
    background-color: rgb(187,35,40) !important; 
    padding:5px;
    margin-left:auto;
    margin-right:auto;
    display:table;
}

#Cabecera_Error > img {
    width:650px; 
    height:500px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    display:table;
}




/* Contenedor para los controles del canvas */
#ObjetoCanvas_Controles {
    position:fixed;
    
    bottom:10px;
    z-index:1000;
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    user-select         : none;
    /* left: 0px; */
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    font-family:'Orbitron',sans-serif;
    align-items: flex-start;
    text-shadow:1px 1px 1px #000;
}

#ObjetoCanvas_Controles[alinear=derecha]   { right:10px; }
#ObjetoCanvas_Controles[alinear=izquierda] { left:10px; }

.ObjetoCanvas_Boton, .ObjetoCanvas_Marco {
    width:58px;
    height:58px;
    /*padding:10px;*/
    border-radius:4px;
    border:2px solid #000;
    background-image:radial-gradient(rgba(35, 35, 35, 0.5), rgba(0, 0, 0, 0.95));
    /*cursor:pointer;*/
    color:#FFF;
    overflow:hidden;
    /* margin-left:auto;  */
    /* margin-right:auto; */
    margin-top:10px;
    position:relative;
    transition:0.4s;
}

#ObjetoCanvas_Controles[alinear=derecha] > .ObjetoCanvas_Boton, #ObjetoCanvas_Controles[alinear=derecha] > .ObjetoCanvas_Marco {
    margin-left:auto;
}

#ObjetoCanvas_Controles[alinear=izquierda] > .ObjetoCanvas_Boton, #ObjetoCanvas_Controles[alinear=izquierda] > .ObjetoCanvas_Marco {
    margin-right:auto;
}

.ObjetoCanvas_Boton:hover {
    border:2px solid rgb(234, 80, 78);
    cursor:pointer;
}

.ObjetoCanvas_Marco > #ObjetoCanvas_FPS,
.ObjetoCanvas_Marco > #ObjetoCanvas_TxtFPS {                
    display:table;
    margin-left:auto;
    margin-right:auto;
    cursor: default;
}

.ObjetoCanvas_Marco > #ObjetoCanvas_FPS    { font-size:26px; color:rgb(0, 255, 0); }
.ObjetoCanvas_Marco > #ObjetoCanvas_TxtFPS { font-size:16px; }

.ObjetoCanvas_Boton > img {
    transition:0.4s;
    width:48px;
    height:48px;
    position:absolute;
    top:5px;
    right:5px;
}

.ObjetoCanvas_Boton:hover > img {
    transform: scale(1.5, 1.5);
}

#ObjetoCavas_PantallaCompleta, #ObjetoCavas_RestaurarPantalla {
    cursor:pointer;
}

#ObjetoCavas_Logo:hover {
    width:280px;
    border:2px solid rgb(234, 80, 78);
}


#ObjetoCavas_Logo > #ObjetoCavas_TextoLogo {
    position:absolute;
    bottom:14px;
    margin-top:3px;
    transition:0.4s;
    width:4800px; /* 12 caracters * 400px */                 
    font-size:24px;
/*    letter-spacing:-3px;*/
}


#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span {                
    position:relative;
    opacity:1;
    left:400px;
    animation: AnimacionLogo 0.5s 1 cubic-bezier(.17,-0.42,0,1.15);
    animation-fill-mode:forwards;

}

#ObjetoCavas_Logo > #ObjetoCavas_TextoLogo > span {
    transition:0.5s cubic-bezier(.17,-0.42,0,1.15);
    opacity:0;
    position: relative;
    display: inline-block;
    color:#FFF;
}            
/* Color rojo del 33 */
#ObjetoCavas_Logo > #ObjetoCavas_TextoLogo > span:nth-child(11), #ObjetoCavas_Logo > #ObjetoCavas_TextoLogo > span:nth-child(12) {
    color: rgb(234, 80, 78);
}            


#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span:nth-child(1)  {    animation-delay: 0.55s;     }
#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span:nth-child(2)  {    animation-delay: 0.50s;     }
#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span:nth-child(3)  {    animation-delay: 0.45s;     }
#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span:nth-child(4)  {    animation-delay: 0.40s;     }
#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span:nth-child(5)  {    animation-delay: 0.35s;     }
#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span:nth-child(6)  {    animation-delay: 0.30s;     }
#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span:nth-child(7)  {    animation-delay: 0.25s;     }
#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span:nth-child(8)  {    animation-delay: 0.20s;     }
#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span:nth-child(9)  {    animation-delay: 0.15s;     }
#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span:nth-child(10) {    animation-delay: 0.10s;     }
#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span:nth-child(11) {    animation-delay: 0.05s;     }
#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span:nth-child(12) {    animation-delay: 0.0s;     }

@keyframes AnimacionLogo {
    0%   { left:500px;  }
    100% { left:10px;  }
}  


/* Forzar landscape */
@media only screen and (orientation:portrait){
    #ObjetoCanvas[forzarlandscape] {
        transform: rotatez(90deg);
    }
}
@media only screen and (orientation:landscape){
    #ObjetoCanvas[forzarlandscape] {  
        transform: rotatez(0deg);
    }
}