/* Reset básico: remove margens/paddings padrão e define box-sizing para facilitar layouts */
/* Aplica fonte padrão moderna e legível para todo o documento */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Estilo básico para body e html */
/* Define altura mínima, fundo gradiente azul escuro, cor do texto clara */
/* Usa flexbox para centralizar horizontalmente e alinhar topo verticalmente */
/* Padding para espaçamento interno e evita scroll horizontal */
/* Scroll suave para navegação mais agradável */
body,
html {
  height: 100%;
  background: linear-gradient(180deg, #001822 0%, #003050 65%, #001224 100%);
  color: #a0d8ef;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  min-height: 100vh;
}

/* Container principal do conteúdo, largura máxima para melhor leitura */
main {
  width: 100%;
  max-width: 900px;
}

/* Estilos comuns para container principal e seções de tópico */
/* Fundo azul escuro em gradiente diagonal, cantos arredondados, espaçamento interno */
/* Sombra externa e interna para efeito de profundidade e brilho */
/* Posição relativa para posicionamentos internos e z-index para sobreposição correta */
/* Borda semitransparente azul e filtro de backdrop para leve desfocagem */
/* Cor do texto clara e seleção de texto permitida */
/* Display none para esconder inicialmente */
.container,
.topic-section {
  background: linear-gradient(145deg, #002c56, #003e75);
  border-radius: 25px;
  padding: 35px 50px;
  box-shadow: 0 8px 30px rgba(0, 95, 153, 0.7),
    inset 0 0 15px rgba(0, 127, 255, 0.6);
  position: relative;
  z-index: 10;
  border: 1px solid rgba(0, 127, 255, 0.6);
  backdrop-filter: saturate(180%) blur(12px);
  color: #bbdefb;
  user-select: text;
  display: none;
}

/* A seção principal (container) fica visível por padrão com a classe active */
.container.active {
  display: block;
}

/* Seções de tópico também ficam visíveis quando recebem a classe active */
.topic-section.active {
  display: block;
}

/* Animação simples para texto aparecer com fade + subir levemente */
@keyframes fadeInText {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Título principal estilizado: tamanho grande, centralizado, cor azul vibrante */
/* Sombra para destaque e espaçamento entre letras para dar elegância */
/* Peso da fonte forte e não permite seleção de texto para evitar seleção acidental */
h1 {
  font-size: 3.2rem;
  text-align: center;
  margin-bottom: 20px;
  color: #40c4ff;
  text-shadow: 0 0 8px #40c4ff, 0 0 25px #00bfff;
  letter-spacing: 2px;
  font-weight: 900;
  user-select: none;
}

/* Subtítulos com cor azul clara, sombra leve e margem inferior para espaçamento */
/* Peso da fonte semi-negrito e não selecionável */
h2 {
  color: #58a6ff;
  margin-bottom: 25px;
  text-shadow: 0 0 6px #58a6ff;
  font-weight: 700;
  user-select: none;
}

/* Parágrafos com tamanho confortável para leitura, espaçamento entre linhas */
/* Justificados para alinhamento profissional e sombra leve para destaque */
/* Margem inferior para separar elementos */
p {
  font-size: 1.2rem;
  line-height: 1.75;
  text-align: justify;
  text-shadow: 0 0 6px rgba(0, 20, 45, 0.8);
  margin-bottom: 28px;
}

/* Container para imagens, permite quebra e espaçamento entre elas */
/* Centraliza horizontalmente as imagens */
.images-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
  justify-content: center;
}

/* Estiliza imagens dentro do container */
/* Define largura para ocupar metade do container menos gap, cantos arredondados e sombra azul suave */
/* Transição suave para transformações */
.images-container img {
  width: calc(50% - 16px);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0, 150, 255, 0.5),
    inset 0 0 12px rgba(0, 200, 255, 0.4);
  transition: transform 0.3s ease;
  cursor: default;
  user-select: none;
}

/* Efeito hover/focus nas imagens para aumentar e dar brilho */
/* Remove outline e muda cursor para indicar zoom possível */
.images-container img:hover,
.images-container img:focus {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 200, 255, 0.8),
    inset 0 0 18px rgba(0, 255, 255, 0.6);
  outline: none;
  cursor: zoom-in;
}

/* Container para cards em grid responsivo */
/* Colunas automáticas com mínimo de 280px e preenchendo o espaço disponível */
/* Espaçamento entre cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 35px;
}

/* Estilo dos cards interativos */
/* Fundo em gradiente azul, cantos arredondados, padding e sombra interna/externa para relevo */
/* Cursor pointer para indicar clicável */
/* Transições suaves para transformações, sombras e cor de fundo */
/* Posicionamento relativo para efeitos internos */
/* Cor clara do texto e sem seleção de texto */
/* Borda inicialmente transparente para evitar deslocamento */
.card {
  background: linear-gradient(135deg, #004974 0%, #002f51 100%);
  border-radius: 20px;
  padding: 22px 28px;
  box-shadow: 0 6px 20px rgba(0, 95, 160, 0.6),
    inset 0 0 15px rgba(0, 170, 255, 0.4);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.35s ease, background-color 0.35s ease;
  position: relative;
  color: #cde8ff;
  user-select: none;
  border: 1px solid transparent;
}

/* Pseudo-elemento para brilho suave em volta do card */
/* Inicialmente invisível, com transição de opacidade */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  box-shadow: 0 0 20px 3px rgba(0, 160, 255, 0.4);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

/* Efeito ao passar o mouse ou focar no card */
/* Aumenta escala, eleva o card com translateY, brilho mais intenso, mudança de cor e borda azul */
/* Remove outline para visual mais limpo */
.card:hover,
.card:focus {
  transform: scale(1.08) translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 170, 255, 0.8),
    inset 0 0 25px rgba(0, 200, 255, 0.7);
  background-color: #004e8f;
  border-color: #00aaff;
  outline: none;
}

/* Torna o brilho do pseudo-elemento visível no hover/focus */
.card:hover::before,
.card:focus::before {
  opacity: 1;
}

/* Título dentro do card com sombra azul e tamanho médio */
/* Fonte pesada e sem seleção */
.card h3 {
  margin-bottom: 14px;
  text-shadow: 0 0 12px #00baff, 0 0 20px #00d4ff;
  font-weight: 800;
  font-size: 1.3rem;
  user-select: none;
}

/* Texto dentro do card, tamanho confortável, sombra sutil, cor azul clara */
/* Permite seleção de texto */
.card p {
  font-size: 1.05rem;
  line-height: 1.5;
  text-align: left;
  text-shadow: 0 0 4px rgba(0, 30, 60, 0.7);
  color: #b3e0ff;
  user-select: text;
}

/* Botão "voltar" estilizado com gradiente azul, borda arredondada e sombra */
/* Cursor pointer, cor clara e texto em negrito */
/* Espaçamento para separar do conteúdo e transições suaves */
.back-button {
  background: linear-gradient(145deg, #007acc, #00497a);
  border: 2px solid #00aaff;
  border-radius: 25px;
  padding: 10px 20px;
  cursor: pointer;
  color: #e0f7ff;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 0 15px #00aaff, inset 0 0 10px #0099ff;
  margin-bottom: 25px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
  display: inline-block;
}

/* Efeito hover/focus para botão "voltar": clareia o gradiente, aumenta sombra e escala levemente */
.back-button:hover,
.back-button:focus {
  background: linear-gradient(145deg, #0099ff, #006a9a);
  outline: none;
  box-shadow: 0 0 25px #00c1ff, inset 0 0 15px #00c1ff;
  transform: scale(1.05);
}

/* Animação natural de bolhas subindo, com movimento lateral e escala aumentando */
/* Opacidade diminui até desaparecer no topo */
@keyframes bubble {
  0% {
    bottom: -60px;
    opacity: 0.75;
    transform: translateX(0) scale(1);
  }

  100% {
    bottom: 110%;
    opacity: 0;
    transform: translateX(40px) scale(1.6);
  }
}

/* Estilo base das bolhas animadas */
/* Posicionadas fixas na tela, fundo radial branco transparente, borda redonda */
/* Animação infinita linear e sombra para dar leve brilho */
/* Ignoram cliques */
.bubble {
  position: fixed;
  bottom: -60px;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.15) 60%
  );
  border-radius: 50%;
  animation-name: bubble;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(200, 230, 255, 0.8));
}

/* Variações de tamanho para as bolhas */
.bubble.small {
  width: 15px;
  height: 15px;
}

.bubble.medium {
  width: 30px;
  height: 30px;
}

.bubble.large {
  width: 40px;
  height: 40px;
}

.bubble.xlarge {
  width: 50px;
  height: 50px;
}

/* Container fixo para parallax de imagens em camadas */
/* Ocupa toda a tela e não interfere em interações */
/* Overflow escondido para cortar as imagens que saem da tela */
/* Z-index atrás do conteúdo e sem seleção */
.parallax-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  user-select: none;
}

/* Imagens usadas no parallax com posicionamento absoluto */
/* Otimização para transformações, baixa opacidade e sombra leve */
.parallax-image {
  position: absolute;
  will-change: transform;
  opacity: 0.14;
  transition: opacity 0.3s ease;
  filter: drop-shadow(0 0 4px #1e90ff88);
}

/* Posições e tamanhos específicos para cada camada do parallax */
.parallax-image.layer1 {
  width: 360px;
  bottom: 14%;
  left: 10%;
}

.parallax-image.layer2 {
  width: 430px;
  bottom: 18%;
  right: 14%;
}

.parallax-image.layer3 {
  width: 260px;
  top: 18%;
  left: 34%;
  opacity: 0.1;
  filter: drop-shadow(0 0 5px #007fffaa);
}

.parallax-image.layer4 {
  width: 480px;
  top: 28%;
  right: 30%;
  opacity: 0.08;
  filter: drop-shadow(0 0 6px #0099ff99);
}

/* Botão para ativar/desativar áudio */
/* Fixado no topo direito, com gradiente e bordas arredondadas */
/* Tamanho definido, cursor pointer, sombra intensa e texto grande */
/* Flexbox para centralizar ícone dentro do botão */
/* Transições suaves para hover/focus e z-index alto para ficar sempre acima */
.audio-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(145deg, #007acc, #00497a);
  border: 2px solid #00aaff;
  border-radius: 35px;
  width: 58px;
  height: 58px;
  cursor: pointer;
  box-shadow: 0 0 25px #00aaff, inset 0 0 12px #0099ff;
  color: #e0f7ff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
  z-index: 1000;
  user-select: none;
  filter: drop-shadow(0 0 8px #00bfff);
}

/* Efeito hover e foco no botão de áudio: clareia gradiente, aumenta sombra e escala */
.audio-toggle:hover,
.audio-toggle:focus {
  background: linear-gradient(145deg, #0099ff, #006a9a);
  outline: none;
  box-shadow: 0 0 40px #00c1ff, inset 0 0 18px #00c1ff;
  transform: scale(1.12);
}

/* Estilo do rodapé */
/* Margem para separar do conteúdo, texto azul com sombra para destaque */
/* Posição relativa para garantir sobreposição correta, não permite seleção */
/* Fonte com peso semi-negrito e espaçamento entre letras */
footer {
  margin-top: 45px;
  text-align: center;
  font-size: 0.9rem;
  color: #0099ff;
  text-shadow: 0 0 8px #004466, 0 0 20px #00aaff88;
  position: relative;
  z-index: 10;
  user-select: none;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Responsividade para telas menores que 600px */
/* Reduz padding da página, ajusta padding e bordas de containers e seções */
/* Diminui fontes para títulos e texto */
/* Cards ficam em uma coluna só e ajusta espaçamento */
/* Botão de áudio reduz tamanho e fonte */
/* Imagens dentro das seções ocupam 100% da largura */
@media (max-width: 600px) {
  body,
  html {
    padding: 12px;
  }

  .container,
  .topic-section {
    padding: 25px 30px;
    max-width: 100%;
    border-radius: 18px;
  }

  h1 {
    font-size: 2.4rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  p {
    font-size: 1.05rem;
  }

  .cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .audio-toggle {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .images-container img {
    width: 100%;
  }
}

/* Overlay para transições entre telas */
/* Ocupa toda a tela, fundo em gradiente radial azul escuro */
/* Inicialmente invisível e não interativo */
/* Transição suave de opacidade para ativar/desativar */
.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #001c33 0%, #000d1a 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  z-index: 9999;
}

/* Quando ativo, torna-se visível e interativo */
.transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Transições suaves para as seções e container principal */
/* Aplicando transformações (ex: escala, deslocamento) e filtros com duração e easing */
.topic-section, #mainContent {
  transition: transform 0.8s ease, filter 0.8s ease;
}