/*
  ----------------------------------------
  Transitions
  ----------------------------------------
*/

@layer styles {
    /* Crossfade main content (different IDs prevent cross-layout transitions) */
    #user-main {
        view-transition-name: user-main;
    }
    #admin-main {
        view-transition-name: admin-main;
    }
    ::view-transition-old(user-main),
    ::view-transition-new(user-main),
    ::view-transition-old(admin-main),
    ::view-transition-new(admin-main) {
        animation-duration: 300ms;
        animation-timing-function: ease-in-out;
    }

    /* Active nav underline animation */
    .nav-link.active::after {
        view-transition-name: active-nav;
    }
    ::view-transition-group(active-nav) {
        /* Sweet easing function (source: https://easingwizard.com) */
        animation-timing-function: linear(
            0,
            0.383 7.5%,
            0.68 15.5%,
            0.891 24%,
            0.969 28.6%,
            1.027 33.4%,
            1.061 37.4%,
            1.084 41.7%,
            1.097 46.2%,
            1.1 51.2%,
            1.085 59.9%,
            1.014 84.2%,
            1
        );
        animation-duration: 320ms;
    }
    ::view-transition-old(active-nav),
    ::view-transition-new(active-nav) {
        height: 100%;
    }

    /* Fade in */
    .fade-in {
        animation: fade-in ease 400ms;
    }
    @keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Fade out */
    .fade-out {
        animation: fade-out ease 300ms forwards;
    }
    @keyframes fade-out {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    /* Ephemeral (fade in quickly, then fade out after n seconds) */
    @keyframes ephemeral {
        0%,
        100% {
            opacity: 0;
        }
        5%,
        70% {
            opacity: 1;
        }
    }

    /* Grow out */
    .grow-out {
        animation: grow-out ease-in-out 200ms;
    }
    @keyframes grow-out {
        from {
            transform: scaleX(0);
            transform-origin: center;
        }
        to {
            transform: scaleX(1);
            transform-origin: center;
        }
    }

    /* Fly in */
    .fly-in {
        animation: fly-in ease-out 400ms;
    }
    @keyframes fly-in {
        from {
            opacity: 0;
            transform: translateY(-3%);
            transform-origin: center;
        }

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