/* Animações extras (carregado depois do main.css) */

	@keyframes subirSuave {
		from { opacity: 0; transform: translateY(1rem); }
		to { opacity: 1; transform: translateY(0); }
	}

/* Fundo fixo, sem corte: sem ampliação e ancorado embaixo para não cortar os prédios */

	#bg:after {
		transform: none;
		background-position: center bottom;
	}

	body.is-article-visible #bg:after {
		transform: scale(1.02);
	}

/* Menu: fundo translúcido para os prédios não passarem por trás do texto */

	#header nav ul {
		background-color: rgba(1, 17, 50, 0.75);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		border-color: rgba(255, 255, 255, 0.6);
		border-radius: 6px;
		overflow: hidden;
		box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
	}

		#header nav ul li {
			border-left-color: rgba(255, 255, 255, 0.25);
			border-top-color: rgba(255, 255, 255, 0.25);
		}

			#header nav ul li a {
				transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, letter-spacing 0.25s ease-in-out;
			}

				#header nav ul li a:hover {
					background-color: #ffffff;
					color: #011132;
					letter-spacing: 0.25rem;
				}

				#header nav ul li a:active {
					background-color: rgba(255, 255, 255, 0.85);
				}

/* Estrelas */

	#particulas {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 66.667%;
		z-index: 3;
		pointer-events: none;
		-webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
		mask-image: linear-gradient(to bottom, #000 75%, transparent);
		transition: opacity 0.325s ease-in-out;
	}

	body.is-article-visible #particulas {
		opacity: 0.35;
	}

/* Logo, título e menu em sequência */

	body:not(.is-loading) #header > img,
	body:not(.is-loading) #header > .content,
	body:not(.is-loading) #header > nav {
		animation: subirSuave 0.8s ease-out both;
	}

	body:not(.is-loading) #header > img { animation-delay: 0.2s; }
	body:not(.is-loading) #header > .content { animation-delay: 0.6s; }
	body:not(.is-loading) #header > nav { animation-delay: 1.0s; }

/* Serviços aparecendo um a um */

	#work.active p {
		animation: subirSuave 0.5s ease-out both;
	}

	#work.active p:nth-of-type(1), #work.active p:nth-of-type(2) { animation-delay: 0.15s; }
	#work.active p:nth-of-type(3), #work.active p:nth-of-type(4) { animation-delay: 0.35s; }
	#work.active p:nth-of-type(5), #work.active p:nth-of-type(6) { animation-delay: 0.55s; }
	#work.active p:nth-of-type(7), #work.active p:nth-of-type(8) { animation-delay: 0.75s; }
	#work.active p:nth-of-type(9), #work.active p:nth-of-type(10) { animation-delay: 0.95s; }

/* Respeita quem prefere menos movimento */

	@media (prefers-reduced-motion: reduce) {
		#header > *,
		#work.active p {
			animation: none !important;
		}

		#particulas {
			display: none;
		}
	}