/*Reveal animations*/
.reveal{ position: relative; transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }

/*Project cards: soft stagger across each row*/
.projects-grid:not(.featured) .project-card.reveal:nth-child(3n+2){ transition-delay: .08s; }
.projects-grid:not(.featured) .project-card.reveal:nth-child(3n){ transition-delay: .16s; }
.projects-grid.featured .project-card.reveal:nth-child(2n){ transition-delay: .1s; }
.js .reveal{ opacity: 0; }
.js .reveal.active{ opacity: 1; }

/*Gallery pictures one by one*/
.js .gallery.reveal, .js .service-gallery.reveal{ opacity: 1; }
.js .gallery figure, .js .service-gallery figure{ opacity: 0; transform: translateY(24px) scale(.94); transition: opacity .4s ease, transform .4s var(--ease-out); }
.reveal.active .gallery figure, .gallery.reveal.active figure, .service-gallery.reveal.active figure{ opacity: 1; transform: none; }
.reveal.active .gallery .img-1, .gallery.reveal.active .img-1, .service-gallery.reveal.active .img-1{ transition-delay: 0s; }
.reveal.active .gallery .img-2, .gallery.reveal.active .img-2, .service-gallery.reveal.active .img-2{ transition-delay: .08s; }
.reveal.active .gallery .img-3, .gallery.reveal.active .img-3, .service-gallery.reveal.active .img-3{ transition-delay: .16s; }
.reveal.active .gallery .img-4, .gallery.reveal.active .img-4, .service-gallery.reveal.active .img-4{ transition-delay: .24s; }

/*Text effects*/
@keyframes fx-up{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes fx-word{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes fx-eyebrow{ from{ opacity: 0; transform: translateX(-16px); } to{ opacity: 1; transform: translateX(0); } }
.fx-words .word{ display: inline-block; opacity: 0; }
.fx-words.in-view .word{ animation: fx-word .45s cubic-bezier(.16,1,.3,1) calc(var(--d, 0s) + var(--i) * .035s) forwards; }
.fx-eyebrow{ opacity: 0; }
.fx-eyebrow.in-view{ animation: fx-eyebrow .5s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards; }
.fx-up{ opacity: 0; }
.fx-up.in-view{ animation: fx-up .45s cubic-bezier(.16,1,.3,1) var(--d, 0s) forwards; }
.js .service-block .service-content ul li, .js .tech-block .tech-col ul li{ opacity: 0; transform: translateX(-20px); transition: opacity .35s ease, transform .35s var(--ease-out); }
.js .service-block .service-content.active ul li, .js .tech-block .tech-col.active ul li{ opacity: 1; transform: translateX(0); }
.service-block .service-content.active ul li:nth-child(1), .tech-block .tech-col.active ul li:nth-child(1){ transition-delay: calc(var(--cd, 0s) + .2s); }
.service-block .service-content.active ul li:nth-child(2), .tech-block .tech-col.active ul li:nth-child(2){ transition-delay: calc(var(--cd, 0s) + .27s); }
.service-block .service-content.active ul li:nth-child(3), .tech-block .tech-col.active ul li:nth-child(3){ transition-delay: calc(var(--cd, 0s) + .34s); }
.service-block .service-content.active ul li:nth-child(4), .tech-block .tech-col.active ul li:nth-child(4){ transition-delay: calc(var(--cd, 0s) + .41s); }
.service-block .service-content.active ul li:nth-child(n+5), .tech-block .tech-col.active ul li:nth-child(n+5){ transition-delay: calc(var(--cd, 0s) + .48s); }

/*Home guarantees: reduced motion shows the side lines*/
@media (prefers-reduced-motion: reduce){

    .why-block .why-item:before{ transform: scaleY(1) !important; transition: none !important; }

}

/*Home reasons order: header, then each card one by one*/
.reasons-block .reason-item:nth-child(1){ --cd: .45s; }
.reasons-block .reason-item:nth-child(2){ --cd: .65s; }
.reasons-block .reason-item:nth-child(3){ --cd: .85s; }
.reasons-block .reason-item.reveal{ transition-duration: .5s; transition-delay: var(--cd); }
.reasons-block .reason-item h3.fx-up.in-view{ animation-delay: var(--cd); }
.reasons-block .reason-item p.fx-up.in-view{ animation-delay: calc(var(--cd) + .1s); }

/*Home methodology order: header, then first column, then second column*/
.tech-block .tech-col:nth-child(1){ --cd: .5s; }
.tech-block .tech-col:nth-child(2){ --cd: 1s; }
.tech-block .tech-col.reveal{ transition-delay: var(--cd); }
.tech-block .tech-col h3.fx-up.in-view{ animation-delay: calc(var(--d, 0s) + var(--cd)); }
.hero .text.reveal{ transition-duration: .4s; }
.hero .text .eyebrow{ animation: fx-eyebrow .3s cubic-bezier(.2,.7,.2,1) 0s backwards; }
.hero .text > p:not(.eyebrow){ animation: fx-up .3s ease .4s backwards; }
.hero .text > .button{ animation: fx-up .3s ease .55s backwards; }

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

    /*Reveal animations*/
    .js .reveal{ transform: none !important; transition: opacity .3s ease !important; }
    .js .gallery figure, .js .service-gallery figure{ opacity: 1; transform: none; transition: none !important; }

    /*Text effects*/
    .js .service-block .service-content ul li, .js .tech-block .tech-col ul li{ opacity: 1; transform: none; transition: none; }
    .fx-words .word, .fx-eyebrow, .fx-up{ opacity: 1; animation: none; }
    .fx-words.in-view .word, .fx-eyebrow.in-view, .fx-up.in-view{ animation: none; }
    .hero .text .eyebrow, .hero .text > p:not(.eyebrow), .hero .text > .button, .hero .text h1 .word{ animation: none !important; }
    .hero .text h1 .tw-char{ opacity: 1; animation: none !important; }
    .hero .bg{ animation: none !important; }
}

@media screen and (min-width: 1024px){

    /*Reveal from Right*/
    .reveal.reveal-right{ transform: translateX(100px); }
    .reveal.reveal-right.active{ transform: translateX(0); }

    /*Reveal from Left*/
    .reveal.reveal-left{ transform: translateX(-100px); }
    .reveal.reveal-left.active{ transform: translateX(0); }

    /*Reveal from Bottom*/
    .reveal.reveal-bottom{ transform: translateY(100px); }
    .reveal.reveal-bottom.active{ transform: translateY(0); }

    /*Reveal from Top*/
    .reveal.reveal-top{ transform: translateY(-100px); }
    .reveal.reveal-top.active{ transform: translateY(0); }

    /*Animation duration framework*/
    .reveal.duration-100{ transition: .3s all; }
    .reveal.duration-200{ transition: .5s all; }
    .reveal.duration-300{ transition: .7s all; }
    .reveal.duration-400{ transition: .9s all; }
    .reveal.duration-500{ transition: 1.1s all; }
    .reveal.duration-600{ transition: 1.3s all; }
    .reveal.duration-700{ transition: 1.5s all; }
    .reveal.duration-800{ transition: 1.8s all; }
    .reveal.duration-900{ transition: 2s all; }

}

@media screen and (max-width: 1023px){

    /*Reveal from Right*/
    .reveal.mobile-reveal-right{ transform: translateX(100px); }
    .reveal.mobile-reveal-right.active{ transform: translateX(0); }

    /*Reveal from Left*/
    .reveal.mobile-reveal-left{ transform: translateX(-100px); }
    .reveal.mobile-reveal-left.active{ transform: translateX(0); }

    /*Reveal from Bottom*/
    .reveal.mobile-reveal-bottom{ transform: translateY(100px); }
    .reveal.mobile-reveal-bottom.active{ transform: translateY(0); }

    /*Reveal from Top*/
    .reveal.mobile-reveal-top{ transform: translateY(-100px); }
    .reveal.mobile-reveal-top.active{ transform: translateY(0); }

    /*Animation duration framework*/
    .reveal.mobile-duration-100{ transition: .3s all; }
    .reveal.mobile-duration-200{ transition: .5s all; }
    .reveal.mobile-duration-300{ transition: .7s all; }
    .reveal.mobile-duration-400{ transition: .9s all; }
    .reveal.mobile-duration-500{ transition: 1.1s all; }
    .reveal.mobile-duration-600{ transition: 1.3s all; }
    .reveal.mobile-duration-700{ transition: 1.5s all; }
    .reveal.mobile-duration-800{ transition: 1.8s all; }
    .reveal.mobile-duration-900{ transition: 2s all; }

}