/*
Theme Name: Semeando Devs
Theme URI:	https://semeandodevs.com.br/
Author: Rafael Forcadell
Version: 1.0
*/


/* 
Variáveis
--------------------------------------------
*/

:root {

	--ff: 'BioRhyme', sans-serif;
	
	--fs-800: 3rem;
	--fs-700: 2rem;
	--fs-600: 1.5rem;
	--fs-500: 1.25rem;
	--fs-400: 1rem;

	--fw-extrabold: 800;
	--fw-bold: 700;
	--fw-regular: 400;
	--fw-light: 300;
	--fw-extralight: 200;

	--color: #A6ACB9;
	--background-color: #303841;

}

@media screen and (max-width: 767px) {

	:root {

		--fs-800: 1.875rem;
		--fs-700: 1.25rem;
		--fs-600: 1rem;
		--fs-500: 1rem;
		--fs-400: 1rem;

	}

}


/* 
Configurações
--------------------------------------------
*/

* { position: relative; margin: 0; box-sizing: border-box; cursor: default; appearance: none; }
img { display: block; margin: 0; max-width: 100%; height: auto; }

body {
	min-height: 100vh;
	margin: 0 auto; 
	font-family: var(--ff); 
	font-weight: var(--fw-regular); 
	font-size: var(--fs-400); 
	line-height: 1.5em;
	color: var(--color); 
	background-color: var(--background-color);
	-webkit-font-smoothing: antialiased; 
	/*overflow: hidden;*/
	overflow: overlay;
	overflow-x: hidden; 
}
body::-webkit-scrollbar { width: 24px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { 
    border-radius: 18px;
    border: 9px solid transparent;
    background-clip: content-box;
    background-color: rgba(255,255,255,.5);
}

h1 { font-size: var(--fs-700); line-height: 1.5em; margin-bottom: 1.5em; }
h2 { font-size: var(--fs-700); line-height: 1.5em; margin-bottom: 1.5em; }
h3 { font-size: var(--fs-700); line-height: 1.5em; margin-bottom: 1.5em; }
h4 { font-size: var(--fs-700); line-height: 1em; margin-bottom: 1em; }
h5 { font-size: var(--fs-700); line-height: 1em; margin-bottom: 1em; }
h6 { font-size: var(--fs-800); line-height: 1.3333em; margin-bottom: 1.3333em; }

.lg { display: inherit; }
.sm { display: none; }


@media screen and (max-width: 767px) {

	.lg { display: none; }
	.sm { display: inherit; }

}


/*
Carregando
--------------------------------------------
*/

.carregando.pronto { opacity: 0; transition: opacity 150ms ease-in-out 1000ms; pointer-events: none; }


/*
Navegação
--------------------------------------------
*/

.navegacao { position: fixed; z-index: 2; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; width: 100vw; height: 100vh; padding: 3rem 4rem 5rem; pointer-events: none; }
.navegacao .semeandodevs.active { pointer-events: all; }
.navegacao .semeandodevs .tipografia,
.navegacao + .semeandodevs .linha,
.navegacao + .semeandodevs .linhas { visibility: hidden; }
.navegacao + .semeandodevs { position: fixed; z-index: 2; top: 3rem; left: 50%; transform: translateX(-50%); mix-blend-mode: exclusion; pointer-events: none; }

@media screen and (max-width: 767px) {

	.navegacao { padding: 2rem; }
	.navegacao + .semeandodevs { top: 2rem; }

}


/*
Bloco
--------------------------------------------
*/

.bloco { position: relative; top: 0; display: flex; flex-direction: column; align-items: center; width: 100vw; height: 100vh; padding: 10rem 4rem 5rem; background-color: var(--background-color); }
.bloco.branco { background-color: white; }

.bloco > div { flex-grow: 1; }
.bloco.centralizado { display: grid; place-items: center; text-align: center; }
.bloco.separador { border-top: 1px dashed rgba(255,255,255,.15); }

@media screen and (max-width: 767px){

	.bloco { padding: 7.5rem 1.5rem 1.5rem; }

}


/*
Capa
--------------------------------------------
*/

.bloco.capa { height: 100svh; }
.bloco.capa .imagem { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.bloco.capa .imagem.esquerda { width: 50%; }
.bloco.capa .imagem img { width: 100vw; max-width: none; height: 100%; object-fit: cover; }
.bloco.capa .cursor { position: absolute; bottom: 5rem; left: 50%; transform: translateX(-50%); }
.bloco.capa .dica { --tamanho: 8rem; --transition-duration: 600ms; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); width: var(--tamanho); height: var(--tamanho); }
.bloco.capa .dica.esquerda { left: calc(15% - var(--tamanho)); }
.bloco.capa .dica.direita { right: calc(15% - var(--tamanho)); }
.bloco.capa .dica svg { width: 100%; height: 100%; fill: none; stroke-width: 2; stroke: #42BDFF; opacity: 0; transform: rotate(-90deg); transition: opacity 1ms linear var(--transition-duration); }
.bloco.capa .dica.exibir svg { opacity: 1; transition-delay: 1ms; }
.bloco.capa .dica.esquerda svg { transform: rotate(90deg) scaleX(-1); }
.bloco.capa .dica svg path { stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray var(--transition-duration); ease-in-out; }
.bloco.capa .dica.exibir svg path { stroke-dasharray: 100 100; }
.bloco.capa .dica div { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); border-radius: 1.5rem; overflow: hidden; }
.bloco.capa .dica.esquerda div { left: 50%; }
.bloco.capa .dica.direita div { right: 50%; }
.bloco.capa .dica span { display: block; border-radius: 1.5rem; padding: 0 .75rem; font-size: .75rem; white-space: nowrap; color: white; background-color: #4551BE; transition-duration: calc(var(--transition-duration) * .3333); transition-timing-function: ease-in-out; transition-delay: calc(var(--transition-duration) * .3333); }
.bloco.capa .dica.esquerda span { right: 100%; transition-property: right; }
.bloco.capa .dica.exibir.esquerda span { right: 0%; }
.bloco.capa .dica.direita span { left: 100%; transition-property: left; }
.bloco.capa .dica.exibir.direita span { left: 0%; }

.bloco.capa .dica.deviceorientation,
.bloco.capa .dica.touchmove { width: auto; height: auto; top: auto; bottom: 6rem; right: auto; left: 50%; transform: translate(-50%, -50%); }

.bloco.capa .dica.deviceorientation svg,
.bloco.capa .dica.touchmove svg { display: none; }

.bloco.capa .dica.deviceorientation div,
.bloco.capa .dica.touchmove div { right: auto; left: 0%; transform: translate(-50%, -50%); }

.bloco.capa .dica.deviceorientation span,
.bloco.capa .dica.touchmove span { left: 0%; right: auto; opacity: 0; transition-property: opacity; transition-delay: 0; }
.bloco.capa .dica.exibir.deviceorientation span,
.bloco.capa .dica.exibir.touchmove span { opacity: 1; transition-delay: calc(var(--transition-duration) * .6666); }



@media screen and (max-width: 767px) {

	.bloco.capa .imagem.esquerda:not(.transicao) { transition: width 100ms linear; }
	.bloco.capa .cursor { display: none; }

}



/*
Objetivo
--------------------------------------------
*/

.bloco.objetivo h1 { font-weight: var(--fw-extralight); margin-bottom: 0; }
.bloco.objetivo h1 strong { color: white; }


/*
Público
--------------------------------------------
*/

.bloco.publico h2 { font-weight: var(--fw-extralight); margin-bottom: .5em; }
.bloco.publico h2 strong { color: white; }
.bloco.publico p { font-weight: var(--fw-extralight); }


/*
Console
--------------------------------------------
*/

.console { display: none; position: fixed; z-index: 10; bottom: 0; left: 0; width: 100%; height: auto; color: yellow; pointer-events: none; opacity: .5; background-color: black; overflow: auto; }

@media screen and (max-width: 767px) {

	.console { font-size: .5rem; line-height: .75rem; }

}