/* 
    Archivo CSS para el ObjetoCanvas creado el [05/08/2016]
    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');


html {
    font-size: 100%; /* Conversión para que el rem valga 10 pixeles por defecto en la web */
}
 

/* 2% del ancho para el tamaño de fuente */
@media screen and (orientation: landscape) and (min-resolution: 1.2dppx) {
    html { font-size: 2vw; } /* viewport width */
}

/* 2% del alto para el tamaño de fuente */
@media screen and (orientation: portrait)  {
    html { font-size: 2vh; }  /* viewport height */
}

body { 
    margin:0; 
    padding:0;     
}
            
/* Estilos para los marcos informativos */
#ObjetoCanvas {
    margin:0;
    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:0;
    bottom:0;
    left:0;
}        

#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:0;
    left:0;
    right:0;
    bottom:0;
/*    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: 3rem;
    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:0;
    right:0;    
}

/* 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:0.5rem;
    margin:0.5rem;    
    background-color: rgba(37,35,40, 0.6);
    color:#FFF;
    text-shadow:0.1rem 0.1rem 0.1rem #000;
    position:fixed;
    border:0.1rem 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:0;
    padding:1.8em;
    font-size:1.8em;
}

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

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

#Cabecera_Error > img {
    width:65rem; 
    height:50rem;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    display:table;
}




/* Contenedor para los controles del canvas */
#ObjetoCanvas_Controles {
    position:fixed;
    
    bottom:1rem;
    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:0.1rem 0.1rem 0.1rem #000;
}

#ObjetoCanvas_Controles[alinear=derecha]   { right:1rem; }
#ObjetoCanvas_Controles[alinear=izquierda] { left:1rem; }

.ObjetoCanvas_Boton, .ObjetoCanvas_Marco {
    width:3.6rem;
    height:3.6rem;
    /*padding:10px;*/
    border-radius:0.4rem;
    border:0.2rem 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:1rem;
    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:0.2rem 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:1.8rem; color:rgb(0, 255, 0); }
.ObjetoCanvas_Marco > #ObjetoCanvas_TxtFPS { font-size:1rem; }

.ObjetoCanvas_Boton > img {
    transition:0.4s;
    width:3.6rem;
    height:3.6rem;
    position:absolute;
    top:0rem;
    right:0rem;
}

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

#ObjetoCavas_PantallaCompleta, #ObjetoCavas_RestaurarPantalla {
    cursor:pointer;
}

#ObjetoCavas_Logo:hover {
    width:20.7rem;
    border:0.2rem solid rgb(234, 80, 78);
}


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


#ObjetoCavas_Logo:hover > #ObjetoCavas_TextoLogo > span {                
    position:relative;
    opacity:1;
    left:40rem;
    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:50rem;  }
    100% { left:1rem;  }
}  


/* Forzar landscape */
@media only screen and (orientation:portrait){
    #ObjetoCanvas[forzarlandscape="true"] {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        /*transform: rotatez(90deg); /*translateX(25%) translateY(25%);*/
    }
}
@media only screen and (orientation:landscape){
/*    #ObjetoCanvas[forzarlandscape] {  
        transform: rotatez(0deg);
    }*/
}