/* Polygonal Mesh Letter Effects - Smooth Professional Animation */
.letter-3d {
  display: inline-block;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: default;
  position: relative;
  overflow: visible;
  color: black;
}

/* Polygon mesh layers */
.letter-3d::before,
.letter-3d::after {
  content: attr(data-letter);
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

/* Layer 1 - wireframe outline */
.letter-3d::before {
  -webkit-text-stroke: 2px #0066ff;
  -webkit-text-fill-color: transparent;
  z-index: -1;
}

/* Layer 2 - gradient fill */
.letter-3d::after {
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.3), rgba(0, 204, 255, 0.3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  z-index: -2;
  filter: blur(4px);
}

.letter-3d:hover {
  transform: translateY(-6px);
  color: transparent;
}

.letter-3d:hover::before {
  opacity: 0.8;
  transform: scale(1.02);
}

.letter-3d:hover::after {
  opacity: 0.6;
  transform: scale(1.03);
  filter: blur(4px);
}

/* Gradient animation - smooth */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-title {
  perspective: 2000px;
  transform-style: preserve-3d;
}

/* Smooth fade-in animation on load - no pulse */
@keyframes letterFadeIn {
  from { 
    opacity: 0; 
    transform: translateY(20px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}

.letter-3d {
  animation: letterFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.letter-3d:nth-child(1) { animation-delay: 0s; }
.letter-3d:nth-child(2) { animation-delay: 0.1s; }
.letter-3d:nth-child(3) { animation-delay: 0.2s; }
.letter-3d:nth-child(4) { animation-delay: 0.3s; }
.letter-3d:nth-child(5) { animation-delay: 0.4s; }
.letter-3d:nth-child(6) { animation-delay: 0.5s; }