/* ===== HERO TITLE ANIMATIONS ===== */

/* Fade-in and slide-up animation on page load */
.hero-title {
    animation: heroTitleEntrance 1s ease-out forwards;
    opacity: 0;
}

@keyframes heroTitleEntrance {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animated gradient for $COCO text */
.gradient-text {
    background: linear-gradient(
        90deg,
        rgba(6, 182, 212, 1) 0%,
        rgba(14, 165, 233, 1) 25%,
        rgba(6, 182, 212, 1) 50%,
        rgba(14, 165, 233, 1) 75%,
        rgba(6, 182, 212, 1) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s linear infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* MEGA GLOW effect for $COCO text */
.gradient-text {
    filter: drop-shadow(0 0 30px rgba(6, 182, 212, 0.9)) 
            drop-shadow(0 0 60px rgba(6, 182, 212, 0.7))
            drop-shadow(0 0 90px rgba(6, 182, 212, 0.5));
    animation: gradientShift 3s linear infinite, 
               textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% {
        filter: drop-shadow(0 0 30px rgba(6, 182, 212, 0.9)) 
                drop-shadow(0 0 60px rgba(6, 182, 212, 0.7))
                drop-shadow(0 0 90px rgba(6, 182, 212, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 40px rgba(6, 182, 212, 1)) 
                drop-shadow(0 0 80px rgba(6, 182, 212, 0.9))
                drop-shadow(0 0 120px rgba(6, 182, 212, 0.7));
    }
}

/* Enhanced surf icon animation */
.surf-icon {
    animation: surfWave 3s ease-in-out infinite, 
               surfFloat 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes surfWave {
    0%, 100% { 
        transform: translateY(0) rotate(-5deg) scale(1); 
    }
    50% { 
        transform: translateY(-10px) rotate(5deg) scale(1.05); 
    }
}

@keyframes surfFloat {
    0%, 100% {
        filter: drop-shadow(0 4px 8px rgba(6, 182, 212, 0.3));
    }
    50% {
        filter: drop-shadow(0 8px 16px rgba(6, 182, 212, 0.5));
    }
}

/* Title words appear one by one */
.hero-title > span,
.hero-title > .surf-icon {
    display: inline-block;
    animation: wordFadeIn 0.6s ease-out forwards;
    opacity: 0;
}

/* Stagger animation delays for each word */
.hero-title > span:nth-child(1) { animation-delay: 0.1s; }
.hero-title > span:nth-child(2) { animation-delay: 0.2s; }
.hero-title > span:nth-child(3) { animation-delay: 0.3s; }
.hero-title > span:nth-child(4) { animation-delay: 0.4s; }
.hero-title > .surf-icon { animation-delay: 0.5s; }
.hero-title > .gradient-text { animation-delay: 0.6s; }

@keyframes wordFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .surf-icon {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .surf-icon {
        font-size: 1.8rem;
    }
}