/* ============================================
   UNIFIED GSAP TEXT ANIMATION STYLES
   ============================================ */

/* Base styles - CRITICAL: Hide initially */
.hero-title , .animationGsap {
    position: relative;
    overflow: visible;
    perspective: 1000px;
    opacity: 0;
    visibility: hidden;
}

/* Animated character wrapper */
.char-animate {
    display: inline-block;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    transition: all 0.3s ease;
    transform-origin: center center;
}

/* Preserve inline formatting */
.char-animate + .char-animate {
    margin-left: 0;
}

/* Special/Highlighted text (like company name) */
.company-highlight {
    display: inline-block;
    font-weight: 800;
    padding: 0 5px;
    position: relative;
}

/* Keep gradient underline commented as per user request
.company-highlight::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 2px;
    opacity: 0.7;
}
*/

/* Make sure nested spans maintain their parent's properties */
.company-highlight .char-animate {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
}

/* Typewriter cursor - FIXED: Black color */
.type-cursor {
    animation: blink 0.8s infinite;
    color: #000000;
    font-weight: bold;
    margin-left: 2px;
    display: inline-block;
}

@keyframes blink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* Glow effect for animations */
.glow-text {
    animation: text-glow 2s ease-in-out infinite alternate;
}

@keyframes text-glow {
    from {
        text-shadow: 0 0 10px #667eea, 0 0 20px #667eea, 0 0 30px #764ba2;
    }
    to {
        text-shadow: 0 0 20px #667eea, 0 0 30px #764ba2, 0 0 40px #764ba2;
    }
}

/* Magnetic effect hover states */
.char-animate.magnetic {
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
}

.char-animate.magnetic:hover {
    transform: scale(1.2);
    color: #ff6b6b;
}

/* Animation-specific styles */

/* Falling Bounce Animation */
.animation-falling-bounce .char-animate {
    transform-origin: center top;
}

/* Typewriter Magnetic Animation */
.animation-typewriter .char-animate {
    transform-origin: bottom center;
}

/* Water Drop Animation */
.animation-water-drop .char-animate {
    transform-origin: center center;
    filter: drop-shadow(0 0 2px rgba(66, 153, 225, 0.3));
}

/* 3D Flip Animation */
.animation-3d-flip .char-animate {
    transform-style: preserve-3d;
    transform-origin: center center;
    perspective: 800px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .char-animate {
        will-change: transform;
    }
    
    /* Disable magnetic effects on mobile */
    .char-animate.magnetic {
        cursor: default;
    }
    
    .char-animate.magnetic:hover {
        transform: none;
        color: inherit;
    }
    
    /* Faster animations on mobile */
    .type-cursor {
        animation-duration: 0.6s;
    }
}

/* Performance optimizations */
.hero-title.animating {
    will-change: transform;
}

.hero-title.animating .char-animate {
    will-change: transform, opacity;
}

/* Ensure proper spacing for special elements */
.special-text,
.company-highlight {
    white-space: nowrap;
}

/* Fallback for browsers without GSAP or reduced motion */
@media (prefers-reduced-motion: reduce) {
    .char-animate {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    
    .hero-title {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .type-cursor {
        display: none;
    }
}

/* Smooth reveal when animation is ready */
.hero-title.ready {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}