/* ==========================================================
   GLOBAL REVEAL ANIMATIONS
========================================================== */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s cubic-bezier(.22,.61,.36,1),

        transform .8s cubic-bezier(.22,.61,.36,1);

    will-change:opacity,transform;

}

.reveal.visible{

    opacity:1;

    transform:translateY(0);

}

.reveal-delay-1{

    transition-delay:.08s;

}

.reveal-delay-2{

    transition-delay:.16s;

}

.reveal-delay-3{

    transition-delay:.24s;

}

.reveal-delay-4{

    transition-delay:.32s;

}

.reveal-left{

    opacity:0;

    transform:translateX(-40px);

    transition:

        opacity .8s cubic-bezier(.22,.61,.36,1),

        transform .8s cubic-bezier(.22,.61,.36,1);

}

.reveal-right{

    opacity:0;

    transform:translateX(40px);

    transition:

        opacity .8s cubic-bezier(.22,.61,.36,1),

        transform .8s cubic-bezier(.22,.61,.36,1);

}

.reveal-left.visible,

.reveal-right.visible{

    opacity:1;

    transform:none;

}

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

    .reveal,

    .reveal-left,

    .reveal-right{

        opacity:1;

        transform:none;

        transition:none;

    }

}

/* ==========================================================
   SCROLL-SCRUB TEXT REVEAL
   Words start dim and brighten progressively as the
   heading scrolls through the viewport (see main.js
   initTextScrub). Falls back to fully visible, static
   text if JS doesn't run or motion is reduced.
========================================================== */

.scrub-word {

    display: inline-block;

    opacity: 0.22;

    transition: opacity 0.5s ease;

}

.scrub-word.revealed {

    opacity: 1;

}

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

    .scrub-word{

        opacity: 1;

        transition: none;

    }

}