/* ==========================================================
   PRODUZZA — ANIMATIONS
========================================================== */

.js-reveal{
    opacity:0;
    transform:translateY(34px);
    filter:blur(8px);
    transition:
        opacity .85s ease,
        transform .85s ease,
        filter .85s ease;
    will-change:opacity, transform, filter;
}

.js-reveal.is-visible{
    opacity:1;
    transform:none;
    filter:blur(0);
}

.js-reveal-left{
    transform:translateX(-38px);
}

.js-reveal-right{
    transform:translateX(38px);
}

.js-reveal-scale{
    transform:scale(.96);
}

.js-delay-1{ transition-delay:.08s; }
.js-delay-2{ transition-delay:.16s; }
.js-delay-3{ transition-delay:.24s; }
.js-delay-4{ transition-delay:.32s; }
.js-delay-5{ transition-delay:.40s; }


/* ==========================================================
   PAGE LOADED
========================================================== */

body:not(.is-loaded) .hero-content,
body:not(.is-loaded) .hero-photo,
body:not(.is-loaded) .navbar{
    opacity:0;
}

body.is-loaded .navbar{
    animation:pzFadeDown .7s ease forwards;
}

body.is-loaded .hero-content{
    animation:pzFadeUp .9s ease .15s forwards;
}

body.is-loaded .hero-photo{
    animation:pzFadeRight .9s ease .28s forwards;
}


/* ==========================================================
   NAVBAR SCROLLED
========================================================== */

.navbar.is-scrolled{
    background:rgba(8,8,8,.72);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 40px rgba(0,0,0,.22);
}


/* ==========================================================
   BUTTON SHINE
========================================================== */

.pz-btn{
    position:relative;
    overflow:hidden;
}

.pz-btn::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.22),
        transparent 80%
    );
    transform:translateX(-120%);
    transition:transform .75s ease;
    pointer-events:none;
}

.pz-btn:hover::after{
    transform:translateX(120%);
}


/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes pzFadeUp{
    from{
        opacity:0;
        transform:translateY(28px);
        filter:blur(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }
}

@keyframes pzFadeRight{
    from{
        opacity:0;
        transform:translateX(36px);
        filter:blur(8px);
    }
    to{
        opacity:1;
        transform:translateX(0);
        filter:blur(0);
    }
}

@keyframes pzFadeDown{
    from{
        opacity:0;
        transform:translateY(-18px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

    .js-reveal{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
    }

}