/* ==========================================================================
   STAGGER TEXT ANIMATION
   Masked word/letter reveal & interactive hover flip stagger effect
   ========================================================================== */

.stagger-text {
    display: inline-block;
}

.stagger-word-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.08em;
    margin-right: 0.22em;
}

.stagger-word-inner {
    display: inline-block;
    transform: translateY(115%);
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.stagger-text.is-visible .stagger-word-inner {
    transform: translateY(0%);
}

/* Hover Stagger Flip Effect */
.stagger-text-hover .stagger-word-inner {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.stagger-text-hover:hover .stagger-word-inner {
    animation: staggerWordFlip 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes staggerWordFlip {
    0% { transform: translateY(0%); }
    45% { transform: translateY(-115%); opacity: 0; }
    46% { transform: translateY(115%); opacity: 0; }
    100% { transform: translateY(0%); opacity: 1; }
}