/* =========================================================
   SITE MOTION
   Different entrances per region. Copy stays put.
========================================================= */

@keyframes omni-drop {
    from { opacity: 0; translate: 0 -18px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes omni-from-right {
    from { opacity: 0; translate: 18px 0; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes omni-from-left {
    from { opacity: 0; translate: -24px 0; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes omni-title {
    from { opacity: 0; translate: 0 26px; scale: 0.98; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes omni-fade-up {
    from { opacity: 0; translate: 0 12px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes omni-pop {
    from { opacity: 0; scale: 0.86; }
    to { opacity: 1; scale: 1; }
}

@keyframes omni-draw {
    from { scale: 0 1; }
    to { scale: 1 1; }
}

@media (prefers-reduced-motion: no-preference) {

    header .branding {
        animation: omni-drop .6s cubic-bezier(.22, .7, .25, 1) both;
    }

    header nav a {
        animation: omni-from-right .48s cubic-bezier(.22, .7, .25, 1) both;
    }

    header nav a:nth-child(1) { animation-delay: .04s; }
    header nav a:nth-child(2) { animation-delay: .09s; }
    header nav a:nth-child(3) { animation-delay: .14s; }
    header nav a:nth-child(4) { animation-delay: .19s; }
    header nav a:nth-child(5) { animation-delay: .24s; }
    header nav a:nth-child(6) { animation-delay: .29s; }

    .page-hero .hero-content > h1,
    .page-hero .hero-content > h2,
    .hero-slide.active .hero-content > .hero-title,
    .products-hero .hero-content > h1,
    .projects-hero .banner-content > h1 {
        animation: omni-title .8s cubic-bezier(.22, .7, .25, 1) .08s both;
    }

    .page-hero .hero-content > p,
    .hero-slide.active .hero-content > .hero-subtitle,
    .products-hero .hero-content > .hero-label,
    .products-hero .hero-content > p,
    .projects-hero .banner-content > p {
        animation: omni-from-left .7s cubic-bezier(.22, .7, .25, 1) .16s both;
    }

    .hero-slide.active .hero-content > .hero-description {
        animation: omni-fade-up .7s cubic-bezier(.22, .7, .25, 1) .26s both;
    }

    .page-hero .hero-content > a,
    .hero-slide.active .hero-content > a,
    .products-hero .hero-content > a {
        animation: omni-pop .55s cubic-bezier(.2, .8, .2, 1) .34s both;
    }

    .page-hero h2::after {
        transform-origin: center;
        animation: omni-draw .6s cubic-bezier(.22, .7, .25, 1) .28s both;
    }

    html.motion-js .omni-reveal {
        transition:
            opacity .7s cubic-bezier(.22, .7, .25, 1),
            translate .7s cubic-bezier(.22, .7, .25, 1),
            scale .7s cubic-bezier(.22, .7, .25, 1);
    }

    html.motion-js .omni-reveal:not(.is-in) {
        opacity: 0;
    }

    html.motion-js .motion-rise:not(.is-in) { translate: 0 28px; }
    html.motion-js .motion-rise.is-in { opacity: 1; translate: 0 0; }

    html.motion-js .motion-title {
        transition-duration: .6s;
    }

    html.motion-js .motion-title:not(.is-in) { translate: 0 14px; }
    html.motion-js .motion-title.is-in { opacity: 1; translate: 0 0; }

    html.motion-js .motion-slide:not(.is-in) { translate: -36px 0; }
    html.motion-js .motion-slide.is-in { opacity: 1; translate: 0 0; }

    html.motion-js .motion-slide-right:not(.is-in) { translate: 36px 0; }
    html.motion-js .motion-slide-right.is-in { opacity: 1; translate: 0 0; }

    html.motion-js .motion-zoom {
        transition-duration: .8s;
    }

    html.motion-js .motion-zoom:not(.is-in) { scale: 0.94; }
    html.motion-js .motion-zoom.is-in { opacity: 1; scale: 1; }

    html.motion-js .motion-pop {
        transition-duration: .55s;
    }

    html.motion-js .motion-pop:not(.is-in) {
        translate: 0 18px;
        scale: 0.92;
    }

    html.motion-js .motion-pop.is-in {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }

    html.motion-js .motion-fade {
        transition-duration: .85s;
    }

    html.motion-js .motion-fade.is-in { opacity: 1; }

    html.motion-js .motion-zoom > img,
    html.motion-js .home-about-image.motion-zoom img,
    html.motion-js .product-card.motion-zoom img,
    html.motion-js .featured-service.motion-zoom img {
        scale: 1.08;
        transition: scale .9s cubic-bezier(.22, .7, .25, 1), transform .55s ease;
    }

    html.motion-js .motion-zoom.is-in > img,
    html.motion-js .home-about-image.motion-zoom.is-in img,
    html.motion-js .product-card.motion-zoom.is-in img,
    html.motion-js .featured-service.motion-zoom.is-in img {
        scale: 1;
    }

    .project-card > img,
    .service-pool-image img,
    .service-sauna img,
    .home-about-image img,
    .product-card img {
        transition: transform .55s ease;
    }

    .project-card:hover > img,
    .featured-service:hover img,
    .home-about-image:hover img,
    .product-card:hover img {
        transform: scale(1.045);
    }

    .projects-page .sauna-project-slideshow img,
    .projects-page .project-photo-slideshow img {
        transition: opacity .8s ease, transform .6s ease;
    }

    .project-card:hover .sauna-project-slideshow img.active,
    .project-card:hover .project-photo-slideshow img.active {
        transform: scale(1.045);
    }

}

html.motion-show .omni-reveal,
html.motion-show header .branding,
html.motion-show header nav a,
html.motion-show .page-hero .hero-content > *,
html.motion-show .hero-slide.active .hero-content > *,
html.motion-show .products-hero .hero-content > *,
html.motion-show .projects-hero .banner-content > * {
    animation: none;
    opacity: 1;
    translate: 0 0;
    scale: 1;
}