.hero-title {
  color: white;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.hero-title:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0px 2px 5px rgba(10, 15, 31, 0.5);
}

.text-cartoon-hover {
  position: relative;
  transition: all 0.2s ease-in-out;
}

.text-cartoon-hover:hover {
  color: #0a0f1f;
  text-shadow:
    -1.5px -1.5px 0 #fff,
     1.5px -1.5px 0 #fff,
    -1.5px  1.5px 0 #fff,
     1.5px  1.5px 0 #fff;
}

.hero-bloom-effect::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  z-index: -1;
  -webkit-text-stroke: 1px transparent;
  animation: bloom-effect 5s ease-in-out infinite;
}

@keyframes bloom-effect {
  0%, 80%, 100% {
    text-shadow: 0 0 4px rgba(0, 246, 255, 0);
  }
  90% {
    text-shadow: 0 0 8px rgba(0, 246, 255, 0.8), 0 0 16px rgba(0, 246, 255, 0.6);
  }
}