/* ============================================
   ANIMATED GRADIENT TITLE EFFECT
   Consciousness Revolution - Ultimate Human OS
   ============================================ */

/* Animated gradient keyframes */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradient-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Main animated gradient title class */
.animated-gradient-title {
    background: linear-gradient(
        90deg,
        #f39c12,
        #e74c3c,
        #9b59b6,
        #3498db,
        #2ecc71,
        #f39c12
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite;
    display: inline-block;
}

/* Variant: Faster animation */
.animated-gradient-title-fast {
    background: linear-gradient(
        90deg,
        #f39c12,
        #e74c3c,
        #9b59b6,
        #3498db,
        #2ecc71,
        #f39c12
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 4s ease infinite;
    display: inline-block;
}

/* Variant: Slower, more subtle animation */
.animated-gradient-title-slow {
    background: linear-gradient(
        90deg,
        #f39c12,
        #e74c3c,
        #9b59b6,
        #3498db,
        #2ecc71,
        #f39c12
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 12s ease infinite;
    display: inline-block;
}

/* Variant: Gold to purple gradient */
.animated-gradient-title-royal {
    background: linear-gradient(
        90deg,
        #FFD700,
        #FFA500,
        #9b59b6,
        #e91e63,
        #FFD700
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite;
    display: inline-block;
}

/* Variant: Cool colors (blues and greens) */
.animated-gradient-title-cool {
    background: linear-gradient(
        90deg,
        #3498db,
        #2ecc71,
        #1abc9c,
        #74C0FC,
        #3498db
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite;
    display: inline-block;
}

/* Variant: Warm colors (reds and oranges) */
.animated-gradient-title-warm {
    background: linear-gradient(
        90deg,
        #e74c3c,
        #f39c12,
        #e91e63,
        #FF6B6B,
        #e74c3c
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite;
    display: inline-block;
}

/* Add glow effect (optional enhancement) */
.animated-gradient-title-glow {
    background: linear-gradient(
        90deg,
        #f39c12,
        #e74c3c,
        #9b59b6,
        #3498db,
        #2ecc71,
        #f39c12
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite, gradient-pulse 3s ease infinite;
    display: inline-block;
    filter: drop-shadow(0 0 10px rgba(243, 156, 18, 0.5));
}

/* Ensure compatibility with existing logo classes */
.logo.animated-gradient-title,
.title.animated-gradient-title,
h1.animated-gradient-title {
    background: linear-gradient(
        90deg,
        #f39c12,
        #e74c3c,
        #9b59b6,
        #3498db,
        #2ecc71,
        #f39c12
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite;
}

/* ============================================
   USAGE EXAMPLES
   ============================================
   
   Basic usage:
   <h1 class="animated-gradient-title">ULTIMATE HUMAN OS</h1>
   
   With existing classes:
   <h1 class="logo animated-gradient-title">ULTIMATE HUMAN OS</h1>
   
   Faster animation:
   <h1 class="animated-gradient-title-fast">Title</h1>
   
   With glow effect:
   <h1 class="animated-gradient-title-glow">Title</h1>
   
   Different color schemes:
   <h1 class="animated-gradient-title-royal">Title</h1>
   <h1 class="animated-gradient-title-cool">Title</h1>
   <h1 class="animated-gradient-title-warm">Title</h1>
   ============================================ */

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .animated-gradient-title,
    .animated-gradient-title-fast,
    .animated-gradient-title-slow,
    .animated-gradient-title-royal,
    .animated-gradient-title-cool,
    .animated-gradient-title-warm,
    .animated-gradient-title-glow {
        animation: none;
        background-position: 50% 50%;
    }
}