/* Reset básico para todos os elementos */
* {
  margin: 0;               /* Remove margens padrão dos elementos */
  padding: 0;              /* Remove espaçamentos internos padrão */
  box-sizing: border-box;  /* Inclui padding e border na largura/altura total */
  font-family: "Arial", sans-serif; /* Define fonte Arial para todo o site */
}

/* Estilização base para html e body */
body,
html {
  height: 100%;            /* Altura total da viewport */
  width: 100%;             /* Largura total da viewport */
  margin: 0;               /* Remove margens */
  padding: 0;              /* Remove padding */
  overflow-x: hidden;      /* Evita barra de rolagem horizontal */
  background: #000d1a;     /* Cor de fundo azul escuro sólida (pode ser substituída por gradiente) */
}

/* Classe para o fundo principal da página */
.background {
  background: url("fundosubnautica.png") no-repeat center center fixed;
  /* Imagem de fundo centralizada, fixa na tela, sem repetição */
  background-size: cover;  /* A imagem cobre todo o container, cortando o que extrapolar */
  height: 100vh;           /* Altura da viewport */
  display: flex;           /* Usa flexbox para layout interno */
  flex-direction: column;  /* Organiza os filhos em coluna */
  align-items: center;     /* Centraliza horizontalmente os filhos */
  justify-content: flex-start; /* Alinha os filhos no topo verticalmente */
  padding-top: 1px;        /* Pequeno espaçamento no topo */
  gap: 0px;                /* Espaçamento zero entre os filhos */
}

/* Logo da página */
.logo img {
  width: 404px;            /* Largura fixa da logo */
  max-width: 100%;         /* Máximo largura para responsividade */
  margin-bottom: 10px;     /* Espaço abaixo da logo */
  animation: float 4s ease-in-out infinite; /* Animação de flutuar repetida indefinidamente */
}

/* Container principal do menu */
.menu {
  display: flex;           /* Flexbox para alinhar itens lado a lado */
  justify-content: space-between; /* Espaça os itens igualmente entre as extremidades */
  width: 90%;              /* Largura do menu relativa ao container pai */
  max-width: 1100px;       /* Largura máxima para telas grandes */
}

/* Container para os botões do menu */
.buttons {
  display: flex;           /* Flexbox para organização vertical */
  flex-direction: column;  /* Organiza os botões em coluna */
  gap: 20px;               /* Espaçamento entre os botões */
}

/* Estilo básico dos botões do menu */
.menu-button {
  text-decoration: none;   /* Remove sublinhado dos links */
  display: flex;           /* Flexbox para alinhar itens internos */
  align-items: center;     /* Alinha verticalmente ao centro */
  background: linear-gradient(to bottom, #8dd8ff, #3aa9e0, #007acc); /* Gradiente azul */
  border: 3px solid #005a9e; /* Borda azul escura */
  border-radius: 50px;     /* Bordas arredondadas tipo pílula */
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.5), /* Sombra interna clara */
              0 0 12px rgba(0, 136, 255, 0.6); /* Sombra externa azul */
  padding: 10px 30px 10px 15px; /* Espaçamento interno: topo, direita, baixo, esquerda */
  width: 250px;            /* Largura fixa */
  height: 60px;            /* Altura fixa */
  cursor: pointer;         /* Cursor de mãozinha */
  transition: all 0.2s ease; /* Transição suave para hover */
}

/* Circulo decorativo dentro do botão */
.menu-button .circle {
  width: 28px;             /* Largura do círculo */
  height: 28px;            /* Altura do círculo */
  border: 3px solid #68caff; /* Borda azul clara */
  background: radial-gradient(circle at center, #002d52 40%, #001a33 100%);
  /* Fundo em gradiente radial azul escuro para claro */
  border-radius: 50%;      /* Forma circular */
  box-shadow: inset 0 0 8px rgba(100, 200, 255, 0.8), /* Sombra interna azul clara */
              0 0 6px rgba(0, 100, 255, 0.6);          /* Sombra externa azul */
  margin-right: 20px;      /* Espaço à direita para separar do texto */
}

/* Texto do botão */
.menu-button span {
  color: white;            /* Cor branca */
  font-size: 20px;         /* Fonte grande */
  font-weight: bold;       /* Negrito */
  text-shadow: 1px 1px 2px #000; /* Sombra de texto para destaque */
}

/* Efeito hover nos botões */
.menu-button:hover {
  transform: scale(1.05);  /* Aumenta levemente o tamanho */
  box-shadow: 0 0 20px rgba(0, 170, 255, 0.8); /* Brilho azul intenso */
}

/* Painel da direita (possivelmente sidebar) */
.right-panel {
  display: flex;           /* Flexbox */
  flex-direction: column;  /* Coluna vertical */
  gap: 20px;               /* Espaçamento interno */
  color: white;            /* Texto branco */
  width: 450px;            /* Largura fixa */
}

/* Estilo comum para caixas internas como loja, atualizações e newsletter */
.store,
.update-box,
.newsletter {
  background: rgba(0, 120, 200, 0.8); /* Fundo azul translúcido */
  border-radius: 15px;     /* Bordas arredondadas */
  padding: 14px;           /* Espaçamento interno */
  box-shadow: 0 0 12px rgba(0, 150, 255, 0.4); /* Sombra azul leve */
}

/* Estilo para títulos dentro da loja */
.store h3 span {
  color: #ffcc00;          /* Texto amarelo */
  font-size: 20px;         /* Tamanho médio */
  margin-bottom: 5px;      /* Espaço abaixo */
  display: inline-block;   /* Para margem funcionar */
}

/* Parágrafos dentro da loja */
.store p {
  font-size: 14px;         /* Texto pequeno */
}

/* Container para atualizações */
.update-box {
  display: flex;           /* Flexbox para alinhar imagem e texto lado a lado */
  gap: 15px;               /* Espaçamento entre imagem e texto */
}

/* Placeholder de imagem na atualização */
.image-placeholder {
  width: 100px;            /* Largura fixa */
  height: 100px;           /* Altura fixa */
  background: #003366;     /* Fundo azul escuro */
  border-radius: 10px;     /* Bordas arredondadas */
}

/* Texto da atualização */
.update-text h2 {
  font-size: 18px;         /* Título menor */
  color: #ffffff;          /* Branco */
  margin-bottom: 5px;      /* Espaço abaixo */
}

.update-text p {
  font-size: 14px;         /* Parágrafo pequeno */
  line-height: 1.3;        /* Espaçamento entre linhas */
}

/* Linha com data e leitura */
.date-read {
  display: flex;           /* Flexbox para distribuir conteúdo */
  justify-content: space-between; /* Itens nas extremidades */
  font-size: 12px;         /* Texto pequeno */
  margin-top: 5px;         /* Espaço acima */
}

/* Link dentro da data e leitura */
.date-read a {
  color: #ffffff;          /* Cor branca */
  text-decoration: underline; /* Sublinhado */
}

/* Título da newsletter */
.newsletter h4 {
  font-size: 16px;         /* Tamanho intermediário */
  margin-bottom: 10px;     /* Espaço abaixo */
}

/* Área do input na newsletter */
.input-area {
  display: flex;           /* Flexbox para input e botão lado a lado */
  gap: 5px;                /* Espaçamento entre eles */
}

/* Campo de texto */
.input-area input {
  flex: 1;                 /* Ocupar todo espaço disponível */
  padding: 8px;            /* Espaçamento interno */
  border: none;            /* Sem borda */
  border-radius: 10px;     /* Bordas arredondadas */
}

/* Botão da newsletter */
.input-area button {
  background: #007acc;     /* Fundo azul */
  border: none;            /* Sem borda */
  color: white;            /* Texto branco */
  padding: 8px 12px;       /* Espaçamento interno */
  border-radius: 10px;     /* Bordas arredondadas */
  cursor: pointer;         /* Cursor de botão */
}

/* Overlay de transição */
.transition-overlay {
  position: fixed;         /* Fixa na tela inteira */
  top: 0;                 /* Começa no topo */
  left: 0;                /* Começa na esquerda */
  width: 100%;            /* Largura total */
  height: 100%;           /* Altura total */
  background: radial-gradient(ellipse at center, #001c33 0%, #000d1a 100%);
  /* Fundo gradiente radial azul escuro para preto */
  opacity: 0;             /* Inicialmente transparente */
  pointer-events: none;   /* Ignora cliques quando invisível */
  transition: opacity 0.8s ease; /* Transição suave da opacidade */
  z-index: 9999;          /* Fica sobre todos os elementos */
}

/* Overlay ativa */
.transition-overlay.active {
  opacity: 1;             /* Visível */
  pointer-events: all;    /* Captura cliques */
}

/* Botão de play (exemplo) */
.play-button {
  display: block;         /* Exibe como bloco para centralizar */
  margin: 20px auto;      /* Espaço em cima e abaixo e centraliza horizontalmente */
  padding: 14px 32px;     /* Espaçamento interno */
  font-size: 1.4rem;      /* Fonte grande */
  background: #00bfff;    /* Fundo azul claro */
  border: none;           /* Sem borda */
  border-radius: 50px;    /* Bordas arredondadas */
  color: white;           /* Texto branco */
  font-weight: bold;      /* Negrito */
  box-shadow: 0 0 20px #00e1ff; /* Sombra azul brilhante */
  cursor: pointer;        /* Cursor de botão */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição para hover */
}

/* Hover no botão play */
.play-button:hover {
  transform: scale(1.08); /* Aumenta levemente */
  box-shadow: 0 0 40px #00e1ff; /* Sombra mais forte */
}

/* Overlay alternativo para transição, reaproveitando */
.transition-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;           /* Usa largura da viewport */
  height: 100vh;          /* Usa altura da viewport */
  background: #00001a;    /* Fundo azul muito escuro */
  pointer-events: none;   /* Ignora cliques inicialmente */
  opacity: 0;             /* Transparente */
  transition: opacity 0.7s ease-in-out; /* Transição suave */
  z-index: 1000;          /* Sobreposição alta */
}

/* Quando ativada, mostra e anima o overlay */
.transition-overlay.active {
  pointer-events: all;    /* Captura cliques */
  opacity: 1;             /* Opacidade máxima */
  animation: mergulhoAnim 0.7s forwards; /* Animação de mergulho */
}

/* Animação chamada "mergulhoAnim" */
@keyframes mergulhoAnim {
  0% {
    opacity: 0;
    transform: scale(1);  /* Sem escala */
  }
  50% {
    opacity: 1;
    transform: scale(1.1); /* Aumenta 10% */
  }
  100% {
    opacity: 1;
    transform: scale(1.5); /* Aumenta 50%, criando efeito de zoom/mergulho */
  }
}