/**
 * ideaGeek Text Reveal Effect
 *
 * Word-by-word scroll-driven text reveal.
 *
 * @package ideaGeek
 */


/* =========================================================
   Configuration
   ========================================================= */

.ig-text-reveal {
    --ig-reveal-start: 8%;
    --ig-reveal-end: 30%;
    --ig-reveal-stagger: 2%;
    --ig-reveal-blur: 20px;
}

.ig-text-reveal--tight {
    --ig-reveal-stagger: 1.5%;
}

/* =========================================================
   Scroll-Driven Reveal
   ========================================================= */

@supports ( animation-timeline: view() ) {

    .ig-text-reveal .ig-reveal-word {
        display: inline-block;

        opacity: 0;
        filter: blur( var(--ig-reveal-blur) );

        animation-name: ig-text-reveal;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: both;
        animation-timeline: view(block);

        animation-range-start:
            calc(
                var(--ig-reveal-start) +
                (var(--ig-reveal-index) * var(--ig-reveal-stagger))
            );

        animation-range-end:
            calc(
                var(--ig-reveal-end) +
                (var(--ig-reveal-index) * var(--ig-reveal-stagger))
            );
    }


    /* =====================================================
       Reveal Animation
       ===================================================== */

    @keyframes ig-text-reveal {

        from {
            opacity: 0;
            filter: blur( var(--ig-reveal-blur) );
        }

        to {
            opacity: 1;
            filter: blur(0);
        }

    }

}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media ( prefers-reduced-motion: reduce ) {

    .ig-text-reveal .ig-reveal-word {
        display: inline;
        opacity: 1;
        filter: none;
        animation: none;
    }

}