@layer reset, variables, layout, components, pages, responsive;

@import url("base/reset.css") layer(reset);
@import url("base/variables.css") layer(variables);
@import url("layout/layout.css") layer(layout);
@import url("components/index.css") layer(components);
@import url("pages/index.css") layer(pages);
@import url("responsive.css") layer(responsive);

/*
@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pageFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
*/

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pageFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}
/*
body {
    animation: pageFadeIn 0.35s ease forwards;
}

body.page-leaving {
    animation: pageFadeOut 0.25s ease forwards;
    pointer-events: none;
}
*/

main {
    animation: pageFadeIn 0.35s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    main,
    body.page-leaving main {
        animation: none;
    }
}

body.page-leaving main {
    animation: pageFadeOut 0.25s ease forwards;
}

body.page-leaving {
    pointer-events: none;
}
html {
    scroll-padding-top: var(--navbar-h, 4.5rem);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}