/* Matrix Text Effect Styles */
/* Larger name styling */
.name-container {
  position: relative;
  display: inline-block;
  overflow: visible; /* Ensure the cursor can be visible outside */
}

#first-name, #last-name {
  font-size: 7rem; /* Increased font size */
  line-height: 1.1;
  display: block;
}

#last-name {
  margin-top: -0.5rem; /* Bring it slightly closer to first name */
}

@media (max-width: 992px) {
  #first-name, #last-name {
    font-size: 5rem; /* Slightly smaller on medium screens */
  }
}

@media (max-width: 768px) {
  #first-name, #last-name {
    font-size: 4rem; /* Even smaller on mobile */
  }
}

@media (max-width: 576px) {
  #first-name, #last-name {
    font-size: 3rem; /* Much smaller on very small screens */
  }
}

.matrix-letter {
  display: inline-block;
  position: relative;
  transition: color 0.15s ease, transform 0.2s ease, opacity 0.2s ease;
  opacity: 1;
  will-change: transform, opacity, color, text-shadow;
  /* Éviter les mouvements indésirables en position initiale */
  transform: translateY(0);
}

.matrix-hidden {
  opacity: 0;
  transform: translateY(-2px); /* Réduit la distance de mouvement vertical (était -5px) */
}

.matrix-flicker {
  transition: all 0.05s ease-out;
}

.matrix-letter.changing {
  color: #00FF41; /* Matrix green */
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.8);
  transform: translateY(-1px) scale(1.02); /* Mouvement plus subtil */
  animation: glitchPreciseDecrypt 0.2s infinite steps(1); /* Animation plus rapide */
  opacity: 1;
}

#first-name .matrix-letter.changing {
  color: #3F51B5; /* Using the primary indigo color instead of white */
  text-shadow: 0 0 8px rgba(63, 81, 181, 0.8);
  animation: glitchPreciseDecryptBlue 0.25s infinite steps(1);
}

#last-name .matrix-letter.changing {
  color: #00FF41; /* Matrix green */
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.8);
  animation: glitchPreciseDecrypt 0.25s infinite steps(1);
}

/* Add more space after the name for better layout */
h1.mb-4 {
  margin-bottom: 2rem !important;
}

.matrix-letter.settled {
  animation: enhancedSettle 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; /* Use easeOutCubic for a more natural feel */
  color: inherit; /* Ensure the letter returns to its original color */
  text-shadow: none;
  transform: none;
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes enhancedSettle {
  0% {
    transform: translateY(-1px) scale(1.02); /* Valeurs plus subtiles */
    opacity: 0.9;
    letter-spacing: 0.01em; /* Espacement plus subtil */
  }
  30% {
    transform: translateY(-0.5px) scale(1.01);
    opacity: 0.95;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    letter-spacing: 0;
  }
}

@keyframes glitchPreciseDecrypt {
  0% {
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.7);
    transform: translateY(-1px) scale(1.02);
    opacity: 0.95;
  }
  33% {
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.9);
    transform: translateY(-3px) scale(1.05);
    opacity: 1;
  }
  66% {
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.6);
    transform: translateY(-2px) scale(1.03);
    opacity: 0.9;
  }
  100% {
    text-shadow: 0 0 7px rgba(0, 255, 65, 0.8);
    transform: translateY(-2.5px) scale(1.04);
    opacity: 0.95;
  }
}

@keyframes glitchPreciseDecryptBlue {
  0% {
    text-shadow: 0 0 6px rgba(63, 81, 181, 0.7);
    transform: translateY(-1px) scale(1.02);
    opacity: 0.95;
  }
  33% {
    text-shadow: 0 0 8px rgba(63, 81, 181, 0.9);
    transform: translateY(-3px) scale(1.05);
    opacity: 1;
  }
  66% {
    text-shadow: 0 0 4px rgba(63, 81, 181, 0.6);
    transform: translateY(-2px) scale(1.03);
    opacity: 0.9;
  }
  100% {
    text-shadow: 0 0 7px rgba(63, 81, 181, 0.8);
    transform: translateY(-2.5px) scale(1.04);
    opacity: 0.95;
  }
}

/* Hide original text until javascript is loaded */
.matrix-effect {
  visibility: hidden;
}

.matrix-effect.initialized {
  visibility: visible;
}

/* Removed cursor effect */