/*-----------------------------------------------------------------------------------*/
/*  PAGE TRANSITIONS
/*-----------------------------------------------------------------------------------*/

@keyframes pageEnter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pageLeave {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes homeEnter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes homeLeave {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Hide content by default so it waits for window.load to fade in perfectly formed */
.subpage-main,
.about-page,
.contact-content,
#home {
    opacity: 0;
}

/* Apply leave animation to the #home hero or .subpage-main when leaving */
body.page-leaving .subpage-main,
body.page-leaving .about-page,
body.page-leaving .contact-content {
    animation: pageLeave 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

body.page-leaving #home {
    animation: homeLeave 0.4s ease forwards;
}

/* Apply enter animation on load — longer, softer ease for a polished feel */
body.page-entering .subpage-main,
body.page-entering .about-page,
body.page-entering .contact-content {
    animation: pageEnter 2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

body.page-entering #home {
    animation: homeEnter 1.2s ease forwards;
}

/* ----------------------------------------------------------------------------------- */
/* ACCESSIBILITY: Disable transitions for users who prefer reduced motion 
/* ----------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    body.page-leaving .subpage-main,
    body.page-leaving .about-page,
    body.page-leaving .contact-content,
    body.page-leaving #home {
        animation: none !important;
        opacity: 0;
    }

    body.page-entering .subpage-main,
    body.page-entering .about-page,
    body.page-entering .contact-content,
    body.page-entering #home {
        animation: none !important;
        opacity: 1;
    }
}