* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::selection {
  background: purple;
  color: white;            /* Changes text color */
}

.image-animation {
  opacity: 0;
  animation: anim 0.5s ease-in forwards;
  animation-delay: 1s;
  }
@keyframes anim {
 from { 
   transform: translateY(40px);
   opacity: 0;
   } 
  to {
  transform: translateY(0px);
   opacity: 1;
  }
}

/* 2. Apply the animation to your text element */
.fade-in-text {
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
  animation-delay: 4s;
}

/* 1. Define the keyframe animation steps */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Ajuste no container para empilhar o título e o menu na vertical */
.container {
  font-family: Syne,monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  color: gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
}

/* Espaçamento do container do menu */
.menu-links {
  margin-top: 20px;
  display: flex;
  gap: 60px;
}

/* Adicionamos o botão aqui na lista de estilos */
.menu-links a, 
#startButton.menu-links {
  background: none;       /* Remove o fundo cinza do botão */
  border: none;           /* Remove a borda padrão do botão */
  padding: 0;             /* Remove o espaçamento interno do botão */
  cursor: pointer;        /* Faz o mouse virar a "mãozinha" de clique */
  
  /* O seu estilo original que você já criou */
  color: gray;          
  text-decoration: none;   
  font-family: 'Azeret Mono', sans-serif;
  font-size: .75rem;
  letter-spacing: .08em;
}


.footer-mark {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);

 font-family: Azeret Mono,monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  color: #777;

  white-space: nowrap;
  z-index: 10;
}

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;

  width: 0;

  animation: typing 0.7s steps(32, end) forwards;
  animation-delay: 3s;
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.underline-slide {
  position: relative;
  display: inline-block;
  color: red;
  text-decoration: none;
}

/* Create the initial hidden line */
.underline-slide::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: red;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.1s ease-out;
}

/* Change origin on hover to pull from left, then scale up */
.underline-slide:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

button.menu-links.underline-slide {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  
  /* Pega as mesmas configurações de texto do seu menu */
  color: gray;          
  font-family: 'Azeret Mono', sans-serif;
  font-size: .75rem;
  letter-spacing: .08em;
}


body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
}

.texto-animado {
  font-family: Modulo, bold;
  overflow: hidden;
  line-height: 1;
  font-size: 6rem;
  color: #ffffff;
}

.texto-animado {
  position: relative; /* Necessário para posicionar a linha */
  display: inline-block;
  padding-bottom: 10px; /* Espaço entre o texto e a linha */
}

/* Cria a linha invisível no início */
.texto-animado::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 2px;
  left: 50%;
  
  /* Largura final da linha (ajuste este valor para o tamanho que quiser) */
  width: 80%; 
  background-color: #ffffff; /* Cor da linha */
  
  /* Centraliza a linha e encolhe ela a 0 no eixo X */
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  
  /* Animação da linha */
  animation: linha 2.1s ease-in-out forwards;
  animation-delay: 0s;
}

/* Animação que faz a linha crescer do centro para os lados */
@keyframes linha {
  0% {
    transform: translateX(-50%) scaleX(0);
    }
  12% {
    transform: translateX(-50%) scaleX(1);
    }
  88% {
    transform: translateX(-50%) scaleX(1);
    }
  100% {
    transform: translateX(-50%) scaleX(0);
    }
  }
.texto-animado span {
  display: inline-block; /* Necessário para que transform funcione em letras */
  opacity: 0;
  
  /* Utiliza a variável --i para calcular o atraso de cada letra */
  animation: subirLetra 0.2s ease-out forwards;
  animation-delay: 1s
}

@keyframes subirLetra {
  from {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(9px); /* Ajuste o valor para mais ou menos desfoque */
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);  /* A letra fica totalmente nítida ao parar */
  }
}