Text Hover Effects

<!-- Effect 1: Underline Reveal -->
<div class="text-hover-effect-1">Underline Reveal</div>

<!-- Effect 2: Character Reveal -->
<div class="text-hover-effect-2">
  <span>C</span>
  <span>h</span>
  <span>a</span>
  <span>r</span>
  <span>a</span>
  <span>c</span>
  <span>t</span>
  <span>e</span>
  <span>r</span>
  <span>s</span>
</div>

/* Effect 1: Underline Reveal */
.text-hover-effect-1 {
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 0;
}

.text-hover-effect-1::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #3498db, #2980b9);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  border-radius: 3px;
}

.text-hover-effect-1:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Effect 2: Character Reveal */
.text-hover-effect-2 {
  position: relative;
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  cursor: pointer;
}

.text-hover-effect-2 span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
              color 0.3s ease;
}

.text-hover-effect-2:hover span {
  color: #3498db;
  transform: translateY(-8px);
}

/* Staggered animation for each character */
.text-hover-effect-2 span:nth-child(1) { transition-delay: 0.00s; }
.text-hover-effect-2 span:nth-child(2) { transition-delay: 0.03s; }
.text-hover-effect-2 span:nth-child(3) { transition-delay: 0.06s; }
.text-hover-effect-2 span:nth-child(4) { transition-delay: 0.09s; }
.text-hover-effect-2 span:nth-child(5) { transition-delay: 0.12s; }
.text-hover-effect-2 span:nth-child(6) { transition-delay: 0.15s; }
.text-hover-effect-2 span:nth-child(7) { transition-delay: 0.18s; }
.text-hover-effect-2 span:nth-child(8) { transition-delay: 0.21s; }
.text-hover-effect-2 span:nth-child(9) { transition-delay: 0.24s; }
.text-hover-effect-2 span:nth-child(10) { transition-delay: 0.27s; }

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .text-hover-effect-1 {
    color: #f0f0f0;
  }
  
  .text-hover-effect-1::after {
    background: linear-gradient(90deg, #4dabf7, #74c0fc);
  }
  
  .text-hover-effect-2 {
    color: #f0f0f0;
  }
  
  .text-hover-effect-2:hover span {
    color: #4dabf7;
  }
}

// Helper function to wrap each character in a span
function wrapCharacters(selector) {
  const elements = document.querySelectorAll(selector);
  
  elements.forEach(element => {
    const text = element.textContent;
    element.textContent = '';
    
    // Create span for each character
    for (let i = 0; i < text.length; i++) {
      const span = document.createElement('span');
      span.textContent = text[i];
      element.appendChild(span);
    }
  });
}

// Usage
document.addEventListener('DOMContentLoaded', function() {
  // Automatically wrap any element with this class
  wrapCharacters('.auto-character-wrap');
});