/* efeito glitch dos botoes: Joshua Ward-https://codepen.io/joshuaward/pen/RgOxKd */

*{
    box-sizing: border-box;
    overflow: hidden;
}

html{
    height: 100%;
}
body{
    display: grid;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-image: url(assets/background-menu.png);
    background-size: cover;
    background-repeat: no-repeat;
}

/* distort1 e distort2 sao do efeito glitch dos botoes*/
@keyframes distort1 {
    0%    { top: 49.5%; left: 49.5%; }
    12.5% { top: 49.5%; left: 50%; }
    25%   { top: 49.5%; left: 50.5%; }
    37.5% { top: 50%; left: 50.5%; }
    50%   { top: 50.5%; left: 50.5%; }
    62.5% { top: 50.5%; left: 50%; }
    75%   { top: 50.5%; left: 49.5%; }
    87.5% { top: 50%; left: 49.5%; }
    100%  { top: 49.5%; left: 49.5%; }
}

@keyframes distort2 {
    0%    { top: 50.5%; left: 50.5%; }
    12.5% { top: 50%; left: 50.5%; }
    25%   { top: 49.5%; left: 50.5%; }
    37.5% { top: 49.5%; left: 50%; }
    50%   { top: 49.5%; left: 49.5%; }
    62.5% { top: 50%; left: 49.5%; }
    75%   { top: 50.5%; left: 49.5%; }
    87.5% { top: 50.5%; left: 50%; }
    100%  { top: 50.5%; left: 50.5%; }
}

@keyframes animacao-titulo {
    0%   {transform: translateY(20px);}
    25% {transform: translateY(-5px);}
    50%   {transform: translateY(20px);}
    75% {transform: translateY(-5px);}
    100%   {transform: translateY(20px);}
}
.titulo img{
    position: relative;
    top: 20px;
    z-index: 10;
    animation-name: animacao-titulo;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

.play {
    
    font-family: "Pixelify Sans", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 30px;
    align-self: center;
    position: relative;
    top: -88px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 0px 0px 3px white;
    &:hover {
		&:before, &:after{
			position: absolute;
			content: 'Jogar';
			transform: translate(-50%,-50%);
			z-index: -1;
			white-space: nowrap;
		}

		&:before {
			top: 49.5%;
			left: 49.5%;
			color:rgb(0, 8, 255);
			animation: distort1 300ms linear infinite;
		}

		&:after {
			top: 50.5%;
			left: 50.5%;
			color: rgb(255, 0, 195);
			animation: distort2 300ms linear infinite;
		}
    }
}

a{
    text-decoration: none;
    color: inherit;
}
.creditos{

    font-family: "Pixelify Sans", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 30px;
    align-self: center;
    position: relative;
    top: -140px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 0px 0px 3px white;
    &:hover {
		&:before, &:after{
			position: absolute;
			content: 'Créditos';
			transform: translate(-50%,-50%);
			z-index: -1;
		}

		&:before {
			top: 49.5%;
			left: 49.5%;
			color:rgb(0, 8, 255);
			animation: distort1 300ms linear infinite;
		}

		&:after {
			top: 50.5%;
			left: 50.5%;
			color: rgb(255, 0, 195);
			animation: distort2 300ms linear infinite;
		}
    }
}

/*efeitos glitch do menu abaixo NÃO SE ASSUSTE É ASSIM MESMO*/

.glitch {
	position: relative;
	overflow: hidden;
    position: absolute;
    z-index: 0;
}
.glitch img {
	position: relative;
	z-index: 1;
	display: block;
}
.glitch__layers {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.glitch__layer {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-image: url(assets/background-menu.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.glitch__layer:nth-child(1) {
	transform: translateX(-5%);
	animation: glitch-anim-1 2s infinite linear alternate;
}
.glitch__layer:nth-child(2) {
	transform: translateX(3%) translateY(3%);
	animation: glitch-anim-2 2.3s -.8s infinite linear alternate;
}
.glitch__layer:nth-child(3) {
	transform: translateX(5%);
	animation: glitch-anim-flash 1s infinite linear;
}
@keyframes glitch-anim-1 {
	0% {
		clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
	}
	10% {
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	}
	20% {
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	}
	30% {
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	}
	40% {
		clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
	}
	50% {
		clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
	}
	60% {
		clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
	}
	70% {
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	80% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	90% {
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	100% {
		clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
	}
}
@keyframes glitch-anim-2 {
	0% {
		clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
	}
	15% {
		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
	}
	25% {
		clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
	}
	30% {
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	45% {
		clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
	}
	50% {
		clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
	}
	65% {
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	75% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	80% {
		clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
	}
	95% {
		clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
	}
	100% {
		clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
	}
}
@keyframes glitch-anim-flash {
	0% {
		opacity: .2;
	}
	30%, 100% {
		opacity: 0;
	}
}