.smaller {
    font-size: $spacer * 0.8;
}

// ===================================================================
// ANIMATED TEXT COLOR EFFECTS
// ===================================================================
// Components for creating animated color effects on text
// with various animation types (color-shift, rainbow, wave, pulse)

// Variables for color sequences
$color-rainbow: $primary, $secondary, $success, $danger, $dark;
$color-purple: #667eea, #764ba2, #f093fb, #667eea;
$color-sunset: #fa709a, #fee140, #fa709a;
$color-ocean: #00c9ff, #92fe9d, #00c9ff;

// Variables for animation timing
$animation-duration-fast: 2s;
$animation-duration-medium: 3s;
$animation-duration-slow: 4s;

// Mixin for base animated text styling
@mixin animated-text-base {
    display: inline-block;
    font-weight: inherit;
    transition: color 0.3s ease;
}

// Mixin for creating color animation sequences
@mixin create-color-animation($name, $colors, $duration: 3s) {
    animation: #{$name} #{$duration} ease-in-out infinite;
}

// ===================================================================
// ANIMATED TEXT COLOR CLASSES
// ===================================================================

/**
 * Text with rainbow color cycling animation
 * Cycles through rainbow spectrum colors
 */
.gradient-text {
    background: linear-gradient(90deg, $primary, $gray-500, $primary);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-animation 5s ease infinite;
}

/**
 * Text with purple theme color animation
 * Cycles through purple and pink shades
 */
.gradient-rotate {
    @include animated-text-base;
    @include create-color-animation(purple-text, $color-purple, $animation-duration-slow);
}

/**
 * Text with wave color animation
 * Sunset color wave effect
 */
.gradient-wave {
    @include animated-text-base;
    @include create-color-animation(wave-text, $color-sunset, $animation-duration-fast);
}

/**
 * Text with pulse color animation
 * Uses primary color with opacity pulse effect
 */
.gradient-pulse {
    @include animated-text-base;
    color: $primary;
    animation: pulse-text $animation-duration-fast ease-in-out infinite;
}

/**
 * Text with ocean theme animation
 * Cycles through blue and green ocean colors
 */
.gradient-ocean {
    @include animated-text-base;
    @include create-color-animation(ocean-text, $color-ocean, $animation-duration-medium);
}

// ===================================================================
// KEYFRAME ANIMATIONS FOR TEXT COLOR
// ===================================================================

/**
 * Rainbow color cycling animation
 * Text changes color following rainbow spectrum
 */
@keyframes rainbow-text {
    0% {
        color: $primary;
    }

    25% {
        color: $secondary;
    }

    50% {
        color: $success;
    }

    75% {
        color: $danger;
    }

    100% {
        color: $primary;
    }
}

/**
 * Purple theme color cycling animation
 * Text changes through purple and pink shades
 */
@keyframes purple-text {
    0% {
        color: #667eea;
    }

    33% {
        color: #764ba2;
    }

    66% {
        color: #f093fb;
    }

    100% {
        color: #667eea;
    }
}

/**
 * Wave color animation for sunset theme
 * Text alternates between pink and yellow
 */
@keyframes wave-text {
    0% {
        color: #fa709a;
    }

    50% {
        color: #fee140;
    }

    100% {
        color: #fa709a;
    }
}

/**
 * Ocean theme color cycling animation
 * Text changes between blue and green ocean colors
 */
@keyframes ocean-text {
    0% {
        color: #00c9ff;
    }

    50% {
        color: #92fe9d;
    }

    100% {
        color: #00c9ff;
    }
}

/**
 * Pulse animation with opacity
 * Text blinks with changing opacity and scale
 */
@keyframes pulse-text {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

@keyframes gradient-animation {
    0% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }

    100% {
        background-position: 0% center;
    }
}