/**
 * Text Reveal by Letter Animation
 * Usage: Add class "text-reveal-by-letter" to any element
 * Letters will reveal one by one when element enters viewport
 */

/* Base styling for text reveal elements */
.text-reveal-by-letter {
    overflow: hidden;
    position: relative;
}

/* Target specific elements inside .text-reveal-by-letter */
.text-reveal-by-letter h1,
.text-reveal-by-letter h2,
.text-reveal-by-letter h3,
.text-reveal-by-letter h4,
.text-reveal-by-letter h5,
.text-reveal-by-letter h6,
.text-reveal-by-letter p,
.text-reveal-by-letter span {
    overflow: hidden;
    position: relative;
}

/* Word wrapper to maintain proper line breaks */
.text-reveal-by-letter .word {
    display: inline-block;
    white-space: nowrap; /* Prevent word from breaking */
}

/* Individual letter styling */
.text-reveal-by-letter .letter {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
                opacity 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-fill-mode: both;
    /* Remove any margin/padding that might affect spacing */
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

/* Animation when in viewport */
.text-reveal-by-letter.animate .letter {
    transform: translateY(0);
    opacity: 1;
}

/* Staggered delay for each letter - more letters supported */
.text-reveal-by-letter.animate .letter:nth-child(1) { transition-delay: 0.05s; }
.text-reveal-by-letter.animate .letter:nth-child(2) { transition-delay: 0.1s; }
.text-reveal-by-letter.animate .letter:nth-child(3) { transition-delay: 0.15s; }
.text-reveal-by-letter.animate .letter:nth-child(4) { transition-delay: 0.2s; }
.text-reveal-by-letter.animate .letter:nth-child(5) { transition-delay: 0.25s; }
.text-reveal-by-letter.animate .letter:nth-child(6) { transition-delay: 0.3s; }
.text-reveal-by-letter.animate .letter:nth-child(7) { transition-delay: 0.35s; }
.text-reveal-by-letter.animate .letter:nth-child(8) { transition-delay: 0.4s; }
.text-reveal-by-letter.animate .letter:nth-child(9) { transition-delay: 0.45s; }
.text-reveal-by-letter.animate .letter:nth-child(10) { transition-delay: 0.5s; }
.text-reveal-by-letter.animate .letter:nth-child(11) { transition-delay: 0.55s; }
.text-reveal-by-letter.animate .letter:nth-child(12) { transition-delay: 0.6s; }
.text-reveal-by-letter.animate .letter:nth-child(13) { transition-delay: 0.65s; }
.text-reveal-by-letter.animate .letter:nth-child(14) { transition-delay: 0.7s; }
.text-reveal-by-letter.animate .letter:nth-child(15) { transition-delay: 0.75s; }
.text-reveal-by-letter.animate .letter:nth-child(16) { transition-delay: 0.8s; }
.text-reveal-by-letter.animate .letter:nth-child(17) { transition-delay: 0.85s; }
.text-reveal-by-letter.animate .letter:nth-child(18) { transition-delay: 0.9s; }
.text-reveal-by-letter.animate .letter:nth-child(19) { transition-delay: 0.95s; }
.text-reveal-by-letter.animate .letter:nth-child(20) { transition-delay: 1s; }
.text-reveal-by-letter.animate .letter:nth-child(21) { transition-delay: 1.05s; }
.text-reveal-by-letter.animate .letter:nth-child(22) { transition-delay: 1.1s; }
.text-reveal-by-letter.animate .letter:nth-child(23) { transition-delay: 1.15s; }
.text-reveal-by-letter.animate .letter:nth-child(24) { transition-delay: 1.2s; }
.text-reveal-by-letter.animate .letter:nth-child(25) { transition-delay: 1.25s; }
.text-reveal-by-letter.animate .letter:nth-child(26) { transition-delay: 1.3s; }
.text-reveal-by-letter.animate .letter:nth-child(27) { transition-delay: 1.35s; }
.text-reveal-by-letter.animate .letter:nth-child(28) { transition-delay: 1.4s; }
.text-reveal-by-letter.animate .letter:nth-child(29) { transition-delay: 1.45s; }
.text-reveal-by-letter.animate .letter:nth-child(30) { transition-delay: 1.5s; }

/* For letters beyond 30, use a formula-based approach */
.text-reveal-by-letter.animate .letter:nth-child(n+31) { 
    transition-delay: calc(1.55s + (var(--letter-index, 0) * 0.05s)); 
}

/* Alternative animation styles */

/* Fade in from bottom */
.text-reveal-by-letter.fade-up .letter {
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
                opacity 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.text-reveal-by-letter.fade-up.animate .letter {
    transform: translateY(0);
    opacity: 1;
}

/* Scale in animation */
.text-reveal-by-letter.scale-in .letter {
    transform: scale(0);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
                opacity 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.text-reveal-by-letter.scale-in.animate .letter {
    transform: scale(1);
    opacity: 1;
}

/* Rotate in animation */
.text-reveal-by-letter.rotate-in .letter {
    transform: rotateY(90deg);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
                opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.text-reveal-by-letter.rotate-in.animate .letter {
    transform: rotateY(0);
    opacity: 1;
}

/* Slide from left */
.text-reveal-by-letter.slide-left .letter {
    transform: translateX(-30px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
                opacity 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.text-reveal-by-letter.slide-left.animate .letter {
    transform: translateX(0);
    opacity: 1;
}

/* Slide from right */
.text-reveal-by-letter.slide-right .letter {
    transform: translateX(30px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
                opacity 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.text-reveal-by-letter.slide-right.animate .letter {
    transform: translateX(0);
    opacity: 1;
}

/* Speed variations */
.text-reveal-by-letter.fast .letter {
    transition-duration: 0.3s;
}

.text-reveal-by-letter.slow .letter {
    transition-duration: 0.9s;
}

/* Faster delays for speed variations */
.text-reveal-by-letter.fast.animate .letter:nth-child(1) { transition-delay: 0.02s; }
.text-reveal-by-letter.fast.animate .letter:nth-child(2) { transition-delay: 0.04s; }
.text-reveal-by-letter.fast.animate .letter:nth-child(3) { transition-delay: 0.06s; }
.text-reveal-by-letter.fast.animate .letter:nth-child(4) { transition-delay: 0.08s; }
.text-reveal-by-letter.fast.animate .letter:nth-child(5) { transition-delay: 0.1s; }
.text-reveal-by-letter.fast.animate .letter:nth-child(n+6) { 
    transition-delay: calc(0.12s + (var(--letter-index, 0) * 0.02s)); 
}

/* Slower delays for slow variation */
.text-reveal-by-letter.slow.animate .letter:nth-child(1) { transition-delay: 0.1s; }
.text-reveal-by-letter.slow.animate .letter:nth-child(2) { transition-delay: 0.2s; }
.text-reveal-by-letter.slow.animate .letter:nth-child(3) { transition-delay: 0.3s; }
.text-reveal-by-letter.slow.animate .letter:nth-child(4) { transition-delay: 0.4s; }
.text-reveal-by-letter.slow.animate .letter:nth-child(5) { transition-delay: 0.5s; }
.text-reveal-by-letter.slow.animate .letter:nth-child(n+6) { 
    transition-delay: calc(0.6s + (var(--letter-index, 0) * 0.1s)); 
}

/* Preserve whitespace for proper letter spacing */
.text-reveal-by-letter .letter.space {
    width: 0.25em;
    display: inline-block;
}

/* Ensure proper text alignment within words */
.text-reveal-by-letter {
    word-spacing: normal;
    letter-spacing: normal;
    line-height: inherit;
}

/* Fix for heading elements to maintain their original styling */
.text-reveal-by-letter h1,
.text-reveal-by-letter h2,
.text-reveal-by-letter h3,
.text-reveal-by-letter h4,
.text-reveal-by-letter h5,
.text-reveal-by-letter h6 {
    display: block;
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .text-reveal-by-letter .letter {
        transition-duration: 0.4s;
    }
    
    /* Faster delays on mobile for better performance */
    .text-reveal-by-letter.animate .letter:nth-child(1) { transition-delay: 0.02s !important; }
    .text-reveal-by-letter.animate .letter:nth-child(2) { transition-delay: 0.04s !important; }
    .text-reveal-by-letter.animate .letter:nth-child(3) { transition-delay: 0.06s !important; }
    .text-reveal-by-letter.animate .letter:nth-child(4) { transition-delay: 0.08s !important; }
    .text-reveal-by-letter.animate .letter:nth-child(5) { transition-delay: 0.1s !important; }
    .text-reveal-by-letter.animate .letter:nth-child(n+6) { 
        transition-delay: calc(0.12s + (var(--letter-index, 0) * 0.03s)) !important; 
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .text-reveal-by-letter .letter {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
        animation: none !important;
    }
}