/**
 * SEO Intro Rocket Flame
 */
.is-intersecting #seo-intro .rocket-flame {
    animation-name: flame;
    animation-duration: 650ms;
    animation-iteration-count: infinite;
}

@keyframes flame {
    0% {
        transform: scale(1);
    }

    30% {
        transform: translateY(-3%) scale(1.04);
    }

    55% {
        fill: #f8845a;
        transform: scale(1.01);
    }

    72% {
        transform: scale(1.02);
    }

    100% {
        fill: #ffa686;
        transform: scale(1);
    }
}

/**
 * What is SEO? Search Bar
 */
.is-intersecting #what-is-seo #Search_Bar .letter {
    animation-name: revealLetter;
    animation-delay: var(--reveal-letter-delay, 1s);
    animation-duration: 1ms;
    animation-fill-mode: forwards;
    opacity: 0;
}

#what-is-seo #Search_Bar .letter-e {
    --reveal-letter-delay: 1.3s;
}

#what-is-seo #Search_Bar .letter-a {
    --reveal-letter-delay: 1.6s;
}

#what-is-seo #Search_Bar .letter-r {
    --reveal-letter-delay: 1.9s;
}

#what-is-seo #Search_Bar .letter-c {
    --reveal-letter-delay: 2.2s;
}

#what-is-seo #Search_Bar .letter-h {
    --reveal-letter-delay: 2.5s;
}

@keyframes revealLetter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
