/*********************************************
** Fundo Animado do Banner
*********************************************/

/* Os riscos de luz, os ícones das redes e a malha que passam por trás do
   conteúdo do bloco que abre a página.

   Esta folha é do componente, e não de uma página: quem usa é a abertura da
   home (.bannerPrincipal) e a do blog (.blocoInicial). Por isso ela mora aqui
   e não no home.css - o blog não carrega aquele arquivo.

   Para usar: a classe .bannerAnimado na <section> e o
   get_template_part('content', 'fundo-banner') logo dentro dela (o PHP monta
   as peças e passa a faixa, a duração e o atraso de cada uma em variáveis
   CSS - a animação em si é toda daqui e mexe só em transform e opacity,
   então roda na GPU e não pede JavaScript).

   A seção precisa segurar as peças dentro dela e ficar por baixo do
   conteúdo, então o position/overflow já vêm com a classe. */

.bannerAnimado {
	position: relative;
	overflow: hidden;
}

/*********************************************
** Título Máquina de Escrever
*********************************************/

/* O título do banner é digitado letra a letra quando a página abre. Quem faz
   isso é o scripts.js: ele quebra o h1.tituloMaquina em pedaços (guardando a
   classe de cada um, para o trecho com gradiente continuar com o gradiente) e
   vai devolvendo o texto em uma camada por cima. Daqui saem o cursor e a
   reserva de altura.

   Está nesta folha, e não na da página, porque a home e o blog usam os dois.

   Enquanto digita, o h1 tem duas camadas: a .reservaMaquina, que é uma cópia
   transparente do título inteiro e fica no fluxo segurando a altura, e a
   .digitaMaquina, que passa por cima dela com o texto que está sendo digitado.

   É a cópia que segura a altura porque ela reflui sozinha - com a troca da
   fonte (o Poppins chega depois, com display=swap), com a largura da tela e
   com o tamanho do título em cada quebra. Uma altura medida em px no
   carregamento saía errada, e o bloco pulava quando a digitação acabava.

   No fim o scripts.js tira a cópia e a classe .digitando, e a camada digitada
   volta para o fluxo: as duas têm o mesmo texto, então nada muda de tamanho. */

.tituloMaquina.digitando {
	position: relative;
}

.tituloMaquina.digitando .reservaMaquina {
	opacity: 0;
}

.tituloMaquina.digitando .digitaMaquina {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.tituloMaquina .cursorMaquina {
	display: inline-block;
	width: 0.055em;
	min-width: 2px;
	height: 0.92em;
	margin: 0 0 0 0.06em;
	vertical-align: -0.1em;
	border-radius: 2px;
	background: #FE2A67;
}

/* Só começa a piscar quando o título termina de ser digitado */

.tituloMaquina .cursorMaquina.piscando {
	animation: piscaCursorMaquina 1s step-end infinite;
}

@keyframes piscaCursorMaquina {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}


/* Toda a decoração fica atrás do conteúdo. O .bannerAnimado já é
   position: relative + overflow: hidden, então nada escapa da seção */

.bannerAnimado .fundoAnimado {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}

.bannerAnimado .container {
	position: relative;
	z-index: 1;
}

/* Malha */

.bannerAnimado .fundoAnimado .grade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
	background-size: 64px 64px;
	/* A malha se dissolve nas bordas para não marcar onde a seção termina */
	-webkit-mask-image: radial-gradient(ellipse at 32% 45%, #000 8%, transparent 72%);
	mask-image: radial-gradient(ellipse at 32% 45%, #000 8%, transparent 72%);
	animation: respiraGrade 9s ease-in-out infinite;
}

@keyframes respiraGrade {
	0%, 100% { opacity: 0.24; }
	50% { opacity: 0.4; }
}

/* Brilho de fundo. Mesma ideia do brilho da imagem: o blur é pintado uma
   vez e só a opacidade anima, então o navegador não refaz o desfoque */

.bannerAnimado .fundoAnimado .brilhoFundo {
	position: absolute;
	top: 50%;
	left: 20%;
	width: 780px;
	height: 520px;
	transform: translate(-50%, -50%);
	border-radius: 9999px;
	background: rgba(237, 51, 69, 0.26);
	filter: blur(120px);
	animation: pulsaBrilhoFundo 11s ease-in-out infinite;
}

@keyframes pulsaBrilhoFundo {
	0%, 100% { opacity: 0.22; }
	50% { opacity: 0.42; }
}

/* As duas pistas ganham a mesma máscara: as peças aparecem e desaparecem
   suavemente nas laterais em vez de surgirem cortadas na borda */

.bannerAnimado .fundoAnimado .riscos,
.bannerAnimado .fundoAnimado .cometas {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
	opacity: 0.3;
}

.bannerAnimado .fundoAnimado .cometas {
	opacity: 0.4;
}

/* Riscos de luz: cabeça clara na frente e rastro se dissolvendo atrás */

.bannerAnimado .fundoAnimado .risco {
	position: absolute;
	top: var(--topo);
	left: 0;
	width: var(--largura);
	height: 1px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14) 45%, rgba(255, 108, 88, 0.7) 85%, #FFFFFF);
	box-shadow: 0 0 12px rgba(254, 42, 103, 0.5);
	will-change: transform;
	animation: atravessaIda var(--duracao) linear var(--atraso) infinite;
}

/* Quem volta só tem o degradê espelhado, aí o rastro continua atrás da
   cabeça (espelhar com scaleX brigaria com o transform da animação) */

.bannerAnimado .fundoAnimado .risco.volta {
	background: linear-gradient(270deg, transparent, rgba(255, 255, 255, 0.14) 45%, rgba(255, 108, 88, 0.7) 85%, #FFFFFF);
	animation-name: atravessaVolta;
}

/* Ícones das redes: o align-items mantém a bolha no centro do rastro,
   então o ícone corre exatamente na linha do risco */

.bannerAnimado .fundoAnimado .cometa {
	position: absolute;
	top: var(--topo);
	left: 0;
	display: flex;
	align-items: center;
	will-change: transform;
	animation: atravessaIda var(--duracao) linear var(--atraso) infinite;
}

.bannerAnimado .fundoAnimado .cometa.volta {
	flex-direction: row-reverse;
	animation-name: atravessaVolta;
}

.bannerAnimado .fundoAnimado .cometa .rastro {
	width: 120px;
	height: 1px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
}

.bannerAnimado .fundoAnimado .cometa.volta .rastro {
	background: linear-gradient(270deg, transparent, rgba(255, 255, 255, 0.5));
}

/* Bolha de vidro. O ícone fica branco e a cor da rede aparece só no
   brilho em volta: dá para reconhecer a rede sem competir com o título */

.bannerAnimado .fundoAnimado .cometa .bolha {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 17px;
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.09);
	border: solid 1px rgba(255, 255, 255, 0.18);
	box-shadow: 0 0 22px rgba(var(--cor), 0.45), inset 0 0 12px rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* Véu por cima da animação, na faixa onde ficam os textos. O fundo
   continua se mexendo, mas chega bem mais fraco atrás do título e dos
   números - é o que segura a leitura sem apagar o efeito nas bordas.
   A cor é o roxo escuro do próprio .surfaceInk, então some sem emenda */

.bannerAnimado .fundoAnimado .veuConteudo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(ellipse 58% 80% at 26% 50%, rgba(37, 11, 76, 0.72) 0%, rgba(37, 11, 76, 0.5) 42%, rgba(37, 11, 76, 0) 76%);
}

/* 100vw + 100% = sai inteiro da tela dos dois lados, sem depender da
   largura da peça (o 100% é da própria peça) */

@keyframes atravessaIda {
	from { transform: translate3d(-100%, 0, 0); }
	to { transform: translate3d(calc(100vw + 100%), 0, 0); }
}

@keyframes atravessaVolta {
	from { transform: translate3d(calc(100vw + 100%), 0, 0); }
	to { transform: translate3d(-100%, 0, 0); }
}

/* Celular: menos peças no ar e malha mais fechada */

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

	.bannerAnimado .fundoAnimado .grade {
		background-size: 44px 44px;
	}

	.bannerAnimado .fundoAnimado .risco:nth-child(n + 5),
	.bannerAnimado .fundoAnimado .cometa:nth-child(n + 4) {
		display: none;
	}

	.bannerAnimado .fundoAnimado .cometa .bolha {
		width: 36px;
		height: 36px;
		font-size: 14px;
	}

	.bannerAnimado .fundoAnimado .cometa .rastro {
		width: 80px;
	}

	.bannerAnimado .fundoAnimado .brilhoFundo {
		width: 420px;
		height: 380px;
		left: 50%;
	}

	/* Em coluna única os textos ficam em cima e ocupam a largura toda */

	.bannerAnimado .fundoAnimado .veuConteudo {
		background: radial-gradient(ellipse 95% 55% at 50% 34%, rgba(37, 11, 76, 0.72) 0%, rgba(37, 11, 76, 0.5) 45%, rgba(37, 11, 76, 0) 82%);
	}

}

/* Quem pediu menos animação no sistema fica só com a malha e o brilho
   parados: sem movimento os riscos ficariam empilhados na lateral */

@media (prefers-reduced-motion: reduce) {

	.bannerAnimado .fundoAnimado .grade,
	.bannerAnimado .fundoAnimado .brilhoFundo {
		animation: none;
	}

	.bannerAnimado .fundoAnimado .riscos,
	.bannerAnimado .fundoAnimado .cometas {
		display: none;
	}

}