@charset "utf-8";

		body {
			margin: 0;
			padding: 0;
			font-family: 'Averia Serif Libre', serif;
			color: #fff;
			height: 100%;
			letter-spacing: 0.05em;
			background: #000;
			overflow-x: hidden;
			overflow-y: hidden;
		}

		html {
			overflow-x: hidden;
			overflow-y: hidden;
		}

		.background-video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
		}

		.background-image {
			display: none;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
		}

		header {
			position: fixed;
			top: 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 1rem 5%;
			background: rgba(6, 59, 58, 0.6);
			z-index: 10;
			box-sizing: border-box;
		}

		.header-left {
			display: flex;
			align-items: center;
			gap: 1.25rem;
		}

		.logo {
			height: 2.5rem;
			width: auto;
			transition: transform 0.3s ease; /* Adicionado efeito de transição */
		}
		
		.logo:hover {
			transform: scale(1.1); /* Adicionado efeito de zoom ao passar o mouse */
		}

		.language-selector {
			position: relative;
			display: flex;
			align-items: center;
			gap: 0.625rem;
			cursor: pointer;
		}

		.language-selector img {
			height: 1.875rem;
			width: auto;
		}

		.language-dropdown {
			display: none;
			position: absolute;
			top: 3.125rem;
			right: 0;
			background: rgba(6, 59, 58, 0.8);
			border-radius: 4px;
			box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
			padding: 0.1875rem;
			width: 5.3125rem;
		}

		.language-dropdown img {
			height: 1.25rem;
			cursor: pointer;
			padding: 0.3125rem;
			border-radius: 5px;
		}

		.language-dropdown img:hover {
			background-color: rgba(255, 255, 255, 0.2);
		}

		.music-button {
			background: none;
			border: none;
			padding: 0;
			cursor: pointer;
			z-index: 10;
		}

		.music-button img {
			height: 2rem;
			width: 2rem;
		}

		.content {
			text-align: center;
			z-index: 5;
			width: 90%;
			max-width: 1000px;
			display: flex;
			flex-direction: column;
			justify-content: space-between; /* Empurra o conteúdo para as extremidades */
			align-items: center;
			margin: 0 auto;
			padding-top: 12vh; /* Isso cria um espaço no topo para centralizar o conteúdo */
			box-sizing: border-box;
			transition: opacity 0.5s ease, transform 0.5s ease;
			min-height: 91vh; /* Garante que o conteúdo ocupe pelo menos a altura da tela */
		  }

		/* Animação de fade-out */
		@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		
		@keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}

		/* Esconde o conteúdo com uma animação suave */
		.content.fade-out {
			animation: fadeOut 0.5s forwards;
			pointer-events: none; /* Não permite interação enquanto está desaparecendo */
		}

		/* Mostra o conteúdo novo com uma animação suave */
		.content.fade-in {
			animation: fadeIn 0.5s forwards;
			pointer-events: all; /* Permite interação quando está visível */
		}

		.game-logo {
			max-width: 70%;
			max-width: 400px;
			height: auto;
			margin-bottom: 1.25rem;
			opacity: 0;
			transform: scale(0.5);
			animation: smoothReveal 3s ease-out forwards;
		}

		@keyframes smoothReveal {
			0% {
			opacity: 0;
			transform: scale(0.5);
			filter: brightness(0.5);
			}
			100% {
			opacity: 1;
			transform: scale(1);
			filter: brightness(1);
			}
		}
			
		.slogan {
			font-size: 1.5rem;
			font-weight: bold;
			margin-bottom: 1.25rem;
			font-family: 'Sedan SC', serif;
			letter-spacing: 0.05em;
			max-width: 600px;
		}

		.announcement {
			font-size: 3rem;
			font-weight: bold;
			color: rgb(250, 228, 35);
			margin-bottom: 1.875rem;
			padding: 10px 20px;
			text-align: center;
			background: linear-gradient(to right, rgba(255,255,255,0), rgba(0, 0, 0, 0.7), rgba(255,255,255,0));
			position: relative;
			display: inline-block;
		}
		
		.announcement::before,
		.announcement::after {
			content: "";
			position: absolute;
			left: 0;
			width: 100%;
			height: 3px; /* Espessura da borda */
			background: linear-gradient(to right, rgba(255, 215, 0, 0), rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0));
		}
		
		.announcement::before {
			top: 0;
		}

		.announcement::after {
			bottom: 0;
		}

		/* Estilo básico do formulário */
		#email-form {
			display: flex;
			flex-direction: column;
			gap: 10px;
			align-items: center;
		}

		#email-form input {
			font-size: 16px;
			border: 1px solid rgba(255, 255, 255, 0.5); /* Mais visível */
			border-radius: 25px;
			background: rgba(255, 255, 255, 0.1); /* Fundo mais leve */
			color: #fff;
			transition: border 0.3s ease, background 0.3s ease; /* Efeitos de transição */
		}
		
		#email-form input:focus {
			border: 1px solid #d9af3e; /* Destaque no foco */
			background: rgb(255, 255, 255);
		}
		
		/* Centraliza todos os inputs dentro do formulário */
		#email-form input {
			padding: 10px;
			font-size: 16px;
			text-align: center;
			border: 1px solid #ccc;
			border-radius: 25px;
			width: 80%;  /* Ajuste a largura para manter a proporção */
			max-width: 400px; /* Limita a largura máxima */
			background-color: #f9f9f9;
			transition: border 0.3s ease, box-shadow 0.3s ease;
		}

		#email-form button[type="submit"] {
			background-color: transparent !important;			
			width: 80%;
		}

		#email-form button[type="submit"]:hover {
			background: linear-gradient(90deg, #d9af3e, #0c4f4e);
			transform: scale(1.05);
		}

		.subscribe-button {
			padding: 10px 20px; /* Ajustado o espaçamento para melhor usabilidade */
			font-size: 1rem;
			margin-bottom: 1rem;
			border-radius: 25px; /* Bordas mais suaves */
			color: #fff;
			position: relative;
			overflow: hidden;
			background: #0c4f4e;
			transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suavização no hover */
			cursor: pointer;
		}
		
		.subscribe-button:hover {
			transform: scale(1.1);
			box-shadow: 0 0 10px rgba(217, 175, 62, 0.8); /* Efeito de destaque */
		}

		.subscribe-button::before {
			position: absolute;
			content: '';
			width: 100%;
			height: 180%;
			background: #d9af3e;
			transform: rotate(45deg);
			z-index: -1;
			border: none; 
		}

		.subscribe-button:hover::before {
			animation: animate2 2s linear infinite; 
		}

		@keyframes animate2{
			from {
			transform: rotate(0deg);
			}
			to {
			transform: rotate(360deg);
			}
		}

		.subscribe-button::after {
			position: absolute;
			content: '';
			inset: 3px;
			background: #0c4f4e;
			border-radius: 20px; 
			z-index: -1; 	
			border: none; 
		}

		.slogan, .announcement, .subscribe-button {
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
		}

		.platforms {
			width: 100%;
			background: rgba(0, 0, 0, 0.8);
			padding: 1.25rem;
			display: flex;
			justify-content: center;
			gap: 1.875rem;
			box-sizing: border-box;
			margin-top: auto; /* Isso empurra a barra para a parte inferior do .content */
		}
		
		.platforms img {
			height: 3.125rem;
			cursor: pointer;
			transition: transform 0.2s ease-in-out;
		}
		
		.platforms img:hover {
			transform: scale(1.1);
		}

		/* Estilo do fundo com inclinação apenas no lado esquerdo */
		.social-background {
			position: fixed;
			bottom: 0; /* Distância do fundo da tela */
			right: 0; /* Distância da borda direita */
			display: flex;
			justify-content: space-between; /* Distribui os ícones igualmente */
			align-items: center;
			flex-direction: row; /* Alinha os itens horizontalmente */
			flex-wrap: nowrap; /* Garante que os ícones não quebrem para a linha de baixo */
			background-color: rgba(0, 0, 0, 0.7);
			z-index: 20;
			box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
			transition: transform 0.3s ease;
			width: 300px; /* Largura fixa */
			height: 40px; /* Altura fixa */
			padding: 0.5rem; /* Margem interna */
			clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%, 5% 50%);
		}

		.social-menu {
			display: flex;
			gap: 10px; /* Espaço entre os ícones */
			justify-content: center;
			align-items: center;
			width: 100%;
		}

		.social-menu a {
			display: block;
			width: 35px;
			height: 35px;
			background-size: cover;
			background-position: center;
			border-radius: 50%;
			transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suavização ao passar o mouse */
		}
		
		.social-menu a:hover {
			transform: scale(1.2); /* Zoom no hover */
			box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Adicionado efeito de brilho */
		}

		/* Ícones */
		.social-menu a {
			display: block;
			width: 35px; /* Largura do ícone */
			height: 35px; /* Altura do ícone */
			background-size: cover;
			background-position: center;
			border-radius: 50%; /* Ícones redondos */
			transition: transform 0.3s ease, background-color 0.3s ease;
		}

		/* Estilização para cada rede social */
		.social-menu .youtube {
			background-image: url('image/youtube-icon.png');
		}

		.social-menu .instagram {
			background-image: url('image/instagram-icon.png');
		}

		.social-menu .discord {
			background-image: url('image/discord-icon.png');
		}

		.social-menu .external {
			background-image: url('image/external-link-icon.png');
		}

		/* Anúncio */
		.ads-section {
			text-align: center;
			width: 100%;
			max-width: 1000px;
			height: 100vh; /* Seção ocupará toda a altura da tela */
			display: flex;
			justify-content: center; /* Centraliza o conteúdo horizontalmente */
			align-items: center; /* Centraliza o conteúdo verticalmente */
			margin: 0 auto;
			box-sizing: border-box;
			padding: 0 20px; /* Garantir um pequeno espaço nas laterais */
			opacity: 0; /* Inicialmente invisível */
			transform: translateY(20%); /* Iniciar com um pequeno deslocamento para baixo */
			transition: opacity 0.5s ease, transform 0.5s ease;
		}
		
		.ads-image-container {
			flex: 1;
			max-width: 50%; /* Limita a largura da imagem para 50% */
			height: auto;
			overflow: hidden;
		}
		
		.ads-image {
			width: 100%;
			transition: opacity 0.5s ease-in-out;
		}
		
		.ads-text {
			flex: 1;
			padding: 20px;
			color: white;
			text-align: center;
			font-family: 'Averia Serif Libre', serif;
			box-sizing: border-box;
		}

		@media (max-width: 1400px) {
			.header-left {
			gap: 0.625rem;
			}

			.game-logo {
			max-width: 45%;
			max-width: 250px;
			}

			.slogan {
			font-size: 1rem;
			}

			.announcement {
			font-size: 2.5rem;
			}

			.logo {
			height: 2.1875rem;
			}

			.language-selector img {
			height: 1.5625rem;
			}

			.content {
			top: 50%;
			}

			.slogan {
			font-size: 1.375rem;
			}

			.announcement {
			font-size: 1.75rem;
			}

			.subscribe-button {
			font-size: 1rem;
			padding: 1rem 1.875rem;
			}

			.platforms {
				padding: 0.6rem;
			}

			.platforms img {
			height: 2.5rem;
			}

			.social-background {
			width: 200px; /* Largura fixa */
			height: 40px; /* Altura fixa */
			bottom: 0; /* Distância do fundo da tela */
			}

			.social-menu a {
			width: 25px; /* Largura do ícone */
			height: 25px; /* Altura do ícone */
			}

			.subscribe-button {
			font-size: 0.9rem;
			}
		}

		@media (max-width: 480px) {
			header {
			padding: 1rem;
			}

			.logo {
			height: 2rem;
			}

			.content {
			top: 50%;
			width: 95%;
			min-height: 0;
			}

			.game-logo {
			height: 50%;
			max-width: 30%;
			}

			.slogan {
			font-size: 1.125rem;
			}

			.announcement {
			font-size: 1.5rem;
			}

			.subscribe-button {
			font-size: 0.875rem;
			padding: 0.875rem 1.25rem;
			}

			.platforms {
				padding: 0.4rem;
			}

			.platforms img {
			height: 1.7rem;
			}

			.social-background {
			width: 200px; /* Largura fixa */
			height: 30px; /* Altura fixa */
			bottom: 0; /* Distância do fundo da tela */
			}

			.social-menu a {
			width: 25px; /* Largura do ícone */
			height: 25px; /* Altura do ícone */
			}

			.subscribe-button {
			font-size: 0.7rem;
			}
		}