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

/* Base */
[data-animate] {
    opacity: 0;
    will-change: opacity, transform;
    transition:
            opacity .6s ease-out,
            transform .6s ease-out;
}

/* Variants */
[data-animate="fade-up"] {
    transform: translateY(24px);
}

[data-animate="fade-left"] {
    transform: translateX(-32px);
}

[data-animate="fade-right"] {
    transform: translateX(32px);
}

/* Visible */
[data-animate].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* =========================================================
   STAGGER GROUPS
   ========================================================= */

[data-stagger] > * {
    opacity: 0;
    transform: translateY(16px);
    will-change: opacity, transform;
    transition:
            opacity .45s ease-out,
            transform .45s ease-out;
}

[data-stagger].is-visible > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

[data-stagger].is-visible > *:nth-child(1) { transition-delay: .06s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: .12s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: .18s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: .24s; }

/* =========================================================
   PAGE TRANSITION OVERLAY
   ========================================================= */

.page-transition {
    position: fixed;
    inset: 0;
    background: #0b0b0b;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    transition: opacity .45s ease;
}

.page-transition.is-active {
    opacity: 1;
}

/* =========================================================
   CONTENT FADE DURING TRANSITION
   ========================================================= */

body.is-transitioning main {
    filter: blur(2px);
    opacity: .85;
    transition:
            filter .3s ease,
            opacity .3s ease;
}